Merge branch 'develop' into eva/cleaning

Author: ay7991

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

@@ -14,135 +14,6 @@ import AxLegend from './axLegend';
 import { renderAxLegend } from '../../../slices/AxSlices/axLegendSlice';
 import type { RootState } from '../../../store';
 
-//still using below themes?
-const theme = {
-  scheme: 'monokai',
-  author: 'wimer hazenberg (http://www.monokai.nl)',
-  base00: '#272822',
-  base01: '#383830',
-  base02: '#49483e',
-  base03: '#75715e',
-  base04: '#a59f85',
-  base05: '#f8f8f2',
-  base06: '#f5f4f1',
-  base07: '#f9f8f5',
-  base08: '#f92672',
-  base09: '#fd971f',
-  base0A: '#f4bf75',
-  base0B: '#a6e22e',
-  base0C: '#a1efe4',
-  base0D: '#66d9ef',
-  base0E: '#ae81ff',
-  base0F: '#cc6633',
-};
-
-interface TreeNode {
-  name?: {
-    sources?: any[];
-    type?: string;
-    value?: string;
-  };
-  isExpanded?: boolean;
-  children?: TreeNode[];
-  backendDOMNodeId?: number;
-  childIds?: string[];
-  ignored?: boolean;
-  nodeId?: string;
-  ignoredReasons?: any[];
-}
-
-// example data from visx
-
-// pulling name property value to name the node, need to adjust data pull from ax tree to reassign name if the node is ignored
-
-const data: TreeNode = {
-  name: {
-    sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
-    type: 'computedString',
-    value: 'Reactime MVP',
-  },
-  backendDOMNodeId: 1,
-  childIds: ['46'],
-  ignored: false,
-  children: [
-    {
-      name: {
-        sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
-        type: 'computedString',
-        value: '',
-      },
-      backendDOMNodeId: 7,
-      childIds: ['47'],
-      ignored: true,
-    },
-    {
-      name: {
-        sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
-        type: 'computedString',
-        value: 'Tic-Tac-Toe',
-      },
-      backendDOMNodeId: 8,
-      childIds: ['48'],
-      ignored: false,
-    },
-  ],
-};
-
-const nodeAxArr = [
-  {
-    name: {
-      sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
-      type: 'computedString',
-      value: 'Reactime MVP',
-    },
-    backendDOMNodeId: 1,
-    childIds: ['46'],
-    ignored: false,
-    children: [
-      {
-        name: {
-          sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
-          type: 'computedString',
-          value: '',
-        },
-        backendDOMNodeId: 7,
-        childIds: ['47'],
-        ignored: true,
-      },
-      {
-        name: {
-          sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
-          type: 'computedString',
-          value: 'Tic-Tac-Toe',
-        },
-        backendDOMNodeId: 8,
-        childIds: ['48'],
-        ignored: false,
-      },
-    ],
-  },
-  {
-    name: {
-      sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
-      type: 'computedString',
-      value: '',
-    },
-    backendDOMNodeId: 7,
-    childIds: ['47'],
-    ignored: true,
-  },
-  {
-    name: {
-      sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
-      type: 'computedString',
-      value: 'Tic-Tac-Toe',
-    },
-    backendDOMNodeId: 8,
-    childIds: ['48'],
-    ignored: false,
-  },
-];
-
 const defaultMargin = {
   top: 30,
   left: 30,
@@ -166,8 +37,6 @@ export type LinkTypesProps = {
 export default function AxTree(props) {
   const { currLocation, axSnapshots, width, height } = props;
 
-
-
   let margin = defaultMargin;
   let totalWidth = width;
   let totalHeight = height;
@@ -243,16 +112,22 @@ export default function AxTree(props) {
   // root node of currAxSnapshot
   const rootAxNode = JSON.parse(JSON.stringify(currAxSnapshot[0]));
 
-  // // array that holds the ax tree as a nested object and the root node initially
+  // 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
   const organizeAxTree = (currNode, currAxSnapshot) => {
+    // checks if current ax node has children nodes through childId
     if (currNode.childIds && currNode.childIds.length > 0) {
+      // if yes, add children property to current ax node
       currNode.children = [];
       for (let j = 0; j < currAxSnapshot.length; j++) {
+        // locate ax node associated with childId
         for (const childEle of currNode.childIds) {
           if (childEle === currAxSnapshot[j].nodeId) {
+            // store ax node in children array
             currNode.children.push(currAxSnapshot[j]);
+            // recursively call organizeAxTree with child ax node passed in to check for further nested children nodes
             organizeAxTree(currAxSnapshot[j], currAxSnapshot);
           }
         }
@@ -262,27 +137,26 @@ export default function AxTree(props) {
 
   organizeAxTree(rootAxNode, currAxSnapshot);
 
-  // store each individual node, now with children property in nodeAxArr
-  // need to consider order, iterate through the children property first?
+  // stores each individual ax node with populated children property in array
   const populateNodeAxArr = (currNode) => {
     nodeAxArr.splice(0, nodeAxArr.length);
     nodeAxArr.push(currNode);
     for (let i = 0; i < nodeAxArr.length; i += 1) {
-      // iterate through the nodeList that contains our snapshot
+      // iterate through the nodeAxArr that contains the root ax node
       const cur = nodeAxArr[i];
       if (cur.children && cur.children.length > 0) {
-        // if the currently itereated snapshot has non-zero children...
+        // if the current ax node evaluated has non-zero children...
         for (const child of cur.children) {
-          // iterate through each child in the children array
-          nodeAxArr.push(child); // add the child to the nodeList
+          // iterate through each child ax node in the children array
+          nodeAxArr.push(child); // add the child to the nodeAxArr
         }
       }
     }
   };
 
   populateNodeAxArr(rootAxNode);
 
-  // ax Legend
+  // Conditionally render ax legend component (RTK)
   const { axLegendButtonClicked } = useSelector((state: RootState) => state.axLegend);
   const dispatch = useDispatch();
 
@@ -305,7 +179,6 @@ export default function AxTree(props) {
         </button>
       </div>
 
-      {/* svg references purple background */}
       <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' />
@@ -338,9 +211,8 @@ export default function AxTree(props) {
                 // code relating to each node in tree
                 {tree.descendants().map((node, key) => {
                   const widthFunc = (name): number => {
-                    //returns a number that is related to the length of the name. Used for determining the node width.
+                    // returns a number that is related to the length of the name. Used for determining the node width.
                     const nodeLength = name.length;
-                    //return nodeLength * 7 + 20; //uncomment this line if we want each node to be directly proportional to the name.length (instead of nodes of similar sizes to snap to the same width)
                     if (nodeLength <= 5) return nodeLength + 60;
                     if (nodeLength <= 10) return nodeLength + 130;
                     return nodeLength + 160;
@@ -524,7 +396,6 @@ export default function AxTree(props) {
                         fontFamily='Roboto'
                         textAnchor='middle'
                         style={{ pointerEvents: 'none' }}
-                        //fill={node.depth === 0 ? '#161521' : node.children ? 'white' : '#161521'}
                       >
                         {node.data.name.value}
                       </text>
@@ -568,6 +439,7 @@ export default function AxTree(props) {
           </div>
         </TooltipInPortal>
       )}
+
       <div>
         { axLegendButtonClicked ? 
           <AxLegend /> : ''

src/app/components/StateRoute/StateRoute.tsx

@@ -40,6 +40,8 @@ const StateRoute = (props: StateRouteProps) => {
   const hierarchy = propsHierarchy || tabsHierarchy;
   const viewIndex = propsViewIndex || tabsViewIndex;
 
+
+  // lines 45 - 63 contains functionality to disable the accessibility features in Reactime.
   const dispatch = useDispatch();
   const [showTree, setShowTree] = useState(false);
   const [selectedValue, setSelectedValue] = useState('disable');
@@ -123,6 +125,8 @@ const StateRoute = (props: StateRouteProps) => {
           <Route
             path='/accessibility'
             element={
+              // showTree is initially set to a falsely value, therefore, lines 155 - 189 is executed first. Once showTree is set to truthy by clicking the enable button, lines 129 - 154 is executed
+              // state is a key component here in order to update the accessibility tree 
               showTree ? (
                 <div>
                      <input
@@ -270,3 +274,4 @@ const StateRoute = (props: StateRouteProps) => {
 };
 
 export default StateRoute;
+

src/app/styles/layout/_stateContainer.scss

@@ -2,12 +2,9 @@
   font-size: 10px;
   overflow: auto;
   background-color: $state-background;
-  // margin-left: 5px;
 }
 
 .toggleAC {
-  // color: #00dffc;
-  //color: $blue-brand;
   background: #ff0001;
   height: 50%;
   text-decoration: none;
@@ -19,16 +16,6 @@
   box-shadow: none;
 }
 
-// .state-container .navbar {
-//   //background-color: $state-background;
-//   //color: #ff0000;
-//   display: flex;
-//   flex-direction: row;
-//   justify-content: flex-start;
-//   align-items: center;
-//   height: 30px;
-// }
-
 .state-container .main-navbar {
   background-color: $state-background;
   color: #ff0000;
@@ -59,15 +46,6 @@
   height: 35px;
 }
 
-// .navbar {
-//   color: #ff0000;
-//   // prevent navbar from scrolling with state/tree display
-//   position: sticky;
-//   left: 0;
-//   top: 0;
-//   @extend %disable-highlight;
-// }
-
 .no-data-message {
   color: #ff0001;
   font: normal 13px $text-font-stack;