fix: Remove carousel infinite mode

CBIIT · Feb 20, 2024 · ba01a0e · ba01a0e
1 parent 16c0879
commit ba01a0e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
@@ -11,7 +11,6 @@ const sizing = {
   desktop: {
     breakpoint: { max: 5000, min: 0 },
     items: 3,
-    partialVisibilityGutter: 40
   },
 };
 
@@ -23,11 +22,9 @@ const StyledWrapper = styled('div')({
   "& .react-multi-carousel-list": {
     height: "206px",
   },
-  "& .react-multi-carousel-track": {
-    margin: "0 auto", // NOTE: This centers the carousel when there are fewer than 2 items
-  },
-  "& .react-multi-carousel-item": {
-    width: "200px !important",
+  "& .custom-carousel-item": {
+    maxWidth: "200px",
+    minWidth: "200px",
   },
   "& .react-multi-carousel-list::after": {
     content: "''",
@@ -69,11 +66,9 @@ const ContentCarousel: FC<Props> = ({ children, ...props }: Props) => (
       responsive={sizing}
       swipeable
       draggable
-      infinite
-      centerMode
       arrows
-      focusOnSelect
       afterChange={removeAriaHidden}
+      itemClass="custom-carousel-item"
       {...props}
     >
       {children}

diff --git a/src/components/DataSubmissions/ValidationStatistics.tsx b/src/components/DataSubmissions/ValidationStatistics.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useState } from 'react';
 import { isEqual } from 'lodash';
-import { Stack, Tab, Tabs, Typography, styled } from '@mui/material';
+import { Box, Stack, Tab, Tabs, Typography, styled } from '@mui/material';
 import ContentCarousel from '../Carousel';
 import NodeTotalChart from '../NodeTotalChart';
 import MiniPieChart from '../NodeChart';
@@ -78,6 +78,10 @@ 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 },
@@ -139,7 +143,8 @@ const DataSubmissionStatistics: FC<Props> = ({ dataSubmission, statistics }: Pro
           {" "}
           {`(${statistics.length})`}
         </StyledSectionTitle>
-        <ContentCarousel focusOnSelect={statistics.length > 2}>
+        <ContentCarousel partialVisible={false}>
+          <PaddingBox />
           {statistics?.sort(compareNodeStats).map((stat) => (
             <MiniPieChart
               key={stat.nodeName}