Merge branch 'develop' into jesse/enableAxTreeButtons

Author: jguerrero35

src/app/FrontendTypes.ts

@@ -54,6 +54,7 @@ export interface TooltipData {
   x: number;
   y: number;
   color: string;
+  name?: string;
 }
 
 export interface snapshot {

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

@@ -1,12 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } 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 { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import ToolTipDataDisplay from './ToolTipDataDisplay';
+import { ToolTipStyles } from '../../../FrontendTypes';
+import { localPoint } from '@visx/event';
+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)',
@@ -162,6 +170,50 @@ export default function AxTree(props) {
   let totalWidth = width;
   let totalHeight = height;
 
+
+
+  const toolTipTimeoutID = useRef(null); //useRef stores stateful data that’s not needed for rendering.
+  const {
+    tooltipData, // value/data that tooltip may need to render
+    tooltipLeft, // number used for tooltip positioning
+    tooltipTop, // number used for tooltip positioning
+    tooltipOpen, // boolean whether the tooltip state is open or closed
+    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
+  console.log('tool tip data: ', tooltipData);
+  // let nameVal = JSON.stringify(tooltipData)
+  // console.log('nameVal', nameVal);
+  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
+  } = useTooltipInPortal({
+    // Visx hook
+    detectBounds: true, // use TooltipWithBounds
+    scroll: true, // when tooltip containers are scrolled, this will correctly update the Tooltip position
+  });
+
+  const tooltipStyles: ToolTipStyles = {
+    ...defaultStyles,
+    minWidth: 60,
+    maxWidth: 300,
+    backgroundColor: 'rgb(15,15,15)',
+    color: 'white',
+    fontSize: '16px',
+    lineHeight: '18px',
+    fontFamily: 'Roboto',
+    zIndex: 100,
+    pointerEvents: 'all !important',
+  };
+
+  // const formatRenderTime = (time: number): string => {
+  //   if (!time) return 'No time information';
+  //   const renderTime = time.toFixed(3);
+  //   return `${renderTime} ms `;
+  // };
+
+
+
   const [layout, setLayout] = useState('cartesian');
   const [orientation, setOrientation] = useState('horizontal');
   const [linkType, setLinkType] = useState('diagonal');
@@ -266,45 +318,49 @@ export default function AxTree(props) {
   populateNodeAxArr(rootAxNode);
   console.log('nodeAxArr: ', nodeAxArr);
 
-  const {
-    containerRef, // Access to the container's bounding box. This will be empty on first render.
-  } = useTooltipInPortal({
-    // Visx hook
-    detectBounds: true, // use TooltipWithBounds
-    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}
-        />
+         onClick={() => {
+            hideTooltip();
+          }}/>
         <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}
@@ -409,6 +465,19 @@ export default function AxTree(props) {
                   } else {
                     aspect = Math.max(aspect, 0.2);
                   }
+                  const handleMouseAndClickOver = (event): void => {
+                    const coords = localPoint(event.target.ownerSVGElement, event);
+                    const tooltipObj = { ...node.data };
+                    console.log("tooltipobj: ", tooltipObj);
+
+                    showTooltip({
+                      tooltipLeft: coords.x,
+                      tooltipTop: coords.y,
+                      tooltipData: tooltipObj,
+                      // this is where the data for state and render time is displayed
+                      // but does not show props functions and etc
+                    });
+                  };
 
                   return (
                     <Group top={top} left={left} key={key} className='rect'>
@@ -425,6 +494,7 @@ export default function AxTree(props) {
                           rx={node.children ? 4 : 10}
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
+                            hideTooltip();
                           }}
                         />
                       )}
@@ -448,6 +518,40 @@ export default function AxTree(props) {
                           rx={node.children ? 4 : 10}
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
+                            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. */
+
+                          onMouseEnter={(event) => {
+                            /** This 'if' statement block checks to see if you've just left another component node
+                             * by seeing if there's a current setTimeout waiting to close that component node's
+                             * tooltip (see onMouseLeave immediately below). If so it clears the tooltip generated
+                             * from that component node so a new tooltip for the node you've just entered can render. */
+                            if (toolTipTimeoutID.current !== null) {
+                              clearTimeout(toolTipTimeoutID.current);
+                              hideTooltip();
+                            }
+                            // Removes the previous timeoutID to avoid errors
+                            toolTipTimeoutID.current = null;
+                            //This generates a tooltip for the component node the mouse has entered.
+                            handleMouseAndClickOver(event);
+                          }}
+                          // Mouse Leave Rect (Component Node) --------------------------------------------------------------------------
+                          /** This onMouseLeave event fires when the mouse leaves a component node.
+                           * The supplied event listener callback generates a setTimeout call which gives the
+                           * mouse a certain amount of time between leaving the current component node and
+                           * closing the tooltip for that node.
+                           * If the mouse enters the tooltip before the timeout delay has passed, the
+                           * setTimeout event will be canceled. */
+                          onMouseLeave={() => {
+                            // Store setTimeout ID so timeout can be cleared if necessary
+                            toolTipTimeoutID.current = setTimeout(() => {
+                              // hideTooltip unmounts the tooltip
+                              hideTooltip();
+                              toolTipTimeoutID.current = null;
+                            }, 300);
                           }}
                         />
                       )}
@@ -476,6 +580,45 @@ export default function AxTree(props) {
           </Tree>
         </Group>
       </svg>
+      {tooltipOpen && tooltipData && (
+        <TooltipInPortal
+          // set this to random so it correctly updates with parent bounds
+          key={Math.random()}
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={tooltipStyles}
+          //------------- Mouse Over TooltipInPortal--------------------------------------------------------------------
+          /** After the mouse enters the tooltip, it's able to persist by clearing the setTimeout
+           *  that would've unmounted it */
+          onMouseEnter={() => {
+            clearTimeout(toolTipTimeoutID.current);
+            toolTipTimeoutID.current = null;
+          }}
+          //------------- Mouse Leave TooltipInPortal -----------------------------------------------------------------
+          /** When the mouse leaves the tooltip, the tooltip unmounts */
+          onMouseLeave={() => {
+            hideTooltip();
+          }}
+        >
+          <div>
+            <div>
+                <strong>{JSON.stringify(tooltipData['name'].value)}</strong>
+              </div>
+            <div>
+              <ToolTipDataDisplay containerName='Ax Node Info' dataObj={tooltipData} />
+              {/* <ToolTipDataDisplay containerName='State'dataObj={tooltipData}/> */}
+            </div>
+          </div>
+        </TooltipInPortal>
+      )}
+      
+      {/* ax Legend */}
+      <div>
+        { axLegendButtonClicked ? 
+          <AxLegend /> : ''
+        }
+      </div>
+      
     </div>
   );
 }

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { JSONTree } from 'react-json-tree';
+
+/*
+  Code that show's the tooltip of our JSON tree
+*/
+
+const colors = {
+  scheme: 'paraiso',
+  author: 'jan t. sott',
+  base00: '#2f1e2e',
+  base01: '#41323f',
+  base02: '#4f424c',
+  base03: '#776e71',
+  base04: '#8d8687',
+  base05: '#a39e9b',
+  base06: '#b9b6b0',
+  base07: '#e7e9db',
+  base08: '#ef6155',
+  base09: '#824508', //base09 is orange for booleans and numbers. This base in particular fails to match the entered color.
+  // base09: '#592bad', // alternative purple
+  base0A: '#fec418',
+  base0B: '#48b685',
+  base0C: '#5bc4bf',
+  base0D: '#06b6ef',
+  base0E: '#815ba4',
+  base0F: '#e96ba8',
+};
+
+const ToolTipDataDisplay = ({ containerName, dataObj }) => {
+  const printableObject = {}; // The key:value properties of printableObject will be rendered in the JSON Tree
+
+  if (!dataObj) {
+    // If state is null rather than an object, print "State: null" in tooltip
+    printableObject[containerName] = dataObj;
+  } else {
+    /*
+      Props often contain circular references. 
+      Messages from the backend must be sent as JSON objects (strings). 
+      JSON objects can't contain circular ref's, so the backend filters out problematic values by stringifying the values of object properties and ignoring any values that fail the conversion due to a circular ref. The following logic converts these values back to JS so they display clearly and are collapsible.
+    */
+    const data = {};
+    //ignored false vs true
+    //ignored reasons here
+    //&& key = name? / order?
+    for (const key in dataObj) {
+      console.log('keys in dataObj in tooltiptotalDisplay: ', key);
+      if(key === 'properties' || key === 'ignored' || key === 'ignoredReasons'){// loop through properties, adding them to the data object
+
+        if (typeof dataObj[key] === 'string') {
+          //if 'key' is ignored, put the ignored key and its value on the data object
+          //if ignoredReasons has length it should loop through adding the reasons names to the data object
+          //actually might only need to give it the properties and ignored and ignored reasons and it'll take care of the rest
+          try {
+            data[key] = JSON.parse(dataObj[key]);
+          } catch {
+            data[key] = dataObj[key];
+          }
+        } else {
+          data[key] = dataObj[key];
+        }
+      }
+    }
+    /*
+      Adds container name (State, Props, future different names for hooks) at top of object so everything nested in it will collapse when you click on it.
+    */
+    printableObject[containerName] = data;
+  }
+
+  return (
+    <div className='tooltipData' key={`${containerName}-data-container`}>
+      <JSONTree
+        data={printableObject} // data to be rendered, a snapshot object
+        theme={{ extend: colors, tree: () => ({ className: `tooltipData-JSONTree` }) }} // theme set to a base16 theme that has been extended to include  "className: 'json-tree'"
+        shouldExpandNodeInitially={() => true} // determines if node should be expanded when it first renders (root is expanded by default)
+        hideRoot={true} // hides the root node
+      />
+    </div>
+  );
+};
+
+export default ToolTipDataDisplay;

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/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -109,6 +109,7 @@ export default function ComponentMap({
     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
 
+  console.log('tooltipData component map: ', tooltipData);
   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