Merge pull request #10 from oslabs-beta/peng

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

Author: AndyB909

src/app/components/BarGraph.tsx

@@ -62,7 +62,7 @@ const tooltipStyles = {
 
 const BarGraph = props => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
-  const { width, height, data, comparison, setRoute, allRoutes, filteredSnapshots, setSnapshot} = props;
+  const { width, height, data, comparison, setRoute, allRoutes, filteredSnapshots, snapshot, setSnapshot} = props;
   const [ seriesNameInput, setSeriesNameInput ] = useState(`Series ${comparison.length + 1}`);
   const {
     tooltipOpen,
@@ -94,13 +94,11 @@ const BarGraph = props => {
     // }
     const rgb = ["rgba(50, 100, 241, .5)", "rgba(90, 150, 217, .5)", "rgba(200, 30, 7, .5)", "rgba(23, 233, 217, .5)", "rgba(150, 227, 19, .5)"]
     for (const [key, value] of Object.entries(data.barStack[0])) {
-      // console.log(i);
       console.log(xMax, '<--  xmax'); 
       if (key !== 'snapshotId' && key !== 'route'){
-          console.log(`${key}: ${value}`);
+          //console.log(`${key}: ${value}`);
           // let color = colorGen();
         if (i === 0) {
-          console.log('i = 0');
           BarArray.push(<Bar
             min={'outer min'}
             max={'first if'}
@@ -268,6 +266,7 @@ const BarGraph = props => {
     }
     dispatch(save(toStorage));
   };
+  console.log(data.barStack, 'data.barStack before graph');
 
   // FTRI9 note - need to ensure text box is not empty before saving
   const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" id="seriesname" placeholder="Enter Series Name" onChange={e => setSeriesNameInput(e.target.value)} /> : null;
@@ -288,8 +287,10 @@ const BarGraph = props => {
             labelId="demo-simple-select-label"
             id="routes-select"
             onChange={e => {
-              setSnapshot('All Snapshots');
               setRoute(e.target.value);
+              setSnapshot('All Snapshots');
+              const defaultSnapShot = document.querySelector('#snapshot-select');
+              defaultSnapShot.value = 'defaultSnapShot';
             }}
           >
             <option>
@@ -306,10 +307,10 @@ const BarGraph = props => {
           <label id="routes-dropdown">Select Snapshot: </label>
           <select
             labelId="demo-simple-select-label"
-            id="routes-select"
-            onChange={e => setSnapshot(e.target.value)} 
+            id="snapshot-select"
+            onChange={e => setSnapshot(e.target.value)}
           >
-            <option>
+            <option value="defaultSnapShot">
               All Snapshots
             </option>
             {filteredSnapshots.map(route => (
@@ -329,7 +330,7 @@ const BarGraph = props => {
           fill={background}
           rx={14}
         />
-        {data.barStack.length > 1 ? (
+        {snapshot === 'All Snapshots' ? (
         <><Grid
             top={margin.top}
             left={margin.left}
@@ -499,9 +500,7 @@ const BarGraph = props => {
                 Snapshot ID
               </Text>
               </>
-              )
-      }    
-
+          )}
 
       </svg>
       {/* FOR HOVER OVER DISPLAY */}

src/app/components/ComponentMap.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/LinkControls.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/PerformanceVisx.tsx

@@ -303,6 +303,7 @@ const PerformanceVisx = (props: BarStackProps) => {
             allRoutes={allRoutes}
             filteredSnapshots={filteredSnapshots}
             setSnapshot={setSnapshot}
+            snapshot={snapshot}
           />
         </div>
       );

src/app/constants/actionTypes.ts

@@ -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/reducers/mainReducer.js

@@ -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/styles/components/_performanceVisx.scss

@@ -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/backend/linkFiber.ts

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