Merge pull request #8 from oslabs-beta/feature-ui-changes

MarkTeets · web-flow · commit 3c596b87f063 · 2023-05-16T16:50:17.000-06:00
Feature UI changes
diff --git a/src/app/__tests__/WebMetrics.test.tsx b/src/app/__tests__/WebMetrics.test.tsx
@@ -2,8 +2,14 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import WebMetrics from '../components/WebMetrics';
+import { useStoreContext } from '../store';
 
 jest.mock('react-apexcharts', () => ({ __esModule: true, default: () => <div /> }));
+const dispatch = jest.fn();
+// jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());
+jest.mock('../store');
+const mockedStoreContext = jest.mocked(useStoreContext);
+mockedStoreContext.mockImplementation(() => [, dispatch]);
 
 describe('WebMetrics graph testing', () => {
   test('should have 1 div with class name "metric" ', () => {
diff --git a/src/app/components/Diff.tsx b/src/app/components/Diff.tsx
@@ -15,7 +15,7 @@ function Diff(props: DiffProps): JSX.Element {
   const [mainState] = useStoreContext();
   const { currentTab, tabs } = mainState; // k/v pairs of mainstate store object being created
   const { snapshots, viewIndex, sliderIndex } = tabs[currentTab];
-  let previous:unknown;
+  let previous: unknown;
 
   // previous follows viewIndex or sliderIndex
   if (viewIndex !== -1) {
@@ -66,7 +66,6 @@ function Diff(props: DiffProps): JSX.Element {
   const html: StatelessCleanning = formatters.html.format(delta, previousDisplay);
   if (show) formatters.html.showUnchanged();
   else formatters.html.hideUnchanged();
-
   if (previous === undefined || delta === undefined) {
     return (
       <div className='no-data-message'>
diff --git a/src/app/components/FrontendTypes.ts b/src/app/components/FrontendTypes.ts
@@ -32,6 +32,10 @@ export interface TreeProps {
     state?: string | object;
     stateSnaphot?: object;
     children?: any[];
+    snapshots?:[];
+    currLocation?:object;
+
+
   };
 }
 
diff --git a/src/app/components/StateRoute/History.tsx b/src/app/components/StateRoute/History.tsx
@@ -135,7 +135,6 @@ function History(props: Record<string, unknown>): JSX.Element {
       const treeRoot = d3.hierarchy(data);
       return d3.tree().size([innerWidth, innerHeight])(treeRoot);
     };
-    // const hierarchy = d3.hierarchy(root);
     const d3root = tree(root);
 
     const currNode = labelCurrentNode(d3root);
@@ -171,36 +170,81 @@ function History(props: Record<string, unknown>): JSX.Element {
       .enter()
       .append('g')
       .style('cursor', 'pointer')
+      .attr('class', `snapshotNode`)
       .on('click', (event, d) => {
         dispatch(changeView(d.data.index));
         dispatch(changeSlider(d.data.index));
-      })
-      // added to display state change information to node tree
-      .on('mouseover', (event, d) => {
-        const [x, y] = d3.pointer(event);
+
         // created popup div and appended it to display div(returned in this function)
         // D3 doesn't utilize z-index for priority,
         // rather decides on placement by order of rendering
         // needed to define the return div with a className to have a target to append to
         // with the correct level of priority
-        const div = d3
-          .select('.display')
-          .append('div')
-          .attr('class', 'tooltip')
-          .style('left', `${event.clientX}px`)
-          .style('top', `${event.clientY}px`);
-        d3.selectAll('.tooltip').html(findDiff(d.data.index));
+        function renderToolTip() {
+          const [x, y] = d3.pointer(event);
+          const div = d3
+            .select('.display:first-child')
+            .append('div')
+            .attr('class', `tooltip`)
+            .attr('id', `tt-${d.data.index}`)
+            .style('left', `${event.clientX - 10}px`)
+            .style('top', `${event.clientY - 10}px`)
+            .style('max-height', `25%`)
+            .style('overflow', `scroll`);
+          d3.selectAll('.tooltip').html(findDiff(d.data.index));
+        }
+
+        if (d3.selectAll('.tooltip')._groups['0'].length === 0) {
+          renderToolTip();
+        } else {
+          if (d3.selectAll(`#tt-${d.data.index}`)._groups['0'].length === 0) {
+            d3.selectAll('.tooltip').remove();
+            renderToolTip();
+          }
+        }
       })
-      .on('mouseout', (d) => {
-        // when appending divs on mouseover the appended dives would not disappear
-        // when using D3's 'transition' on mouseover/mouseout
-        // solution: remove all tooltop divs on mouseout
-        d3.selectAll('.tooltip').remove();
+      .on('mouseenter', function (event, d) {
+        const [x, y] = d3.pointer(event);
+        if (d3.selectAll('.tooltip')._groups['0'].length === 0) {
+          const div = d3
+            .select('.display:first-child')
+            .append('div')
+            .attr('class', `tooltip`)
+            .attr('id', `tt-${d.data.index}`)
+            .style('left', `${event.clientX + 0}px`)
+            .style('top', `${event.clientY + 0}px`)
+            .style('max-height', `25%`)
+            .style('overflow', `auto`)
+            .on('mouseenter', function (event, d) {})
+            .on('mouseleave', function (event, d) {
+              d3.selectAll('.tooltip').remove().style('display', 'hidden');
+            });
+
+          d3.selectAll('.tooltip').html(findDiff(d.data.index));
+        }
+      })
+      .on('mouseleave', function (event, d) {
+        if (event.relatedTarget.id !== `tt-${d.data.index}`) {
+          d3.selectAll('.tooltip').transition().delay(100).remove();
+        }
       })
-      .attr('transform', (d) => `translate(${d.x},${d.y})`);
+
+      .attr('transform', function (d) {
+        return `translate(${d.x},${d.y})`;
+      });
+
+    const tooltip = d3
+      .select('.tooltip')
+      .on('mousemove', function (event, d) {
+        d3.select('.tooltip').style('opacity', '1');
+      })
+      .on('mouseleave', function (event, d) {
+        d3.selectAll('.tooltip').remove();
+      });
 
     node
       .append('circle')
+
       .attr('fill', (d) => {
         if (d.data.index === currLocation.index) {
           return 'red';
diff --git a/src/app/components/StateRoute/StateRoute.tsx b/src/app/components/StateRoute/StateRoute.tsx
@@ -77,7 +77,7 @@ const StateRoute = (props: StateRouteProps) => {
   // if true invoke render Tree with snapshot
   const renderTree = () => {
     if (hierarchy) {
-      return <Tree snapshot={snapshot} />;
+      return <Tree snapshot={snapshot} snapshots={snapshots} currLocation={currLocation} />;
     }
     return <div className='noState'>{NO_STATE_MSG}</div>;
   };
diff --git a/src/app/components/StateRoute/Tree.tsx b/src/app/components/StateRoute/Tree.tsx
@@ -3,7 +3,7 @@ import JSONTree from 'react-json-tree';
 
 import { setCurrentTabInApp } from '../../actions/actions';
 import { useStoreContext } from '../../store';
-import { TreeProps } from '../../components/FrontendTypes'
+import { TreeProps } from '../../components/FrontendTypes';
 
 const colors = {
   scheme: 'paraiso',
@@ -33,20 +33,19 @@ const getItemString = (type, data: { state?: object | string; name: string; chil
   return <span />;
 };
 
-
 const Tree = (props: TreeProps) => {
-  const { snapshot } = props;
+  const { snapshot, snapshots, currLocation } = props;
   const [store, dispatch] = useStoreContext();
 
   useEffect(() => {
-    dispatch(setCurrentTabInApp('history'));
+    dispatch(setCurrentTabInApp('tree'));
   }, []);
 
   return (
     <>
       {snapshot && (
         <JSONTree
-          data={snapshot}
+          data={snapshots[currLocation.index] || snapshot}
           theme={{ extend: colors, tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}
diff --git a/src/app/components/Tutorial.tsx b/src/app/components/Tutorial.tsx
@@ -223,6 +223,97 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           },
         ];
         break;
+      case 'webmetrics':
+        steps = [
+          {
+            title: 'Webmetrics Tab',
+            element: '.web-metrics-container',
+            intro: 'This section will show 4 webmetrics for your page when it loads.',
+            position: 'top',
+          },
+          {
+            title: 'LCP',
+            element: document.querySelectorAll('.metric')[0],
+            intro:
+              '<strong>Largest Contentful Paint</strong><br/>The amount of time it takes for the largest image, video or text block within the viewport to be fully rendered and interactive.',
+            position: 'top',
+          },
+
+          {
+            title: 'FID',
+            element: document.querySelectorAll('.metric')[1],
+            intro:
+              '<strong>First Input Delay</strong><br/>A measurement of load responsiveness, the time from the first user interaction (for example, a click) to the browser responding to that interaction.',
+            position: 'top',
+          },
+
+          {
+            title: 'FCP',
+            element: document.querySelectorAll('.metric')[2],
+            intro:
+              '<strong>First Contentful Paint</strong><br/>The amount of time it takes to render the first DOM element of any variety',
+            position: 'top',
+          },
+
+          {
+            title: 'TTFB',
+            element: document.querySelectorAll('.metric')[3],
+            intro:
+              "<strong>Time To First Byte</strong><br/>The amount of time it takes for a user's browser to receive the first byte of page content from the server.",
+            position: 'top',
+          },
+        ];
+        break;
+      case 'history':
+        steps = [
+          {
+            title: 'History Tab',
+            element: '.display',
+            intro:
+              'The history tab shows all snapshots as a timeline and includes branches to represent divergent state history created from time traveling backwards and making new state changes.',
+            position: 'top',
+          },
+          {
+            title: 'Viewing History Snapshot',
+            element: document.querySelectorAll('.snapshotNode')[0],
+            intro:
+              'Each node will represent a snapshot in the page. <ul><li>A single snapshot will show as a node while multiple snapshots will be represented as a timeline.</li><li>Highlighting over one will show any state changes compared to the previous snapshot. </li><li>Clicking a node will set the snapshot as the current one.</li></ul>',
+            position: 'top',
+          },
+          {
+            title: 'Navigating through Snapshots',
+            element: '.routedescription',
+            intro: 'All snapshots can also be seen and navigated here as well.',
+            position: 'right',
+          },
+
+          {
+            title: 'Clicking on Jump Button',
+            element: document.querySelectorAll('.individual-action')[0],
+            intro:
+              'The button on the right of each snapshot can be used to jump to a given point in state to view the state history at that point.',
+            position: 'right',
+          },
+          {
+            title: 'Renaming The Snapshot',
+            element: document.querySelectorAll('.action-component-text')[0],
+            intro:
+              'A snapshot can be renamed to provided more clarity or distinguish specific snapshots.',
+            position: 'left',
+          },
+        ];
+        break;
+      case 'tree':
+        steps = [
+          {
+            title: 'Tree Tab',
+            element: '.display',
+            intro:
+              'The tree tab can be used to view a text display of the state snapshots in a JSON format.',
+            position: 'top',
+          },
+        ];
+        break;
       default:
         steps = [
           {
diff --git a/src/app/components/WebMetrics.tsx b/src/app/components/WebMetrics.tsx
@@ -88,12 +88,10 @@ const radialGraph = (props) => {
     },
   };
 
-  // This updates currentTabInApp which is used to determine what tutorial to display (depending on the active tab within Reactime)
-  // Code is commented out because it interferes with the testing suite
-  // const [ store, dispatch] = useStoreContext();
-  // useEffect(() => {
-  //   dispatch(setCurrentTabInApp('history'));
-  // }, []);
+  const [store, dispatch] = useStoreContext();
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('webmetrics'));
+  }, []);
 
   const optionsCursorTrueWithMargin: OptionsCursorTrueWithMargin = {
     followCursor: true,
diff --git a/src/app/containers/MainContainer.tsx b/src/app/containers/MainContainer.tsx
@@ -17,7 +17,6 @@ import {
 } from '../actions/actions';
 import { useStoreContext } from '../store';
 
-
 function MainContainer(): JSX.Element {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port } = store;
@@ -154,17 +153,18 @@ function MainContainer(): JSX.Element {
           setActionView={setActionView}
           toggleActionContainer={toggleActionContainer}
         />
-        {snapshots.length ?
+        {snapshots.length ? (
           <div className='state-container-container'>
-          <StateContainer
-            webMetrics={webMetrics}
-            viewIndex={viewIndex}
-            snapshot={snapshotDisplay}
-            hierarchy={hierarchyDisplay}
-            snapshots={snapshots}
-            currLocation={currLocation}
-          />
-        </div> : null}
+            <StateContainer
+              webMetrics={webMetrics}
+              viewIndex={viewIndex}
+              snapshot={snapshotDisplay}
+              hierarchy={hierarchyDisplay}
+              snapshots={snapshots}
+              currLocation={currLocation}
+            />
+          </div>
+        ) : null}
         <TravelContainer snapshotsLength={snapshots.length} />
         <ButtonsContainer />
       </div>

Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@ const StateRoute = (props: StateRouteProps) => {`
`77`	`77`	`// if true invoke render Tree with snapshot`
`78`	`78`	`const renderTree = () => {`
`79`	`79`	`if (hierarchy) {`
`80`		`- return <Tree snapshot={snapshot} />;`
	`80`	`+ return <Tree snapshot={snapshot} snapshots={snapshots} currLocation={currLocation} />;`
`81`	`81`	`}`
`82`	`82`	`return <div className='noState'>{NO_STATE_MSG}</div>;`
`83`	`83`	`};`