@centreon/ui 24.4.1-MON-38194-widgets-display-optimizations-2.2 → 24.4.1-MON-38245-ba-tree-widget.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-38194-widgets-display-optimizations-2.2",
+  "version": "24.4.1-MON-38245-ba-tree-widget.7",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Dashboard/Dashboard.styles.ts

@@ -76,12 +76,11 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       border: 'none',
       borderRadius: theme.spacing(1),
       height: '100%',
+      paddingBottom: theme.spacing(2),
       width: '100%'
     },
     widgetContent: {
-      height: hasHeader
-        ? `calc(100% - ${theme.spacing(3.5)} - ${theme.spacing(0.5)})`
-        : `calc(100% - ${theme.spacing(3.5)})`
+      height: '100%'
     },
     widgetHeader: {
       '&:hover': {
@@ -93,17 +92,17 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&[data-canMove="true"]': {
         cursor: 'move'
       },
-      padding: theme.spacing(0, 1.5),
+      padding: theme.spacing(0.5, 2),
       position: 'relative'
     },
     widgetHeaderDraggable: {
       height: '100%',
       position: 'absolute',
-      width: '95%'
+      width: '100%'
     },
     widgetPadding: {
       overflowX: 'auto',
-      padding: theme.spacing(0.5, 1.5, 1.5)
+      padding: hasHeader ? theme.spacing(1, 2, 0) : theme.spacing(1, 2)
     }
   })
 );

package/src/Graph/LineChart/BasicComponents/LoadingProgress.tsx

@@ -0,0 +1,46 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { CircularProgress, alpha } from '@mui/material';
+
+interface StyleProps {
+  height: number;
+  width: number;
+}
+
+const useStyles = makeStyles<StyleProps>()((theme, { height, width }) => ({
+  graphLoader: {
+    alignItems: 'center',
+    backgroundColor: alpha(theme.palette.common.white, 0.5),
+    display: 'flex',
+    height,
+    justifyContent: 'center',
+    position: 'absolute',
+    width
+  }
+}));
+
+interface LoadingProgress {
+  display: boolean;
+  height: number;
+  width: number;
+}
+
+const LoadingProgress = ({
+  display,
+  height,
+  width
+}: LoadingProgress): JSX.Element | null => {
+  const { classes } = useStyles({ height, width });
+
+  if (!display) {
+    return null;
+  }
+
+  return (
+    <div className={classes.graphLoader}>
+      <CircularProgress />
+    </div>
+  );
+};
+
+export default LoadingProgress;

package/src/Graph/LineChart/BasicComponents/ThresholdLine.tsx

@@ -2,8 +2,6 @@ import { equals } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
-import { margin } from '../common';
-
 interface Props {
   hideTooltip: () => void;
   label: string;
@@ -30,7 +28,7 @@ export const ThresholdLine = ({
   const onMouseEnter = (): void =>
     showTooltip({
       tooltipData: label,
-      tooltipLeft: -(margin.left + margin.right),
+      tooltipLeft: 0,
       tooltipTop: scaledValue
     });
 

package/src/Graph/LineChart/InteractiveComponents/index.tsx

@@ -70,6 +70,7 @@ interface CommonData {
 
 interface TimeShiftZonesData extends InteractedZone {
   graphInterval: GraphInterval;
+  loading: boolean;
 }
 
 interface Props {
@@ -233,7 +234,7 @@ const InteractionWithGraph = ({
           value: timeValue?.[metric_id]
         }),
         linesData
-      ).filter(({ value }) => !isNil(value))
+      ).filter(({ value }) => value)
     });
   };
 

package/src/Graph/LineChart/Legend/Legend.styles.ts

@@ -28,11 +28,10 @@ export const useStyles = makeStyles<MakeStylesProps>()(
       columnGap: theme.spacing(3),
       display: 'grid',
       gridAutoRows: theme.spacing(legendItemHeight),
-      gridTemplateColumns: `repeat(auto-fit, minmax(${theme.spacing(legendWidth)}, 1fr))`,
+      gridTemplateColumns: `repeat(auto-fit, ${theme.spacing(legendWidth)})`,
       maxHeight: limitLegendRows
         ? theme.spacing(legendItemHeight * 2 + 1)
         : 'unset',
-      overflowX: 'hidden',
       overflowY: 'auto',
       rowGap: theme.spacing(1),
       width: '100%'
@@ -64,6 +63,9 @@ interface StylesProps {
 export const useLegendHeaderStyles = makeStyles<StylesProps>()(
   (theme, { color }) => ({
     container: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: theme.spacing(0.5),
       width: '100%'
     },
     disabled: {
@@ -77,7 +79,10 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       width: theme.spacing(1.5)
     },
     legendName: {
-      maxWidth: '95%'
+      '&[data-mode="compact"]': {
+        maxWidth: theme.spacing(legendWidth * 0.5)
+      },
+      maxWidth: theme.spacing(legendWidth * 0.75)
     },
     markerAndLegendName: {
       alignItems: 'center',
@@ -92,7 +97,6 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       whiteSpace: 'nowrap'
     },
     text: {
-      fontSize: '0.75rem',
       fontWeight: theme.typography.fontWeightMedium,
       lineHeight: 1
     }

package/src/Graph/LineChart/Legend/LegendHeader.tsx

@@ -1,3 +1,5 @@
+import { isEmpty } from 'ramda';
+
 import { Typography } from '@mui/material';
 
 import {
@@ -29,11 +31,21 @@ const LegendHeader = ({
 }: Props): JSX.Element => {
   const { classes, cx } = useLegendHeaderStyles({ color });
 
-  const { name, legend } = line;
+  const { unit, name, legend } = line;
 
   const metricName = formatMetricName({ legend, name });
 
   const legendName = legend || name;
+  const hasUnit = !isEmpty(unit);
+  const unitName = `(${unit})`;
+
+  const getEndText = (): string => {
+    if (value) {
+      return value;
+    }
+
+    return hasUnit ? ` ${unitName}` : '';
+  };
 
   return (
     <div className={classes.container}>
@@ -42,7 +54,7 @@ const LegendHeader = ({
         label={
           minMaxAvg ? (
             <div>
-              <Typography>{legendName}</Typography>
+              <Typography>{`${legendName} ${unitName}`}</Typography>
               <div className={classes.minMaxAvgContainer}>
                 {minMaxAvg.map(({ label, value: subValue }) => (
                   <LegendContent
@@ -57,7 +69,7 @@ const LegendHeader = ({
               </div>
             </div>
           ) : (
-            legendName
+            `${legendName} ${unitName}`
           )
         }
         placement="top"
@@ -74,6 +86,9 @@ const LegendHeader = ({
           </EllipsisTypography>
         </div>
       </Tooltip>
+      {hasUnit && (
+        <Typography className={classes.text}>{getEndText()}</Typography>
+      )}
     </div>
   );
 };

package/src/Graph/LineChart/LineChart.tsx

@@ -14,6 +14,7 @@ import Axes from './BasicComponents/Axes';
 import Grids from './BasicComponents/Grids';
 import Lines from './BasicComponents/Lines';
 import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
+import LoadingProgress from './BasicComponents/LoadingProgress';
 import useFilterLines from './BasicComponents/useFilterLines';
 import { useStyles } from './LineChart.styles';
 import Header from './Header';
@@ -44,6 +45,7 @@ interface Props extends LineChartProps {
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
   limitLegend?: false | number;
+  marginBottom: number;
   shapeLines?: GlobalAreaLines;
   thresholdUnit?: string;
   thresholds?: ThresholdsModel;
@@ -61,6 +63,7 @@ const LineChart = ({
   shapeLines,
   axis,
   displayAnchor,
+  loading,
   zoomPreview,
   graphInterval,
   timeShiftZones,
@@ -70,6 +73,7 @@ const LineChart = ({
   graphRef,
   header,
   curve,
+  marginBottom,
   thresholds,
   thresholdUnit,
   limitLegend
@@ -100,7 +104,8 @@ const LineChart = ({
     (height || 0) > 0
       ? (height || 0) -
         margin.top -
-        5 -
+        margin.bottom -
+        marginBottom -
         (legendRef.current?.getBoundingClientRect().height || 0)
       : 0;
 
@@ -191,6 +196,11 @@ const LineChart = ({
           title={<GraphValueTooltip base={baseAxis} />}
         >
           <div className={classes.container}>
+            <LoadingProgress
+              display={loading}
+              height={graphHeight}
+              width={width}
+            />
             <svg
               height={graphHeight + margin.top}
               ref={graphSvgRef}
@@ -249,7 +259,8 @@ const LineChart = ({
                   }}
                   timeShiftZonesData={{
                     ...timeShiftZones,
-                    graphInterval
+                    graphInterval,
+                    loading
                   }}
                   zoomData={{ ...zoomPreview }}
                 />

package/src/Graph/LineChart/LoadingSkeleton.tsx

@@ -13,8 +13,8 @@ const useSkeletonStyles = makeStyles<Props>()(
       display: 'grid',
       gridGap: theme.spacing(1),
       gridTemplateRows: `${
-        displayTitleSkeleton ? '0.8fr' : ''
-      } ${graphHeight}px ${theme.spacing(2)}`,
+        displayTitleSkeleton ? '1fr' : ''
+      } ${graphHeight}px ${theme.spacing(7)}`,
       height: '100%'
     },
     loadingSkeletonLine: {

package/src/Graph/LineChart/index.tsx

@@ -30,6 +30,7 @@ interface Props extends Partial<LineChartProps> {
   legend: LegendModel;
   limitLegend?: false | number;
   loading: boolean;
+  marginBottom?: number;
   shapeLines?: GlobalAreaLines;
   start: string;
   thresholdUnit?: string;
@@ -53,6 +54,7 @@ const WrapperLineChart = ({
   legend,
   header,
   curve = Curve.curveLinear,
+  marginBottom = 0,
   thresholds,
   thresholdUnit,
   limitLegend
@@ -63,7 +65,7 @@ const WrapperLineChart = ({
   if (loading && !adjustedData) {
     return (
       <LoadingSkeleton
-        displayTitleSkeleton={header?.displayTitle ?? false}
+        displayTitleSkeleton={header?.displayTitle ?? true}
         graphHeight={height || 200}
       />
     );
@@ -76,7 +78,7 @@ const WrapperLineChart = ({
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
-      style={{ height: '100%', overflow: 'hidden', width: '100%' }}
+      style={{ height: '100%', overflowY: 'hidden', width: '100%' }}
     >
       <ParentSize>
         {({
@@ -96,6 +98,8 @@ const WrapperLineChart = ({
               height={height || responsiveHeight}
               legend={legend}
               limitLegend={limitLegend}
+              loading={loading}
+              marginBottom={marginBottom}
               shapeLines={shapeLines}
               thresholdUnit={thresholdUnit}
               thresholds={thresholds}

package/src/Graph/LineChart/models.ts

@@ -88,6 +88,7 @@ export interface LineChartProps {
   displayAnchor?: DisplayAnchor;
   header?: LineChartHeader;
   height?: number | null;
+  loading: boolean;
   timeShiftZones?: InteractedZone;
   tooltip?: Tooltip;
   width: number;

package/src/Graph/Text/Text.styles.ts

@@ -1,9 +1,6 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useTextStyles = makeStyles()((theme) => ({
-  critical: {
-    color: theme.palette.error.main
-  },
   graphText: {
     alignItems: 'center',
     display: 'flex',
@@ -12,17 +9,9 @@ export const useTextStyles = makeStyles()((theme) => ({
     height: '100%',
     justifyContent: 'center'
   },
-  threshold: {
-    textAlign: 'center'
-  },
   thresholds: {
     display: 'flex',
     flexDirection: 'row',
-    gap: theme.spacing(5),
-    whiteSpace: 'nowrap',
-    width: '100%'
-  },
-  warning: {
-    color: theme.palette.warning.main
+    gap: theme.spacing(5)
   }
 }));

package/src/Graph/Text/Text.tsx

@@ -2,7 +2,6 @@ import { isNil } from 'ramda';
 
 import { Typography, useTheme } from '@mui/material';
 
-import FluidTypography from '../../Typography/FluidTypography';
 import { LineChartData, Thresholds } from '../common/models';
 import {
   formatMetricValueWithUnit,
@@ -31,7 +30,7 @@ export const Text = ({
   baseColor
 }: Props): JSX.Element | null => {
   const theme = useTheme();
-  const { classes, cx } = useTextStyles();
+  const { classes } = useTextStyles();
 
   if (isNil(data)) {
     return null;
@@ -75,20 +74,16 @@ export const Text = ({
       </Typography>
       {thresholds.enabled && (
         <div className={classes.thresholds}>
-          <FluidTypography
-            containerClassName={cx(classes.threshold, classes.warning)}
-            max="30px"
-            pref={14}
-            text={`${labels.warning}: ${warningThresholdLabels.join(' - ')}`}
-            variant="h5"
-          />
-          <FluidTypography
-            containerClassName={cx(classes.threshold, classes.critical)}
-            max="30px"
-            pref={14}
-            text={`${labels.critical}: ${criticalThresholdLabels.join(' - ')}`}
-            variant="h5"
-          />
+          <Typography sx={{ color: 'warning.main' }} variant="h5">
+            {labels.warning}
+            {': '}
+            {warningThresholdLabels.join(' - ')}
+          </Typography>
+          <Typography sx={{ color: 'error.main' }} variant="h5">
+            {labels.critical}
+            {': '}
+            {criticalThresholdLabels.join(' - ')}
+          </Typography>
         </div>
       )}
     </div>

package/src/Graph/Tree/DescendantNodes.tsx

@@ -65,6 +65,7 @@ const DescendantNodes = <TData extends BaseProp>({
       <Group key={key} left={left} top={top}>
         <foreignObject
           height={nodeSize.height}
+          style={{ userSelect: 'none' }}
           width={nodeSize.width}
           x={-nodeSize.width / 2}
           y={-nodeSize.height / 2}

package/src/Graph/Tree/Links.tsx

@@ -1,5 +1,10 @@
-import { LinkHorizontal } from '@visx/shape';
+import {
+  LinkHorizontal,
+  LinkHorizontalStep,
+  LinkHorizontalLine
+} from '@visx/shape';
 import { HierarchyPointLink } from '@visx/hierarchy/lib/types';
+import { always, cond, equals, T } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
@@ -9,6 +14,12 @@ interface Props<TData> extends Pick<TreeProps<TData>, 'treeLink'> {
   links: Array<HierarchyPointLink<Node<TData>>>;
 }
 
+const getLinkComponent = cond([
+  [equals('line'), always(LinkHorizontalLine)],
+  [equals('step'), always(LinkHorizontalStep)],
+  [T, always(LinkHorizontal)]
+]);
+
 const Links = <TData extends BaseProp>({
   links,
   treeLink
@@ -24,10 +35,12 @@ const Links = <TData extends BaseProp>({
       .descendants()
       .map((ancestor) => ancestor.data.data.id);
 
+    const LinkComponent = getLinkComponent(treeLink?.type);
+
     const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}`;
 
     return (
-      <LinkHorizontal
+      <LinkComponent
         data={link}
         data-testid={`${link.source.data.data.id}_to_${link.target.data.data.id}`}
         fill="none"

package/src/Graph/Tree/Tree.cypress.spec.tsx

@@ -168,4 +168,28 @@ describe('Complex data tree', () => {
 
     cy.makeSnapshot();
   });
+
+  it('displays the tree with step links when a prop is set', () => {
+    initializeStandaloneTree({
+      treeLink: {
+        type: 'step'
+      }
+    });
+
+    cy.contains('T').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the tree with line links when a prop is set', () => {
+    initializeStandaloneTree({
+      treeLink: {
+        type: 'line'
+      }
+    });
+
+    cy.contains('T').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

package/src/Graph/Tree/Tree.stories.tsx

@@ -82,6 +82,21 @@ export const WithDefaultExpandFilter: Story = {
   render: StandaloneTreeTemplate
 };
 
+export const WithStepLink: Story = {
+  args: {
+    children: SimpleContent,
+    node: {
+      height: 90,
+      width: 90
+    },
+    tree: simpleData,
+    treeLink: {
+      type: 'step'
+    }
+  },
+  render: StandaloneTreeTemplate
+};
+
 export const WithCustomLinks: Story = {
   args: {
     children: SimpleContent,
@@ -95,7 +110,8 @@ export const WithCustomLinks: Story = {
       getStrokeDasharray: ({ target }) =>
         target.status === 'ok' ? '5,5' : '0',
       getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
-      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
+      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2),
+      type: 'line'
     }
   },
   render: StandaloneTreeTemplate

package/src/Graph/Tree/models.ts

@@ -14,6 +14,8 @@ export interface BaseProp {
   name: string;
 }
 
+export type Link = 'curve' | 'line' | 'step';
+
 export interface ChildrenProps<TData> {
   ancestors: Array<Node<TData>>;
   depth: number;
@@ -48,5 +50,6 @@ export interface TreeProps<TData> {
     ) => string | number | undefined;
     getStrokeOpacity?: (props: LinkProps<TData>) => string | number | undefined;
     getStrokeWidth?: (props: LinkProps<TData>) => string | number | undefined;
+    type?: Link;
   };
 }

package/src/components/Zoom/Minimap.tsx

@@ -16,6 +16,7 @@ interface Props extends Omit<UseMinimapProps, 'minimapScale' | 'scale'> {
     left: number;
     top: number;
   };
+  id?: number | string;
   isDraggingFromContainer: boolean;
 }
 
@@ -26,7 +27,8 @@ const Minimap = ({
   width,
   contentClientRect,
   isDraggingFromContainer,
-  diffBetweenContentAndSvg
+  diffBetweenContentAndSvg,
+  id
 }: Props): JSX.Element => {
   const { classes } = useZoomStyles();
 
@@ -82,7 +84,7 @@ const Minimap = ({
   );
 
   return (
-    <g className={classes.minimap} clipPath="url(#zoom-clip)">
+    <g className={classes.minimap} clipPath={`url(#zoom-clip-${id})`}>
       <rect
         className={classes.minimapBackground}
         height={finalHeight}

package/src/components/Zoom/Zoom.cypress.spec.tsx

@@ -63,7 +63,7 @@ describe('Zoom', () => {
   it('displays the minimap when the prop is set', () => {
     initialize({ showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -72,7 +72,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('zoom in').click();
     cy.findByTestId('zoom-content')
@@ -86,7 +86,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('zoom out').click();
 
@@ -101,7 +101,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('zoom-content').realMouseWheel({ deltaY: 20 });
 
@@ -116,7 +116,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('zoom-content').realMouseWheel({ deltaY: -20 });
 
@@ -131,7 +131,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('zoom-content').realMouseWheel({ deltaY: -20 });
 
@@ -150,7 +150,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: false });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('not.exist');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('not.exist');
 
     cy.makeSnapshot();
   });
@@ -158,7 +158,7 @@ describe('Zoom', () => {
   it('zooms in when the minimap is scrolled up', () => {
     initialize({ showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('minimap-interaction').realMouseWheel({ deltaY: -20 });
 
@@ -172,7 +172,7 @@ describe('Zoom', () => {
   it('zooms out when the minimap is scrolled down', () => {
     initialize({ showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('minimap-interaction').realMouseWheel({ deltaY: 20 });
 
@@ -186,7 +186,7 @@ describe('Zoom', () => {
   it('moves the view when the mouse is hover the content with the corresponding button pressed down', () => {
     initialize({ showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.findByTestId('zoom-container')
@@ -205,7 +205,7 @@ describe('Zoom', () => {
   it('displays the minimap in the bottom right when the prop to the corresponding value', () => {
     initialize({ minimapPosition: 'bottom-right', showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.makeSnapshot();
@@ -214,7 +214,7 @@ describe('Zoom', () => {
   it('applies a scale down on the minimap when the content is higher than the original height', () => {
     initialize({ showMinimap: true, template: ContentWithMultipleShapes });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.findByTestId('minimap-interaction')
@@ -232,7 +232,7 @@ describe('Zoom', () => {
       template: ContentWithMultipleShapesWithNegativeTranslations
     });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.findByTestId('minimap-interaction')

package/src/components/Zoom/Zoom.tsx

@@ -7,6 +7,7 @@ import { MinimapPosition } from './models';
 
 export interface ZoomProps {
   children: JSX.Element | (({ width, height }) => JSX.Element);
+  id?: number | string;
   minimapPosition?: MinimapPosition;
   scaleMax?: number;
   scaleMin?: number;
@@ -27,7 +28,8 @@ const Zoom = ({
   scaleMin = 0.5,
   scaleMax = 4,
   showMinimap = false,
-  minimapPosition = 'top-left'
+  minimapPosition = 'top-left',
+  id = 0
 }: ZoomProps): JSX.Element => {
   return (
     <ParentSize>
@@ -44,6 +46,7 @@ const Zoom = ({
           {(zoom) => (
             <ZoomContent
               height={height}
+              id={id}
               minimapPosition={minimapPosition}
               showMinimap={showMinimap}
               width={width}

package/src/components/Zoom/ZoomContent.tsx

@@ -18,6 +18,7 @@ import { ChildrenProps, MinimapPosition, ZoomState } from './models';
 export interface Props {
   children: ({ width, height, transformMatrix }: ChildrenProps) => JSX.Element;
   height: number;
+  id?: number | string;
   minimapPosition: MinimapPosition;
   showMinimap?: boolean;
   width: number;
@@ -30,7 +31,8 @@ const ZoomContent = ({
   height,
   children,
   showMinimap,
-  minimapPosition
+  minimapPosition,
+  id
 }: Props): JSX.Element => {
   const { classes } = useZoomStyles();
   const contentRef = useRef<SVGGElement | null>(null);
@@ -92,7 +94,7 @@ const ZoomContent = ({
       >
         <RectClipPath
           height={Math.max(contentClientRect?.height || 0, height)}
-          id="zoom-clip"
+          id={`zoom-clip-${id}`}
           rx={radius}
           width={Math.max(contentClientRect?.width || 0, width)}
         />
@@ -124,6 +126,7 @@ const ZoomContent = ({
                 diffBetweenContentAndSvg || { left: 0, top: 0 }
               }
               height={height}
+              id={id}
               isDraggingFromContainer={isDragging}
               width={width}
               zoom={zoom}