finished styling provider consumer panel and added hover tool tip display for root node

Author: garrettlchow

demo-app-next/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

demo-app-next/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -12,8 +16,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

src/app/FrontendTypes.ts

@@ -108,12 +108,12 @@ export interface ActionContainerProps {
   actionView: boolean;
   setActionView: React.Dispatch<React.SetStateAction<boolean>>;
   toggleActionContainer: () => void;
-  snapshots: any
-  currLocation: any
+  snapshots: any;
+  currLocation: any;
 }
 
 export interface ProvConContainerProps {
-currentSnapshot: any; 
+  currentSnapshot: any;
 }
 
 export interface StateContainerProps {
@@ -399,4 +399,22 @@ export interface AxContainer {
   };
   snapshots: [];
   currLocation: object;
-}
+}
+
+export interface FilteredNode {
+  name?: string;
+  state?: any;
+  hooksState?: any;
+  props?: any;
+  componentData?: {
+    context?: any;
+    hooksState?: any;
+    props?: any;
+  };
+  children?: FilteredNode[];
+  context?: any;
+}
+
+export interface FilteredNodeChildren {
+  [key: string]: FilteredNode;
+}

src/app/components/Actions/DropDown.tsx

@@ -13,8 +13,8 @@ const DropDown = ({
   };
 
   const options = [
-    { value: 'TimeJump', label: 'TimeJump' },
-    { value: 'Provider/Consumer', label: 'Provider/Consumer' },
+    { value: 'Time Jump', label: 'Time Jump' },
+    { value: 'Providers / Consumers', label: 'Providers / Consumers' },
   ];
 
   return (

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

@@ -477,6 +477,7 @@ export default function ComponentMap({
 
                   return (
                     <Group top={top} left={left} key={key} className='rect'>
+                      // Replace the root node rect rendering block with this:
                       {node.depth === 0 && (
                         <rect
                           className='compMapRoot'
@@ -489,9 +490,26 @@ export default function ComponentMap({
                             dispatch(toggleExpanded(node.data));
                             hideTooltip();
                           }}
+                          onMouseEnter={(event) => {
+                            if (hasDisplayableData(node.data)) {
+                              if (toolTipTimeoutID.current !== null) {
+                                clearTimeout(toolTipTimeoutID.current);
+                                hideTooltip();
+                              }
+                              toolTipTimeoutID.current = null;
+                              handleMouseAndClickOver(event, node.data);
+                            }
+                          }}
+                          onMouseLeave={() => {
+                            if (hasDisplayableData(node.data)) {
+                              toolTipTimeoutID.current = setTimeout(() => {
+                                hideTooltip();
+                                toolTipTimeoutID.current = null;
+                              }, 300);
+                            }
+                          }}
                         />
                       )}
-
                       {/* This creates the rectangle boxes for each component
                        and sets it relative position to other parent nodes of the same level. */}
                       {node.depth !== 0 && (
@@ -526,7 +544,6 @@ export default function ComponentMap({
                           }}
                         />
                       )}
-
                       {/* Display text inside of each component node */}
                       <text
                         className={

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

@@ -70,11 +70,9 @@ const ToolTipDataDisplay = ({ data }) => {
     if (isReducer && parsedContent) {
       // Only try to format if we have valid content
       const formattedData = formatReducerData(parsedContent);
-      console.log('formatted data', formattedData);
 
       // Check if we have any formatted data to display
       if (Object.keys(formattedData).length === 0) {
-        console.log('formatted data length', Object.keys(formattedData).length);
         return null;
       }
 

src/app/containers/ActionContainer.tsx

@@ -17,7 +17,7 @@ import RecordButton from '../components/Actions/RecordButton';
 // resetSlider locates the rc-slider elements on the document and resets it's style attributes
 
 function ActionContainer(props: ActionContainerProps): JSX.Element {
-  const [dropdownSelection, setDropdownSelection] = useState('TimeJump');
+  const [dropdownSelection, setDropdownSelection] = useState('Time Jump');
   const actionsEndRef = useRef(null as unknown as HTMLDivElement);
 
   const dispatch = useDispatch();
@@ -210,10 +210,10 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
             </Button>
           </div>
           <div className='snapshots'>
-            {dropdownSelection === 'Provider/Consumer' && (
+            {dropdownSelection === 'Providers / Consumers' && (
               <ProvConContainer currentSnapshot={currLocation.stateSnapshot} />
             )}
-            {dropdownSelection === 'TimeJump' &&
+            {dropdownSelection === 'Time Jump' &&
               Object.keys(routes).map((route, i) => (
                 <RouteDescription key={`route${i}`} actions={routes[route]} />
               ))}