Add base functionality for Save Series button

Author: Kevin Ngo

src/app/actions/actions.ts

@@ -1,22 +1,27 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import * as types from '../constants/actionTypes';
 
-export const toggleMode = mode => ({
+export const save = (tabsObj) => ({
+  type: types.SAVE,
+  payload: tabsObj,
+});
+
+export const toggleMode = (mode) => ({
   type: types.TOGGLE_MODE,
   payload: mode,
 });
 
-export const addNewSnapshots = tabsObj => ({
+export const addNewSnapshots = (tabsObj) => ({
   type: types.NEW_SNAPSHOTS,
   payload: tabsObj,
 });
 
-export const initialConnect = tabsObj => ({
+export const initialConnect = (tabsObj) => ({
   type: types.INITIAL_CONNECT,
   payload: tabsObj,
 });
 
-export const setPort = port => ({
+export const setPort = (port) => ({
   type: types.SET_PORT,
   payload: port,
 });
@@ -25,12 +30,12 @@ export const emptySnapshots = () => ({
   type: types.EMPTY,
 });
 
-export const changeView = index => ({
+export const changeView = (index) => ({
   type: types.CHANGE_VIEW,
   payload: index,
 });
 
-export const changeSlider = index => ({
+export const changeSlider = (index) => ({
   type: types.CHANGE_SLIDER,
   payload: index,
 });
@@ -54,22 +59,22 @@ export const pause = () => ({
   type: types.PAUSE,
 });
 
-export const startPlaying = intervalId => ({
+export const startPlaying = (intervalId) => ({
   type: types.PLAY,
   payload: intervalId,
 });
 
-export const importSnapshots = newSnaps => ({
+export const importSnapshots = (newSnaps) => ({
   type: types.IMPORT,
   payload: newSnaps,
 });
 
-export const setTab = tab => ({
+export const setTab = (tab) => ({
   type: types.SET_TAB,
   payload: tab,
 });
 
-export const deleteTab = tab => ({
+export const deleteTab = (tab) => ({
   type: types.DELETE_TAB,
   payload: tab,
 });
@@ -79,12 +84,12 @@ export const resetSlider = () => ({
 });
 
 export const onHover = (rtid) => ({
-  type: types.ON_HOVER, 
+  type: types.ON_HOVER,
   //the payload should be something to relate the component we're hovering and highlight that component on the DOM
-  payload: rtid
-})
+  payload: rtid,
+});
 
 export const onHoverExit = (rtid) => ({
   type: types.ON_HOVER_EXIT,
-  payload: rtid
-})
+  payload: rtid,
+});

src/app/components/PerformanceVisx.tsx

@@ -4,6 +4,8 @@ import RenderingFrequency from './RenderingFrequency';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import BarGraph from './BarGraph';
+import { save } from '../actions/actions';
+import { useStoreContext } from '../store';
 
 /* NOTES
 Issue - Not fully compatible with recoil apps. Reference the recoil-todo-test.
@@ -26,39 +28,42 @@ interface BarStackProps {
 /* DATA HANDLING HELPER FUNCTIONS */
 const traverse = (snapshot, data, currTotalRender = 0) => {
   if (!snapshot.children[0]) return;
-
+  console.log('data in PerformanceVisx >>>', data);
   // loop through snapshots
   snapshot.children.forEach((child, idx) => {
     const componentName = child.name + -[idx + 1];
 
     // Get component Rendering Time
-    const renderTime = Number(Number.parseFloat(child.componentData.actualDuration).toPrecision(5));
+    const renderTime = Number(
+      Number.parseFloat(child.componentData.actualDuration).toPrecision(5)
+    );
     // sums render time for all children
     currTotalRender += renderTime;
-    // components as keys and set the value to their rendering time 
-    data['barStack'][data.barStack.length - 1][componentName] = renderTime; 
-    
+    // components as keys and set the value to their rendering time
+    data['barStack'][data.barStack.length - 1][componentName] = renderTime;
+
     // Get component stateType
     if (!data.componentData[componentName]) {
       data.componentData[componentName] = {
         stateType: 'stateless',
         renderFrequency: 0,
         totalRenderTime: 0,
-        rtid: ''
+        rtid: '',
       };
-      if (child.state !== 'stateless') data.componentData[componentName].stateType = 'stateful';
+      if (child.state !== 'stateless')
+        data.componentData[componentName].stateType = 'stateful';
     }
     // increment render frequencies
     if (renderTime > 0) {
       data.componentData[componentName].renderFrequency++;
     }
 
-   // add to total render time
+    // add to total render time
     data.componentData[componentName].totalRenderTime += renderTime;
-    // Get rtid for the hovering feature 
+    // Get rtid for the hovering feature
     data.componentData[componentName].rtid = child.rtid;
     traverse(snapshot.children[idx], data, currTotalRender);
-  })
+  });
   // reassigns total render time to max render time
   data.maxTotalRender = Math.max(currTotalRender, data.maxTotalRender);
   return data;
@@ -67,7 +72,7 @@ const traverse = (snapshot, data, currTotalRender = 0) => {
 const getSnapshotIds = (obj, snapshotIds = []): string[] => {
   snapshotIds.push(`${obj.name}.${obj.branch}`);
   if (obj.children) {
-    obj.children.forEach(child => {
+    obj.children.forEach((child) => {
       getSnapshotIds(child, snapshotIds);
     });
   }
@@ -82,44 +87,66 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
     maxTotalRender: 0,
   };
   snapshots.forEach((snapshot, i) => {
-    perfData.barStack.push({snapshotId: snapshotsIds[i]});
+    perfData.barStack.push({ snapshotId: snapshotsIds[i] });
     traverse(snapshot, perfData);
   });
   return perfData;
 };
-  
+
+// interface saveData {
+//  snapshots: [];
+// }
+
 /* EXPORT COMPONENT */
 const PerformanceVisx = (props: BarStackProps) => {
   // hook used to dispatch onhover action in rect
   const { width, height, snapshots, hierarchy } = props;
 
+  // const [dispatch] = useStoreContext();
+  const [{ tabs, currentTab }, dispatch] = useStoreContext();
+
+  console.log('tabs',tabs)
+  console.log('currentTabs', currentTab)
+
   const [isToggled, setIsToggled] = useState('barStack');
   const toggleView = () => {
-    isToggled === 'frequencyCards' ? setIsToggled('barStack') : setIsToggled('frequencyCards');
-  }
+    isToggled === 'frequencyCards'
+      ? setIsToggled('barStack')
+      : setIsToggled('frequencyCards');
+  };
+  
   // filter and structure incoming data for VISX
   const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
-  
-    // if performance tab is too small it will not return VISX component
-    return  (
-      <div className='renderTab'>
-        <FormControlLabel style={{"margin-left":"30px", "margin-top": "0px"}}
+
+  const toStorage = {
+    currentTab,
+    title: tabs[currentTab]['title'],
+    data,
+  }
+
+  // Extract individual data from chrome.locals.storage and visualize
+  // Need to setup dropdown menu .  Fill dropdown with tabsID (sessions)
+  // When you select dropdown, change view with ReactRouter
+  // have side-by-side comparison with visx bargraphs in alternate view
+
+  // if performance tab is too small it will not return VISX component
+  return (
+    <div className="renderTab">
+      <FormControlLabel
+        style={{ 'margin-left': '30px', 'margin-top': '0px' }}
         control={
-          <Switch
-            onChange={toggleView}
-            name="checkedB"
-            color="primary"
-          />
+          <Switch onChange={toggleView} name="checkedB" color="primary" />
         }
         label="Component Details"
       />
-      {/* <button onClick={toggleView}>Toggle Button</button> */}
-        <div style={{"display": "flex", "justify-content": "center"}}>
-          {isToggled === 'frequencyCards' 
-            ? <RenderingFrequency  data={data.componentData}/> 
-            : <BarGraph data={data} width={width} height={height}/>
-          }
-        </div>
+      <button onClick={() => dispatch(save(toStorage))}>Save Series</button>
+      <div style={{ display: 'flex', 'justify-content': 'center' }}>
+        {isToggled === 'frequencyCards' ? (
+          <RenderingFrequency data={data.componentData} />
+        ) : (
+          <BarGraph data={data} width={width} height={height} />
+        )}
+      </div>
     </div>
   );
 };

src/app/constants/actionTypes.ts

@@ -13,5 +13,6 @@ 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'; 
-export const ON_HOVER_EXIT = 'ON_HOVER_EXIT'; 
+export const ON_HOVER = 'ON_HOVER';
+export const ON_HOVER_EXIT = 'ON_HOVER_EXIT';
+export const SAVE = 'SAVE';

src/app/containers/ActionContainer.tsx

@@ -9,29 +9,45 @@ import { useStoreContext } from '../store';
 
 const resetSlider = () => {
   const slider = document.querySelector('.rc-slider-handle');
-  if (slider) { slider.setAttribute('style', 'left: 0'); }
+  if (slider) {
+    slider.setAttribute('style', 'left: 0');
+  }
 };
 
 function ActionContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
   let actionsArr = [];
-  const hierarchyArr:any[] = [];
+  const hierarchyArr: any[] = [];
 
   // function to traverse state from hiararchy and also getting information on display name and component name
-  const displayArray = (obj:{stateSnapshot:{children:any[]}, name:number, branch:number, index:number, children?:[]}) => {
-    if (obj.stateSnapshot.children.length > 0 && obj.stateSnapshot.children[0] && obj.stateSnapshot.children[0].state && obj.stateSnapshot.children[0].name) {
-      const newObj:Record<string, unknown> = {
+  const displayArray = (obj: {
+    stateSnapshot: { children: any[] };
+    name: number;
+    branch: number;
+    index: number;
+    children?: [];
+  }) => {
+    if (
+      obj.stateSnapshot.children.length > 0 &&
+      obj.stateSnapshot.children[0] &&
+      obj.stateSnapshot.children[0].state &&
+      obj.stateSnapshot.children[0].name
+    ) {
+      const newObj: Record<string, unknown> = {
         index: obj.index,
         displayName: `${obj.name}.${obj.branch}`,
         state: obj.stateSnapshot.children[0].state,
         componentName: obj.stateSnapshot.children[0].name,
-        componentData: JSON.stringify(obj.stateSnapshot.children[0].componentData) === '{}' ? '' : obj.stateSnapshot.children[0].componentData,
+        componentData:
+          JSON.stringify(obj.stateSnapshot.children[0].componentData) === '{}'
+            ? ''
+            : obj.stateSnapshot.children[0].componentData,
       };
       hierarchyArr.push(newObj);
     }
     if (obj.children) {
-      obj.children.forEach(element => {
+      obj.children.forEach((element) => {
         displayArray(element);
       });
     }
@@ -42,7 +58,7 @@ function ActionContainer() {
   if (hierarchy) displayArray(hierarchy);
 
   // handles keyboard presses, function passes an event and index of each action-component
-  function handleOnKeyDown(e:KeyboardEvent, i:number) {
+  function handleOnKeyDown(e: KeyboardEvent, i: number) {
     let currIndex = i;
     // up array key pressed
     if (e.keyCode === 38) {
@@ -64,26 +80,37 @@ function ActionContainer() {
     }
   }
 
-  actionsArr = hierarchyArr.map((snapshot:{state?: Record<string, unknown>, key: string, displayName:string, componentName:string, componentData:{actualDuration: number}|undefined}, index) => {
-    const selected = index === viewIndex;
-    const last = viewIndex === -1 && index === hierarchyArr.length - 1;
-    return (
-      <Action
-        key={`action${index}`}
-        index={index}
-        state={snapshot.state}
-        displayName={snapshot.displayName}
-        componentName={snapshot.componentName}
-        componentData={snapshot.componentData}
-        selected={selected}
-        last={last}
-        dispatch={dispatch}
-        sliderIndex={sliderIndex}
-        handleOnkeyDown={handleOnKeyDown}
-        viewIndex={viewIndex}
-      />
-    );
-  });
+  actionsArr = hierarchyArr.map(
+    (
+      snapshot: {
+        state?: Record<string, unknown>;
+        key: string;
+        displayName: string;
+        componentName: string;
+        componentData: { actualDuration: number } | undefined;
+      },
+      index
+    ) => {
+      const selected = index === viewIndex;
+      const last = viewIndex === -1 && index === hierarchyArr.length - 1;
+      return (
+        <Action
+          key={`action${index}`}
+          index={index}
+          state={snapshot.state}
+          displayName={snapshot.displayName}
+          componentName={snapshot.componentName}
+          componentData={snapshot.componentData}
+          selected={selected}
+          last={last}
+          dispatch={dispatch}
+          sliderIndex={sliderIndex}
+          handleOnkeyDown={handleOnKeyDown}
+          viewIndex={viewIndex}
+        />
+      );
+    }
+  );
 
   return (
     <div className="action-container">

src/app/containers/ButtonsContainer.tsx

@@ -49,6 +49,8 @@ function howToUseHandler() {
 
 function ButtonsContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  console.log('useStore in ButtonsContainer', useStoreContext())
+  console.log('dispatch in ButtonsContainer', useStoreContext().dispatch)
   const {
     snapshots,
     mode: { paused, persist },