Merge pull request #245 from StackOverFlowWhereArtThou/fixesForCI

Release of version 9

Author: StackOverFlowWhereArtThou

README.md

@@ -45,9 +45,9 @@
 
 Currently, Reactime supports React apps using stateful components and Hooks, including frameworks like Gatsby and Next.js, with beta support for Recoil and Context API.
 
-<b>Reactime version 8.0</b> allows you to run A/B testing on your application by storing a "series" of state data snapshots. At any stage in the dev cycle, devs could run Reactime again and select any past series to do an A/B test with the current series of snapshots.  With Save Series, developers have access to view trends in their App's component render times during development by comparing the previous series of snapshots.
+<b>Reactime version 9.0</b> allows you to run A/B testing on your application by storing a "series" of state data snapshots. At any stage in the dev cycle, devs could run Reactime again and select any past series to do an A/B test with the current series of snapshots.  With Save Series, developers have access to view trends in their App's component render times during development by comparing the previous series of snapshots.
 
-Reactime 8.0 fixes previous version bugs and incorporates improved visualizations for component relationships. Reactime 8.0 includes expanded [typedoc](https://typedoc.org/api/) documentation for developers looking to contribute to the source code.
+Reactime 9.0 fixes previous version bugs and incorporates improved user experience for saved snapshot series. 
 
 After installing Reactime, you can test its functionalities with your React application in development mode.
 
@@ -152,6 +152,10 @@ After cloning this repository, developers can simply run `npm run docs` at the r
 - [Deep in Weeds with Reactime, Concurrent React_fiberRoot, and Browser History Caching](https://itnext.io/deep-in-the-weeds-with-reactime-concurrent-react-fiberroot-and-browser-history-caching-7ce9d7300abb)
 
 ## <b>Authors</b>
+- **Harry Fox** - [@StackOverFlowWhereArtThou](https://github.com/StackOverFlowWhereArtThou)
+- **Nathan Richardson** - [@BagelEnthusiast](https://github.com/BagelEnthusiast)
+- **David Bernstein** - [@dangitbobbeh](https://github.com/dangitbobbeh)
+- **Joseph Stern** - [@josephiswhere](https://github.com/josephiswhere)
 - **Dennis Lopez** - [@DennisLpz](https://github.com/DennisLpz)
 - **Cole Styron** - [@colestyron](https://github.com/C-STYR)
 - **Ali Rahman** - [@CourageWolf](https://github.com/CourageWolf)

src/app/__tests__/action.test.tsx

@@ -11,7 +11,7 @@ const Action = require('../components/Action').default;
 
 configure({ adapter: new (Adapter as any)() });
 
-describe('unit testing for Action.jsx', () => {
+describe('unit testing for Action.tsx', () => {
   let wrapper;
   const props = {
     key: 'actions2',
@@ -22,6 +22,7 @@ describe('unit testing for Action.jsx', () => {
     dispatch: jest.fn(),
     displayName: '3.0',
     componentName: 'App',
+    logChangedState: jest.fn(),
     componentData: {
       actualDuration: 3.5,
     },

src/app/components/Action.tsx

@@ -3,6 +3,7 @@
 /* eslint-disable react/no-unused-prop-types */
 
 import React from 'react';
+import ReactHover, { Trigger, Hover } from 'react-hover';
 import { changeView, changeSlider } from '../actions/actions';
 
 /**
@@ -15,13 +16,14 @@ interface ActionProps {
   last: boolean;
   index: number;
   sliderIndex: number;
-  dispatch: (a:any) => void;
+  dispatch: (a: any) => void;
   displayName: string;
   componentName: string;
-  componentData: {actualDuration: number}|undefined;
+  componentData: { actualDuration: number } | undefined;
   state?: Record<string, unknown>;
   viewIndex: number;
-  handleOnkeyDown: (e: any, i: number) => void;
+  handleOnkeyDown: (e: any, i: number) => any;
+  logChangedState: (index: number) => any;
 }
 
 /**
@@ -42,8 +44,17 @@ interface ActionProps {
 // viewIndex and handleonkeyDown added to props
 const Action = (props: ActionProps): JSX.Element => {
   const {
-    selected, last, index, sliderIndex, dispatch, displayName, componentName,
-    componentData, viewIndex, handleOnkeyDown,
+    selected,
+    last,
+    index,
+    sliderIndex,
+    dispatch,
+    displayName,
+    componentName,
+    componentData,
+    viewIndex,
+    handleOnkeyDown,
+    logChangedState,
   } = props;
 
   /**
@@ -54,7 +65,7 @@ const Action = (props: ActionProps): JSX.Element => {
     if (!componentData || !componentData.actualDuration) {
       return 'NO TIME';
     }
-    let seconds:number| string;
+    let seconds: number | string;
     let miliseconds: any = componentData.actualDuration;
     if (Math.floor(componentData.actualDuration) > 60) {
       seconds = Math.floor(componentData.actualDuration / 60);
@@ -78,39 +89,56 @@ const Action = (props: ActionProps): JSX.Element => {
   };
   const displayTime = cleanTime();
 
+  const optionsCursorTrueWithMargin = {
+    followCursor: true,
+    shiftX: 20,
+    shiftY: 0,
+  };
+
   return (
     <div
       // Invoking keyboard functionality; functionality is in ActionContainer;
       onKeyDown={(e) => handleOnkeyDown(e, viewIndex)}
-      className={selected || last ? 'action-component selected' : 'action-component'}
+      className={
+        selected || last ? 'action-component selected' : 'action-component'
+      }
       onClick={() => {
         dispatch(changeView(index));
       }}
-      role="presentation"
+      role='presentation'
       style={index > sliderIndex ? { color: '#5f6369' } : {}}
       tabIndex={index}
     >
-      <div className="action-component-text">
-        {`${displayName}:  ${componentName !== 'nameless' ? componentName : ''} `}
-      </div>
-      <button
-        className="time-button"
-        type="button"
-      >
-        {displayTime}
-      </button>
-      <button
-        className="jump-button"
-        onClick={(e: any): void => {
-          e.stopPropagation();
-          dispatch(changeSlider(index));
-          dispatch(changeView(index));
-        }}
-        tabIndex={index}
-        type="button"
-      >
-        Jump
-      </button>
+      <ReactHover options={optionsCursorTrueWithMargin}>
+        <Trigger type='trigger'>
+          <div className='action-component-trigger' style={index > sliderIndex ? { color: '#5f6369' } : {}}> 
+            <div className='action-component-text'>
+              {`${displayName}:  ${componentName !== 'nameless' ? componentName : ''} `}
+              {/* {`displayName: ${displayName}`} */}
+            </div>
+            <button className='time-button' type='button'>
+              {displayTime}
+            </button>
+            <button
+              className='jump-button'
+              onClick={(e: any): void => {
+                e.stopPropagation();
+                dispatch(changeSlider(index));
+                dispatch(changeView(index));
+              }}
+              tabIndex={index}
+              type='button'
+            >
+              Jump
+            </button>
+          </div>
+        </Trigger>
+        <Hover type='hover'>
+          <div style={{ padding: '0.5rem 1rem' }} id='hover-box'>
+            <p>{logChangedState(index)}</p>
+          </div>
+        </Hover>
+      </ReactHover>
     </div>
   );
 };

src/app/components/BarGraph.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BarStack } from '@visx/shape';
 import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
@@ -109,19 +109,19 @@ const BarGraph = (props) => {
     data,
   };
 
-  const animateButton = function (e) {
-    e.preventDefault;
-    e.target.classList.add('animate');
-    e.target.innerHTML = 'Saved!';
-    setTimeout(function () {
-      e.target.innerHTML = 'Save Series';
-      e.target.classList.remove('animate');
-    }, 1000);
-  };
-  const classname = document.getElementsByClassName('save-series-button');
-  for (let i = 0; i < classname.length; i++) {
-    classname[i].addEventListener('click', animateButton, false);
-  }
+  // use this to animate the save series button. It
+  useEffect(() => {
+    const saveButtons = document.getElementsByClassName('save-series-button');
+    for (let i = 0; i < saveButtons.length; i++) {
+      if (tabs[currentTab].seriesSavedStatus) {
+        saveButtons[i].classList.add('animate');
+        saveButtons[i].innerHTML = 'Saved!';
+      } else {
+        saveButtons[i].innerHTML = 'Save Series';
+        saveButtons[i].classList.remove('animate');
+      };
+    };
+  });
   return (
     <div className='bargraph-position'>
       <button