Merge pull request #2 from SanjayLavingia/hoverFrontendCom

Hover frontend com

Author: Theqwertypusher

src/app/actions/actions.ts

@@ -77,3 +77,9 @@ export const deleteTab = tab => ({
 export const resetSlider = () => ({
   type: types.SLIDER_ZERO,
 });
+
+export const onHover = () => ({
+  type: types.ON_HOVER, 
+  //the payload should be something to relate the component we're hovering and highlight that component on the DOM
+  payload: 'PAYLOAD FROM onHover inside of action.ts'
+})

src/app/components/ComponentMap.tsx

@@ -6,6 +6,8 @@
 
 import React, { useEffect, useCallback } from 'react';
 import * as d3 from 'd3';
+import { useStoreContext } from '../store'
+import { onHover } from '../actions/actions'
 
 interface componentMapProps {
   x: number;
@@ -22,7 +24,6 @@ const ComponentMap = (props: componentMapProps) => {
   let lastSnap: number | null = null;
   if (viewIndex < 0) lastSnap = snapshots.length - 1;
   else lastSnap = viewIndex;
-
   //external constants
   const width: any = '100vw';
   const height: any = '100vh';
@@ -34,6 +35,7 @@ const ComponentMap = (props: componentMapProps) => {
     return makeChart(data);
   }, [data]);
 
+  const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const makeChart = useCallback(
     (data) => {
       // Establish Constants
@@ -145,10 +147,12 @@ const ComponentMap = (props: componentMapProps) => {
 
         //TODO -> Alter incoming snapshots so there is useful data to show on hover.
         nodeEnter.on('mouseover', function (d: any, i: number): any {
-       
+            //onHover is an action in progress 
+            dispatch(onHover());
             d3.select(this)
               .append('text')
               .text(() => {
+                //i want to return to the node in d3 the values listed in a more readable way. Right now it's just a horizontal line of text
                 return JSON.stringify(d.data.state);
               })
               .attr('x', -25)
@@ -158,6 +162,8 @@ const ComponentMap = (props: componentMapProps) => {
               .attr('stroke', 'white')
               .attr('stroke-width', .5)
               .attr('id', `popup${i}`);
+
+              
 
         });
         nodeEnter.on('mouseout', function (d: any, i: number): any {

src/app/components/StateRoute.tsx

@@ -15,6 +15,7 @@ import Tree from './Tree';
 import ComponentMap from './ComponentMap';
 import PerfView from './PerfView';
 import AtomsRelationship from './AtomsRelationship.jsx';
+import { Console } from 'console';
 
 const History = require('./History').default;
 

src/app/constants/actionTypes.ts

@@ -13,3 +13,4 @@ export const NEW_SNAPSHOTS = 'NEW_SNAPSHOTS';
 export const SET_TAB = 'SET_TAB';
 export const DELETE_TAB = 'DELETE_TAB';
 export const SLIDER_ZERO = 'SLIDER_ZERO';
+export const ON_HOVER = 'ON_HOVER'; 

src/app/containers/MainContainer.tsx

@@ -23,7 +23,6 @@ const mixpanel = require("mixpanel").init("12fa2800ccbf44a5c36c37bc9776e4c0", {
 function MainContainer(): any {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
-
   // add event listeners to background script
   useEffect(() => {
     // only open port once
@@ -127,7 +126,6 @@ function MainContainer(): any {
     snapshots,
     hierarchy,
   } = tabs[currentTab];
-
   // if viewIndex is -1, then use the sliderIndex instead
   const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
   // cleaning hierarchy and snapshotView from stateless data

src/app/reducers/mainReducer.js

@@ -2,7 +2,7 @@
 /* eslint-disable prefer-const */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable no-param-reassign */
-import produce from 'immer';
+import {produce, original} from 'immer';
 import * as types from '../constants/actionTypes.ts';
 
 export default (state, action) => produce(state, draft => {
@@ -39,19 +39,28 @@ export default (state, action) => produce(state, draft => {
   };
 
   switch (action.type) {
+    case types.ON_HOVER: {
+      port.postMessage({
+        action: 'onHover',
+        payload: 'payload from Reducer ON_HOVER',
+        tabId: currentTab,
+      })
+      break; 
+    }
+
     case types.MOVE_BACKWARD: {
       if (snapshots.length > 0 && sliderIndex > 0) {
         const newIndex = sliderIndex - 1;
         // eslint-disable-next-line max-len
         // finds the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
         const nameFromIndex = findName(newIndex, hierarchy);
-
         port.postMessage({
           action: 'jumpToSnap',
           payload: snapshots[newIndex],
           index: newIndex,
           name: nameFromIndex,
           tabId: currentTab,
+          newProp: 'newPropFromReducer'
         });
         clearInterval(intervalId);
 

src/backend/index.ts

@@ -49,7 +49,6 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
       timeJump(payload, true); // * This sets state with given payload
       // Get the pathname from payload and add new entry to browser history
       // MORE: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
-
       // try to modify workInProgress tree from here
       // window.history.pushState('', '', getRouteURL(payload));
       break;
@@ -59,6 +58,9 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
     case 'setPause':
       mode.paused = payload;
       break;
+    case 'onHover':
+      // console.log('WE MADE IT ALL THE WAY FROM THE FRONTEND! HERE\'S THE PAYLOAD:', payload);
+      break;
     default:
       break;
   }

src/backend/linkFiber.ts

@@ -63,11 +63,9 @@ function getRecoilState(): any {
 function sendSnapshot(snap: Snapshot, mode: Mode): void {
   // Don't send messages while jumping or while paused
   if (mode.jumping || mode.paused) return;
-
   if (!snap.tree) {
     snap.tree = new Tree('root', 'root');
   }
-
   const payload = snap.tree.cleanTreeCopy();
   if (isRecoil) {
     getRecoilState();
@@ -170,6 +168,7 @@ function createTree(
   fromSibling = false
 ) {
   // Base case: child or sibling pointed to null
+
   if (!currentFiber) return null;
   if (!tree) return tree;
 
@@ -226,14 +225,13 @@ function createTree(
       stateNode.state,
       stateNode
     );
+
     newState = stateNode.state;
     componentFound = true;
   }
 
   let hooksIndex;
 
-
-
   const atomArray = [];
   atomArray.push(memoizedProps);
 
@@ -335,7 +333,6 @@ function createTree(
   } else {
     newNode = tree;
   }
-
   // Recurse on children
   if (child && !circularComponentTable.has(child)) {
     // If this node had state we appended to the children array,
@@ -369,7 +366,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
-
     const throttledUpdateSnapshot = throttle(() => updateSnapShotTree(snap, mode), 70);
     document.addEventListener('visibilitychange', onVisibilityChange);
     if (reactInstance && reactInstance.version) {

src/backend/timeJump.ts

@@ -1,3 +1,4 @@
+import { Console } from 'console';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable max-len */

src/extension/background.js

@@ -324,6 +324,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
     default:
       break;
   }
+  console.log('inside background.js, tabsObj:', tabsObj); 
   return true; // attempt to fix close port error
 });