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/App.tsx
+7-5Lines changed: 7 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -24,11 +24,13 @@ const initialState: InitialStateProps = { // we initialize what our initialState
24
24
functionApp(): JSX.Element{
25
25
return(
26
26
<ThemeProvidertheme={theme}>
27
-
<Router>{/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
28
-
<StoreContext.Providervalue={useReducer(mainReducer,initialState)}>{/* we wrap our MainContainer with the provider so that we will be able to use the store context. We create our store by using useReducer and passing it into the value property */}
29
-
<MainContainer/>
30
-
</StoreContext.Provider>
31
-
</Router>
27
+
<Router>
28
+
{/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
{/* we wrap our MainContainer with the provider so that we will be able to use the store context. We create our store by using useReducer and passing it into the value property */}
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);
66
+
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
57
67
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;
61
-
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 `;
68
+
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
69
+
constformatSnapshotId=(id)=>`Snapshot ID: ${id}`;// returns snapshot id when invoked in tooltip section
70
+
constformatRenderTime=(time)=>`${time} ms `;// returns render time when invoked in tooltip section
66
71
67
-
// create visualization SCALES with cleaned data
68
-
constsnapshotIdScale=scaleBand<string>({
72
+
73
+
constsnapshotIdScale=scaleBand<string>({// create visualization SCALES with cleaned data
69
74
domain: data.barStack.map(getSnapshotId),
70
75
padding: 0.2,
71
76
});
72
77
73
-
// Adjusts y axis to match/ bar height
74
-
constrenderingScale=scaleLinear<number>({
78
+
constrenderingScale=scaleLinear<number>({// Adjusts y axis to match/ bar height
75
79
domain: [0,data.maxTotalRender],
76
80
nice: true,
77
81
});
78
-
// Gives each bar on the graph a color using schemeSet1 imported from D3
79
-
constcolorScale=scaleOrdinal<string>({
82
+
83
+
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&&(
288
+
{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
289
<TooltipInPortal
291
290
key={Math.random()}// update tooltip bounds each render
0 commit comments