Merge branch 'dev45' into performanceTab

Author: andytsou19

src/app/__tests__/ActionContainer.test.tsx

@@ -68,6 +68,11 @@ const state = {
           }],
         }],
       },
+      currLocation: {
+        index: 0,
+        name: 1,
+        branch: 0,
+      },
       sliderIndex: 0,
       viewIndex: -1,
     },
@@ -86,7 +91,7 @@ let wrapper;
 //conditional rendering in ActionContainer that shows/hides time-travel functionality
 
 beforeEach(() => {
-  wrapper = shallow(<ActionContainer actionView={true}/>);
+  wrapper = shallow(<ActionContainer actionView={true} />);
   useStoreContext.mockClear();
   dispatch.mockClear();
 });

src/app/actions/actions.ts

@@ -5,7 +5,7 @@ export const save = (tabsObj) => ({
   type: types.SAVE,
   payload: tabsObj,
 });
-export const deleteSeries = () =>({
+export const deleteSeries = () => ({
   type: types.DELETE_SERIES,
 })
 export const toggleMode = (mode) => ({
@@ -95,3 +95,8 @@ export const onHoverExit = (rtid) => ({
   type: types.ON_HOVER_EXIT,
   payload: rtid,
 });
+
+export const setCurrentLocation = (tabsObj) => ({
+  type: types.SET_CURRENT_LOCATION,
+  payload: tabsObj,
+})

src/app/components/History.tsx

@@ -105,9 +105,11 @@ function History(props: Record<string, unknown>) {
       .data(d3root.descendants())
       .enter()
       .append('g')
-      // .selectAll("g")
-      // .data(d3root.descendants())
-      // .join("g")
+      .style('cursor', 'pointer')
+      .on('click', d => {
+        dispatch(changeView(d.data.index));
+        dispatch(changeSlider(d.data.index));
+      })
       .attr('transform', d => `translate(${d.x},${d.y})`);
 
 
@@ -118,15 +120,6 @@ function History(props: Record<string, unknown>) {
         }
         return d.color ? d.color : '#555';
       })
-      .style('display', 'block')
-      .style('cursor', 'pointer')
-      .on('click', d => {
-        console.log('DEBUG >>> onclick d:', d);
-        console.log('DEBUG >>> Clicked on currlocation:', currLocation);
-        console.log('DEBUG >>> Clicked on d.data:', d.data.index);
-        dispatch(changeView(d.data.index));
-        dispatch(changeSlider(d.data.index));
-      })
       .attr('r', 14);
 
     node.append('text')
@@ -136,7 +129,6 @@ function History(props: Record<string, unknown>) {
       .clone(true)
       .lower()
       .attr('stroke', 'white');
-
     return svg.node();
   };
 

src/app/components/MainSlider.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Slider from 'rc-slider';
 import Tooltip from 'rc-tooltip';
 import { changeSlider, pause } from '../actions/actions';
 import { useStoreContext } from '../store';
+import { useEffect } from 'react';
 
 const { Handle } = Slider;
 
@@ -37,18 +38,26 @@ interface MainSliderProps {
 function MainSlider(props: MainSliderProps) {
   const { snapshotsLength } = props;
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
-  const { currLocation, sliderIndex } = tabs[currentTab];
+  const { currLocation } = tabs[currentTab];
+  const [sliderIndex, setSliderIndex] = useState(0);
 
   console.log('DEBUG >>> slider: ', currLocation);
 
+  useEffect(() => {
+    setSliderIndex(currLocation.index);
+  }, [currLocation])
+
   return (
     <Slider
       min={0}
       max={snapshotsLength - 1}
-      value={currLocation.index}
+      value={sliderIndex}
       onChange={(index: any) => {
-        const newIndex = index === -1 ? 0 : index;
-        dispatch(changeSlider(newIndex));
+        setSliderIndex(index);
+      }}
+      onAfterChange={() => {
+        console.log("DEBUG >>> sliderIndex: ", sliderIndex);
+        dispatch(changeSlider(sliderIndex));
         dispatch(pause());
       }}
       handle={handle}

src/app/constants/actionTypes.ts

@@ -16,4 +16,5 @@ export const SLIDER_ZERO = 'SLIDER_ZERO';
 export const ON_HOVER = 'ON_HOVER';
 export const ON_HOVER_EXIT = 'ON_HOVER_EXIT';
 export const SAVE = 'SAVE';
-export const DELETE_SERIES = 'DELETE_SERIES';
+export const DELETE_SERIES = 'DELETE_SERIES';
+export const SET_CURRENT_LOCATION = 'SET_CURRENT_LOCATION';

src/app/containers/MainContainer.tsx

@@ -9,6 +9,7 @@ import {
   setPort,
   setTab,
   deleteTab,
+  setCurrentLocation,
 } from '../actions/actions';
 import { useStoreContext } from '../store';
 import MPID from '../user_id/user_id';
@@ -44,6 +45,7 @@ function MainContainer(): any {
         sourceTab: number;
       }) => {
         const { action, payload, sourceTab } = message;
+        console.log("DEBUG >>> message: ", message);
         let maxTab;
         if (!sourceTab) {
           const tabsArray: any = Object.keys(payload);
@@ -71,6 +73,10 @@ function MainContainer(): any {
             console.log('this is the initial connect and settab', maxTab, payload);
             break;
           }
+          case 'setCurrentLocation': {
+            dispatch(setCurrentLocation(payload));
+            break;
+          }
           default:
         }
         return true;

src/app/reducers/mainReducer.js

@@ -306,6 +306,12 @@ export default (state, action) => produce(state, draft => {
       }
       break;
     }
+    case types.SET_CURRENT_LOCATION: {
+      const { payload } = action;
+      const { currLocation } = payload[currentTab];
+      tabs[currentTab].currLocation = currLocation;
+      break;
+    }
     default:
       throw new Error(`nonexistent action: ${action.type}`);
   }

src/backend/index.ts

@@ -42,7 +42,7 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
     case 'setPause':
       mode.paused = payload;
       break;
-      // maybe this isn't work react cohort 45
+    // maybe this isn't work react cohort 45
     case 'onHover':
       if (Array.isArray(payload)) {
         for (let i = 0; i < payload.length; i + 1) {
@@ -58,7 +58,7 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
         }
       }
       break;
-      // maybe this isn't work react cohort 45
+    // maybe this isn't work react cohort 45
     case 'onHoverExit':
       if (Array.isArray(payload)) {
         for (let i = 0; i < payload.length; i++) {

src/extension/background.js

@@ -10,8 +10,6 @@ const tabsObj = {};
 // Will store Chrome web vital metrics and their corresponding values.
 const metrics = {};
 
-let isRecordAfterJump = false;
-
 // This function will create the first instance of the test app's tabs object
 // which will hold test app's snapshots, link fiber tree info, chrome tab info, etc.
 function createTabObj(title) {
@@ -99,12 +97,7 @@ function countCurrName(rootNode, name) {
 function changeCurrLocation(tabObj, rootNode, index, name) {
   // index comes from the app's main reducer to locate the correct current location on tabObj
   // check if current node has the index wanted
-  console.log('DEBUG >>> rootNode.index: ', rootNode.index);
-  console.log('DEBUG >>> index: ', index);
   if (rootNode.index === index) {
-    console.log('DEBUG >>> jump index: ', index);
-    console.log('DEBUG >>> jump name: ', name);
-    console.log('DEBUG >>> jump hierachy: ', rootNode);
     tabObj.currLocation = rootNode;
     // Count number of nodes in the tree with name = next name.
     const currNameCount = countCurrName(tabObj.hierarchy, name + 1);
@@ -257,7 +250,12 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     case 'jumpToSnap': {
       console.log('DEBUG >>> in jumpToSnap action!')
       changeCurrLocation(tabsObj[tabId], tabsObj[tabId].hierarchy, index, name);
-      isRecordAfterJump = true;
+      if (portsArr.length > 0) {
+        portsArr.forEach(bg => bg.postMessage({
+          action: 'setCurrentLocation',
+          payload: tabsObj,
+        }));
+      }
       break;
     }
     // This injects a script into the app that you're testing Reactime on,
@@ -343,6 +341,8 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         break;
       }
 
+      console.log("DEBUG >>> reached previousSnap");
+
       // DUPLICATE SNAPSHOT CHECK
       const previousSnap = tabsObj[tabId].currLocation.stateSnapshot.children[0].componentData
         .actualDuration;
@@ -353,9 +353,6 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       if (reloaded[tabId]) {
         // don't add anything to snapshot storage if tab is reloaded for the initial snapshot
         reloaded[tabId] = false;
-      } else if (isRecordAfterJump) {
-        console.log('DEBUG >>> test currLocation: ', tabsObj[tabId].currLocation);
-        isRecordAfterJump = false;
       } else {
         tabsObj[tabId].snapshots.push(request.payload);
         //! INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN!!!!
@@ -366,12 +363,6 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
             new Node(request.payload, tabsObj[tabId]),
           );
         }
-        //  else {
-        //   sendToHierarchy(
-        //     tabsObj[tabId],
-        //     new NewNode(request.payload, tabsObj[tabId])
-        //   );
-        // }
       }
       // sends new tabs obj to devtools
       if (portsArr.length > 0) {