Migrated ComponentMap, PerformanceVisx, and Tree to RTK

Author: Christopher Stamper

src/app/RTKslices.tsx

@@ -1,5 +1,6 @@
 import { createSlice, current } from '@reduxjs/toolkit';
 import { InitialStateProps } from './FrontendTypes';
+import _ from 'lodash';
 
 const initialState: InitialStateProps = { // we initialize what our initialState is here
     port: null,
@@ -431,7 +432,22 @@ export const mainSlice = createSlice({
       const { tabs, currentTab } = state;
       tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: action.payload }
 
-    }
+    },
+    toggleExpanded: (state, action) => {
+      const { tabs, currentTab } = state;
+      // find correct node from currLocation and toggle isExpanded
+      const checkChildren = (node) => {
+        if (_.isEqual(node, action.payload))
+          node.isExpanded = !node.isExpanded;
+        else if (node.children) {
+          node.children.forEach(child => {
+            checkChildren(child);
+          });
+        }
+      };
+      checkChildren(tabs[currentTab].currLocation.stateSnapshot);
+    },
+
   },
 })
 
@@ -456,7 +472,8 @@ export const {
   resetSlider,
   toggleMode,
   importSnapshots,
-  tutorialSaveSeriesToggle
+  tutorialSaveSeriesToggle,
+  toggleExpanded,
 } =  mainSlice.actions
 
 

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -18,8 +18,9 @@ import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
 import ToolTipDataDisplay from './ToolTipDataDisplay';
-import { toggleExpanded, setCurrentTabInApp } from '../../../actions/actions';
-import { useStoreContext } from '../../../store';
+import { toggleExpanded, setCurrentTabInApp } from '../../../RTKslices';
+// import { useStoreContext } from '../../../store';
+import { useDispatch } from 'react-redux';
 import { LinkTypesProps, DefaultMargin, ToolTipStyles } from '../../../FrontendTypes'
 
 const defaultMargin: DefaultMargin = {
@@ -41,7 +42,8 @@ export default function ComponentMap({
   const [linkType, setLinkType] = useState('diagonal'); // We create a local state "linkType" and set it to a string 'diagonal'. 
   const [stepPercent, setStepPercent] = useState(0.5); // We create a local state "stepPercent" and set it to a number '0.5'. This will be used to scale the Map component's link: Step to 50%
   const [selectedNode, setSelectedNode] = useState('root'); // We create a local state "selectedNode" and set it to a string 'root'. 
-  const [, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function to get access to our dispatch function
+  // const [, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function to get access to our dispatch function
+  const dispatch = useDispatch();
 
   const toolTipTimeoutID = useRef(null); //useRef stores stateful data that’s not needed for rendering.
 

src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx

@@ -8,8 +8,9 @@ import RenderingFrequency from './RenderingFrequency';
 import BarGraph from './BarGraph';
 import BarGraphComparison from './BarGraphComparison';
 import BarGraphComparisonActions from './BarGraphComparisonActions';
-import { useStoreContext } from '../../../store';
-import { setCurrentTabInApp } from '../../../actions/actions';
+// import { useStoreContext } from '../../../store';
+import { useDispatch, useSelector } from 'react-redux';
+import { setCurrentTabInApp } from '../../../RTKslices';
 import { PerfData, Series, PerformanceVisxProps } from '../../../FrontendTypes';
 
 const collectNodes = (snaps, componentName) => {
@@ -177,7 +178,9 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
     snapshots, // from 'tabs[currentTab]' object in 'MainContainer'
     hierarchy // from 'tabs[currentTab]' object in 'MainContainer'
   } = props;
-  const [{ currentTabInApp }, dispatch] = useStoreContext();
+  // const [{ currentTabInApp }, dispatch] = useStoreContext();
+  const dispatch = useDispatch();
+  const { currentTabInApp } = useSelector((state: any) => state.main);
   const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
   const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
   const [series, setSeries] = useState(true);

src/app/components/StateRoute/Tree.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import JSONTree from 'react-json-tree'; // React JSON Viewer Component
-import { setCurrentTabInApp } from '../../actions/actions';
-import { useStoreContext } from '../../store';
+import { setCurrentTabInApp } from '../../RTKslices';
+// import { useStoreContext } from '../../store';
+import { useDispatch } from 'react-redux';
 import { TreeProps } from '../../FrontendTypes';
 
 /*
@@ -43,7 +44,8 @@ const Tree = (props: TreeProps) => {
     currLocation // from 'tabs[currentTab]' object in 'MainContainer'
   } = props;
   // @ts-ignore
-  const [store, dispatch] = useStoreContext();
+  // const [store, dispatch] = useStoreContext();
+  const dispatch = useDispatch();
 
   useEffect(() => {
     dispatch(setCurrentTabInApp('tree')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'tree' to facilitate render.