Merge pull request #379 from CBIIT/2.1.0/CRDCDH-1181

CRDCDH-1181 Adjust Individual Node Chart Carousel
CBIIT · May 24, 2024 · 63e93d5 · 63e93d5
2 parents 08740fb + 4af3775
commit 63e93d5
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 29 deletions.
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { styled } from '@mui/material';
 import Carousel, { CarouselProps } from 'react-multi-carousel';
 import 'react-multi-carousel/lib/styles.css';
@@ -7,6 +7,10 @@ import CustomRightArrow from './CustomRightArrow';
 
 type Props = {
   children: React.ReactNode;
+  /**
+   * If true, will disable any user interaction with the carousel.
+   */
+  locked?: boolean;
 } & Partial<CarouselProps>;
 
 const sizing = {
@@ -16,7 +20,9 @@ const sizing = {
   },
 };
 
-const StyledWrapper = styled('div')({
+const StyledWrapper = styled('div', {
+  shouldForwardProp: (p) => p !== "showLeftFade" && p !== "showRightFade"
+})<{ showLeftFade: boolean; showRightFade: boolean }>(({ showLeftFade, showRightFade }) => ({
   maxWidth: "700px",
   minWidth: "464px", // NOTE: Without a min-width, the carousel collapses to 0px wide
   width: "100%",
@@ -37,7 +43,7 @@ const StyledWrapper = styled('div')({
     left: "calc(100% - 162px)",
     top: "0",
     bottom: "0",
-    width: "162px",
+    width: showRightFade ? "162px" : "0px",
     background: "linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%)",
     zIndex: 9,
   },
@@ -47,11 +53,11 @@ const StyledWrapper = styled('div')({
     right: "calc(100% - 162px)",
     top: "0",
     bottom: "0",
-    width: "162px",
+    width: showLeftFade ? "162px" : "0px",
     background: "linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%)",
     zIndex: 9,
   },
-});
+}));
 
 const removeAriaHidden = () => {
   const elements = document.querySelectorAll(".react-multi-carousel-item");
@@ -65,22 +71,29 @@ const removeAriaHidden = () => {
  * @param Props
  * @returns {JSX.Element}
  */
-const ContentCarousel: FC<Props> = ({ children, ...props }: Props) => (
-  <StyledWrapper>
-    <Carousel
-      responsive={sizing}
-      swipeable
-      draggable
-      arrows
-      afterChange={removeAriaHidden}
-      itemClass="custom-carousel-item"
-      customLeftArrow={<CustomLeftArrow />}
-      customRightArrow={<CustomRightArrow />}
-      {...props}
-    >
-      {children}
-    </Carousel>
-  </StyledWrapper>
-);
+const ContentCarousel: FC<Props> = ({ children, locked, ...props }: Props) => {
+  const [activeSlide, setActiveSlide] = useState<number>(0);
+
+  const handleBeforeChange = (nextSlide: number) => setActiveSlide(nextSlide);
+
+  return (
+    <StyledWrapper showLeftFade={activeSlide !== 0 && !locked} showRightFade={!locked}>
+      <Carousel
+        responsive={sizing}
+        swipeable={!locked}
+        draggable={!locked}
+        arrows={!locked}
+        beforeChange={handleBeforeChange}
+        afterChange={removeAriaHidden}
+        itemClass="custom-carousel-item"
+        customLeftArrow={<CustomLeftArrow />}
+        customRightArrow={<CustomRightArrow />}
+        {...props}
+      >
+        {children}
+      </Carousel>
+    </StyledWrapper>
+  );
+};
 
 export default ContentCarousel;
diff --git a/src/components/DataSubmissions/ValidationStatistics.tsx b/src/components/DataSubmissions/ValidationStatistics.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useMemo, useState } from 'react';
 import { cloneDeep, isEqual } from 'lodash';
-import { Box, Stack, StackProps, Tab, Tabs, Typography, styled } from '@mui/material';
+import { Stack, StackProps, Tab, Tabs, Typography, styled } from '@mui/material';
 import ContentCarousel from '../Carousel';
 import NodeTotalChart from '../NodeTotalChart';
 import MiniPieChart from '../NodeChart';
@@ -98,10 +98,6 @@ const StyledTab = styled(Tab)({
   },
 });
 
-const PaddingBox = styled(Box)({
-  width: "175px",
-});
-
 const defaultFilters: LegendFilter[] = [
   { label: "New", color: "#4D90D3", disabled: false },
   { label: "Passed", color: "#32E69A", disabled: false },
@@ -170,8 +166,9 @@ const DataSubmissionStatistics: FC<Props> = ({ dataSubmission, statistics }: Pro
           {" "}
           {`(${dataset.length})`}
         </StyledSectionTitle>
-        <ContentCarousel partialVisible={false}>
-          {dataset.length > 2 && <PaddingBox />}
+        {/* NOTE: The transform is derived from the difference of Chart width and
+            chart container width which is 50px on each side (100px) */}
+        <ContentCarousel additionalTransfrom={dataset.length > 3 ? 100 : 0} locked={dataset.length <= 3}>
           {dataset?.map((stat) => (
             <MiniPieChart
               key={stat.nodeName}
@@ -180,6 +177,8 @@ const DataSubmissionStatistics: FC<Props> = ({ dataSubmission, statistics }: Pro
               data={buildMiniChartSeries(stat, disabledSeries)}
             />
           ))}
+          {/* NOTE: the 4th node is cut-off without this */}
+          {dataset.length === 4 && <span />}
         </ContentCarousel>
         <StatisticLegend filters={filters} onClick={handleFilterChange} />
       </Stack>