Merge pull request #20 from oslabs-beta/amy/axLegend

Amy/ax legend

Author: jguerrero35

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

@@ -1,11 +1,15 @@
 import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { Group } from '@visx/group';
 import { hierarchy, Tree } from '@visx/hierarchy';
 import { LinearGradient } from '@visx/gradient';
 import { pointRadial } from 'd3-shape';
 import { useTooltipInPortal } from '@visx/tooltip';
 import LinkControls from './axLinkControls';
 import getLinkComponent from './getAxLinkComponents';
+import AxLegend from './axLegend';
+import { renderAxLegend } from '../../../slices/AxSlices/axLegendSlice';
+import type { RootState } from '../../../store';
 
 const theme = {
   scheme: 'monokai',
@@ -274,37 +278,41 @@ export default function AxTree(props) {
     scroll: true, // when tooltip containers are scrolled, this will correctly update the Tooltip position
   });
 
+  // ax Legend
+  const { axLegendButtonClicked } = useSelector((state: RootState) => state.axLegend);
+  const dispatch = useDispatch();
+
   return totalWidth < 10 ? null : (
     <div>
-      <LinkControls
-        layout={layout}
-        orientation={orientation}
-        linkType={linkType}
-        stepPercent={stepPercent}
-        setLayout={setLayout}
-        setOrientation={setOrientation}
-        setLinkType={setLinkType}
-        setStepPercent={setStepPercent}
-      />
+      <div id='axControls'>
+        <LinkControls
+          layout={layout}
+          orientation={orientation}
+          linkType={linkType}
+          stepPercent={stepPercent}
+          setLayout={setLayout}
+          setOrientation={setOrientation}
+          setLinkType={setLinkType}
+          setStepPercent={setStepPercent}
+        />
+
+        <button id='axLegendButton' onClick={() => dispatch(renderAxLegend())}>
+          Generate Ax Tree Legend
+        </button>
+      </div>
 
       {/* svg references purple background */}
-      <svg ref={containerRef} width={totalWidth} height={totalHeight + 0}>
+      <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}
-         />
         <Group transform={`scale(${aspect})`} top={margin.top} left={margin.left}>
           <Tree
             root={hierarchy(nodeAxArr[0], (d) => (d.isExpanded ? null : d.children))}
             size={[sizeWidth / aspect, sizeHeight / aspect]}
             separation={(a, b) => (a.parent === b.parent ? 0.5 : 0.5) / a.depth}
           >
             {(tree) => (
-              <Group top={origin.y + 35} left={origin.x + 50 / aspect}>
+              <Group top={origin.y + 35} left={origin.x + 110}>
                 {tree.links().map((link, i) => (
                   <LinkComponent
                     key={i}
@@ -477,6 +485,14 @@ export default function AxTree(props) {
           </Tree>
         </Group>
       </svg>
+      
+      {/* ax Legend */}
+      <div>
+        { axLegendButtonClicked ? 
+          <AxLegend /> : ''
+        }
+      </div>
+      
     </div>
   );
 }

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const AxLegend = () => {
+    return (
+        <div style={{borderStyle: 'solid'}}>
+            Nodes from the accessibility tree have either a role <strong>role</strong> or <strong>internalRole</strong>
+            <ul>
+                <li>
+                    <i><b>Role</b></i> refers to <strong> ARIA </strong> roles, which indicate the purpose of the element to assistive technologies, like screen readers.
+                    All of the nodes rendered in this tree have a role of 'role'
+                </li>
+                <li>
+                    <i><b>internalRole</b></i> refers to browser-specific roles <strong> Chrome </strong> for its own accessibility processing
+                </li>
+            </ul>
+
+            <p> Each node is given a property labeled <strong>ignored</strong>. </p>
+            <p> Nodes read by the screen reader have their ignored property evaluate to <strong>false</strong>. 
+            Nodes not read by the screen reader evaluate to <strong>true</strong>.</p>
+            <p> Nodes labeled <strong>"visible node with no name"</strong> have the ignored property set to false, but are not given a name</p>
+        </div>
+    );
+}
+
+export default AxLegend;

src/app/slices/AxSlices/axLegendSlice.tsx

@@ -0,0 +1,18 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export const axLegendSlice = createSlice({
+    name: 'axLegend',
+    initialState: {
+        axLegendButtonClicked: false,
+    },
+    reducers: {
+        renderAxLegend: (state) => {
+            if (!state.axLegendButtonClicked) state.axLegendButtonClicked = true;
+            else state.axLegendButtonClicked = false;
+        }
+    }
+})
+
+export const { renderAxLegend } = axLegendSlice.actions;
+
+export default axLegendSlice.reducer;

src/app/store.ts

@@ -1,11 +1,15 @@
 //Import store from redux tool kit
 import { configureStore } from '@reduxjs/toolkit';
 import { mainSlice } from './slices/mainSlice';
+import { axLegendSlice } from './slices/AxSlices/axLegendSlice';
 
 //Export Store
 export const store = configureStore({
   reducer: {
     main: mainSlice.reducer,
+    axLegend: axLegendSlice.reducer,
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
 });
+
+export type RootState = ReturnType<typeof store.getState>

src/app/styles/components/_ax.scss

@@ -0,0 +1,6 @@
+// Ax.tsx
+#axControls {
+    display: inline-flex;
+    position: sticky;
+    left: 0;
+}

src/app/styles/layout/_stateContainer.scss

@@ -19,16 +19,15 @@
   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;
-  position: static;
-}
+// .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;
@@ -60,13 +59,14 @@
   height: 35px;
 }
 
-.navbar {
-  color: #ff0000;
-  // prevent navbar from scrolling with state/tree display
-  left: 0px;
-  z-index: 1;
-  @extend %disable-highlight;
-}
+// .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;

src/app/styles/main.scss

@@ -43,7 +43,7 @@
 // 5. Components
 @import 'components/buttons', 'components/actionComponent',
 'components/jsonTree', 'components/renderingFrequency',
-'components/performanceVisx', 'components/componentMap';
+'components/performanceVisx', 'components/componentMap', 'components/ax';
 
 // slider component
 @import './components/rc-slider', './components/sliderHandle';