Merge pull request #28 from kevinfey/master

Final Bug Squashing
open-source-labs · Sep 1, 2020 · 743b0a7 · 743b0a7
2 parents 59f8fea + 328fa7f
commit 743b0a7
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 88 deletions.
diff --git a/src/app/components/AtomsRelationship.jsx b/src/app/components/AtomsRelationship.jsx
@@ -1,86 +1,113 @@
 import React, { Component, useEffect, useState, Fragment } from 'react';
-import { Chart } from 'react-google-charts'
+import { Chart } from 'react-google-charts';
 
 function AtomsRelationship(props) {
-  const {atomsRel} = props
+  const { atomsRel } = props;
 
-  const atomsAndComp = atomsRel.filter(e => e[2] !== 'atoms and selectors').map(e => { 
-    let copy = [...e];
-    copy[2] = 1; 
-    return [...copy] 
-  });
+  const atomsAndComp = atomsRel
+    .filter((e) => e[2] !== 'atoms and selectors')
+    .map((e) => {
+      let copy = [...e];
+      copy[2] = 1;
+      return [...copy];
+    });
 
-  const atomsAndSelectors = atomsRel.filter(e => e[2] === 'atoms and selectors').map(e => {
+  const atomsAndSelectors = atomsRel
+    .filter((e) => e[2] === 'atoms and selectors')
+    .map((e) => {
+      let copy = [...e];
+      copy[2] = 1;
+      return [...copy];
+    });
+
+  const copyatomsRel = atomsRel.map((e) => {
     let copy = [...e];
     copy[2] = 1;
-    return [...copy]
+    return copy;
   });
-
-  const copyatomsRel = atomsRel.map(e => { let copy = [...e]; copy[2] = 1; return copy; });
   const [atoms, setAtoms] = useState([...copyatomsRel]);
   const [atomAndSelectorCheck, setAtomAndSelectorCheck] = useState(false);
   const [atomAndCompCheck, setAtomAndCompCheck] = useState(false);
 
-  useEffect( () => {
-    if ((!atomAndSelectorCheck && !atomAndCompCheck) || (atomAndSelectorCheck && atomAndCompCheck)) {
+  useEffect(() => {
+    if (
+      (!atomAndSelectorCheck && !atomAndCompCheck) ||
+      (atomAndSelectorCheck && atomAndCompCheck)
+    ) {
       setAtoms(copyatomsRel);
     } else if (atomAndSelectorCheck) {
       setAtoms(atomsAndSelectors);
     } else {
       setAtoms(atomsAndComp);
     }
-  }, [atomAndSelectorCheck, atomAndCompCheck, props])
+  }, [atomAndSelectorCheck, atomAndCompCheck, props]);
 
   return (
     <div className="history-d3-container">
       {atoms && (
-      <Fragment>
-       <Chart
-        width={'100%'}
-        height={'100%'}
-        chartType="Sankey"
-        options={{
-          sankey: {
-            link: { color: { fill: '#gray', fillOpacity: 0.1 } },
-            node: {
-              colors: [
-                '#4a91c7',
-                '#5b9bce',
-                '#6ba6d5',
-                '#7bb0dc',
-                '#8abbe3',
-                '#99c6ea',
-                '#a8d0f1',
-                '#b7dbf8',
-                '#c6e6ff',
-                '#46edf2',
-                '#76f5f3',
-                '#95B6B7',
-                '#76dcde',
-                '#5fdaed',
-              ],
+        <Fragment>
+          <Chart
+            width={'100%'}
+            height={'98%'}
+            chartType="Sankey"
+            options={{
+              sankey: {
+                link: { color: { fill: '#gray', fillOpacity: 0.1 } },
+                node: {
+                  colors: [
+                    '#4a91c7',
+                    '#5b9bce',
+                    '#6ba6d5',
+                    '#7bb0dc',
+                    '#8abbe3',
+                    '#99c6ea',
+                    '#a8d0f1',
+                    '#b7dbf8',
+                    '#c6e6ff',
+                    '#46edf2',
+                    '#76f5f3',
+                    '#95B6B7',
+                    '#76dcde',
+                    '#5fdaed',
+                  ],
 
-              label: { color: '#fff', fontSize: '13', fontName: 'Monaco', },
-              nodePadding: 50,
-              width: 15,
-            },
-          },
-          tooltip: { textStyle: { color: 'white', fontSize: 0.1, }},
-        }}
-        loader={<div>Loading Chart</div>}
+                  label: { color: '#fff', fontSize: '13', fontName: 'Monaco' },
+                  nodePadding: 50,
+                  width: 15,
+                },
+              },
+              tooltip: { textStyle: { color: 'white', fontSize: 0.1 } },
+            }}
+            loader={<div>Loading Chart</div>}
             data={[['Atom', 'Selector', ''], ...atoms]}
-        rootProps={{ 'data-testid': '1' }}
-      />
-      <div>
-            <input type="checkbox" id='atomscomps' onClick={e => setAtomAndCompCheck(atomAndCompCheck ? false: true)}/>
-            <label htmlFor="atomscomps"> Only Show Atoms (or Selectors) and Components </label>
-            <input type="checkbox" id='atomsselectors' onClick={e => setAtomAndSelectorCheck(atomAndSelectorCheck ? false : true)} />
-            <label htmlFor="atomsselectors"> Only Show Atoms and Selectors </label>
-      </div>
+            rootProps={{ 'data-testid': '1' }}
+          />
+          <div>
+            <input
+              type="checkbox"
+              id="atomscomps"
+              onClick={(e) =>
+                setAtomAndCompCheck(atomAndCompCheck ? false : true)
+              }
+            />
+            <label htmlFor="atomscomps">
+              {' '}
+              Only Show Atoms (or Selectors) and Components{' '}
+            </label>
+            <input
+              type="checkbox"
+              id="atomsselectors"
+              onClick={(e) =>
+                setAtomAndSelectorCheck(atomAndSelectorCheck ? false : true)
+              }
+            />
+            <label htmlFor="atomsselectors">
+              {' '}
+              Only Show Atoms and Selectors{' '}
+            </label>
+          </div>
         </Fragment>
-      )
-
-      }
+      )}
     </div>
   );
 }

diff --git a/src/app/components/History.tsx b/src/app/components/History.tsx
@@ -108,8 +108,13 @@ function History(props) {
       .enter()
       .append('g')
       .style('fill', function (d) {
-        let loadTime =
-          d.data.stateSnapshot.children[0].componentData.actualDuration;
+        let loadTime;
+        if (d.data.stateSnapshot.children[0].componentData.actualDuration){
+          loadTime = d.data.stateSnapshot.children[0].componentData.actualDuration;
+        } else{
+          loadTime = 1;
+        }
+
 
         if (loadTime !== undefined) {
           if (loadTime > 16) {

diff --git a/src/app/components/PerfView.tsx b/src/app/components/PerfView.tsx
@@ -56,12 +56,6 @@ const PerfView = (props: PerfViewProps) => {
       '#c6e6ff',
     ]);
 
-  // Alternate color scaling function
-  // const colorScale = d3.scaleLinear()
-  //   .domain([0, 7])
-  //   .range(['hsl(200,60%,60%)', 'hsl(255,30%,40%)'])
-  //   .interpolate(d3.interpolateHcl);
-
   // Set up circle-packing layout function
   const packFunc = useCallback(
     (data: object) => {

diff --git a/src/app/components/StateRoute.tsx b/src/app/components/StateRoute.tsx
@@ -20,7 +20,8 @@ const History = require('./History').default;
 
 const ErrorHandler = require('./ErrorHandler').default;
 
-const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
+const NO_STATE_MSG =
+  'No state change detected. Trigger an event to change state';
 // eslint-disable-next-line react/prop-types
 
 interface StateRouteProps {
@@ -53,7 +54,16 @@ const StateRoute = (props: StateRouteProps) => {
   // Map
   const renderComponentMap = () => {
     if (hierarchy) {
-      return <ComponentMap viewIndex={viewIndex} snapshots={snapshots} x={x} y={y} k={k} setZoomState={setZoomState} />;
+      return (
+        <ComponentMap
+          viewIndex={viewIndex}
+          snapshots={snapshots}
+          x={x}
+          y={y}
+          k={k}
+          setZoomState={setZoomState}
+        />
+      );
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
@@ -62,13 +72,15 @@ const StateRoute = (props: StateRouteProps) => {
   // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
   // if true involk render chart with hierarchy
   const renderHistory = () => {
-    if (hierarchy.children.length > 0) {
+    if (hierarchy) {
       return <History hierarchy={hierarchy} />;
     }
-    return <div className="noState">History graph will render on first state change</div>;
+    return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
-  const renderAtomsRelationship = () => <AtomsRelationship atomsRel={snapshot.AtomsRelationship} />;
+  const renderAtomsRelationship = () => (
+    <AtomsRelationship atomsRel={snapshot.AtomsRelationship} />
+  );
 
   // the hierarchy gets set on the first click in the page
   // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
@@ -80,17 +92,20 @@ const StateRoute = (props: StateRouteProps) => {
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
-  const perfChart = (
-    <PerfView
-      viewIndex={viewIndex}
-      snapshots={snapshots}
-      setNoRenderData={setNoRenderData}
-      width={600}
-      height={1000}
-    />
-  );
-
-  const renderPerfView = () => <ErrorHandler>{perfChart}</ErrorHandler>;
+  const renderPerfView = () => {
+    if (hierarchy) {
+      return (
+        <PerfView
+          viewIndex={viewIndex}
+          snapshots={snapshots}
+          setNoRenderData={setNoRenderData}
+          width={600}
+          height={1000}
+        />
+      );
+    }
+    return <div className="noState">{NO_STATE_MSG}</div>;
+  };
 
   return (
     <Router>
@@ -114,12 +129,15 @@ const StateRoute = (props: StateRouteProps) => {
           Map
         </NavLink>
 
-        {isRecoil
-          && (
-            <NavLink className="router-link" activeClassName="is-active" to="/relationship">
-              Relationships
-            </NavLink>
-          )}
+        {isRecoil && (
+          <NavLink
+            className="router-link"
+            activeClassName="is-active"
+            to="/relationship"
+          >
+            Relationships
+          </NavLink>
+        )}
 
         <NavLink
           className="router-link"