Merge pull request #18 from AlexanderLanderos/newComponentMap

Theqwertypusher · web-flow · commit e938454e37a7 · 2020-10-20T00:14:54.000-04:00
New component map
diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
@@ -12,8 +12,10 @@ import useForceUpdate from './useForceUpdate';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
 
-const defaultMargin = { top: 30, left: 30, right: 30, bottom: 70 };
+// setting the base margins for the Map to render in the Chrome extension window.
+const defaultMargin = { top: 30, left: 30, right: 30, bottom: 30 };
 
+// export these types because this will only be used on this page, interface not needed as it will not be re-used.
 export type LinkTypesProps = {
   width: number;
   height: number;
@@ -28,23 +30,27 @@ export default function ComponentMap({
   margin = defaultMargin,
   snapshots: snapshots,
 }: LinkTypesProps) {
-  // preparing the data to be used for render
+  console.log(totalHeight);
+
+  // This is where we select the last object in the snapshots array from props to allow hierarchy to parse the data for render on the component map per hierarchy layout specifications.
   const lastNode = snapshots.length - 1;
   const data = snapshots[lastNode];
+  // importing custom hooks for the selection tabs.
   const [layout, setLayout] = useState<string>('cartesian');
   const [orientation, setOrientation] = useState<string>('horizontal');
   const [linkType, setLinkType] = useState<string>('diagonal');
-  const [stepPercent, setStepPercent] = useState<number>(0.5);
+  const [stepPercent, setStepPercent] = useState<number>(10);
   const forceUpdate = useForceUpdate();
-  // setting the margins for the Map to render in the tab
+
   const innerWidth = totalWidth - margin.left - margin.right;
   const innerHeight = totalHeight - margin.top - margin.bottom;
 
   let origin: { x: number; y: number };
   let sizeWidth: number;
   let sizeHeight: number;
 
-  // rendering for the different tab selections
+  // Conditional statement sets the location of the root node in the middle of the window
+  // Else statement sets the location of the root node to the right or top of the window per dropdown selection.
   if (layout === 'polar') {
     origin = {
       x: innerWidth / 2,
@@ -62,7 +68,12 @@ export default function ComponentMap({
       sizeHeight = innerWidth;
     }
   }
-  // controls for the map
+
+  // render controls for the map
+  // svg - complete layout of self contained component map
+  // Tree is rendering each component from the component tree.
+  // rect- Contains both text and rectangle node information for rendering each component on the map.
+  // circle- setup and layout for the root node.
   const LinkComponent = getLinkComponent({ layout, linkType, orientation });
   return totalWidth < 10 ? null : (
     <div>
@@ -84,7 +95,7 @@ export default function ComponentMap({
           <Tree
             root={hierarchy(data, (d) => (d.isExpanded ? null : d.children))}
             size={[sizeWidth, sizeHeight]}
-            separation={(a, b) => (a.parent === b.parent ? 1 : 0.5) / a.depth}
+            separation={(a, b) => (a.parent === b.parent ? 10 : 0) / a.depth}
           >
             {(tree) => (
               <Group top={origin.y} left={origin.x}>
@@ -98,7 +109,7 @@ export default function ComponentMap({
                     fill='none'
                   />
                 ))}
-
+                translate
                 {tree.descendants().map((node, key) => {
                   const width = 40;
                   const height = 15;
@@ -125,7 +136,6 @@ export default function ComponentMap({
                           fill="url('#links-gradient')"
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
-                            console.log(node);
                             forceUpdate();
                           }}
                         />
@@ -144,7 +154,7 @@ export default function ComponentMap({
                           rx={node.data.children ? 0 : 10}
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
-                            console.log(node);
+
                             forceUpdate();
                           }}
                         />
diff --git a/src/app/components/LinkControls.tsx b/src/app/components/LinkControls.tsx
@@ -1,7 +1,8 @@
+import { link } from 'fs';
 import React from 'react';
 
 const controlStyles = { fontSize: 10 };
-
+// props for orientation controls
 type Props = {
   layout: string;
   orientation: string;
@@ -12,7 +13,7 @@ type Props = {
   setLinkType: (linkType: string) => void;
   setStepPercent: (percent: number) => void;
 };
-
+// below are the control options for each of the drop downs.
 export default function LinkControls({
   layout,
   orientation,
@@ -54,7 +55,6 @@ export default function LinkControls({
       >
         <option value='diagonal'>Diagonal</option>
         <option value='step'>Step</option>
-        <option value='curve'>Curve</option>
         <option value='line'>Line</option>
       </select>
       {linkType === 'step' && layout !== 'polar' && (
@@ -65,7 +65,7 @@ export default function LinkControls({
             onClick={(e) => e.stopPropagation()}
             type='range'
             min={0}
-            max={1}
+            max={5}
             step={0.1}
             onChange={(e) => setStepPercent(Number(e.target.value))}
             value={stepPercent}
diff --git a/src/app/components/StateRoute.tsx b/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>
   );
diff --git a/src/app/components/getLinkComponent.ts b/src/app/components/getLinkComponent.ts
@@ -13,6 +13,7 @@ import {
   LinkRadialLine,
 } from '@visx/shape';
 
+// conditional's to adjust the controls for the componentMap drop downs
 export default function getLinkComponent({
   layout,
   linkType,
@@ -27,8 +28,6 @@ export default function getLinkComponent({
   if (layout === 'polar') {
     if (linkType === 'step') {
       LinkComponent = LinkRadialStep;
-    } else if (linkType === 'curve') {
-      LinkComponent = LinkRadialCurve;
     } else if (linkType === 'line') {
       LinkComponent = LinkRadialLine;
     } else {
@@ -37,17 +36,13 @@ export default function getLinkComponent({
   } else if (orientation === 'vertical') {
     if (linkType === 'step') {
       LinkComponent = LinkVerticalStep;
-    } else if (linkType === 'curve') {
-      LinkComponent = LinkVerticalCurve;
     } else if (linkType === 'line') {
       LinkComponent = LinkVerticalLine;
     } else {
       LinkComponent = LinkVertical;
     }
   } else if (linkType === 'step') {
     LinkComponent = LinkHorizontalStep;
-  } else if (linkType === 'curve') {
-    LinkComponent = LinkHorizontalCurve;
   } else if (linkType === 'line') {
     LinkComponent = LinkHorizontalLine;
   } else {
