fix: Bar chart order changing arbitrarily

CBIIT · Feb 23, 2024 · cde5691 · cde5691
1 parent 6b98db6
commit cde5691
Showing 1 changed file with 10 additions and 7 deletions.
diff --git a/src/components/DataSubmissions/ValidationStatistics.tsx b/src/components/DataSubmissions/ValidationStatistics.tsx
@@ -1,5 +1,5 @@
-import React, { FC, useState } from 'react';
-import { isEqual } from 'lodash';
+import React, { FC, useMemo, useState } from 'react';
+import { cloneDeep, isEqual } from 'lodash';
 import { Box, Stack, Tab, Tabs, Typography, styled } from '@mui/material';
 import ContentCarousel from '../Carousel';
 import NodeTotalChart from '../NodeTotalChart';
@@ -98,7 +98,10 @@ const defaultFilters: LegendFilter[] = [
 const DataSubmissionStatistics: FC<Props> = ({ dataSubmission, statistics }: Props) => {
   const [filters, setFilters] = useState<LegendFilter[]>(defaultFilters);
   const [tabValue, setTabValue] = useState<"count" | "percentage">("count");
+
   const disabledSeries: SeriesLabel[] = filters.filter((f) => f.disabled).map((f) => f.label);
+  const dataset: SubmissionStatistic[] = useMemo(() => cloneDeep(statistics || []).sort(compareNodeStats), [statistics]);
+  const primaryChartSeries: BarChartDataset[] = useMemo(() => buildPrimaryChartSeries(dataset, disabledSeries), [dataset, disabledSeries]);
 
   const handleFilterChange = (filter: LegendFilter) => {
     const newFilters = filters.map((f) => {
@@ -111,15 +114,15 @@ const DataSubmissionStatistics: FC<Props> = ({ dataSubmission, statistics }: Pro
 
   const handleViewByChange = (_: React.SyntheticEvent, newValue: "count" | "percentage") => setTabValue(newValue);
 
-  if (!dataSubmission || !statistics) {
+  if (!dataSubmission || !dataset) {
     return (
       <StyledChartArea direction="row">
         <SuspenseLoader fullscreen={false} />
       </StyledChartArea>
     );
   }
 
-  if (!statistics?.some((s) => s.total > 0)) {
+  if (!dataset?.some((s) => s.total > 0)) {
     return (
       <StyledChartArea direction="row">
         <StyledNoData variant="h6">No data has been successfully uploaded at this time.</StyledNoData>
@@ -131,7 +134,7 @@ const DataSubmissionStatistics: FC<Props> = ({ dataSubmission, statistics }: Pro
     <StyledChartArea direction="row">
       <Stack direction="column" alignItems="center" flex={1}>
         <StyledSectionTitle variant="h6">Summary Total</StyledSectionTitle>
-        <NodeTotalChart data={buildPrimaryChartSeries(statistics, disabledSeries)} normalize={tabValue === "percentage"} />
+        <NodeTotalChart data={primaryChartSeries} normalize={tabValue === "percentage"} />
         <Tabs value={tabValue} onChange={handleViewByChange} aria-label="View chart by" centered>
           <StyledTab label="View By Count" value="count" />
           <StyledTab label="View By Percentage" value="percentage" />
@@ -141,11 +144,11 @@ const DataSubmissionStatistics: FC<Props> = ({ dataSubmission, statistics }: Pro
         <StyledSectionTitle variant="h6">
           Individual Node Types
           {" "}
-          {`(${statistics.length})`}
+          {`(${dataset.length})`}
         </StyledSectionTitle>
         <ContentCarousel partialVisible={false}>
           <PaddingBox />
-          {statistics?.sort(compareNodeStats).map((stat) => (
+          {dataset?.map((stat) => (
             <MiniPieChart
               key={stat.nodeName}
               label={stat.nodeName}