modularized by removing typescripts into FrontendTypes.ts and imported into BarGraphComparison.tsx, BarGraph.tsx

Author: llam722

src/app/components/FrontendTypes.ts

@@ -1,3 +1,5 @@
+import { SeriesPoint } from '@visx/shape/lib/types';
+
 export interface PerfData {
   barStack: BarStackProp[],
   componentData?: Record<string, unknown>,
@@ -8,3 +10,50 @@ interface BarStackProp {
   snapshotId: string,
   route: URL,
 }
+
+// On-hover data for BarGraph/BarGraphComparison.tsx
+export interface TooltipData {
+  bar: SeriesPoint<snapshot>;
+  key: string;
+  index: number;
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+  color: string;
+}
+
+export interface snapshot {
+  snapshotId?: string;
+  children: [];
+  componentData: any;
+  name: string;
+  state: string;
+}
+
+export interface margin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+interface BarGraphBase {
+  width: number,
+  height: number,
+  data: PerfData,
+  comparison: string | [],
+}
+export interface BarGraphComparisonProps extends BarGraphBase {
+  setSeries: () => void,
+  series: unknown,
+  setAction: () => void,
+}
+
+export interface BarGraphProps extends BarGraphBase{
+  setRoute: () => void,
+  allRoutes: unknown,
+  filteredSnapshots: unknown,
+  snapshot: unknown,
+  setSnapshot: () => void
+}

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

@@ -11,47 +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 */
-
-interface margin {
-  top: number;
-  right: number;
-  bottom: number;
-  left: number;
-}
-
-interface snapshot {
-  snapshotId?: string;
-  children: [];
-  componentData: any;
-  name: string;
-  state: string;
-}
-
-interface TooltipData {
-  bar: SeriesPoint<snapshot>;
-  key: string;
-  index: number;
-  height: number;
-  width: number;
-  x: number;
-  y: number;
-  color: string;
-}
-
-interface BarGraphProps {
-  width: number,
-  height: number,
-  data: PerfData,
-  comparison: unknown,
-  setRoute: () => void,
-  allRoutes: unknown,
-  filteredSnapshots: unknown,
-  snapshot: unknown,
-  setSnapshot: () => void
-}
+import { snapshot, TooltipData, margin, BarGraphProps } from '../../FrontendTypes';
 
 /* DEFAULTS */
 const margin = {

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

@@ -1,7 +1,5 @@
-// @ts-nocheck
 import React, { useEffect } from 'react';
 import { BarStack } from '@visx/shape';
-import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
 import { Grid } from '@visx/grid';
 import { AxisBottom, AxisLeft } from '@visx/axis';
@@ -15,46 +13,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 */
-
-interface margin {
-  top: number;
-  right: number;
-  bottom: number;
-  left: number;
-}
-
-interface snapshot {
-  snapshotId?: string;
-  children: [];
-  componentData: any;
-  name: string;
-  state: string;
-}
-
-// On-hover data.
-interface TooltipData {
-  bar: SeriesPoint<snapshot>;
-  key: string;
-  index: number;
-  height: number;
-  width: number;
-  x: number;
-  y: number;
-  color: string;
-}
-
-interface BarGraphComparisonProps {
-  width: number,
-  height: number,
-  data: PerfData,
-  comparison: string | [],
-  setSeries: () => void,
-  series: unknown,
-  setAction: () => void,
-}
+import { snapshot, TooltipData, margin, BarGraphComparisonProps } from '../../FrontendTypes';
 
 /* DEFAULTS */
 const margin = {
@@ -118,10 +77,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 = serie => {
-    const currentSeriesBarStacks = !comparison[serie]
+  const calculateMaxTotalRender = series => {
+    const currentSeriesBarStacks = !comparison[series]
       ? []
-      : comparison[serie].data.barStack;
+      : comparison[series].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

@@ -19,7 +19,7 @@ import { useStoreContext } from '../../../store';
 import { setCurrentTabInApp } from '../../../actions/actions';
 import { PerfData } from '../../FrontendTypes';
 
-interface BarStackProps {
+interface PerformanceVisxProps {
   width: number;
   height: number;
   snapshots: [];
@@ -171,8 +171,8 @@ const getPerfMetrics = (snapshots, snapshotsIds): PerfData => {
 };
 
 /* EXPORT COMPONENT */
-const PerformanceVisx = (props: BarStackProps): JSX.Element => {
-  // hook used to dispatch onhover action in rect
+const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
+  // hook used to dispatch onhover action in react
   const {
     width, height, snapshots, hierarchy,
   } = props;