Merge pull request #27 from oslabs-beta/staging

Reducing technical debt

src/app/components/AtomsRelationship.tsx

@@ -161,12 +161,16 @@ function Node({ node, snapshots, dispatch, bothObj}) {
           stroke={isParent ? orange : blue}
           onMouseLeave={()=> {
             for (let i=0; i<bothObj[node.data.name].length; i++){
-              dispatch(onHoverExit(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
+              if(snapshots[0].recoilDomNode[bothObj[node.data.name][i]].length){
+                dispatch(onHoverExit(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
+                }
             }
           }}
           onMouseEnter={()=> {
             for (let i=0; i<bothObj[node.data.name].length; i++){
-              dispatch(onHover(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
+              if(snapshots[0].recoilDomNode[bothObj[node.data.name][i]].length){
+                dispatch(onHover(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
+                }
             }                            
           }}
         />
@@ -231,12 +235,16 @@ function SelectorNode({ node, snapshots, dispatch, bothObj}) {
           stroke={selectWhite}
           onMouseLeave={()=> {
             for (let i=0; i<bothObj[node.data.name].length; i++){
-              dispatch(onHoverExit(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
+              if(snapshots[0].recoilDomNode[bothObj[node.data.name][i]].length){
+                dispatch(onHoverExit(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
+              }              
             }
           }}
           onMouseEnter={()=> {
             for (let i=0; i<bothObj[node.data.name].length; i++){
+              if(snapshots[0].recoilDomNode[bothObj[node.data.name][i]].length){
               dispatch(onHover(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
+              }
             }                     
           }}
         />

src/app/components/ComponentMap.tsx

@@ -14,10 +14,8 @@ import getLinkComponent from './getLinkComponent';
 import { onHover, onHoverExit } from '../actions/actions'
 import { useStoreContext } from '../store'
 
-// setting the base margins for the Map to render in the Chrome extension window.
-const defaultMargin = { top: 30, left: 30, right: 30, bottom: 30 };
+const defaultMargin = { top: 30, left: 30, right: 30, bottom: 70 };
 
-// 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;
@@ -41,6 +39,7 @@ export default function ComponentMap({
   const [layout, setLayout] = useState<string>('cartesian');
   const [orientation, setOrientation] = useState<string>('horizontal');
   const [linkType, setLinkType] = useState<string>('diagonal');
+
   const [stepPercent, setStepPercent] = useState<number>(10);
   // Declared this variable and assigned it to the useForceUpdate function that forces a state to change causing that component to re-render and display on the map
   const forceUpdate = useForceUpdate();
@@ -53,9 +52,9 @@ export default function ComponentMap({
   let sizeWidth: number;
   let sizeHeight: number;
 
-
   // This sets the starting position for the root node on the maps display. the polar layout sets the root node to the relative center of the display box based on the size of the browser window.
   // the else conditional statements determines the root nodes location either in the left middle or top middle of the browser window relative to the size of the browser.
+
   if (layout === 'polar') {
     origin = {
       x: innerWidth / 2,
@@ -73,12 +72,7 @@ export default function ComponentMap({
       sizeHeight = innerWidth;
     }
   }
-
-  // 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.
+  // controls for the map
   const LinkComponent = getLinkComponent({ layout, linkType, orientation });
   return totalWidth < 10 ? null : (
     <div>
@@ -100,7 +94,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 ? 10 : 0) / a.depth}
+            separation={(a, b) => (a.parent === b.parent ? 1 : 0.5) / a.depth}
           >
             {(tree) => (
               <Group top={origin.y} left={origin.x}>
@@ -114,7 +108,7 @@ export default function ComponentMap({
                     fill='none'
                   />
                 ))}
-                translate
+
                 {tree.descendants().map((node, key) => {
                   const width = 40;
                   const height = 15;
@@ -141,6 +135,7 @@ export default function ComponentMap({
                           fill="url('#links-gradient')"
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
+                            console.log(node);
                             forceUpdate();
                           }}
                         />

src/app/components/History.tsx

@@ -2,24 +2,6 @@ import React, { Component, useEffect, useState } from 'react';
 import * as d3 from 'd3';
 import LegendKey from './legend';
 import { changeView, changeSlider } from '../actions/actions';
-// import { useStoreContext } from '../store';
-// import { string } from 'prop-types';
-import { Zoom } from '@visx/zoom';
-import { localPoint } from '@visx/event';
-import { RectClipPath } from '@visx/clip-path';
-// import ZoomI from './zoomFt';
-
-// const colorScale = scaleLinear<number>({ range: [0, 1], domain: [0, 1000] });
-// const sizeScale = scaleLinear<number>({ domain: [0, 600], range: [0.5, 8] });
-
-const initialTransform = {
-  scaleX: 1.27,
-  scaleY: 1.27,
-  translateX: -211.62,
-  translateY: 162.59,
-  skewX: 0,
-  skewY: 0,
-};
 
 /**
  * @var colors: Colors array for the diffrerent node branches, each color is for a different branch
@@ -54,17 +36,14 @@ const filterHooks = (data: any[]) => {
  * @method maked3Tree :Creates a new D3 Tree
  */
 
-function History(props: any) {
-  //visx zoom first
-  const [showMiniMap, setShowMiniMap] = useState<boolean>(true);
-
+// main function exported to StateRoute
+// below we destructure the props
+function History(props: Record<string, unknown>) {
   const { width, height, hierarchy, dispatch, sliderIndex, viewIndex } = props;
-  console.log(
-    `inside History tab -> width is ${width} and height is ${height}`
-  );
+
   let root = JSON.parse(JSON.stringify(hierarchy));
   let isRecoil = false;
-  // console.log('before makedTree, hierarchy is, ', hierarchy);
+
   let HistoryRef = React.createRef(root); //React.createRef(root);
   useEffect(() => {
     maked3Tree();
@@ -83,8 +62,8 @@ function History(props: any) {
    */
   let maked3Tree = function () {
     removed3Tree();
-    const width: any = 800;
-    const height: any = 600;
+    const width: number = 800;
+    const height: number = 600;
     const svgContainer = d3
       .select(HistoryRef.current)
       .append('svg') // svgContainer is now pointing to svg
@@ -99,7 +78,6 @@ function History(props: any) {
     // d3.hierarchy constructs a root node from the specified hierarchical data
     // (our object titled dataset), which must be an object representing the root node
     const hierarchy = d3.hierarchy(root);
-    // console.log('after maked3tree, hierarchy is now: ', hierarchy);
     const tree = d3
       .tree()
       .nodeSize([width / 10, height / 10])
@@ -162,21 +140,23 @@ function History(props: any) {
       });
 
     // here we the node circle is created and given a radius size, we are also giving it a mouseover and onClick  functionality
-    // mouseover will highlight the node while onClick will dispatch changeSlider and changeView actions. This will act as a timeJump request.
-    //
+    // mouseover will highlight the node
+    // the onCLick of a selected node will dispatch changeSlider and changeView actions. This will act as a timeJump request.
+    // further optimization would improve the onclick feature, onclick seems to only register on the lower half of the node
     node
       .append('circle')
-      .attr('r', 13)
+      .attr('r', 14)
       .on('mouseover', function (d: `Record<string, unknown>`) {
-        d3.select(this).transition(100).duration(20).attr('r', 20);
+        d3.select(this).transition(90).duration(18).attr('r', 21);
       })
       .on('click', function (d: `Record<string, unknown>`) {
         const index = parseInt(`${d.data.name}.${d.data.branch}`);
         dispatch(changeSlider(index));
         dispatch(changeView(index));
       })
+      // think about how I can convert this any to typescript
       .on('mouseout', function (d: any) {
-        d3.select(this).transition().duration(300).attr('r', 13);
+        d3.select(this).transition().duration(300).attr('r', 14);
       });
 
     node
@@ -219,7 +199,7 @@ function History(props: any) {
         .scaleExtent([0, 0.9]) // [zoomOut, zoomIn]
         .on('zoom', zoomed)
     );
-    // helper function that allows for zooming
+    // helper function that allows for zooming ( think about how I can convert this any to typescript)
     function zoomed(d: any) {
       g.attr('transform', d3.event.transform);
     }
@@ -259,10 +239,9 @@ function History(props: any) {
       return [(y = +y) * Math.cos((x -= Math.PI / 2)), y * Math.sin(x)];
     }
   };
-  // console.log('have we hit maked3dtree');
-  // below we are rendering the LegendKey component and passing hierarchy as props
-  // then rendering each node in History tab to render using D3
 
+  // below we are rendering the LegendKey component and passing hierarchy as props
+  // then rendering each node in History tab to render using D3, which will share area with LegendKey
   return (
     <>
       <div>

src/app/components/LinkControls.tsx

@@ -1,8 +1,7 @@
-import { link } from 'fs';
 import React from 'react';
 // Font size of the Controls label and Dropdowns
 const controlStyles = { fontSize: 10 };
-// props for orientation controls
+
 type Props = {
   layout: string;
   orientation: string;
@@ -13,7 +12,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,
@@ -62,6 +61,7 @@ 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>
       {/* This is the slider control for the step option */}
@@ -74,7 +74,7 @@ export default function LinkControls({
             onClick={(e) => e.stopPropagation()}
             type='range'
             min={0}
-            max={5}
+            max={1}
             step={0.1}
             onChange={(e) => setStepPercent(Number(e.target.value))}
             value={stepPercent}