Merge pull request #24 from guizzettic/cleanup

Cleaned up technical debt, removed console logs, improved visualization of D3 nodes

Author: Theqwertypusher

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;
@@ -42,18 +40,17 @@ 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);
+  const [stepPercent, setStepPercent] = useState<number>(0.5);
   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;
 
-  // 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.
+  // rendering for the different tab selections
   if (layout === 'polar') {
     origin = {
       x: innerWidth / 2,
@@ -71,12 +68,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>
@@ -98,7 +90,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}>
@@ -112,7 +104,7 @@ export default function ComponentMap({
                     fill='none'
                   />
                 ))}
-                translate
+
                 {tree.descendants().map((node, key) => {
                   const width = 40;
                   const height = 15;
@@ -139,6 +131,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';
 
 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,
@@ -55,6 +54,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>
       {linkType === 'step' && layout !== 'polar' && (
@@ -65,7 +65,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}