revised typescript, refactored file

Author: llam722

src/app/components/FrontendTypes.ts

@@ -0,0 +1,10 @@
+export interface PerfData {
+  barStack: BarStackProp[],
+  componentData?: Record<string, unknown>,
+  maxTotalRender: number,
+}
+
+interface BarStackProp {
+  snapshotId: string,
+  route: URL,
+}

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

@@ -11,6 +11,7 @@ import { Text } from '@visx/text';
 import { schemeSet3 } from 'd3-scale-chromatic';
 import { onHover, onHoverExit, save } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
+import { PerfData } from '../../FrontendTypes';
 
 /* TYPESCRIPT */
 
@@ -41,16 +42,16 @@ interface TooltipData {
 }
 
 interface BarGraphProps {
-    width: number,
-    height: number,
-    data: Record<string, unknown>,
-    comparison: unknown,
-    setRoute: () => void,
-    allRoutes: unknown,
-    filteredSnapshots: unknown,
-    snapshot: unknown,
-    setSnapshot: () => void
-  }
+  width: number,
+  height: number,
+  data: PerfData,
+  comparison: unknown,
+  setRoute: () => void,
+  allRoutes: unknown,
+  filteredSnapshots: unknown,
+  snapshot: unknown,
+  setSnapshot: () => void
+}
 
 /* DEFAULTS */
 const margin = {

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

@@ -15,6 +15,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
+import { PerfData } from '../../FrontendTypes';
 
 /* TYPESCRIPT */
 
@@ -48,7 +49,7 @@ interface TooltipData {
 interface BarGraphComparisonProps {
   width: number,
   height: number,
-  data: Record<string, unknown>,
+  data: PerfData,
   comparison: string | [],
   setSeries: () => void,
   series: unknown,

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

@@ -1,6 +1,8 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
+/* eslint-disable max-len */
+
 import React, { useState, useEffect } from 'react';
 import {
   MemoryRouter as Router,
@@ -15,7 +17,7 @@ import BarGraphComparison from './BarGraphComparison';
 import BarGraphComparisonActions from './BarGraphComparisonActions';
 import { useStoreContext } from '../../../store';
 import { setCurrentTabInApp } from '../../../actions/actions';
-import { Bar } from '@visx/shape';
+import { PerfData } from '../../FrontendTypes';
 
 interface BarStackProps {
   width: number;
@@ -146,13 +148,13 @@ const getSnapshotIds = (obj, snapshotIds = []): string[] => {
   return snapshotIds;
 };
 
-type BarStackProp = Record <string, unknown>
+// type BarStackProp = Record <string, unknown | URL | number>
 
-interface PerfData {
-  barStack: BarStackProp[],
-  componentData?: Record<string, unknown>,
-  maxTotalRender: 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 => {
@@ -294,7 +296,6 @@ const PerformanceVisx = (props: BarStackProps): JSX.Element => {
       return (
         <div>
           <BarGraph
-            maxHeight={maxHeight}
             data={data}
             width={width}
             height={height}