removed Series and ActionObj ts from PerformanceVisx to be imported

Author: llam722

src/app/components/FrontendTypes.ts

@@ -1,5 +1,19 @@
 import { SeriesPoint } from '@visx/shape/lib/types';
 
+// PerformanceVisx types
+
+export interface Series {
+    data: {
+      barStack: ActionObj[],
+    }
+    name: string
+  }
+
+  interface ActionObj {
+    name: unknown,
+    seriesName: unknown,
+  }
+
 export interface PerfData {
   barStack: BarStackProp[],
   componentData?: Record<string, unknown>,
@@ -9,6 +23,7 @@ export interface PerfData {
 interface BarStackProp {
   snapshotId: string,
   route: URL,
+  currentTab?: string,
 }
 
 // On-hover data for BarGraph/BarGraphComparison.tsx
@@ -42,11 +57,12 @@ interface BarGraphBase {
   width: number,
   height: number,
   data: PerfData,
-  comparison: string | [],
+  comparison: string | Series | [],
 }
+
 export interface BarGraphComparisonProps extends BarGraphBase {
   setSeries: () => void,
-  series: unknown,
+  series: number,
   setAction: () => void,
 }
 

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import React, { useEffect } from 'react';
 import { BarStack } from '@visx/shape';
 import { Group } from '@visx/group';
@@ -77,10 +78,10 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   // We'll then use it in the renderingScale function and compare
   // with the render time of the current tab.
   // The max render time will determine the Y-axis's highest number.
-  const calculateMaxTotalRender = series => {
-    const currentSeriesBarStacks = !comparison[series]
+  const calculateMaxTotalRender = serie => {
+    const currentSeriesBarStacks = !comparison[serie]
       ? []
-      : comparison[series].data.barStack;
+      : comparison[serie].data.barStack;
     if (currentSeriesBarStacks.length === 0) return 0;
     let currentMax = -Infinity;
     for (let i = 0; i < currentSeriesBarStacks.length; i += 1) {

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

@@ -17,7 +17,7 @@ import BarGraphComparison from './BarGraphComparison';
 import BarGraphComparisonActions from './BarGraphComparisonActions';
 import { useStoreContext } from '../../../store';
 import { setCurrentTabInApp } from '../../../actions/actions';
-import { PerfData } from '../../FrontendTypes';
+import { PerfData, Series } from '../../FrontendTypes';
 
 interface PerformanceVisxProps {
   width: number;
@@ -148,14 +148,6 @@ const getSnapshotIds = (obj, snapshotIds = []): string[] => {
   return snapshotIds;
 };
 
-// type BarStackProp = Record <string, unknown | URL | number>
-
-// interface PerfData {
-//   barStack: BarStackProp[],
-//   componentData?: Record<string, unknown>,
-//   maxTotalRender: number,
-// }
-
 // Returns array of snapshot objs each with components and corresponding render times.
 const getPerfMetrics = (snapshots, snapshotsIds): PerfData => {
   const perfData: PerfData = {
@@ -189,18 +181,6 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
     dispatch(setCurrentTabInApp('performance'));
   }, [dispatch]);
 
-  type Series = {
-    data: {
-      barStack: ActionObj[],
-    }
-    name: string
-  }
-
-  type ActionObj = {
-    name: unknown,
-    seriesName: unknown,
-  }
-
   // Creates the actions array used to populate the compare actions dropdown
   const getActions = () => {
     const project = localStorage.getItem('project');