Merge pull request #8 from josephiswhere/master

fixed hover

Author: dangitbobbeh

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';
 
 /**
@@ -22,7 +23,7 @@ interface ActionProps {
   state?: Record<string, unknown>;
   viewIndex: number;
   handleOnkeyDown: (e: any, i: number) => any;
-  logChangedState: (index: number) => void;
+  logChangedState: (index: number) => any;
 }
 
 /**
@@ -90,6 +91,12 @@ 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;
@@ -105,25 +112,36 @@ const Action = (props: ActionProps): JSX.Element => {
       style={index > sliderIndex ? { color: '#5f6369' } : {}}
       tabIndex={index}
     >
-      <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>
+      <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/WebMetrics.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Charts from 'react-apexcharts';
 import ReactHover, { Trigger, Hover } from 'react-hover';
+
 const radialGraph = (props) => {
   const state = {
     series: [props.series],

src/app/containers/ActionContainer.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import Action from '../components/Action';
+import ReactHtmlParser from 'react-html-parser';
 import { diff, formatters } from 'jsondiffpatch';
 import SwitchAppDropdown from '../components/SwitchApp';
 import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
@@ -62,35 +63,25 @@ function ActionContainer(props) {
       return newObj;
     };
     // displays stateful data
-    //console.log("snapshots: ", snapshots);
+    console.log('snapshots[index - 1]: ', snapshots[index - 1]);
     const previousDisplay = statelessCleanning(snapshots[index - 1]);
     //const currentDisplay = statelessCleanning(snapshots[index]);
     //console.log("AC previos display: ", previousDisplay);
     // diff function returns a comparison of two objects, one has an updated change
     // just displays stateful data
-    const delta = diff(previousDisplay, snapshots[index]);
+    const delta = diff(previousDisplay, snapshots[index]); //I dont htink stateless cleaning is necissary
     console.log('AC delta', delta);
     // return delta
     const changedState = findStateChangeObj(delta);
     //const previousDisplayState = findStateChangeObj(previousDisplay);
     //return formatDeltaPopUp(changedState, previousDisplayState);
-    console.log('AC Changed State: ', changedState);
-    return changedState;
+    console.log('AC Changed State at 0: ', changedState[0]);
+    const html = formatters.html.format(changedState[0]);
+    const output = ReactHtmlParser(html);
+    console.log('AC output :', output);
+    return output;
   }
 
-  // function findStateChangeObj2(delta, changedState = []) {
-  //   while (delta.children) {
-  //     Object.keys(delta.children).forEach((child) => {
-  //       if (child.state && child.state[0] !== "stateless") {
-  //         console.log('stateful child: ', child);
-  //         changedState.push(child.state);
-  //       }
-  //       return changedState.push(findStateChangeObj2(child, changedState));
-  //     });
-  //   }
-  //   return changedState;
-  // }
-
   function findStateChangeObj(delta, changedState = []) {
     if (!delta.children && !delta.state) {
       // console.log('snapshot', snapshot);
@@ -104,8 +95,14 @@ function ActionContainer(props) {
       return changedState;
     }
     // console.log('snapshot outside if', snapshot);
-    return findStateChangeObj(delta.children[0], changedState);
+    Object.keys(delta.children).forEach((child) => {
+      //if (isNaN(child) === false) {
+      changedState.push(...findStateChangeObj(delta.children[child]));
+      //}
+    });
+    return changedState;
   }
+
   // function to traverse state from hiararchy and also getting information on display name and component name
   const displayArray = (obj: {
     stateSnapshot: { children: any[] };

src/app/styles/components/_actionComponent.scss

@@ -1,7 +1,7 @@
 .action-component {
   padding: 5px 10px;
   display: grid;
-  grid-template-columns: 5fr 1fr;
+  grid-template-columns: none;
   align-items: center;
   height: 20px;
   background-color: $brand-color;
@@ -10,10 +10,22 @@
   border-color: $border-color;
   cursor: pointer;
   overflow: hidden;
-  @extend %disable-highlight
+  @extend %disable-highlight;
 }
 
-.action-component-text{
+// .action-component {
+//   padding: 5px 10px;
+//   display: flex;
+//   height: 20px;
+//   background-color: $brand-color;
+//   border-bottom-style: solid;
+//   border-bottom-width: 1px;
+//   border-color: $border-color;
+//   cursor: pointer;
+//   overflow: hidden;
+//   @extend %disable-highlight;
+// }
+.action-component-text {
   margin-bottom: 8px;
 }
 
@@ -27,5 +39,15 @@
 }
 
 .action-component:focus {
-  outline:  none;
+  outline: none;
+}
+
+.action-component-trigger {
+  display: grid;
+  grid-template-columns: 5fr 1fr;
+  align-items: center;
+  height: 20px;
+  cursor: pointer;
+  overflow: hidden;
+  @extend %disable-highlight;
 }

src/app/styles/components/_buttons.scss

@@ -324,14 +324,14 @@ aside {
   height: 4px;
   border-radius: 4px;
   transition: transform 0.15s;
-  background-color:$blue-brand;
+  background-color: $blue-brand;
 }
 
 .toggle i {
   top: 46%;
   left: 4%;
   display: block;
-  background:$blue-brand;
+  background: $blue-brand;
 }
 
 .toggle i::before {