updated currentSeriesBarStacks typescript in BarGraphComparison as well as debugging several other files

Author: llam722

src/app/components/FrontendTypes.ts

@@ -9,7 +9,7 @@ export interface Series {
     name: string
   }
 
-  interface ActionObj {
+export interface ActionObj {
     name: string,
     seriesName: string,
   }
@@ -20,7 +20,7 @@ export interface PerfData {
   maxTotalRender: number,
 }
 
-interface BarStackProp {
+export interface BarStackProp {
   snapshotId: string,
   route: string,
   currentTab?: string,
@@ -53,15 +53,15 @@ export interface margin {
   left: number;
 }
 
-interface BarGraphBase {
+export interface BarGraphBase {
   width: number,
   height: number,
   data: PerfData,
-  comparison: string | Series | [],
+  comparison: Series[],
 }
 
 export interface BarGraphComparisonProps extends BarGraphBase {
-  setSeries: () => void,
+  setSeries: (e: boolean) => void,
   series: number,
   setAction: () => void,
 }

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React, { useEffect, useState } from 'react';
 import { BarStack } from '@visx/shape';
 import { Group } from '@visx/group';
@@ -10,7 +9,9 @@ import { Text } from '@visx/text';
 import { schemeSet3 } from 'd3-scale-chromatic';
 import { onHover, onHoverExit, save } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
-import { snapshot, TooltipData, margin, BarGraphProps } from '../../FrontendTypes';
+import {
+  snapshot, TooltipData, margin, BarGraphProps,
+} from '../../FrontendTypes';
 
 /* DEFAULTS */
 const margin = {
@@ -59,10 +60,8 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
   const keys = Object.keys(data.componentData);
 
   // data accessor (used to generate scales) and formatter (add units for on hover box)
-  const getSnapshotId = (d: snapshot) => {
-    // d coming from data.barstack post filtered data
-    return d.snapshotId;
-  };
+  // d coming from data.barstack post filtered data
+  const getSnapshotId = (d: snapshot) => d.snapshotId;
 
   // returns snapshot id when invoked in tooltip section
   const formatSnapshotId = id => `Snapshot ID: ${id}`;

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /* eslint-disable no-param-reassign */
 import React, { useEffect } from 'react';
 import { BarStack } from '@visx/shape';
@@ -18,11 +17,11 @@ import {
 } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
 import {
-  snapshot, TooltipData, margin, BarGraphComparisonProps,
+  snapshot, TooltipData, margin, BarGraphComparisonProps, ActionObj,
 } from '../../FrontendTypes';
 
 /* DEFAULTS */
-const margin = {
+const margin: margin = {
   top: 30, right: 30, bottom: 0, left: 50,
 };
 const axisColor = '#62d6fb';
@@ -47,9 +46,9 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   const [picOpen, setPicOpen] = React.useState(false);
   useEffect(() => {
     dispatch(setCurrentTabInApp('performance-comparison'));
-  }, []);
+  }, [dispatch]);
 
-  const currentIndex = tabs[currentTab].sliderIndex;
+  const currentIndex: number = tabs[currentTab].sliderIndex;
 
   const {
     tooltipOpen,
@@ -63,17 +62,17 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
 
   const { containerRef, TooltipInPortal } = useTooltipInPortal();
 
-  const keys = Object.keys(data.componentData);
+  const keys: string[] = Object.keys(data.componentData);
 
   // data accessor (used to generate scales) and formatter (add units for on hover box)
   const getSnapshotId = (d: snapshot) => d.snapshotId;
-  const formatSnapshotId = id => `Snapshot ID: ${id}`;
-  const formatRenderTime = time => `${time} ms `;
-  const getCurrentTab = storedSeries => storedSeries.currentTab;
+  const formatSnapshotId = (id: string): string => `Snapshot ID: ${id}`;
+  const formatRenderTime = (time: string): string => `${time} ms `;
+  const getCurrentTab = (storedSeries: Record<string, unknown>) => storedSeries.currentTab;
 
   // create visualization SCALES with cleaned data
   // the domain array/xAxisPoints elements will place the bars along the x-axis
-  const xAxisPoints = ['currentTab', 'comparison'];
+  const xAxisPoints: string[] = ['currentTab', 'comparison'];
   const snapshotIdScale = scaleBand<string>({
     domain: xAxisPoints,
     padding: 0.2,
@@ -84,7 +83,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   // with the render time of the current tab.
   // The max render time will determine the Y-axis's highest number.
   const calculateMaxTotalRender = (serie: number): number => {
-    const currentSeriesBarStacks: number[] = !comparison[serie]
+    const currentSeriesBarStacks: ActionObj[] = !comparison[serie]
       ? []
       : comparison[serie].data.barStack;
     if (currentSeriesBarStacks.length === 0) return 0;
@@ -104,9 +103,10 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   });
   // the domain array will assign each key a different color to make rectangle boxes
   // and use range to set the color scheme each bar
-  const colorScale = scaleOrdinal<string>({
+  const duplicate = schemeSet3.slice();
+  const colorScale = scaleOrdinal<string, string>({
     domain: keys,
-    range: schemeSet3,
+    range: duplicate,
   });
 
   // setting max dimensions and scale ranges
@@ -125,7 +125,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
     select: {
       minWidth: 80,
       fontSize: '.75rem',
-      fontWeight: '200',
+      fontWeight: 200,
       border: '1px solid grey',
       borderRadius: 4,
       color: 'grey',

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

@@ -271,7 +271,7 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
     if (holdData) data.barStack = holdData;
   }
 
-  const renderBargraph = () => {
+  const renderBargraph = (): JSX.Element | null => {
     if (hierarchy) {
       return (
         <div>
@@ -289,6 +289,7 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
         </div>
       );
     }
+    return null;
   };
 
   const renderComponentDetailsView = () => {