removed the component zoom state as we are not using it anymore. also fixed spelling errors of Envoke.

Author: AlexanderLanderos

src/app/components/StateRoute.tsx

@@ -48,18 +48,11 @@ interface StateRouteProps {
 const StateRoute = (props: StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex } = props;
 
-  console.log(hierarchy)
+  console.log(hierarchy);
 
   const isRecoil = snapshot.atomsComponents ? true : false;
   const [noRenderData, setNoRenderData] = useState(false);
 
-  // component map zoom state
-  const [{ x, y, k }, setZoomState]: any = useState({
-    x: 150,
-    y: 250,
-    k: 1,
-  });
-
   // Map
   const renderComponentMap = () => {
     if (hierarchy) {
@@ -71,12 +64,12 @@ const StateRoute = (props: StateRouteProps) => {
         </ParentSize>
       );
     }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>;
   };
 
   // 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
-  // if true involk render chart with hierarchy
+  // if true invoke render chart with hierarchy
   const renderHistory = () => {
     if (hierarchy) {
       return (
@@ -90,41 +83,41 @@ const StateRoute = (props: StateRouteProps) => {
         </div>
       );
     }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>;
   };
 
   const renderAtomsRelationship = () => (
-
-    <ParentSize>{({ width, height })  => 
-    <Example 
-    width={width} 
-    height={height}
-    snapshots={snapshots} />}
+    <ParentSize>
+      {({ width, height }) => (
+        <Example width={width} height={height} snapshots={snapshots} />
+      )}
     </ParentSize>
   );
 
   // 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
-  // if true involk render Tree with snapshot
+  // if true invoke render Tree with snapshot
   const renderTree = () => {
     if (hierarchy) {
       return <Tree snapshot={snapshot} />;
     }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>;
   };
 
   const renderPerfView = () => {
     if (hierarchy) {
       return (
-        <ParentSize>{({ width, height }) => 
-          <PerformanceVisx 
-            width={width} 
-            height={height}
-            snapshots={snapshots}
-            hierarchy={hierarchy}
-          />}
+        <ParentSize>
+          {({ width, height }) => (
+            <PerformanceVisx
+              width={width}
+              height={height}
+              snapshots={snapshots}
+              hierarchy={hierarchy}
+            />
+          )}
         </ParentSize>
-      
+
         // <PerfView
         //   viewIndex={viewIndex}
         //   snapshots={snapshots}
@@ -134,55 +127,55 @@ const StateRoute = (props: StateRouteProps) => {
         // />
       );
     }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>;
   };
 
   return (
     <Router>
-      <div className="navbar">
+      <div className='navbar'>
         <NavLink
-          className="router-link"
-          activeClassName="is-active"
+          className='router-link'
+          activeClassName='is-active'
           exact
-          to="/"
+          to='/'
         >
           Tree
         </NavLink>
         <NavLink
-          className="router-link"
-          activeClassName="is-active"
-          to="/history"
+          className='router-link'
+          activeClassName='is-active'
+          to='/history'
         >
           History
         </NavLink>
-        <NavLink className="router-link" activeClassName="is-active" to="/map">
+        <NavLink className='router-link' activeClassName='is-active' to='/map'>
           Map
         </NavLink>
 
         {isRecoil && (
           <NavLink
-            className="router-link"
-            activeClassName="is-active"
-            to="/relationship"
+            className='router-link'
+            activeClassName='is-active'
+            to='/relationship'
           >
             AtomsRecoil
           </NavLink>
         )}
 
         <NavLink
-          className="router-link"
-          activeClassName="is-active"
-          to="/performance"
+          className='router-link'
+          activeClassName='is-active'
+          to='/performance'
         >
           Performance
         </NavLink>
       </div>
       <Switch>
-        <Route path="/map" render={renderComponentMap} />
-        <Route path="/history" render={renderHistory} />
-        <Route path="/relationship" render={renderAtomsRelationship} />
-        <Route path="/performance" render={renderPerfView} />
-        <Route path="/" render={renderTree} />
+        <Route path='/map' render={renderComponentMap} />
+        <Route path='/history' render={renderHistory} />
+        <Route path='/relationship' render={renderAtomsRelationship} />
+        <Route path='/performance' render={renderPerfView} />
+        <Route path='/' render={renderTree} />
       </Switch>
     </Router>
   );