Feature/garrett

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;
       }
 

src/app/components/StateRoute/StateRoute.tsx

@@ -17,50 +17,36 @@ import WebMetricsContainer from './WebMetrics/WebMetricsContainer';
 import { MainState, RootState, StateRouteProps } from '../../FrontendTypes';
 import AxContainer from './AxMap/AxContainer';
 
-/*
-  Loads the appropriate StateRoute view and renders the Map, Performance, History, Webmetrics, and Tree navbar buttons after clicking on the 'State' button located near the top rightmost corner.
-*/
-
 const History = require('./History').default;
-const NO_STATE_MSG = 'No state change detected. Trigger an event to change state'; // message to be returned if there has been no state change detected in our hooked/target app
+const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
 
 const StateRoute = (props: StateRouteProps) => {
   const {
-    axSnapshots, // from 'tabs[currentTab]' object in 'MainContainer'
-    snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
-    hierarchy: propsHierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
-    snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
-    viewIndex: propsViewIndex, // from 'tabs[currentTab]' object in 'MainContainer'
-    webMetrics, // from 'tabs[currentTab]' object in 'MainContainer'
-    currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
+    axSnapshots,
+    snapshot,
+    hierarchy: propsHierarchy,
+    snapshots,
+    viewIndex: propsViewIndex,
+    webMetrics,
+    currLocation,
   } = props;
 
   const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
   const { hierarchy: tabsHierarchy, sliderIndex, viewIndex: tabsViewIndex } = tabs[currentTab];
   const hierarchy = propsHierarchy || tabsHierarchy;
   const viewIndex = propsViewIndex || tabsViewIndex;
 
-  // lines 45 - 63 contains functionality to disable the accessibility features in Reactime.
   const dispatch = useDispatch();
   const [showTree, setShowTree] = useState(false);
-  const [selectedValue, setSelectedValue] = useState('disable');
   const [showParagraph, setShowParagraph] = useState(true);
 
   const enableAxTreeButton = () => {
     dispatch(toggleAxTree('toggleAxRecord'));
     dispatch(setCurrentTabInApp('AxTree'));
-    setSelectedValue('enable');
     setShowParagraph(false);
     setShowTree(true);
   };
 
-  const disableAxTree = () => {
-    dispatch(toggleAxTree('toggleAxRecord'));
-    setSelectedValue('disable');
-    setShowParagraph(true);
-    setShowTree(false);
-  };
-
   return (
     <div className='app-body'>
       <div className='main-navbar-container'>
@@ -128,39 +114,12 @@ const StateRoute = (props: StateRouteProps) => {
             element={
               showTree ? (
                 <div>
-                  <div className='accessibility-controls'>
-                    <input
-                      type='radio'
-                      id='enable'
-                      name='accessibility'
-                      value='enable'
-                      checked={selectedValue === 'enable'}
-                      onChange={() => {
-                        enableAxTreeButton();
-                      }}
-                    />
-                    <label htmlFor='enable'>Enable</label>
-
-                    <input
-                      type='radio'
-                      id='disable'
-                      name='accessibility'
-                      value='disable'
-                      checked={selectedValue === 'disable'}
-                      onChange={() => {
-                        disableAxTree();
-                      }}
-                    />
-                    <label htmlFor='disable'>Disable</label>
-                  </div>
-                  {showTree && (
-                    <AxContainer
-                      axSnapshots={axSnapshots}
-                      snapshot={snapshot}
-                      snapshots={snapshots}
-                      currLocation={currLocation}
-                    />
-                  )}
+                  <AxContainer
+                    axSnapshots={axSnapshots}
+                    snapshot={snapshot}
+                    snapshots={snapshots}
+                    currLocation={currLocation}
+                  />
                 </div>
               ) : (
                 <div>
@@ -180,24 +139,9 @@ const StateRoute = (props: StateRouteProps) => {
                       id='enable'
                       name='accessibility'
                       value='enable'
-                      checked={selectedValue === 'enable'}
-                      onChange={() => {
-                        enableAxTreeButton();
-                      }}
+                      onChange={enableAxTreeButton}
                     />
                     <label htmlFor='enable'>Enable</label>
-
-                    <input
-                      type='radio'
-                      id='disable'
-                      name='accessibility'
-                      value='disable'
-                      checked={selectedValue === 'disable'}
-                      onChange={() => {
-                        disableAxTree();
-                      }}
-                    />
-                    <label htmlFor='disable'>Disable</label>
                   </div>
                 </div>
               )

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]} />
               ))}