Merge pull request #23 from oslabs-beta/feature/garrett

Feature/garrett

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/AxMap/Ax.tsx

@@ -62,14 +62,15 @@ export default function AxTree(props) {
   const tooltipStyles: ToolTipStyles = {
     ...defaultStyles,
     minWidth: 60,
-    maxWidth: 300,
-    backgroundColor: 'rgb(15,15,15)',
-    color: 'white',
-    fontSize: '16px',
+    maxWidth: 250,
+    maxHeight: '300px',
     lineHeight: '18px',
-    fontFamily: 'Roboto',
-    zIndex: 100,
     pointerEvents: 'all !important',
+    margin: 0,
+    padding: 0,
+    borderRadius: '8px',
+    overflowY: 'auto',
+    overflowX: 'auto',
   };
 
   const [orientation, setOrientation] = useState('horizontal');
@@ -148,7 +149,7 @@ export default function AxTree(props) {
 
   return totalWidth < 10 ? null : (
     <div>
-      <div id='axControls'>
+      <div className='axControls'>
         <LinkControls
           orientation={orientation}
           linkType={linkType}
@@ -402,9 +403,8 @@ export default function AxTree(props) {
           }}
         >
           <div>
-            <div>
-              {/*tooltipData['name'].value cannot be referred to using dot notation so using brackets here overrides typescript's strict data typing which was interfering with accessiccing this property */}
-              <strong>{JSON.stringify(tooltipData['name'].value)}</strong>
+            <div className='tooltip-header'>
+              <h3 className='tooltip-title'>{tooltipData['name'].value}</h3>
             </div>
             <div>
               {/* Ax Node Info below names the tooltip title because of how its passed to the ToolTipDataDisplay container*/}

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

@@ -37,5 +37,3 @@ const AxContainer = (props: AxContainer) => {
 };
 
 export default AxContainer;
-
-

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

@@ -67,7 +67,7 @@ const ToolTipDataDisplay = ({ containerName, dataObj }) => {
   }
 
   return (
-    <div className='tooltipData' key={`${containerName}-data-container`}>
+    <div 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'"

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

@@ -40,7 +40,7 @@ const AxLinkControls = ({
 
       {linkType === 'step' && (
         <div className='control-group'>
-          <label className='control-label'>step:</label>
+          <label className='control-label'>Step:</label>
           <input
             onClick={(e) => e.stopPropagation()}
             type='range'

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

@@ -117,26 +117,13 @@ export default function ComponentMap({
     ...defaultStyles,
     minWidth: 60,
     maxWidth: 250,
+    maxHeight: '300px',
     lineHeight: '18px',
     pointerEvents: 'all !important',
     margin: 0,
     padding: 0,
     borderRadius: '8px',
-  };
-
-  const scrollStyle: {} = {
-    minWidth: '60',
-    maxWidth: '250',
-    minHeight: '20px',
-    maxHeight: '200px',
-    overflowY: 'scroll',
-    overflowWrap: 'break-word',
-  };
-
-  const formatRenderTime: string = (time: number): string => {
-    if (!time) return 'No time information';
-    const renderTime = time.toFixed(3);
-    return `${renderTime} ms `;
+    overflowY: 'auto',
   };
 
   const nodeList: [] = []; // create a nodeList array to store our nodes as a flat array
@@ -477,6 +464,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 +477,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 +531,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;
       }