added notes to linkControls, line 40 of ComponentMap hook for stepPercent- state was changed from 0.5 to 10 for better component spacing. also added more comments for clarity

Author: AlexanderLanderos

src/app/components/ComponentMap.tsx

@@ -12,7 +12,8 @@ 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 window.
+const defaultMargin = { top: 30, left: 30, right: 30, bottom: 30 };
 
 export type LinkTypesProps = {
   width: number;
@@ -28,23 +29,26 @@ export default function ComponentMap({
   margin = defaultMargin,
   snapshots: snapshots,
 }: LinkTypesProps) {
+  console.log(totalHeight);
   // preparing the data to be used for render
   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 +66,12 @@ export default function ComponentMap({
       sizeHeight = innerWidth;
     }
   }
+
   // render controls for the map
+
+  // Tree is rendering each component from the component tree.
+  // rect- Contains both text and rectangle node information for rendering each component.
+  // circle- setup and layout for the root node.
   const LinkComponent = getLinkComponent({ layout, linkType, orientation });
   return totalWidth < 10 ? null : (
     <div>
@@ -84,7 +93,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 ? 1000 : 0) / a.depth}
           >
             {(tree) => (
               <Group top={origin.y} left={origin.x}>
@@ -98,7 +107,7 @@ export default function ComponentMap({
                     fill='none'
                   />
                 ))}
-
+                translate
                 {tree.descendants().map((node, key) => {
                   const width = 40;
                   const height = 15;

src/app/components/LinkControls.tsx

@@ -1,3 +1,4 @@
+import { link } from 'fs';
 import React from 'react';
 
 const controlStyles = { fontSize: 10 };