Merge branch 'dev' into feature/garrett

Author: garrettlchow

src/app/FrontendTypes.ts

@@ -297,12 +297,10 @@ export interface StepsObj {
 }
 
 export interface LinkControlProps {
-  layout: string;
   orientation: string;
   linkType: string;
   stepPercent: number;
   selectedNode: string;
-  setLayout: (layout: string) => void;
   setOrientation: (orientation: string) => void;
   setLinkType: (linkType: string) => void;
   setStepPercent: (percent: number) => void;
@@ -333,7 +331,6 @@ export interface Node {
 }
 
 export interface LinkComponent {
-  layout: string;
   linkType: string;
   orientation: string;
 }

src/app/components/StateRoute/AxMap/Ax.tsx

@@ -52,7 +52,7 @@ export default function AxTree(props) {
     showTooltip, // function to set tooltip state
     hideTooltip, // function to close a tooltip
   } = useTooltip(); // returns an object with several properties that you can use to manage the tooltip state of your component
-  
+
   const {
     containerRef, // Access to the container's bounding box. This will be empty on first render.
     TooltipInPortal, // TooltipWithBounds in a Portal, outside of your component DOM tree
@@ -75,7 +75,6 @@ export default function AxTree(props) {
     pointerEvents: 'all !important',
   };
 
-  const [layout, setLayout] = useState('cartesian');
   const [orientation, setOrientation] = useState('horizontal');
   const [linkType, setLinkType] = useState('diagonal');
   const [stepPercent, setStepPercent] = useState(0.5);
@@ -87,32 +86,23 @@ export default function AxTree(props) {
   let sizeWidth: number;
   let sizeHeight: number;
 
-  if (layout === 'polar') {
-    origin = {
-      x: innerWidth / 2,
-      y: innerHeight / 2,
-    };
-    sizeWidth = 2 * Math.PI;
-    sizeHeight = Math.min(innerWidth, innerHeight) / 2;
+  origin = { x: 0, y: 0 };
+  if (orientation === 'vertical') {
+    sizeWidth = innerWidth;
+    sizeHeight = innerHeight;
   } else {
-    origin = { x: 0, y: 0 };
-    if (orientation === 'vertical') {
-      sizeWidth = innerWidth;
-      sizeHeight = innerHeight;
-    } else {
-      sizeWidth = innerHeight;
-      sizeHeight = innerWidth;
-    }
+    sizeWidth = innerHeight;
+    sizeHeight = innerWidth;
   }
 
-  const LinkComponent = getLinkComponent({ layout, linkType, orientation });
+  const LinkComponent = getLinkComponent({ linkType, orientation });
 
   const currAxSnapshot = JSON.parse(JSON.stringify(axSnapshots[currLocation.index]));
 
   // root node of currAxSnapshot
   const rootAxNode = JSON.parse(JSON.stringify(currAxSnapshot[0]));
 
-  // array that holds each ax tree node with children property 
+  // array that holds each ax tree node with children property
   const nodeAxArr = [];
 
   // populates ax nodes with children property; visx recognizes 'children' in order to properly render a nested tree
@@ -164,11 +154,9 @@ export default function AxTree(props) {
     <div>
       <div id='axControls'>
         <LinkControls
-          layout={layout}
           orientation={orientation}
           linkType={linkType}
           stepPercent={stepPercent}
-          setLayout={setLayout}
           setOrientation={setOrientation}
           setLinkType={setLinkType}
           setStepPercent={setStepPercent}
@@ -179,17 +167,18 @@ export default function AxTree(props) {
         </button>
       </div>
 
-      <svg ref={containerRef} width={totalWidth + 0.2*totalWidth} height={totalHeight}>
+      <svg ref={containerRef} width={totalWidth + 0.2 * totalWidth} height={totalHeight}>
         <LinearGradient id='root-gradient' from='#488689' to='#3c6e71' />
         <LinearGradient id='parent-gradient' from='#488689' to='#3c6e71' />
         <rect
           className='componentMapContainer'
           width={sizeWidth / aspect}
           height={sizeHeight / aspect + 0}
           rx={14}
-         onClick={() => {
+          onClick={() => {
             hideTooltip();
-          }}/>
+          }}
+        />
         <Group transform={`scale(${aspect})`} top={margin.top} left={margin.left}>
           <Tree
             root={hierarchy(nodeAxArr[0], (d) => (d.isExpanded ? null : d.children))}
@@ -223,11 +212,7 @@ export default function AxTree(props) {
                   let top: number;
                   let left: number;
 
-                  if (layout === 'polar') {
-                    const [radialX, radialY] = pointRadial(node.x, node.y);
-                    top = radialY;
-                    left = radialX;
-                  } else if (orientation === 'vertical') {
+                  if (orientation === 'vertical') {
                     top = node.y;
                     left = node.x;
                   } else {
@@ -430,8 +415,8 @@ export default function AxTree(props) {
           <div>
             <div>
               {/*tooltipData['name'].value cannot be referred to using dot notation so using brackets here overrides typescript's strict data typing which was interfering with accessiccing this property */}
-                <strong>{JSON.stringify(tooltipData['name'].value)}</strong>
-              </div>
+              <strong>{JSON.stringify(tooltipData['name'].value)}</strong>
+            </div>
             <div>
               {/* Ax Node Info below names the tooltip title because of how its passed to the ToolTipDataDisplay container*/}
               <ToolTipDataDisplay containerName='Ax Node Info' dataObj={tooltipData} />
@@ -440,12 +425,7 @@ export default function AxTree(props) {
         </TooltipInPortal>
       )}
 
-      <div>
-        { axLegendButtonClicked ? 
-          <AxLegend /> : ''
-        }
-      </div>
-      
+      <div>{axLegendButtonClicked ? <AxLegend /> : ''}</div>
     </div>
   );
 }

src/app/components/StateRoute/AxMap/axLinkControls.tsx

@@ -3,47 +3,33 @@ import React from 'react';
 const controlStyles = { fontSize: 10 };
 
 type Props = {
-  layout: string;
   orientation: string;
   linkType: string;
   stepPercent: number;
-  setLayout: (layout: string) => void;
   setOrientation: (orientation: string) => void;
   setLinkType: (linkType: string) => void;
   setStepPercent: (percent: number) => void;
 };
 
 export default function LinkControls({
-  layout,
   orientation,
   linkType,
   stepPercent,
-  setLayout,
   setOrientation,
   setLinkType,
   setStepPercent,
 }: Props) {
   return (
     <div style={controlStyles}>
-      <label>layout:</label>&nbsp;
-      <select
-        onClick={(e) => e.stopPropagation()}
-        onChange={(e) => setLayout(e.target.value)}
-        value={layout}
-      >
-        <option value="cartesian">cartesian</option>
-        <option value="polar">polar</option>
-      </select>
       &nbsp;&nbsp;
       <label>orientation:</label>&nbsp;
       <select
         onClick={(e) => e.stopPropagation()}
         onChange={(e) => setOrientation(e.target.value)}
         value={orientation}
-        disabled={layout === 'polar'}
       >
-        <option value="vertical">vertical</option>
-        <option value="horizontal">horizontal</option>
+        <option value='vertical'>vertical</option>
+        <option value='horizontal'>horizontal</option>
       </select>
       &nbsp;&nbsp;
       <label>link:</label>&nbsp;
@@ -52,24 +38,24 @@ export default function LinkControls({
         onChange={(e) => setLinkType(e.target.value)}
         value={linkType}
       >
-        <option value="diagonal">diagonal</option>
-        <option value="step">step</option>
-        <option value="curve">curve</option>
-        <option value="line">line</option>
+        <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' && (
+      {linkType === 'step' && (
         <>
           &nbsp;&nbsp;
           <label>step:</label>&nbsp;
           <input
             onClick={(e) => e.stopPropagation()}
-            type="range"
+            type='range'
             min={0}
             max={1}
             step={0.1}
             onChange={(e) => setStepPercent(Number(e.target.value))}
             value={stepPercent}
-            disabled={linkType !== 'step' || layout === 'polar'}
+            disabled={linkType !== 'step'}
           />
         </>
       )}

src/app/components/StateRoute/AxMap/getAxLinkComponents.tsx

@@ -15,27 +15,15 @@ import {
 } from '@visx/shape';
 
 export default function getLinkComponent({
-  layout,
   linkType,
   orientation,
 }: {
-  layout: string;
   linkType: string;
   orientation: string;
 }) {
   let LinkComponent;
 
-  if (layout === 'polar') {
-    if (linkType === 'step') {
-      LinkComponent = LinkRadialStep;
-    } else if (linkType === 'curve') {
-      LinkComponent = LinkRadialCurve;
-    } else if (linkType === 'line') {
-      LinkComponent = LinkRadialLine;
-    } else {
-      LinkComponent = LinkRadial;
-    }
-  } else if (orientation === 'vertical') {
+ if (orientation === 'vertical') {
     if (linkType === 'step') {
       LinkComponent = LinkVerticalStep;
     } else if (linkType === 'curve') {

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

@@ -57,7 +57,6 @@ export default function ComponentMap({
   margin = defaultMargin,
   currentSnapshot, // from 'tabs[currentTab].stateSnapshot object in 'MainContainer'
 }: LinkTypesProps): JSX.Element {
-  const [layout, setLayout] = useState('cartesian'); // We create a local state "layout" and set it to a string 'cartesian'
   const [orientation, setOrientation] = useState('vertical'); // We create a local state "orientation" and set it to a string 'vertical'.
   const [linkType, setLinkType] = useState('diagonal'); // We create a local state "linkType" and set it to a string 'diagonal'.
   const [stepPercent, setStepPercent] = useState(0.5); // We create a local state "stepPercent" and set it to a number '0.5'. This will be used to scale the Map component's link: Step to 50%
@@ -80,33 +79,20 @@ export default function ComponentMap({
 
   /*
     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.
+    The default view sets 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') {
-    // 'polar layout' option
-    origin = {
-      x: innerWidth / 2,
-      y: innerHeight / 2,
-    };
 
-    // set the sizeWidth and sizeHeight
-    sizeWidth = 2 * Math.PI;
-    sizeHeight = Math.min(innerWidth, innerHeight) / 2;
+  origin = { x: 0, y: 0 };
+  if (orientation === 'vertical') {
+    sizeWidth = innerWidth;
+    sizeHeight = innerHeight;
   } else {
-    // 'cartesian layout' option
-    origin = { x: 0, y: 0 };
-    if (orientation === 'vertical') {
-      sizeWidth = innerWidth;
-      sizeHeight = innerHeight;
-    } else {
-      // if the orientation isn't vertical, swap the width and the height
-      sizeWidth = innerHeight;
-      sizeHeight = innerWidth;
-    }
+    // if the orientation isn't vertical, swap the width and the height
+    sizeWidth = innerHeight;
+    sizeHeight = innerWidth;
   }
-
+//}
   const {
     tooltipData, // value/data that tooltip may need to render
     tooltipLeft, // number used for tooltip positioning
@@ -266,20 +252,17 @@ export default function ComponentMap({
 
   // controls for the map
   const LinkComponent: React.ComponentType<unknown> = getLinkComponent({
-    layout,
     linkType,
     orientation,
   });
   return totalWidth < 10 ? null : (
     <div>
       <LinkControls
-        layout={layout}
         orientation={orientation}
         linkType={linkType}
         stepPercent={stepPercent}
         snapShots={currentSnapshot}
         selectedNode={selectedNode}
-        setLayout={setLayout}
         setOrientation={setOrientation}
         setLinkType={setLinkType}
         setStepPercent={setStepPercent}
@@ -372,11 +355,7 @@ export default function ComponentMap({
                   let top: number;
                   let left: number;
 
-                  if (layout === 'polar') {
-                    const [radialX, radialY] = pointRadial(node.x, node.y);
-                    top = radialY;
-                    left = radialX;
-                  } else if (orientation === 'vertical') {
+                  if (orientation === 'vertical') {
                     top = node.y;
                     left = node.x;
                   } else {