-
-
Notifications
You must be signed in to change notification settings - Fork 22
/
chart.drawio
205 lines (205 loc) · 25.7 KB
/
chart.drawio
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<mxfile host="app.diagrams.net" modified="2022-02-25T15:07:55.924Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.109 Safari/537.36" etag="-cfSzGftLrrG70KvJqDV" version="16.6.4" type="github">
<diagram id="4Y_KsI118iPX1C1HI_qV" name="Page-1">
<mxGraphModel dx="1687" dy="897" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="peq8d5gX8DXLt__JmTx_-2" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#B3B3B3;fontColor=#333333;" parent="1" vertex="1">
<mxGeometry x="210" y="131" width="192" height="269" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-3" value="<font style="font-size: 18px" face="Verdana">Mounting</font>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="282" y="141" width="38" height="20" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-4" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" edge="1">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="272" y="301" />
<mxPoint x="272" y="301" />
</Array>
<mxPoint x="272" y="208" as="sourcePoint" />
<mxPoint x="272" y="321" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-5" value="<h3 id="static-getderivedstatefromprops"><code style="font-weight: normal"><font style="font-size: 14px">function () {}</font></code></h3>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#E8F1FF;" parent="1" vertex="1">
<mxGeometry x="242" y="178" width="140" height="30" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-7" value="<font style="font-size: 13px" face="Verdana"><b>"Render phase"<br></b></font><br>Pure and has no side<br>effects. May be paused,<br>aborted or restarted by<br>React." style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
<mxGeometry x="40" y="191" width="140" height="90" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-8" value="<font style="font-size: 14px"><b>"Commit phase"<br></b><br></font>Can work with DOM,<br>run side effects,<br>schedule updates.<br>" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
<mxGeometry x="40" y="471" width="130" height="70" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-12" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#B3B3B3;fontColor=#333333;" parent="1" vertex="1">
<mxGeometry x="450" y="131" width="452" height="269" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-13" value="<font style="font-size: 18px" face="Verdana">Updating</font>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="632.0037624861264" y="141" width="75.91564927857935" height="20" as="geometry" />
</mxCell>
<UserObject label="New props" id="peq8d5gX8DXLt__JmTx_-15">
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#E8F1FF;" parent="1" vertex="1">
<mxGeometry x="468" y="179" width="92" height="30" as="geometry" />
</mxCell>
</UserObject>
<mxCell id="peq8d5gX8DXLt__JmTx_-16" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#B3B3B3;" parent="1" vertex="1">
<mxGeometry x="210" y="430" width="692" height="320" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-17" value="<h3 id="static-getderivedstatefromprops"><code><font style="font-weight: normal ; font-size: 14px">return ()</font></code></h3>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E8F1FF;strokeColor=#6c8ebf;" parent="1" vertex="1">
<mxGeometry x="242" y="321" width="140" height="30" as="geometry" />
</mxCell>
<mxCell id="bXESYanQTJGo6Cj8_ghC-12" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=12;" parent="1" source="peq8d5gX8DXLt__JmTx_-18" target="bXESYanQTJGo6Cj8_ghC-10" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-18" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;gradientColor=#C8E8C5;" parent="1" vertex="1">
<mxGeometry x="242" y="553" width="630" height="50" as="geometry" />
</mxCell>
<UserObject label="<h3 id="static-getderivedstatefromprops"><code><font style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#usememo">useMemo()</a></font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#usememo" id="peq8d5gX8DXLt__JmTx_-26">
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;dashed=1;gradientColor=#E8F1FF;" parent="1" vertex="1">
<mxGeometry x="292" y="236" width="90" height="30" as="geometry" />
</mxCell>
</UserObject>
<mxCell id="peq8d5gX8DXLt__JmTx_-31" value="<h3 id="static-getderivedstatefromprops"><code style="font-weight: normal">React updates DOM and refs</code></h3>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;gradientColor=#FFF1B8;" parent="1" vertex="1">
<mxGeometry x="240" y="461" width="632" height="50" as="geometry" />
</mxCell>
<mxCell id="yjP6mhXBnPZrxiyDEznI-19" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;fontColor=#007FFF;" parent="1" source="peq8d5gX8DXLt__JmTx_-32" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="671" y="350" as="targetPoint" />
<Array as="points">
<mxPoint x="770" y="330" />
<mxPoint x="671" y="330" />
</Array>
</mxGeometry>
</mxCell>
<UserObject label="<h3 id="static-getderivedstatefromprops"><code><font style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#usecallback">useCallback()</a></font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#usecallback" id="peq8d5gX8DXLt__JmTx_-32">
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;dashed=1;gradientColor=#E8F1FF;" parent="1" vertex="1">
<mxGeometry x="707.92" y="266" width="124" height="30" as="geometry" />
</mxCell>
</UserObject>
<mxCell id="peq8d5gX8DXLt__JmTx_-33" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;" parent="1" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="339" y="209" as="sourcePoint" />
<mxPoint x="339" y="236" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-34" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;" parent="1" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="341" y="265" as="sourcePoint" />
<mxPoint x="341" y="321" as="targetPoint" />
</mxGeometry>
</mxCell>
<UserObject label="<h3 id="static-getderivedstatefromprops"><code style="font-size: 14px"><font style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#useeffect">useEffect()</a>&nbsp;</font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#useeffect" id="peq8d5gX8DXLt__JmTx_-42">
<mxCell style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="299" y="567" width="40" height="20" as="geometry" />
</mxCell>
</UserObject>
<UserObject label="<h3 id="static-getderivedstatefromprops"><code style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#useeffect">useLayoutEffect()</a>&nbsp;</code></h3><h3 id="static-getderivedstatefromprops"><code><font size="1"><a href="https://reactjs.org/docs/hooks-reference.html#uselayouteffect"></a></font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#uselayouteffect" link="https://reactjs.org/docs/hooks-reference.html#uselayouteffect" linkTarget="_blank" id="peq8d5gX8DXLt__JmTx_-43">
<mxCell style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="435" y="567" width="40" height="20" as="geometry" />
</mxCell>
</UserObject>
<mxCell id="yjP6mhXBnPZrxiyDEznI-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.68;entryY=-0.02;entryDx=0;entryDy=0;entryPerimeter=0;fontColor=#007FFF;" parent="1" source="yjP6mhXBnPZrxiyDEznI-10" target="peq8d5gX8DXLt__JmTx_-31" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="yjP6mhXBnPZrxiyDEznI-10" value="" style="rhombus;whiteSpace=wrap;html=1;labelBackgroundColor=none;fontColor=#007FFF;fillColor=none;aspect=fixed;" parent="1" vertex="1">
<mxGeometry x="660" y="210" width="20" height="20" as="geometry" />
</mxCell>
<mxCell id="Qn97D7aN3kyVjcPedb_y-5" value="" style="group;spacing=2;" parent="1" vertex="1" connectable="0">
<mxGeometry x="534" y="179" width="404" height="30" as="geometry" />
</mxCell>
<UserObject label="" id="Qn97D7aN3kyVjcPedb_y-1">
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#E8F1FF;" parent="Qn97D7aN3kyVjcPedb_y-5" vertex="1">
<mxGeometry x="20" width="332" height="30" as="geometry" />
</mxCell>
</UserObject>
<UserObject label="<h3 id="static-getderivedstatefromprops"><code><font color="#3399ff" style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#usestate">useState()</a></font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#usestate" id="peq8d5gX8DXLt__JmTx_-39">
<mxCell style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="Qn97D7aN3kyVjcPedb_y-5" vertex="1">
<mxGeometry x="58" y="5" width="40" height="20" as="geometry" />
</mxCell>
</UserObject>
<UserObject label="<h3 id="static-getderivedstatefromprops"><code><font color="#3399ff" style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer()</a></font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#usereducer" id="peq8d5gX8DXLt__JmTx_-40">
<mxCell style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="Qn97D7aN3kyVjcPedb_y-5" vertex="1">
<mxGeometry x="162" y="5" width="40" height="20" as="geometry" />
</mxCell>
</UserObject>
<UserObject label="<h3 id="static-getderivedstatefromprops"><code><font color="#3399ff" style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#usecontext" style="line-height: 1">useContext()</a></font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#usecontext" id="peq8d5gX8DXLt__JmTx_-41">
<mxCell style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="Qn97D7aN3kyVjcPedb_y-5" vertex="1">
<mxGeometry x="275.5" y="5" width="40" height="20" as="geometry" />
</mxCell>
</UserObject>
<mxCell id="Qn97D7aN3kyVjcPedb_y-7" value="<h3 id="static-getderivedstatefromprops" style="color: rgb(0 , 0 , 0) ; letter-spacing: normal ; text-indent: 0px ; text-transform: none ; word-spacing: 0px"><span style="font-weight: 400"><font style="font-size: 12px"><i>These hooks support cleanup (inside their return function)</i></font></span></h3>" style="text;whiteSpace=wrap;html=1;fillColor=none;align=left;" parent="1" vertex="1">
<mxGeometry x="582" y="541" width="160" height="60" as="geometry" />
</mxCell>
<mxCell id="bXESYanQTJGo6Cj8_ghC-6" value="<font style="font-size: 13px" face="Verdana"><b>"Cleanup phase"<br></b></font><br>Runs before a<br>component is removed.<br>Prevents memory leaks." style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
<mxGeometry x="42" y="640" width="139" height="71" as="geometry" />
</mxCell>
<mxCell id="bXESYanQTJGo6Cj8_ghC-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=12;" parent="1" source="bXESYanQTJGo6Cj8_ghC-10" target="peq8d5gX8DXLt__JmTx_-18" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="bXESYanQTJGo6Cj8_ghC-10" value="<h3 id="static-getderivedstatefromprops"><code style="font-weight: normal">React cleans up effects</code></h3>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" parent="1" vertex="1">
<mxGeometry x="241" y="670" width="631" height="50" as="geometry" />
</mxCell>
<mxCell id="bXESYanQTJGo6Cj8_ghC-15" value="" style="endArrow=classic;html=1;strokeColor=#000000;entryX=0.377;entryY=-0.02;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="557.29" y="511" as="sourcePoint" />
<mxPoint x="557.29" y="552" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-11" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="peq8d5gX8DXLt__JmTx_-17" edge="1">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="310" y="401" />
<mxPoint x="310" y="401" />
</Array>
<mxPoint x="310" y="461" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-25" value="" style="endArrow=none;dashed=1;html=1;fontFamily=Lucida Console;fontSize=12;fontColor=#000000;strokeColor=#B3B3B3;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="212" y="770" as="sourcePoint" />
<mxPoint x="900" y="770" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="bXESYanQTJGo6Cj8_ghC-23" value="<h3 id="static-getderivedstatefromprops" style="color: rgb(0 , 0 , 0) ; letter-spacing: normal ; text-indent: 0px ; text-transform: none ; word-spacing: 0px"><span style="font-size: 12px ; font-weight: 400"><i>React will clean up<br>before the effects' next run</i></span></h3>" style="text;whiteSpace=wrap;html=1;fillColor=none;align=left;" parent="1" vertex="1">
<mxGeometry x="582" y="599" width="170" height="60" as="geometry" />
</mxCell>
<mxCell id="bXESYanQTJGo6Cj8_ghC-22" value="" style="group" parent="1" vertex="1" connectable="0">
<mxGeometry x="210" y="785.2" width="237.5" height="27" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-24" value="<a href="https://github.com/Wavez/react-hooks-lifecycle" style="font-size: 12px"><font color="#007fff" style="font-size: 12px" face="Lucida Console">Wavez/react-hooks-lifecycle</font></a>" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontSize=12;fontColor=#000000;" parent="bXESYanQTJGo6Cj8_ghC-22" vertex="1">
<mxGeometry x="32.5" y="5" width="205" height="15" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-23" value="" style="shape=image;imageAspect=0;aspect=fixed;verticalLabelPosition=bottom;verticalAlign=top;gradientColor=#ffffff;fontSize=18;fontColor=#000000;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMyLjYgMzEuOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIuNiAzMS44OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+JiN4YTs8c3R5bGUgdHlwZT0idGV4dC9jc3MiPiYjeGE7CS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojMTgxNjE2O30mI3hhOzwvc3R5bGU+JiN4YTs8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTYuMywwQzcuMywwLDAsNy4zLDAsMTYuM2MwLDcuMiw0LjcsMTMuMywxMS4xLDE1LjVjMC44LDAuMSwxLjEtMC40LDEuMS0wLjhjMC0wLjQsMC0xLjQsMC0yLjggIGMtNC41LDEtNS41LTIuMi01LjUtMi4yYy0wLjctMS45LTEuOC0yLjQtMS44LTIuNGMtMS41LTEsMC4xLTEsMC4xLTFjMS42LDAuMSwyLjUsMS43LDIuNSwxLjdjMS41LDIuNSwzLjgsMS44LDQuNywxLjQgIGMwLjEtMS4xLDAuNi0xLjgsMS0yLjJjLTMuNi0wLjQtNy40LTEuOC03LjQtOC4xYzAtMS44LDAuNi0zLjIsMS43LTQuNEM3LjQsMTAuNyw2LjgsOSw3LjcsNi44YzAsMCwxLjQtMC40LDQuNSwxLjcgIGMxLjMtMC40LDIuNy0wLjUsNC4xLTAuNWMxLjQsMCwyLjgsMC4yLDQuMSwwLjVjMy4xLTIuMSw0LjUtMS43LDQuNS0xLjdjMC45LDIuMiwwLjMsMy45LDAuMiw0LjNjMSwxLjEsMS43LDIuNiwxLjcsNC40ICBjMCw2LjMtMy44LDcuNi03LjQsOGMwLjYsMC41LDEuMSwxLjUsMS4xLDNjMCwyLjIsMCwzLjksMCw0LjVjMCwwLjQsMC4zLDAuOSwxLjEsMC44YzYuNS0yLjIsMTEuMS04LjMsMTEuMS0xNS41ICBDMzIuNiw3LjMsMjUuMywwLDE2LjMsMHoiLz4mI3hhOzwvc3ZnPg==;" parent="bXESYanQTJGo6Cj8_ghC-22" vertex="1">
<mxGeometry width="27.675" height="27" as="geometry" />
</mxCell>
<mxCell id="AQQmuxFUS888oZAzTY0o-6" value="" style="shape=image;imageAspect=0;aspect=fixed;verticalLabelPosition=bottom;verticalAlign=top;image=https://www.svgrepo.com/show/167751/refresh.svg;" parent="1" vertex="1">
<mxGeometry x="547" y="626" width="20" height="20" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-9" value="<font style="font-size: 26px" color="#232f3e">React Hooks Lifecycle</font>" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontFamily=Verdana;fontStyle=1" parent="1" vertex="1">
<mxGeometry x="294" y="52" width="330" height="20" as="geometry" />
</mxCell>
<mxCell id="dHOrFxX_HmPoJwZjWr78-1" value="" style="group" parent="1" vertex="1" connectable="0">
<mxGeometry x="218" y="34" width="62" height="59" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-19" value="" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;imageAspect=0;image=https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg;" parent="dHOrFxX_HmPoJwZjWr78-1" vertex="1">
<mxGeometry x="12" y="12" width="50" height="47" as="geometry" />
</mxCell>
<mxCell id="uvFVxUhtjcqsa5vKmOB1-4" value="" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;aspect=fixed;imageAspect=0;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE0MC43IDMzNC42IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNDAuNyAzMzQuNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPiYjeGE7PHN0eWxlIHR5cGU9InRleHQvY3NzIj4mI3hhOwkuc3Qwe2ZpbGw6IzZFQ0ZGMDt9JiN4YTs8L3N0eWxlPiYjeGE7PGc+JiN4YTsJPGc+JiN4YTsJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zLjUsNTAuM2wzMS42LDYuMWMxLjMsMC4zLDIuNy0wLjYsMi45LTJsMC4zLTEuN2MwLjMtMS4zLTAuNi0yLjctMi0yLjlMNC44LDQzLjdjLTEuMy0wLjMtMi43LDAuNi0yLjksMiAgICBsLTAuMywxLjdDMS4zLDQ4LjcsMi4xLDUwLDMuNSw1MC4zeiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMuNSw2Mi44bDMxLjYsNi4xYzEuMywwLjMsMi43LTAuNiwyLjktMmwwLjMtMS43YzAuMy0xLjMtMC42LTIuNy0yLTIuOUw0LjgsNTYuMmMtMS4zLTAuMy0yLjcsMC42LTIuOSwyICAgIGwtMC4zLDEuN0MxLjMsNjEuMiwyLjEsNjIuNSwzLjUsNjIuOHoiLz4mI3hhOwk8L2c+JiN4YTsJPGc+JiN4YTsJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zLjUsNzUuM2wzMS42LDYuMWMxLjMsMC4zLDIuNy0wLjYsMi45LTJsMC4zLTEuN2MwLjMtMS4zLTAuNi0yLjctMi0yLjlMNC44LDY4LjdjLTEuMy0wLjMtMi43LDAuNi0yLjksMiAgICBsLTAuMywxLjdDMS4zLDczLjcsMi4xLDc1LDMuNSw3NS4zeiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMuNSw4Ny44bDMxLjYsNi4xYzEuMywwLjMsMi43LTAuNiwyLjktMmwwLjMtMS43YzAuMy0xLjMtMC42LTIuNy0yLTIuOUw0LjgsODEuMmMtMS4zLTAuMy0yLjcsMC42LTIuOSwyICAgIGwtMC4zLDEuN0MxLjMsODYuMiwyLjEsODcuNSwzLjUsODcuOHoiLz4mI3hhOwk8L2c+JiN4YTsJPGc+JiN4YTsJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zLjUsMTAwLjNsMzEuNiw2LjFjMS4zLDAuMywyLjctMC42LDIuOS0ybDAuMy0xLjdjMC4zLTEuMy0wLjYtMi43LTItMi45TDQuOCw5My43Yy0xLjMtMC4zLTIuNywwLjYtMi45LDIgICAgbC0wLjMsMS43QzEuMyw5OC43LDIuMSwxMDAsMy41LDEwMC4zeiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMuNSwxMTIuOGwzMS42LDYuMWMxLjMsMC4zLDIuNy0wLjYsMi45LTJsMC4zLTEuN2MwLjMtMS4zLTAuNi0yLjctMi0yLjlsLTMxLjYtNi4xYy0xLjMtMC4zLTIuNywwLjYtMi45LDIgICAgbC0wLjMsMS43QzEuMywxMTEuMiwyLjEsMTEyLjUsMy41LDExMi44eiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMuNSwxMjUuM2wzMS42LDYuMWMxLjMsMC4zLDIuNy0wLjYsMi45LTJsMC4zLTEuN2MwLjMtMS4zLTAuNi0yLjctMi0yLjlsLTMxLjYtNi4xYy0xLjMtMC4zLTIuNywwLjYtMi45LDIgICAgbC0wLjMsMS43QzEuMywxMjMuNywyLjEsMTI1LDMuNSwxMjUuM3oiLz4mI3hhOwk8L2c+JiN4YTsJPGc+JiN4YTsJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNS40LDM5LjN2MTAuMmg5LjFWMzkuM2M4LjgtMi4xLDE1LjQtMTAsMTUuNC0xOS40QzM5LjgsOC45LDMwLjksMCwxOS45LDBDOC45LDAsMCw4LjksMCwxOS45ICAgIEMwLDI5LjQsNi42LDM3LjMsMTUuNCwzOS4zeiBNNCwxOS45QzQsMTEuMSwxMS4xLDQsMTkuOSw0YzguOCwwLDE1LjksNy4xLDE1LjksMTUuOWMwLDguOC03LjEsMTUuOS0xNS45LDE1LjkgICAgQzExLjEsMzUuOSw0LDI4LjcsNCwxOS45eiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjIsMTM1LjRWMTI1aDkuMXYxMC40YzAuMywwLjEsMC4zLTAuNCwwLjEtMC41bDAsMTExLjFjLTAuNSwxNS40LDQuNCwzMC4yLDEyLjQsNDMuM3MyMCwyMy44LDMzLjksMzAuMyAgICBjMTIuMSw1LjcsMjYuOCw4LDM4LjcsMmM5LjgtNSwxNi4zLTE1LDE5LjUtMjUuNWMzLjItMTAuNSwzLjUtMjEuNywzLjgtMzIuN2MtNS40LDUuNy0xMC4zLDExLTE1LjcsMTYuN2MwLjEtMC4zLDAuNC0wLjUsMC43LTAuNSAgICBjOC45LTE0LjksMTAuNy0zMy4xLDUuMS00OS41YzE2LjcsMTkuMiwyMi42LDQ2LjgsMTQsNzAuN2MtNS4yLDE0LjYtMTYuMSwyNy45LTMxLDMyLjNjLTEzLjgsNC4xLTI4LjktMC4xLTQxLjUtNy4xICAgIGMtMTguMi0xMC4xLTMzLTI2LjEtNDEuNi00NWMtOC43LTE4LjktNy02MC45LTctNjAuOUwxNS4yLDEzNS40eiIvPiYjeGE7CTwvZz4mI3hhOzwvZz4mI3hhOzwvc3ZnPg==;sketch=0;imageBorder=none;" parent="dHOrFxX_HmPoJwZjWr78-1" vertex="1">
<mxGeometry width="21" height="49" as="geometry" />
</mxCell>
<mxCell id="peq8d5gX8DXLt__JmTx_-22" value="<font style="line-height: 170%">Made with<br></font>" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontSize=13;fontColor=#000000;fontFamily=Lucida Console;" parent="1" vertex="1">
<mxGeometry x="739" y="787" width="70" height="20" as="geometry" />
</mxCell>
<mxCell id="yjP6mhXBnPZrxiyDEznI-8" value="" style="aspect=fixed;html=1;points=[];align=center;image;fontSize=12;image=img/lib/azure2/general/Heart.svg;labelBackgroundColor=none;fillColor=none;" parent="1" vertex="1">
<mxGeometry x="801" y="794.56" width="14" height="13.13" as="geometry" />
</mxCell>
<UserObject label="<font color="#007fff" face="Lucida Console">Gal Margalit</font>" link="https://twitter.com/MargalitGal" linkTarget="_blank" id="yjP6mhXBnPZrxiyDEznI-31">
<mxCell style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontSize=12;fontColor=#000000;fontStyle=4" parent="1" vertex="1">
<mxGeometry x="836" y="791.12" width="80" height="20" as="geometry" />
</mxCell>
</UserObject>
<mxCell id="gwXCb_sFi5krlNEUbtP0-3" value="by" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxGeometry x="820.92" y="796.12" width="10" height="10" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>