fix the bug where the default snapshot in the graph is not correct

Author: d28601581

src/app/components/BarGraph.tsx

@@ -217,12 +217,13 @@ export default function ComponentMap({
 
   // find the node that has been selected and use it as the root
   const startNode = null;
+  let rootNode;
   const findSelectedNode = () => {
     for (const node of nodeList) {
-      if (node.name === selectedNode) {
-        startNode = node;
-      }
+      if (node.name === 'root') rootNode = node;
+      if (node.name === selectedNode) startNode = node;
     }
+    if (startNode === null) startNode = rootNode;
   };
   findSelectedNode();
 

src/app/components/ComponentMap.tsx

@@ -47,7 +47,7 @@ const collectNodes = (node) => {
       }
     }
   }
-}
+};
 
 export default function LinkControls({
   layout,
@@ -113,7 +113,7 @@ export default function LinkControls({
       <label> Select:</label>
       &nbsp; {/*This is a non-breaking space - Prevents an automatic line break at this position */}
       <input id='selectInput' list='nodeOptions' type='text' name="nodeOptions"
-        onChange={e => { setSelectedNode(e.target.value) }}
+        onChange={e => setSelectedNode(e.target.value)}
         style={dropDownStyle}
       />
       <datalist id='nodeOptions'>

src/app/components/LinkControls.tsx

@@ -54,9 +54,11 @@ const collectNodes = (snaps, componentName) => {
         } else {
           renderResult.push(renderTime);
         }
-        // compare the last pushed component Data from the array to the current one to see if there are differences
+        // compare the last pushed component Data from the array to
+        // the current one to see if there are differences
         if (x !== 0 && componentsResult.length !== 0) {
-          // needs to be stringified because values are hard to determine if true or false if in they're seen as objects
+          // needs to be stringified because values are hard to determine if
+          // true or false if in they're seen as objects
           if (JSON.stringify(Object.values(componentsResult[newChange ? componentsResult.length - 1 : trackChanges])[0]) !== JSON.stringify(cur.componentData.props)) {
             newChange = true;
             const props = { [`snapshot${x}`]: { ...cur.componentData.props } };
@@ -301,6 +303,7 @@ const PerformanceVisx = (props: BarStackProps) => {
             allRoutes={allRoutes}
             filteredSnapshots={filteredSnapshots}
             setSnapshot={setSnapshot}
+            snapshot={snapshot}
           />
         </div>
       );

src/app/components/PerformanceVisx.tsx

@@ -23,4 +23,4 @@ export const SAVE = 'SAVE';
 export const DELETE_SERIES = 'DELETE_SERIES';
 export const SET_CURRENT_LOCATION = 'SET_CURRENT_LOCATION';
 export const SET_CURRENT_TAB_IN_APP = 'SET_CURRENT_TAB_IN_APP';
-export const TUTORIAL_SAVE_SERIES_TOGGLE = 'TUTORIAL_SAVE_SERIES_TOGGLE';
+export const TUTORIAL_SAVE_SERIES_TOGGLE = 'TUTORIAL_SAVE_SERIES_TOGGLE';

src/app/constants/actionTypes.ts

@@ -34,7 +34,7 @@ export default (state, action) => produce(state, draft => {
       }
     }
   };
-  
+
   switch (action.type) {
     // This saves the series user wants to save to chrome local storage
     case types.SAVE: {

src/app/reducers/mainReducer.js

@@ -37,7 +37,7 @@
   text-align: left;
 }
 
-#routes-select {
+#routes-select, #snapshot-select{
   color: white !important;
   background-color: #ff6569 !important;
   font: 400 14px 'Roboto', sans-serif;
@@ -48,6 +48,7 @@
   text-align: center;
 }
 
+
 #seriesname {
   float: right;
   width: 220px;

src/app/styles/components/_performanceVisx.scss

@@ -39,6 +39,7 @@ import AtomsRelationship from '../app/components/AtomsRelationship';
 declare global {
   interface Window {
     __REACT_DEVTOOLS_GLOBAL_HOOK__?: any;
+    __REDUX_DEVTOOLS_EXTENSION__?: any;
   }
 }
 let fiberRoot = null;

src/backend/linkFiber.ts

@@ -22,11 +22,13 @@ function createTabObj(title) {
   // update tabsObj
   return {
     title,
-    // snapshots is an array of ALL state snapshots for stateful and stateless components the Reactime tab working on a specific user application
+    // snapshots is an array of ALL state snapshots for stateful and stateless
+    // components the Reactime tab working on a specific user application
     snapshots: [],
     // index here is the tab index that shows total amount of state changes
     index: 0,
-    //* this is our pointer so we know what the current state the user is checking (this accounts for time travel aka when user clicks jump on the UI)
+    //* this is our pointer so we know what the current state the user
+    // is checking (this accounts for time travel aka when user clicks jump on the UI)
     currLocation: null,
     // points to the node that will generate the next child set by newest node or jump
     currParent: 0,