completed History, WebMetrics, ComponentMap, LinkControls, ToolTipDataDisplay, getLinkComponent, Tree

Author: EivindDelFierro

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -58,7 +58,7 @@ export default function ComponentMap({
   let sizeHeight: number;
 
   /*
-    This sets the starting position for the root node on the maps display. 
+    We begin setting 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 'cartesian layout' (else conditional) sets the root nodes location either in the left middle *or top middle of the browser window relative to the size of the browser.
   */
@@ -84,7 +84,6 @@ export default function ComponentMap({
     }
   }
 
-  // Tooltip stuff that was destructured from the returned object from 'useTooltip()'
   const { 
     tooltipData, // value/data that tooltip may need to render
     tooltipLeft, // number used for tooltip positioning
@@ -128,14 +127,14 @@ export default function ComponentMap({
 
   const nodeList: [] = []; // create a nodeList array to store our nodes as a flat array
 
-  const collectNodes: void = (node) => {
-    nodeList.splice(0, nodeList.length);
-    nodeList.push(node);
-    for (let i = 0; i < nodeList.length; i += 1) {
+  const collectNodes: void = (node) => { // function that takes in a node (snapshot) as it's argument and modifies 'nodeList' so that the node and it's children are all within the flattened 'nodeList'.
+    nodeList.splice(0, nodeList.length); // deletes all the nodes in nodelist
+    nodeList.push(node); // pushes the snapshot into nodeList
+    for (let i = 0; i < nodeList.length; i += 1) { // iterate through the nodeList that contains our snapshot
       const cur = nodeList[i];
-      if (cur.children && cur.children.length > 0) {
-        for (const child of cur.children) {
-          nodeList.push(child);
+      if (cur.children && cur.children.length > 0) { // if the currently itereated snapshot has non-zero children...
+        for (const child of cur.children) { // iterate through each child in the children array
+          nodeList.push(child); // add the child to the nodeList
         }
       }
     }
@@ -155,7 +154,7 @@ export default function ComponentMap({
     if (startNode === null) startNode = rootNode;
   };
 
-  findSelectedNode();
+  findSelectedNode(); // locates the rootNode... do we really need this? This function is only used once... it's here.
 
   // controls for the map
   const LinkComponent: React.ComponentType<unknown> = getLinkComponent({ layout, linkType, orientation });
@@ -206,7 +205,7 @@ export default function ComponentMap({
                 ))}
 
                 {tree.descendants().map((node, key) => {
-                  const widthFunc:number = (name) => { // function that takes in a node's name and returns a number that is related to the length of the name.
+                  const widthFunc:number = (name) => { // function that takes in a node's name and returns a number that is related to the length of the name. Used for determining the node width.
                     const nodeLength = name.length;
                     if (nodeLength <= 5) return nodeLength + 80; // returns a number between 80-85
                     if (nodeLength <= 10) return nodeLength + 120; // returns a number between 125-130
@@ -260,6 +259,7 @@ export default function ComponentMap({
                           }}
                         />
                       )}
+
                       {/* This creates the rectangle boxes for each component
                        and sets it relative position to other parent nodes of the same level. */}
                       {node.depth !== 0 && (
@@ -271,7 +271,7 @@ export default function ComponentMap({
                           fill={node.children ? '#161521' : '#62d6fb'}
                           stroke={
                             node.data.isExpanded && node.data.children.length > 0
-                              ? '#F00008' // changed to #F00008 for higher contrast
+                              ? '#F00008'
                               : '#4D4D4D'
                           }
                           strokeWidth={1.5}
@@ -281,6 +281,7 @@ export default function ComponentMap({
                             dispatch(toggleExpanded(node.data));
                             hideTooltip();
                           }}
+                          
                           // Mouse Enter Rect (Component Node) -----------------------------------------------------------------------
                           /** This onMouseEnter event fires when the mouse first moves/hovers over a component node.
                            * The supplied event listener callback produces a Tooltip element for the current node. */ 
@@ -317,6 +318,7 @@ export default function ComponentMap({
                           }}
                         />
                       )}
+
                       {/* Display text inside of each component node */}
                       <text
                         dy='.33em'

src/app/components/StateRoute/ComponentMap/LinkControls.tsx

@@ -49,11 +49,9 @@ export default function LinkControls({
   collectNodes(snapShots);
 
   return (
-    <div style={controlStyles}>
-      {/* Controls for the layout selection */}
+    <div style={controlStyles}> {/* Controls for the layout selection */}
       <label>Layout:</label>
-      &nbsp;{' '}
-      {/* This is a non-breaking space - Prevents an automatic line break at this position */}
+      &nbsp;{' '} {/* This is a non-breaking space - Prevents an automatic line break at this position */}
       <select
         onClick={(e) => e.stopPropagation()}
         onChange={(e) => setLayout(e.target.value)}
@@ -64,8 +62,8 @@ export default function LinkControls({
         <option value='polar'>Polar</option>
       </select>
       &nbsp;&nbsp;
-      {/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
-      <label>Orientation:</label>
+    
+      <label>Orientation:</label> {/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
       &nbsp;
       <select
         onClick={(e) => e.stopPropagation()}
@@ -77,8 +75,9 @@ export default function LinkControls({
         <option value='horizontal'>Horizontal</option>
       </select>
       &nbsp;&nbsp;
-      {/* Controls for the link selections. */}
-      <label>Link:</label>
+    
+      
+      <label>Link:</label> {/* Controls for the link selections. */}
       &nbsp;
       <select
         onClick={(e) => e.stopPropagation()}
@@ -89,8 +88,9 @@ export default function LinkControls({
         <option value='step'>Step</option>
         <option value='line'>Line</option>
       </select>
-      {/* Controls for the select selections. */}
-      <label> Select:</label>
+
+      
+      <label> Select:</label> {/* Controls for the select selections. */}
       &nbsp;
       <select
         id='selectInput'
@@ -107,6 +107,7 @@ export default function LinkControls({
             ),
         )}
       </select>
+
       {/* This is the slider control for the step option */}
       {linkType === 'step' && layout !== 'polar' && (
         <>

src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
 
+/*
+  Code that show's the tooltip of our JSON tree
+*/
 
 const colors = {
   scheme: 'paraiso',

src/app/components/StateRoute/ComponentMap/getLinkComponent.ts

@@ -15,7 +15,7 @@ import {
 import { LinkComponent } from '../../../FrontendTypes'
 
 /*
-  
+  Changes the shape of the LinkComponent based on the layout, linkType, and orientation
 */
 
 export default function getLinkComponent({
@@ -25,7 +25,7 @@ export default function getLinkComponent({
 }: LinkComponent): React.ComponentType<unknown> {
   let LinkComponent: React.ComponentType<unknown>;
 
-  if (layout === 'polar') {
+  if (layout === 'polar') { // if the layout is polar, linkType can be either step, curve, line, or a plain LinkRadial.
     if (linkType === 'step') {
       LinkComponent = LinkRadialStep;
     } else if (linkType === 'curve') {
@@ -35,7 +35,7 @@ export default function getLinkComponent({
     } else {
       LinkComponent = LinkRadial;
     }
-  } else if (orientation === 'vertical') {
+  } else if (orientation === 'vertical') { // if the layout isn't polar and the orientation is vertical, linkType can be either step, curve, line, or a plain LinkVertical
     if (linkType === 'step') {
       LinkComponent = LinkVerticalStep;
     } else if (linkType === 'curve') {
@@ -45,7 +45,7 @@ export default function getLinkComponent({
     } else {
       LinkComponent = LinkVertical;
     }
-  } else if (linkType === 'step') {
+  } else if (linkType === 'step') { // if orientation and layout still haven't matched, linkType will determine our linkComponent type based on if linkType is step, curve, line, or a plain LinkHorizontal
     LinkComponent = LinkHorizontalStep;
   } else if (linkType === 'curve') {
     LinkComponent = LinkHorizontalCurve;