@centreon/ui 25.2.2 → 25.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.2.2",
+  "version": "25.2.3",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/BarChart/BarGroup.tsx

@@ -1,10 +1,8 @@
-import { memo, useMemo } from 'react';
-
-import { Group } from '@visx/group';
 import { scaleBand, scaleOrdinal } from '@visx/scale';
 import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
 import { ScaleLinear } from 'd3-scale';
 import { difference, equals, keys, omit, pick, pluck, uniq } from 'ramda';
+import { memo, useMemo } from 'react';
 
 import { useDeepMemo } from '../../utils';
 import {
@@ -14,8 +12,7 @@ import {
   getUnits
 } from '../common/timeSeries';
 import { Line, TimeValue } from '../common/timeSeries/models';
-
-import BarStack from './BarStack';
+import MemoizedGroup from './MemoizedGroup';
 import { BarStyle } from './models';
 
 // Minimum value for logarithmic scale to avoid log(0)
@@ -161,60 +158,23 @@ const BarGroup = ({
       {...barComponentBaseProps}
     >
       {(barGroups) =>
-        barGroups.map((barGroup) => (
-          <Group
-            key={`bar-group-${barGroup.index}-${barGroup.x0}`}
-            left={barGroup.x0}
-            top={barGroup.y0}
-          >
-            {barGroup.bars.map((bar) => {
-              const isStackedBar = bar.key.startsWith('stacked-');
-              const linesBar = isStackedBar
-                ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
-                    .lines
-                : (notStackedLines.find(({ metric_id }) =>
-                    equals(metric_id, Number(bar.key))
-                  ) as Line);
-              const timeSeriesBar = isStackedBar
-                ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
-                    .timeSeries
-                : notStackedTimeSeries.map((timeSerie) => ({
-                    timeTick: timeSerie.timeTick,
-                    [bar.key]: timeSerie[Number(bar.key)]
-                  }));
-
-              return isStackedBar ? (
-                <BarStack
-                  key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
-                  barIndex={barGroup.index}
-                  barPadding={isHorizontal ? bar.x : bar.y}
-                  barStyle={barStyle}
-                  barWidth={isHorizontal ? bar.width : bar.height}
-                  isHorizontal={isHorizontal}
-                  isTooltipHidden={isTooltipHidden}
-                  lines={linesBar}
-                  timeSeries={timeSeriesBar}
-                  yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
-                  neutralValue={neutralValue}
-                />
-              ) : (
-                <BarStack
-                  key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
-                  barIndex={barGroup.index}
-                  barPadding={isHorizontal ? bar.x : bar.y}
-                  barStyle={barStyle}
-                  barWidth={isHorizontal ? bar.width : bar.height}
-                  isHorizontal={isHorizontal}
-                  isTooltipHidden={isTooltipHidden}
-                  lines={[linesBar]}
-                  timeSeries={timeSeriesBar}
-                  yScale={yScalesPerUnit[linesBar.unit]}
-                  neutralValue={neutralValue}
-                />
-              );
-            })}
-          </Group>
-        ))
+        barGroups.map((barGroup, index) => {
+          return (
+            <MemoizedGroup
+              key={`bar-group-${barGroup.index}-${barGroup.x0}`}
+              barGroup={barGroup}
+              barStyle={barStyle}
+              stackedLinesTimeSeriesPerUnit={stackedLinesTimeSeriesPerUnit}
+              notStackedTimeSeries={notStackedTimeSeries}
+              notStackedLines={notStackedLines}
+              isTooltipHidden={isTooltipHidden}
+              isHorizontal={isHorizontal}
+              neutralValue={neutralValue}
+              yScalesPerUnit={yScalesPerUnit}
+              barIndex={index}
+            />
+          );
+        })
       }
     </BarComponent>
   );

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -0,0 +1,123 @@
+import { Group } from '@visx/group';
+import { BarGroup } from '@visx/shape/lib/types';
+import { ScaleLinear } from 'd3-scale';
+import { equals, omit } from 'ramda';
+import { memo } from 'react';
+import { Line, TimeValue } from '../common/timeSeries/models';
+import BarStack from './BarStack';
+import { BarStyle } from './models';
+
+interface Props {
+  neutralValue: number;
+  isTooltipHidden: boolean;
+  barStyle: BarStyle;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
+  stackedLinesTimeSeriesPerUnit: Record<
+    string,
+    { lines: Array<Line>; timeSeries: Array<TimeValue> }
+  >;
+  notStackedLines: Array<Line>;
+  notStackedTimeSeries: Array<TimeValue>;
+  isHorizontal: boolean;
+  barGroup: BarGroup<'id'>;
+  barIndex: number;
+}
+
+const MemoizedGroup = ({
+  barGroup,
+  stackedLinesTimeSeriesPerUnit,
+  notStackedLines,
+  notStackedTimeSeries,
+  isHorizontal,
+  barStyle,
+  isTooltipHidden,
+  neutralValue,
+  yScalesPerUnit,
+  barIndex
+}: Props): JSX.Element | null => {
+  const hasEmptyValues = barGroup.bars.every(({ key, value }) => {
+    if (key.startsWith('stacked-')) {
+      const timeValueBar =
+        stackedLinesTimeSeriesPerUnit[key.replace('stacked-', '')].timeSeries[
+          barIndex
+        ];
+
+      return Object.values(omit(['timeTick'], timeValueBar)).every(
+        (value) => !value
+      );
+    }
+
+    return !value;
+  });
+
+  if (hasEmptyValues) {
+    return null;
+  }
+
+  return (
+    <Group left={barGroup.x0} top={barGroup.y0}>
+      {barGroup.bars.map((bar) => {
+        const isStackedBar = bar.key.startsWith('stacked-');
+        const linesBar = isStackedBar
+          ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')].lines
+          : (notStackedLines.find(({ metric_id }) =>
+              equals(metric_id, Number(bar.key))
+            ) as Line);
+        const timeSeriesBar = isStackedBar
+          ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
+              .timeSeries
+          : notStackedTimeSeries.map((timeSerie) => ({
+              timeTick: timeSerie.timeTick,
+              [bar.key]: timeSerie[Number(bar.key)]
+            }));
+
+        return isStackedBar ? (
+          <BarStack
+            key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
+            barIndex={barGroup.index}
+            barPadding={isHorizontal ? bar.x : bar.y}
+            barStyle={barStyle}
+            barWidth={isHorizontal ? bar.width : bar.height}
+            isHorizontal={isHorizontal}
+            isTooltipHidden={isTooltipHidden}
+            lines={linesBar as Array<Line>}
+            timeSeries={timeSeriesBar}
+            yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
+            neutralValue={neutralValue}
+          />
+        ) : (
+          <BarStack
+            key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
+            barIndex={barGroup.index}
+            barPadding={isHorizontal ? bar.x : bar.y}
+            barStyle={barStyle}
+            barWidth={isHorizontal ? bar.width : bar.height}
+            isHorizontal={isHorizontal}
+            isTooltipHidden={isTooltipHidden}
+            lines={[linesBar as Line]}
+            timeSeries={timeSeriesBar}
+            yScale={yScalesPerUnit[(linesBar as Line).unit]}
+            neutralValue={neutralValue}
+          />
+        );
+      })}
+    </Group>
+  );
+};
+
+export default memo(
+  MemoizedGroup,
+  (prevProps, nextProps) =>
+    equals(prevProps.barGroup, nextProps.barGroup) &&
+    equals(
+      prevProps.stackedLinesTimeSeriesPerUnit,
+      nextProps.stackedLinesTimeSeriesPerUnit
+    ) &&
+    equals(prevProps.notStackedLines, nextProps.notStackedLines) &&
+    equals(prevProps.notStackedTimeSeries, nextProps.notStackedTimeSeries) &&
+    equals(prevProps.isHorizontal, nextProps.isHorizontal) &&
+    equals(prevProps.barStyle, nextProps.barStyle) &&
+    equals(prevProps.isTooltipHidden, nextProps.isTooltipHidden) &&
+    equals(prevProps.neutralValue, nextProps.neutralValue) &&
+    equals(prevProps.barIndex, nextProps.barIndex)
+);

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

@@ -362,8 +362,6 @@ describe('Line chart', () => {
       cy.get('[data-as-list="true"]').should('exist');
 
       cy.contains(':00 AM').should('be.visible');
-
-      cy.makeSnapshot();
     });
 
     it('displays the legend on the right side of the graph as list when the corresponding props are set', () => {
@@ -583,7 +581,6 @@ describe('Lines and bars', () => {
     cy.get('path[data-metric="3"]').should('be.visible');
     cy.get('path[data-metric="3"]').should('be.visible');
     cy.findByTestId('stacked-bar-10-0-7650.368581547736').should('be.visible');
-    cy.findByTestId('stacked-bar-2-0-10').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -634,7 +631,6 @@ describe('Lines and bars', () => {
     cy.get('path[data-metric="3"]').should('be.visible');
     cy.get('path[data-metric="3"]').should('be.visible');
     cy.findByTestId('stacked-bar-10-0-7650.368581547736').should('be.visible');
-    cy.findByTestId('stacked-bar-2-0-10').should('be.visible');
 
     cy.makeSnapshot();
   });

package/src/Graph/Chart/Chart.stories.tsx

@@ -669,7 +669,7 @@ export const linesAndBarsMixedCenteredZero: Story = {
   )
 };
 const CustomYUnits = (props): JSX.Element => {
-  const [leftUnit, setLeftUnit] = useState('b');
+  const [leftUnit, setLeftUnit] = useState('B');
   const [rightUnit, setRightUnit] = useState('ms');
 
   return (

package/src/Graph/mockedData/pingServiceLinesBars.json

@@ -1,19 +1,19 @@
 {
   "global": {
     "base": 1000,
-    "title": "ping service"
+    "title": "Ping service"
   },
   "metrics": [
     {
       "metric_id": 2,
-      "metric": "centreon-server: pl",
-      "metric_legend": "centreon-server: pl",
-      "unit": "%",
+      "metric": "Centreon-Server: pl",
+      "metric_legend": "Centreon-Server: pl",
+      "unit": "B",
       "min": 0.0,
       "max": 100.0,
       "ds_data": {
-        "ds_color_line": "#f30b23",
-        "ds_color_area": "#f30b23",
+        "ds_color_line": "#F30B23",
+        "ds_color_area": "#F30B23",
         "ds_filled": true,
         "ds_invert": false,
         "ds_legend": null,
@@ -23,7 +23,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "bar",
-      "legend": "centreon-server: packet loss",
+      "legend": "Centreon-Server: Packet Loss",
       "stack": 0,
       "warning_high_threshold": 20.0,
       "critical_high_threshold": 50.0,
@@ -31,17 +31,17 @@
       "critical_low_threshold": 0.0,
       "ds_order": 1,
       "data": [
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        10.0,
-        20.0,
+        1243.0,
+        3562.0,
+        3532.0,
+        9843.0,
+        3332.0,
+        6576.0,
+        5647.0,
+        8763.0,
+        7487.0,
+        4783.0,
+        6835.0,
         null,
         null
       ],
@@ -52,9 +52,9 @@
     },
     {
       "metric_id": 10,
-      "metric": "space used",
-      "metric_legend": "space used",
-      "unit": "b",
+      "metric": "Space used",
+      "metric_legend": "Space used",
+      "unit": "B",
       "min": 0.0,
       "max": 100.0,
       "ds_data": {
@@ -69,7 +69,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "bar",
-      "legend": "space used",
+      "legend": "Space used",
       "stack": 0,
       "warning_high_threshold": 20.0,
       "critical_high_threshold": 50.0,
@@ -90,14 +90,14 @@
     },
     {
       "metric_id": 1,
-      "metric": "centreon-server: rta",
-      "metric_legend": "centreon-server: rta",
+      "metric": "Centreon-Server: rta",
+      "metric_legend": "Centreon-Server: rta",
       "unit": "ms",
       "min": 0.0,
       "max": null,
       "ds_data": {
-        "ds_color_line": "#29afee",
-        "ds_color_area": "#29afee",
+        "ds_color_line": "#29AFEE",
+        "ds_color_area": "#29AFEE",
         "ds_filled": true,
         "ds_invert": false,
         "ds_legend": null,
@@ -107,7 +107,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "line",
-      "legend": "centreon-server: round-trip average time",
+      "legend": "Centreon-Server: Round-Trip Average Time",
       "stack": 0,
       "warning_high_threshold": 200.0,
       "critical_high_threshold": 400.0,
@@ -136,8 +136,8 @@
     },
     {
       "metric_id": 3,
-      "metric": "centreon-server: rtmax",
-      "metric_legend": "centreon-server: rtmax",
+      "metric": "Centreon-Server: rtmax",
+      "metric_legend": "Centreon-Server: rtmax",
       "unit": "ms",
       "min": null,
       "max": null,
@@ -145,7 +145,7 @@
         "ds_color_line": "#525256",
         "ds_color_area": "#525256",
         "ds_filled": false,
-        "ds_invert": false,
+        "ds_invert": true,
         "ds_legend": null,
         "ds_stack": false,
         "ds_order": 2,
@@ -153,7 +153,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "line",
-      "legend": "centreon-server: round-trip maximum time",
+      "legend": "Centreon-Server: Round-Trip Maximum Time",
       "stack": 0,
       "warning_high_threshold": null,
       "critical_high_threshold": null,
@@ -182,8 +182,8 @@
     },
     {
       "metric_id": 4,
-      "metric": "centreon-server: rtmin",
-      "metric_legend": "centreon-server: rtmin",
+      "metric": "Centreon-Server: rtmin",
+      "metric_legend": "Centreon-Server: rtmin",
       "unit": "ms",
       "min": null,
       "max": null,
@@ -199,7 +199,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "line",
-      "legend": "centreon-server: round-trip minimum time",
+      "legend": "Centreon-Server: Round-Trip Minimum Time",
       "stack": 0,
       "warning_high_threshold": null,
       "critical_high_threshold": null,
@@ -228,18 +228,18 @@
     }
   ],
   "times": [
-    "2024-06-19t10:50:00+02:00",
-    "2024-06-19t10:55:00+02:00",
-    "2024-06-19t11:00:00+02:00",
-    "2024-06-19t11:05:00+02:00",
-    "2024-06-19t11:10:00+02:00",
-    "2024-06-19t11:15:00+02:00",
-    "2024-06-19t11:20:00+02:00",
-    "2024-06-19t11:25:00+02:00",
-    "2024-06-19t11:30:00+02:00",
-    "2024-06-19t11:35:00+02:00",
-    "2024-06-19t11:40:00+02:00",
-    "2024-06-19t11:45:00+02:00",
-    "2024-06-19t11:50:00+02:00"
+    "2024-06-19T10:50:00+02:00",
+    "2024-06-19T10:55:00+02:00",
+    "2024-06-19T11:00:00+02:00",
+    "2024-06-19T11:05:00+02:00",
+    "2024-06-19T11:10:00+02:00",
+    "2024-06-19T11:15:00+02:00",
+    "2024-06-19T11:20:00+02:00",
+    "2024-06-19T11:25:00+02:00",
+    "2024-06-19T11:30:00+02:00",
+    "2024-06-19T11:35:00+02:00",
+    "2024-06-19T11:40:00+02:00",
+    "2024-06-19T11:45:00+02:00",
+    "2024-06-19T11:50:00+02:00"
   ]
 }

package/src/components/Zoom/Zoom.tsx

@@ -1,6 +1,6 @@
-import { type MutableRefObject } from 'react';
 import { Zoom as VisxZoom } from '@visx/zoom';
 import { TransformMatrix } from '@visx/zoom/lib/types';
+import { type MutableRefObject } from 'react';
 
 import { ParentSize } from '../..';
 

package/src/components/Zoom/ZoomContent.tsx

@@ -1,4 +1,11 @@
-import { type ForwardedRef, forwardRef, MutableRefObject, useEffect, useRef, useState } from 'react';
+import {
+  type ForwardedRef,
+  MutableRefObject,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 
 import { RectClipPath } from '@visx/clip-path';
 
@@ -8,11 +15,16 @@ import ReplayIcon from '@mui/icons-material/Replay';
 
 import { IconButton } from '../Button';
 
+import Minimap from './Minimap';
+import { useZoomStyles } from './Zoom.styles';
 import { minimapScale, radius } from './constants';
+import {
+  type Dimension,
+  type MinimapPosition,
+  ZoomChildren,
+  type ZoomInterface
+} from './models';
 import { useZoom } from './useZoom';
-import { useZoomStyles } from './Zoom.styles';
-import Minimap from './Minimap';
-import { ZoomChildren, type Dimension, type MinimapPosition, type ZoomInterface } from './models';
 
 export interface Props extends Dimension, ZoomInterface, ZoomChildren {
   id?: number | string;
@@ -22,149 +34,144 @@ export interface Props extends Dimension, ZoomInterface, ZoomChildren {
 
 const ZoomContent = forwardRef(
   (
-    {
-      zoom,
-      width,
-      height,
-      children,
-      showMinimap,
-      minimapPosition,
-      id
-    }: Props,
+    { zoom, width, height, children, showMinimap, minimapPosition, id }: Props,
     ref?: ForwardedRef<SVGGElement | null>
-  ) : JSX.Element => {
-  const { classes } = useZoomStyles();
+  ): JSX.Element => {
+    const { classes } = useZoomStyles();
 
-  const fallbackRef = useRef<SVGGElement | null>(null)
-  const contentRef = (ref || fallbackRef) as MutableRefObject<SVGGElement | null>;
-  const minimapSvgRef = useRef<SVGSVGElement | null>(null);
-  const minimapContentRef = useRef<SVGSVGElement | null>(null);
-  const [contentClientRect, setContentClientRect] = useState<Dimension | null>(null);
+    const fallbackRef = useRef<SVGGElement | null>(null);
+    const contentRef = (ref ||
+      fallbackRef) as MutableRefObject<SVGGElement | null>;
+    const minimapSvgRef = useRef<SVGSVGElement | null>(null);
+    const minimapContentRef = useRef<SVGSVGElement | null>(null);
+    const [contentClientRect, setContentClientRect] =
+      useState<Dimension | null>(null);
 
-  const resizeObserver = new ResizeObserver(() => {
-    const contentBoundingClientRect = (
-      contentRef.current as SVGGElement
-    ).getBoundingClientRect();
+    const resizeObserver = new ResizeObserver(() => {
+      const contentBoundingClientRect = (
+        contentRef.current as SVGGElement
+      ).getBoundingClientRect();
 
-    setContentClientRect({
-      height: contentBoundingClientRect.height,
-      width: contentBoundingClientRect.width
+      setContentClientRect({
+        height: contentBoundingClientRect.height,
+        width: contentBoundingClientRect.width
+      });
     });
-  });
 
-  useEffect(() => {
-    if (contentRef.current) {
-      resizeObserver.disconnect();
-      resizeObserver.observe(contentRef.current);
-    }
+    useEffect(() => {
+      if (contentRef.current) {
+        resizeObserver.disconnect();
+        resizeObserver.observe(contentRef.current);
+      }
 
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [contentRef.current]);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [contentRef.current]);
 
-  const { move, dragEnd, dragStart, isDragging } = useZoom();
+    const { move, dragEnd, dragStart, isDragging } = useZoom();
 
-  const diffBetweenContentAndSvg = minimapSvgRef.current &&
-    minimapContentRef.current && {
-      left:
-        minimapContentRef.current.getBoundingClientRect().left -
-        minimapSvgRef.current.getBoundingClientRect().left,
-      top:
-        minimapContentRef.current.getBoundingClientRect().top -
-        minimapSvgRef.current.getBoundingClientRect().top
-    };
+    const diffBetweenContentAndSvg = minimapSvgRef.current &&
+      minimapContentRef.current && {
+        left:
+          minimapContentRef.current.getBoundingClientRect().left -
+          minimapSvgRef.current.getBoundingClientRect().left,
+        top:
+          minimapContentRef.current.getBoundingClientRect().top -
+          minimapSvgRef.current.getBoundingClientRect().top
+      };
 
-  return (
-    <div style={{ position: 'relative' }}>
-      <svg
-        className={classes.svg}
-        data-is-grabbing={isDragging}
-        data-testid="zoom-container"
-        height={height}
-        width={width}
-        onMouseDown={dragStart(zoom)}
-        onMouseEnter={dragStart(zoom)}
-        onMouseLeave={dragEnd}
-        onMouseMove={move(zoom)}
-        onMouseUp={dragEnd}
-        onWheel={zoom.handleWheel}
-      >
-        <RectClipPath
-          height={Math.max(contentClientRect?.height || 0, height)}
-          id={`zoom-clip-${id}`}
-          rx={radius}
-          width={Math.max(contentClientRect?.width || 0, width)}
-        />
-        <g
-          data-testid="zoom-content"
-          ref={contentRef}
-          transform={zoom.toString()}
+    return (
+      <div style={{ position: 'relative' }}>
+        <svg
+          className={classes.svg}
+          data-is-grabbing={isDragging}
+          data-testid="zoom-container"
+          height={height}
+          width={width}
+          onMouseDown={dragStart(zoom)}
+          onMouseEnter={dragStart(zoom)}
+          onMouseLeave={dragEnd}
+          onMouseMove={move(zoom)}
+          onMouseUp={dragEnd}
+          onWheel={zoom.handleWheel}
         >
-          {children({
-            contentClientRect,
-            height,
-            transformMatrix: zoom.transformMatrix,
-            width,
-            zoom
-          })}
-        </g>
-      </svg>
-      <div className={classes.actionsAndZoom} data-position={minimapPosition}>
-        {showMinimap && contentClientRect && (
-          <svg
-            className={classes.minimapContainer}
-            data-testid="minimap"
-            height={height * minimapScale}
-            ref={minimapSvgRef}
-            width={width * minimapScale}
+          <RectClipPath
+            height={Math.max(contentClientRect?.height || 0, height)}
+            id={`zoom-clip-${id}`}
+            rx={radius}
+            width={Math.max(contentClientRect?.width || 0, width)}
+          />
+          <g
+            data-testid="zoom-content"
+            ref={contentRef}
+            transform={zoom.toString()}
           >
-            <Minimap
-              contentClientRect={contentClientRect}
-              diffBetweenContentAndSvg={
-                diffBetweenContentAndSvg || { left: 0, top: 0 }
-              }
-              height={height}
-              id={id}
-              isDraggingFromContainer={isDragging}
-              width={width}
-              zoom={zoom}
+            {children({
+              contentClientRect,
+              height,
+              transformMatrix: zoom.transformMatrix,
+              width,
+              zoom
+            })}
+          </g>
+        </svg>
+        <div className={classes.actionsAndZoom} data-position={minimapPosition}>
+          {showMinimap && contentClientRect && (
+            <svg
+              className={classes.minimapContainer}
+              data-testid="minimap"
+              height={height * minimapScale}
+              ref={minimapSvgRef}
+              width={width * minimapScale}
             >
-              <g ref={minimapContentRef}>
-                {children({
-                  contentClientRect,
-                  height,
-                  transformMatrix: zoom.transformMatrix,
-                  width,
-                  zoom
-                })}
-              </g>
-            </Minimap>
-          </svg>
-        )}
-        <div className={classes.actions}>
-          <IconButton
-            data-testid="zoom in"
-            icon={<ZoomInIcon />}
-            size="small"
-            onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}
-          />
-          <IconButton
-            data-testid="zoom out"
-            icon={<ZoomOutIcon />}
-            size="small"
-            onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}
-          />
-          <IconButton
-            data-testid="clear"
-            icon={<ReplayIcon />}
-            size="small"
-            onClick={zoom.reset}
-          />
+              <Minimap
+                contentClientRect={contentClientRect}
+                diffBetweenContentAndSvg={
+                  diffBetweenContentAndSvg || { left: 0, top: 0 }
+                }
+                height={height}
+                id={id}
+                isDraggingFromContainer={isDragging}
+                width={width}
+                zoom={zoom}
+              >
+                <g ref={minimapContentRef}>
+                  {children({
+                    contentClientRect,
+                    height,
+                    transformMatrix: zoom.transformMatrix,
+                    width,
+                    zoom
+                  })}
+                </g>
+              </Minimap>
+            </svg>
+          )}
+          <div className={classes.actions}>
+            <IconButton
+              data-testid="zoom in"
+              icon={<ZoomInIcon />}
+              size="small"
+              onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}
+            />
+            <IconButton
+              data-testid="zoom out"
+              icon={<ZoomOutIcon />}
+              size="small"
+              onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}
+            />
+            <IconButton
+              data-testid="clear"
+              icon={<ReplayIcon />}
+              size="small"
+              onClick={zoom.reset}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 export default ZoomContent;

package/src/components/Zoom/models.ts

@@ -26,5 +26,3 @@ export interface ChildrenProps extends ZoomState, Dimension, ZoomInterface {
 export interface ZoomChildren {
   children: (args: ChildrenProps) => JSX.Element;
 }
-
-