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
// We destructure the 'props' that were passed into this component
31
31
const{
32
-
selected,// boolean on whether the current index is the same as the viewIndex from 'ActionContainer'
33
-
last,// boolean on (whether the view index is less than 0) AND if (the index is the same as the last snapshot's index value in hierarchyArr) from 'ActionContainer'
32
+
selected,// boolean on whether the current index is the same as the viewIndex in 'ActionContainer'
33
+
last,// boolean on (whether the view index is less than 0) AND if (the index is the same as the last snapshot's index value in hierarchyArr) in 'ActionContainer'
34
34
index,// from snapshot.index in "ActionContainer's" 'hierarchyArr'
35
-
sliderIndex,// from tabs[currentTab] object from 'ActionContainer'
35
+
sliderIndex,// from tabs[currentTab] object in 'ActionContainer'
36
36
dispatch,
37
37
displayName,// from snapshot.displayName in "ActionContainer's" 'hierarchyArr'
38
38
componentData,// from snapshot.componentData in "ActionContainer's" 'hierarchyArr'
39
-
viewIndex,// from tabs[currentTab] object from 'ActionContainer'
39
+
viewIndex,// from tabs[currentTab] object in 'ActionContainer'
40
40
isCurrIndex,
41
41
handleOnkeyDown,// function that allows arrows keys to jump between snapshots defined in 'ActionContainer.tsx'
Copy file name to clipboardExpand all lines: src/app/components/StateRoute/ComponentMap/ComponentMap.tsx
+7-4Lines changed: 7 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -39,7 +39,7 @@ export default function ComponentMap({
39
39
const[layout,setLayout]=useState('cartesian');// We create a local state "layout" and set it to a string 'cartesian'
40
40
const[orientation,setOrientation]=useState('vertical');// We create a local state "orientation" and set it to a string 'vertical'.
41
41
const[linkType,setLinkType]=useState('diagonal');// We create a local state "linkType" and set it to a string 'diagonal'.
42
-
const[stepPercent,setStepPercent]=useState(10);// We create a local state "stepPercent" and set it to a number '10'.
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
43
const[selectedNode,setSelectedNode]=useState('root');// We create a local state "selectedNode" and set it to a string 'root'.
44
44
const[,dispatch]=useStoreContext();// we destructure the returned context object from the invocation of the useStoreContext function to get access to our dispatch function
45
45
@@ -93,9 +93,12 @@ export default function ComponentMap({
93
93
hideTooltip // function to close a tooltip
94
94
}=useTooltip();// returns an object with several properties that you can use to manage the tooltip state of your component
layout,// from the layout local state (initially 'cartesian') in 'ComponentMap'
40
40
linkType,// from linkType local state (initially 'vertical') in 'ComponentMap'
41
-
stepPercent,// from stepPercent local state (initially '10') in 'ComponentMap'
41
+
stepPercent,// from stepPercent local state (initially '0.5') in 'ComponentMap'
42
42
setLayout,// from the layout local state in 'ComponentMap'
43
43
setOrientation,// from the orientation local state in 'ComponentMap'
44
44
setLinkType,// from the linkType local state in 'ComponentMap'
@@ -63,7 +63,8 @@ export default function LinkControls({
63
63
</select>
64
64
65
65
66
-
<label>Orientation:</label>{/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
66
+
<label>Orientation:</label>{/* Toggle record button to pause state changes on target application */}
67
+
{/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
containerRef,// Access to the container's bounding box. This will be empty on first render.
59
+
TooltipInPortal // TooltipWithBounds in a Portal, outside of your component DOM tree
60
+
}=useTooltipInPortal({// Visx hook
61
+
detectBounds: true,// use TooltipWithBounds
62
+
scroll: true,// when tooltip containers are scrolled, this will correctly update the Tooltip position
54
63
});
55
64
56
65
constkeys=Object.keys(data.componentData);
57
66
58
-
// data accessor (used to generate scales) and formatter (add units for on hover box)
59
-
// d coming from data.barstack post filtered data
60
-
constgetSnapshotId=(d: snapshot)=>d.snapshotId;
67
+
constgetSnapshotId=(d: snapshot)=>d.snapshotId;// data accessor (used to generate scales) and formatter (add units for on hover box). d comes from data.barstack post filtered data
68
+
constformatSnapshotId=(id)=>`Snapshot ID: ${id}`;// returns snapshot id when invoked in tooltip section
69
+
constformatRenderTime=(time)=>`${time} ms `;// returns render time when invoked in tooltip section
61
70
62
-
// returns snapshot id when invoked in tooltip section
63
-
constformatSnapshotId=(id)=>`Snapshot ID: ${id}`;
64
-
// returns render time when invoked in tooltip section
65
-
constformatRenderTime=(time)=>`${time} ms `;
66
-
67
-
// create visualization SCALES with cleaned data
68
-
constsnapshotIdScale=scaleBand<string>({
71
+
72
+
constsnapshotIdScale=scaleBand<string>({// create visualization SCALES with cleaned data
69
73
domain: data.barStack.map(getSnapshotId),
70
74
padding: 0.2,
71
75
});
72
76
73
-
// Adjusts y axis to match/ bar height
74
-
constrenderingScale=scaleLinear<number>({
77
+
constrenderingScale=scaleLinear<number>({// Adjusts y axis to match/ bar height
75
78
domain: [0,data.maxTotalRender],
76
79
nice: true,
77
80
});
78
-
// Gives each bar on the graph a color using schemeSet1 imported from D3
79
-
constcolorScale=scaleOrdinal<string>({
81
+
82
+
constcolorScale=scaleOrdinal<string>({// Gives each bar on the graph a color using schemeSet1 imported from D3
{/* Ths conditional statement displays a different tooltip
287
-
configuration depending on if we are trying do display a specific
288
-
snapshot through options menu or all snapshots together in bargraph */}
289
-
{tooltipOpen&&tooltipData&&(
285
+
{tooltipOpen&&tooltipData&&(// Ths conditional statement displays a different tooltip configuration depending on if we are trying do display a specific snapshot through options menu or all snapshots together in bargraph
290
286
<TooltipInPortal
291
287
key={Math.random()}// update tooltip bounds each render
0 commit comments