tool tip with ignored state and properties

Author: evaSUry

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

@@ -3,11 +3,10 @@ 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 '../ComponentMap/ToolTipDataDisplay';
+import ToolTipDataDisplay from './ToolTipDataDisplay';
 import { ToolTipStyles } from '../../../FrontendTypes';
 import { localPoint } from '@visx/event';
 
@@ -202,11 +201,11 @@ export default function AxTree(props) {
     pointerEvents: 'all !important',
   };
 
-  const formatRenderTime = (time: number): string => {
-    if (!time) return 'No time information';
-    const renderTime = time.toFixed(3);
-    return `${renderTime} ms `;
-  };
+  // const formatRenderTime = (time: number): string => {
+  //   if (!time) return 'No time information';
+  //   const renderTime = time.toFixed(3);
+  //   return `${renderTime} ms `;
+  // };
 
 
 
@@ -315,14 +314,6 @@ 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
-  });
-
   return totalWidth < 10 ? null : (
     <div>
       <LinkControls
@@ -601,13 +592,8 @@ export default function AxTree(props) {
                 <strong>{JSON.stringify(tooltipData['name'].value)}</strong>
               </div>
             <div>
-              <ToolTipDataDisplay containerName='Props' dataObj={tooltipData} />
-              <ToolTipDataDisplay
-                containerName='State'
-                dataObj={
-                  tooltipData
-                }
-              />
+              <ToolTipDataDisplay containerName='Ax State' dataObj={tooltipData} />
+              {/* <ToolTipDataDisplay containerName='State'dataObj={tooltipData}/> */}
             </div>
           </div>
         </TooltipInPortal>

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

@@ -40,15 +40,25 @@ const ToolTipDataDisplay = ({ containerName, dataObj }) => {
       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) {
-      if (typeof dataObj[key] === 'string') {
-        try {
-          data[key] = JSON.parse(dataObj[key]);
-        } catch {
+      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];
         }
-      } else {
-        data[key] = dataObj[key];
       }
     }
     /*

src/extension/background.js

@@ -17,7 +17,10 @@ const metrics = {};
 // function pruning the chrome ax tree and pulling the relevant properties
 const pruneAxTree = (axTree) => {
   const axArr = [];
+  let orderCounter = 0
+  
   for (const node of axTree) {
+
     let {
       backendDOMNodeId,
       childIds,
@@ -30,34 +33,61 @@ const pruneAxTree = (axTree) => {
       role
     } = node;
 
+    // let order;
+ 
     if(!name){
       if(ignored){
-        name = {value: `ignored node: ${ignoredReasons[0].name}`};
+        name = {value: 'ignored node'};
       }
       else{
-        name = {value: 'visible node with no name'};
+        name = {value: 'no name'};
       }
     }
     if(!name.value){
-      name.value = 'visible node with no name';
+      name.value = 'no name';
     }
-
+    //if the node is ignored, it should be given an order number as it won't be read at all
+    // if(ignored){
+    //   order = null;
+    // }
+    // else{
+    //   order = orderCounter++;
+    // }
     if (role.type === 'role') {
       const axNode = {
         backendDOMNodeId: backendDOMNodeId,
         childIds: childIds,
         ignored: ignored,
+        ignoredReasons: ignoredReasons,
         name: name,
         nodeId: nodeId,
         ignoredReasons: ignoredReasons,
         parentId: parentId,
         properties: properties,
+        // order: order,
       };
-  
       axArr.push(axNode);
     }
   }
-  console.log('axArr: ', axArr);
+  
+  // Sort nodes by backendDOMNodeId in ascending order
+  //try with deep copy
+  // //aria properties
+  // console.log('axArr before : ', axArr);
+  // axArr.sort((a, b) => b.backendDOMNodeId - a.backendDOMNodeId);
+  
+  // Assign order based on sorted position
+  for (const axNode of axArr) {
+    // console.log('current axnode order number: ', axNode.order)
+    // console.log('this iterations node', axNode);
+    if (!axNode.ignored) { // Assuming you only want to assign order to non-ignored nodes
+      axNode.order = orderCounter++;
+    } else {
+      axNode.order = null; // Or keep it undefined, based on your requirement
+    }
+    // console.log('current axnode order number: ', axNode.order)
+  }
+  // console.log('axArr after: ', axArr);
   return axArr;
 };