You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
switch(parseError(loadingArray,status)){// parseError returns a string based on the loadingArray and status. The returned string is matched to a case so that an appropriate error message will be displayed to the user
30
+
switch(
31
+
parseError(loadingArray,status)// parseError returns a string based on the loadingArray and status. The returned string is matched to a case so that an appropriate error message will be displayed to the user
32
+
){
31
33
case'Content Script Error':
32
34
return(
33
35
<div>
34
36
Could not connect to the Target App. Try closing Reactime and reloading the page.
35
37
<br/>
36
38
<br/>
37
-
If you encounter this error on the initial launch of Reactime, refresh the webpage you are developing.
39
+
If you encounter this error on the initial launch of Reactime, refresh the webpage you are
40
+
developing.
38
41
<br/>
39
-
If Reactime is running as an iframe in your developer tools, right click on the Reactime application and click 'Reload Frame'
42
+
If Reactime is running as an iframe in your developer tools, right click on the Reactime
43
+
application and click 'Reload Frame'
40
44
<br/>
41
45
<br/>
42
46
NOTE: By default Reactime only launches the content script on URLS starting with
@@ -37,10 +37,10 @@ export default function ComponentMap({
37
37
currentSnapshot,// from 'tabs[currentTab].stateSnapshot object in 'MainContainer'
38
38
}: LinkTypesProps): JSX.Element{
39
39
const[layout,setLayout]=useState('cartesian');// We create a local state "layout" and set it to a string 'cartesian'
40
-
const[orientation,setOrientation]=useState('vertical');// We create a local state "orientation" and set it to a string 'vertical'.
41
-
const[linkType,setLinkType]=useState('diagonal');// We create a local state "linkType" and set it to a string 'diagonal'.
40
+
const[orientation,setOrientation]=useState('vertical');// We create a local state "orientation" and set it to a string 'vertical'.
41
+
const[linkType,setLinkType]=useState('diagonal');// We create a local state "linkType" and set it to a string 'diagonal'.
42
42
const[stepPercent,setStepPercent]=useState(0.5);// We create a local state "stepPercent" and set it to a number '0.5'. This will be used to scale the Map component's link: Step to 50%
43
-
const[selectedNode,setSelectedNode]=useState('root');// We create a local state "selectedNode" and set it to a string 'root'.
43
+
const[selectedNode,setSelectedNode]=useState('root');// We create a local state "selectedNode" and set it to a string 'root'.
44
44
constdispatch=useDispatch();
45
45
46
46
consttoolTipTimeoutID=useRef(null);//useRef stores stateful data that’s not needed for rendering.
@@ -63,7 +63,8 @@ export default function ComponentMap({
63
63
The 'cartesian layout' (else conditional) sets the root nodes location either in the left middle *or top middle of the browser window relative to the size of the browser.
64
64
*/
65
65
66
-
if(layout==='polar'){// 'polar layout' option
66
+
if(layout==='polar'){
67
+
// 'polar layout' option
67
68
origin={
68
69
x: innerWidth/2,
69
70
y: innerHeight/2,
@@ -72,31 +73,33 @@ export default function ComponentMap({
72
73
// set the sizeWidth and sizeHeight
73
74
sizeWidth=2*Math.PI;
74
75
sizeHeight=Math.min(innerWidth,innerHeight)/2;
75
-
76
-
}else{// 'cartesian layout' option
76
+
}else{
77
+
// 'cartesian layout' option
77
78
origin={x: 0,y: 0};
78
79
if(orientation==='vertical'){
79
80
sizeWidth=innerWidth;
80
81
sizeHeight=innerHeight;
81
-
}else{// if the orientation isn't vertical, swap the width and the height
82
+
}else{
83
+
// if the orientation isn't vertical, swap the width and the height
82
84
sizeWidth=innerHeight;
83
85
sizeHeight=innerWidth;
84
86
}
85
87
}
86
88
87
-
const{
89
+
const{
88
90
tooltipData,// value/data that tooltip may need to render
89
91
tooltipLeft,// number used for tooltip positioning
90
92
tooltipTop,// number used for tooltip positioning
91
93
tooltipOpen,// boolean whether the tooltip state is open or closed
92
94
showTooltip,// function to set tooltip state
93
-
hideTooltip // function to close a tooltip
95
+
hideTooltip,// function to close a tooltip
94
96
}=useTooltip();// returns an object with several properties that you can use to manage the tooltip state of your component
95
97
96
98
const{
97
-
containerRef,// Access to the container's bounding box. This will be empty on first render.
98
-
TooltipInPortal // TooltipWithBounds in a Portal, outside of your component DOM tree
99
-
}=useTooltipInPortal({// Visx hook
99
+
containerRef,// Access to the container's bounding box. This will be empty on first render.
100
+
TooltipInPortal,// TooltipWithBounds in a Portal, outside of your component DOM tree
101
+
}=useTooltipInPortal({
102
+
// Visx hook
100
103
detectBounds: true,// use TooltipWithBounds
101
104
scroll: true,// when tooltip containers are scrolled, this will correctly update the Tooltip position
102
105
});
@@ -130,13 +133,17 @@ export default function ComponentMap({
130
133
131
134
constnodeList: []=[];// create a nodeList array to store our nodes as a flat array
132
135
133
-
constcollectNodes: void=(node)=>{// function that takes in a node (snapshot) as it's argument and modifies 'nodeList' so that the node and it's children are all within the flattened 'nodeList'.
136
+
constcollectNodes: void=(node)=>{
137
+
// function that takes in a node (snapshot) as it's argument and modifies 'nodeList' so that the node and it's children are all within the flattened 'nodeList'.
134
138
nodeList.splice(0,nodeList.length);// deletes all the nodes in nodelist
135
139
nodeList.push(node);// pushes the snapshot into nodeList
136
-
for(leti=0;i<nodeList.length;i+=1){// iterate through the nodeList that contains our snapshot
140
+
for(leti=0;i<nodeList.length;i+=1){
141
+
// iterate through the nodeList that contains our snapshot
137
142
constcur=nodeList[i];
138
-
if(cur.children&&cur.children.length>0){// if the currently itereated snapshot has non-zero children...
139
-
for(constchildofcur.children){// iterate through each child in the children array
143
+
if(cur.children&&cur.children.length>0){
144
+
// if the currently itereated snapshot has non-zero children...
145
+
for(constchildofcur.children){
146
+
// iterate through each child in the children array
140
147
nodeList.push(child);// add the child to the nodeList
141
148
}
142
149
}
@@ -149,7 +156,8 @@ export default function ComponentMap({
149
156
letstartNode=null;
150
157
letrootNode;
151
158
152
-
constfindSelectedNode=()=>{// iterates through each node of nodeList and sets the rootNode and startNode to a node with the name root
159
+
constfindSelectedNode=()=>{
160
+
// iterates through each node of nodeList and sets the rootNode and startNode to a node with the name root
153
161
for(constnodeofnodeList){
154
162
if(node.name==='root')rootNode=node;
155
163
if(node.name===selectedNode)startNode=node;// selectedNode label initialized as 'root'
@@ -160,16 +168,20 @@ export default function ComponentMap({
160
168
findSelectedNode();// locates the rootNode... do we really need this? This function is only used once... it's here.
@@ -208,28 +220,26 @@ export default function ComponentMap({
208
220
))}
209
221
210
222
{tree.descendants().map((node,key)=>{
211
-
constwidthFunc:number=(name)=>{// function that takes in a node's name and returns a number that is related to the length of the name. Used for determining the node width.
223
+
constwidthFunc: number=(name)=>{
224
+
// function that takes in a node's name and returns a number that is related to the length of the name. Used for determining the node width.
212
225
constnodeLength=name.length;
213
226
if(nodeLength<=5)returnnodeLength+80;// returns a number between 80-85
214
227
if(nodeLength<=10)returnnodeLength+120;// returns a number between 125-130
215
-
returnnodeLength+140;// returns a number greater than 150
228
+
returnnodeLength+140;// returns a number greater than 150
216
229
};
217
230
218
-
constwidth:number=widthFunc(node.data.name);// the width is determined by the length of the node.name
219
-
constheight:number=25;
231
+
constwidth:number=widthFunc(node.data.name);// the width is determined by the length of the node.name
0 commit comments