@centreon/ui 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.6 → 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.6",
+  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.8",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

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

@@ -101,18 +101,6 @@ export const WithCustomLinks: Story = {
   render: StandaloneTreeTemplate
 };
 
-export const WithResetButton: Story = {
-  args: {
-    children: SimpleContent,
-    node: {
-      height: 90,
-      width: 90
-    },
-    tree: simpleData
-  },
-  render: StandaloneTreeTemplate
-};
-
 export const WithComplexData: Story = {
   args: {
     children: ComplexContent,

package/src/Graph/Tree/Tree.tsx

@@ -6,7 +6,7 @@ import { isNil } from 'ramda';
 
 import { useDeepCompare } from '../../utils';
 
-import { margins, nodeMargins } from './constants';
+import { nodeMargins } from './constants';
 import { BaseProp, Node, TreeProps } from './models';
 import { updateNodeFromTree } from './utils';
 import Links from './Links';
@@ -81,12 +81,14 @@ export const Tree = <TData extends BaseProp>({
   );
 
   return (
-    <Group left={node.width / 2} top={margins.top}>
+    <Group left={node.width / 2}>
       <VisxTree
+        left={0}
         nodeSize={[node.width + nodeMargins.y, node.height + nodeMargins.x]}
         root={hierarchy(formattedTree, getExpanded)}
         separation={() => 1}
         size={[containerWidth, containerHeight]}
+        top={0}
       >
         {(subTree) => (
           <Group left={origin.x} top={origin.y}>

package/src/Graph/Tree/stories/datas.ts

@@ -294,7 +294,7 @@ export const moreComplexData: Node<ComplexData> = {
         { data: { id: 37, name: 'Indicator 37', status: 'ok' } },
         { data: { id: 38, name: 'Indicator 38', status: 'ok' } }
       ],
-      data: { count: 10, id: 0, name: 'ok', status: 'ok' }
+      data: { count: 2, id: 0, name: 'ok', status: 'ok' }
     }
   ],
   data: {

package/src/components/Zoom/Minimap.tsx

@@ -1,8 +1,12 @@
+import { useMemo } from 'react';
+
+import { scaleLinear } from '@visx/scale';
+
 import { minimapScale, radius } from './constants';
 import { UseMinimapProps, useMinimap } from './useMinimap';
 import { useZoomStyles } from './Zoom.styles';
 
-interface Props extends Omit<UseMinimapProps, 'minimapScale'> {
+interface Props extends Omit<UseMinimapProps, 'minimapScale' | 'scale'> {
   children: JSX.Element;
   contentClientRect: {
     height: number;
@@ -21,16 +25,64 @@ const Minimap = ({
 }: Props): JSX.Element => {
   const { classes } = useZoomStyles();
 
-  const { transformTo, move, zoomInOut } = useMinimap({
+  const yMinimapScale = useMemo(
+    () => contentClientRect.height / zoom.transformMatrix.scaleY / height,
+    [contentClientRect.height, height]
+  );
+  const xMinimapScale = useMemo(
+    () => contentClientRect.width / zoom.transformMatrix.scaleX / width,
+    [contentClientRect.width, width]
+  );
+
+  const scale = Math.max(yMinimapScale, xMinimapScale);
+  const invertedScale = 1 / scale;
+  const scaleToUse = (invertedScale > 1 ? 1 : invertedScale) || 1;
+
+  const { move, zoomInOut, dragStart, dragEnd } = useMinimap({
     height,
     isDraggingFromContainer,
     minimapScale,
+    scale: (invertedScale > 1 ? 1 : scale) || 1,
     width,
     zoom
   });
 
-  const finalHeight = Math.max(contentClientRect?.height || 0, height);
-  const finalWidth = Math.max(contentClientRect?.width || 0, width);
+  const finalHeight = height;
+  const finalWidth = width;
+
+  const additionalScaleScale = scaleLinear({
+    clamp: true,
+    domain: [contentClientRect.height, 0],
+    range: [0, 0.05]
+  });
+
+  const additionalScale =
+    additionalScaleScale(contentClientRect.height - height) /
+    2 /
+    zoom.transformMatrix.scaleY;
+
+  const getAdditionalPadding = (): number => {
+    if (additionalScale > 0.05) {
+      return 0;
+    }
+
+    const padding =
+      additionalScale > 0.012
+        ? (1 / additionalScale) * (1 / zoom.transformMatrix.scaleY)
+        : 1 / additionalScale / zoom.transformMatrix.scaleY;
+
+    if (additionalScale < 0.009) {
+      const test = scaleLinear({
+        clamp: true,
+        domain: [0.005, 0.002],
+        range: [1, 5]
+      });
+
+      return padding - padding / test(additionalScale);
+    }
+
+    return padding;
+  };
 
   return (
     <g className={classes.minimap} clipPath="url(#zoom-clip)">
@@ -40,23 +92,38 @@ const Minimap = ({
         rx={radius}
         width={finalWidth}
       />
-      {children}
-      <rect
-        className={classes.minimapZoom}
-        fillOpacity={0.2}
-        height={height}
-        rx={radius}
-        transform={zoom.toStringInvert()}
-        width={width}
-      />
+      <g
+        style={{
+          transform: `scale(${scaleToUse - additionalScale}) translate(0px, ${getAdditionalPadding()}px)`
+        }}
+      >
+        {children}
+        <g
+          style={{
+            transform: `translate(0px, ${contentClientRect.height / 10}px)`
+          }}
+        >
+          <rect
+            className={classes.minimapZoom}
+            fillOpacity={0.2}
+            height={height}
+            rx={radius}
+            transform={zoom.toStringInvert()}
+            width={width}
+          />
+        </g>
+      </g>
       <rect
         data-testid="minimap-interaction"
         fill="transparent"
         height={finalHeight}
         rx={radius}
         width={finalWidth}
-        onMouseDown={transformTo}
+        onMouseDown={dragStart}
+        onMouseEnter={dragStart}
+        onMouseLeave={dragEnd}
         onMouseMove={move}
+        onMouseUp={dragEnd}
         onWheel={zoomInOut}
       />
     </g>

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

@@ -6,16 +6,36 @@ const content = (
   </g>
 );
 
-const labels = {
-  clear: 'Clear'
-};
+const contentWithMultipleShapes = (
+  <g style={{ transform: 'translate(0px, -300px)' }}>
+    <g style={{ transform: 'translate(300px, 150px)' }}>
+      <circle fill="blue" r={50} stroke="black" />
+    </g>
+    <g style={{ transform: 'translate(600px, 500px)' }}>
+      <circle fill="green" r={70} />
+    </g>
+    <g style={{ transform: 'translate(150px, 600px)' }}>
+      <circle fill="red" r={70} />
+    </g>
+  </g>
+);
 
-const initialize = ({ showMinimap }): void => {
+interface Props {
+  minimapPosition?;
+  showMinimap: boolean;
+  useMultipleShapes?: boolean;
+}
+
+const initialize = ({
+  showMinimap,
+  minimapPosition,
+  useMultipleShapes
+}: Props): void => {
   cy.mount({
     Component: (
       <div style={{ height: '400px', width: '100%' }}>
-        <Zoom labels={labels} showMinimap={showMinimap}>
-          {content}
+        <Zoom minimapPosition={minimapPosition} showMinimap={showMinimap}>
+          {useMultipleShapes ? contentWithMultipleShapes : content}
         </Zoom>
       </div>
     )
@@ -102,7 +122,7 @@ describe('Zoom', () => {
       .should('have.attr', 'transform')
       .and('include', '1.1, 0, 0, 1.1');
 
-    cy.contains('Clear').click();
+    cy.findByTestId('clear').click();
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
 
@@ -146,57 +166,48 @@ describe('Zoom', () => {
     cy.makeSnapshot();
   });
 
-  it('moves the view when the minimap is clicked', () => {
+  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('svg').should('have.attr', 'height', '400');
 
-    cy.findByTestId('minimap-interaction').click(20, 20);
+    cy.findByTestId('zoom-container')
+      .trigger('mousedown', 400, 200)
+      .trigger('mousemove', 600, 200);
 
     cy.findByTestId('zoom-content').should(
       'have.attr',
       'transform',
-      'matrix(1, 0, 0, 1, -100, -100)'
+      'matrix(1, 0, 0, 1, 200, 0)'
     );
 
     cy.makeSnapshot();
   });
 
-  it('moves the view when the mouse is hover the minimap with the corresponding button pressed down', () => {
-    initialize({ showMinimap: true });
+  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('svg').should('have.attr', 'height', '400');
 
-    cy.findByTestId('minimap-interaction')
-      .realMouseDown()
-      .realMouseMove(40, 40);
-
-    cy.findByTestId('zoom-content').should(
-      'have.attr',
-      'transform',
-      'matrix(1, 0, 0, 1, -640, -200)'
-    );
-
     cy.makeSnapshot();
   });
 
-  it('moves the view when the mouse is hover the content with the corresponding button pressed down', () => {
-    initialize({ showMinimap: true });
+  it('applies a scale down on the minimap when the content is higher than the original height', () => {
+    initialize({ showMinimap: true, useMultipleShapes: true });
 
     cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
-    cy.findByTestId('zoom-container')
-      .trigger('mousedown', 400, 200)
-      .trigger('mousemove', 600, 200);
-
-    cy.findByTestId('zoom-content').should(
-      'have.attr',
-      'transform',
-      'matrix(1, 0, 0, 1, 200, 0)'
-    );
+    cy.findByTestId('minimap-interaction')
+      .parent()
+      .find('g')
+      .should(
+        'have.attr',
+        'style',
+        'transform: scale(0.684211) translate(0px, 57px);'
+      );
 
     cy.makeSnapshot();
   });

package/src/components/Zoom/Zoom.stories.tsx

@@ -4,6 +4,10 @@ import Zoom, { ZoomProps } from './Zoom';
 
 const meta: Meta<typeof Zoom> = {
   argTypes: {
+    minimapPosition: {
+      control: 'select',
+      options: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+    },
     scaleMax: {
       control: { max: 16, min: 0.4, step: 0.2, type: 'range' }
     },
@@ -21,8 +25,16 @@ export default meta;
 type Story = StoryObj<typeof Zoom>;
 
 const content = (
-  <g style={{ transform: 'translate(300px, 150px)' }}>
-    <circle fill="blue" r={50} stroke="black" />
+  <g style={{ transform: 'translate(0px, -200px)' }}>
+    <g style={{ transform: 'translate(300px, 150px)' }}>
+      <circle fill="blue" r={50} stroke="black" />
+    </g>
+    <g style={{ transform: 'translate(600px, 400px)' }}>
+      <circle fill="green" r={70} />
+    </g>
+    <g style={{ transform: 'translate(150px, 800px)' }}>
+      <circle fill="red" r={70} />
+    </g>
   </g>
 );
 
@@ -32,22 +44,25 @@ const Template = ({ children, ...args }: ZoomProps): JSX.Element => (
   </div>
 );
 
-const labels = {
-  clear: 'Clear'
+export const WithoutMinimap: Story = {
+  args: {
+    children: content
+  },
+  render: Template
 };
 
-export const WithoutMinimap: Story = {
+export const WithMinimap: Story = {
   args: {
     children: content,
-    labels
+    showMinimap: true
   },
   render: Template
 };
 
-export const WithMinimap: Story = {
+export const WithMinimapPosition: Story = {
   args: {
     children: content,
-    labels,
+    minimapPosition: 'bottom-right',
     showMinimap: true
   },
   render: Template

package/src/components/Zoom/Zoom.styles.tsx

@@ -7,26 +7,53 @@ import { minimapScale } from './constants';
 export const useZoomStyles = makeStyles()((theme) => ({
   actions: {
     backgroundColor: alpha(theme.palette.background.paper, 0.8),
-    borderRadius: `0 ${theme.shape.borderRadius}px 0 0`,
-    bottom: 0,
     display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(1),
-    left: 0,
-    padding: theme.spacing(1),
+    flexDirection: 'row'
+  },
+  actionsAndZoom: {
+    '&[data-position="bottom-left"]': {
+      alignItems: 'flex-start',
+      bottom: 0,
+      flexDirection: 'column-reverse',
+      left: 0
+    },
+    '&[data-position="bottom-right"]': {
+      alignItems: 'flex-end',
+      bottom: 0,
+      flexDirection: 'column-reverse',
+      right: 0
+    },
+    '&[data-position="top-left"]': {
+      alignItems: 'flex-start',
+      flexDirection: 'column',
+      left: 0,
+      top: 0
+    },
+    '&[data-position="top-right"]': {
+      alignItems: 'flex-end',
+      flexDirection: 'column',
+      right: 0,
+      top: 0
+    },
+    display: 'flex',
     position: 'absolute',
-    transition: 'top 0.15s ease-out'
+    width: 'fit-content'
   },
   minimap: {
     transform: `scale(${minimapScale})`
   },
   minimapBackground: {
-    fill: theme.palette.background.default,
-    stroke: theme.palette.background.default
+    fill: theme.palette.background.paper,
+    stroke: theme.palette.background.paper
+  },
+  minimapContainer: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius
   },
-  minimapContainer: { left: 0, position: 'absolute', top: 0 },
   minimapZoom: {
-    fill: theme.palette.text.primary
+    fill: theme.palette.primary.main,
+    stroke: theme.palette.primary.main,
+    strokeWidth: 10
   },
   movingZone: {
     transition: 'transform 0.1s linear'

package/src/components/Zoom/Zoom.tsx

@@ -1,26 +1,13 @@
-import { useState, useRef, useEffect } from 'react';
-
 import { Zoom as VisxZoom } from '@visx/zoom';
-import { RectClipPath } from '@visx/clip-path';
-import { Group } from '@visx/group';
-import { equals, type } from 'ramda';
-
-import ZoomInIcon from '@mui/icons-material/Add';
-import ZoomOutIcon from '@mui/icons-material/Remove';
 
 import { ParentSize } from '../..';
-import { Button, IconButton } from '../Button';
 
-import { useZoomStyles } from './Zoom.styles';
-import Minimap from './Minimap';
-import { useZoom } from './useZoom';
-import { minimapScale } from './constants';
+import ZoomContent from './ZoomContent';
+import { MinimapPosition } from './models';
 
 export interface ZoomProps {
   children: JSX.Element | (({ width, height }) => JSX.Element);
-  labels: {
-    clear: string;
-  };
+  minimapPosition?: MinimapPosition;
   scaleMax?: number;
   scaleMin?: number;
   showMinimap?: boolean;
@@ -34,49 +21,14 @@ const initialTransform = {
   translateX: 0,
   translateY: 0
 };
-const radius = 30;
 
 const Zoom = ({
   children,
   scaleMin = 0.5,
   scaleMax = 4,
   showMinimap = false,
-  labels
+  minimapPosition = 'top-left'
 }: ZoomProps): JSX.Element => {
-  const { classes } = useZoomStyles();
-
-  const [contentClientRect, setContentClientRect] = useState<{
-    height: number;
-    width: number;
-  } | null>(null);
-  const contentRef = useRef<SVGGElement | null>(null);
-
-  const { move, dragEnd, dragStart, isDragging } = useZoom();
-
-  const resizeObserver = new ResizeObserver(() => {
-    setContentClientRect({
-      height: contentRef.current?.getBoundingClientRect().height || 0,
-      width: contentRef.current?.getBoundingClientRect().width || 0
-    });
-  });
-
-  useEffect(() => {
-    if (contentRef.current) {
-      resizeObserver.disconnect();
-      setContentClientRect({
-        height: contentRef.current?.getBoundingClientRect().height || 0,
-        width: contentRef.current?.getBoundingClientRect().width || 0
-      });
-      resizeObserver.observe(contentRef.current);
-    }
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [contentRef.current]);
-
-  const isChildrenObject = equals(type(children), 'Object');
-
   return (
     <ParentSize>
       {({ width, height }) => (
@@ -90,83 +42,15 @@ const Zoom = ({
           width={width}
         >
           {(zoom) => (
-            <div style={{ position: 'relative' }}>
-              <svg
-                className={classes.svg}
-                data-is-grabbing={isDragging}
-                data-testid="zoom-container"
-                height={height}
-                width={width}
-                onMouseDown={dragStart(zoom)}
-                onMouseMove={move(zoom)}
-                onMouseUp={dragEnd}
-                onWheel={zoom.handleWheel}
-              >
-                <RectClipPath
-                  height={Math.max(contentClientRect?.height || 0, height)}
-                  id="zoom-clip"
-                  rx={radius}
-                  width={Math.max(contentClientRect?.width || 0, width)}
-                />
-                <g
-                  data-testid="zoom-content"
-                  ref={contentRef}
-                  transform={zoom.toString()}
-                >
-                  {isChildrenObject ? children : children({ height, width })}
-                </g>
-              </svg>
-              <svg
-                className={classes.minimapContainer}
-                data-testid="minimap"
-                height={
-                  Math.max(contentClientRect?.height || 0, height) *
-                  minimapScale
-                }
-                width={
-                  Math.max(contentClientRect?.width || 0, width) * minimapScale
-                }
-              >
-                {showMinimap && contentClientRect && (
-                  <Minimap
-                    contentClientRect={contentClientRect}
-                    height={height}
-                    isDraggingFromContainer={isDragging}
-                    width={width}
-                    zoom={zoom}
-                  >
-                    <Group left={0} top={contentClientRect.height / 10}>
-                      {isChildrenObject
-                        ? children
-                        : children({ height, width })}
-                    </Group>
-                  </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 })}
-                />
-
-                <Button
-                  data-testid="clear"
-                  size="small"
-                  variant="ghost"
-                  onClick={zoom.clear}
-                >
-                  {labels.clear}
-                </Button>
-              </div>
-            </div>
+            <ZoomContent
+              height={height}
+              minimapPosition={minimapPosition}
+              showMinimap={showMinimap}
+              width={width}
+              zoom={zoom}
+            >
+              {children}
+            </ZoomContent>
           )}
         </VisxZoom>
       )}

package/src/components/Zoom/ZoomContent.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { RectClipPath } from '@visx/clip-path';
+import { equals, type } from 'ramda';
+import { Group } from '@visx/group';
+import { ProvidedZoom } from '@visx/zoom/lib/types';
+
+import ZoomInIcon from '@mui/icons-material/Add';
+import ZoomOutIcon from '@mui/icons-material/Remove';
+import ReplayIcon from '@mui/icons-material/Replay';
+
+import { IconButton } from '../Button';
+
+import { minimapScale, radius } from './constants';
+import { useZoom } from './useZoom';
+import { useZoomStyles } from './Zoom.styles';
+import Minimap from './Minimap';
+import { MinimapPosition, ZoomState } from './models';
+
+export interface Props {
+  children: JSX.Element | (({ width, height }) => JSX.Element);
+  height: number;
+  minimapPosition: MinimapPosition;
+  showMinimap?: boolean;
+  width: number;
+  zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
+}
+
+const ZoomContent = ({
+  zoom,
+  width,
+  height,
+  children,
+  showMinimap,
+  minimapPosition
+}: Props): JSX.Element => {
+  const { classes } = useZoomStyles();
+  const contentRef = useRef<SVGGElement | null>(null);
+  const [contentClientRect, setContentClientRect] = useState<{
+    height: number;
+    width: number;
+  } | null>(null);
+
+  const resizeObserver = new ResizeObserver(() => {
+    setContentClientRect({
+      height: (contentRef.current as SVGGElement).getBoundingClientRect()
+        .height,
+      width: (contentRef.current as SVGGElement).getBoundingClientRect().width
+    });
+  });
+
+  useEffect(() => {
+    if (contentRef.current) {
+      resizeObserver.disconnect();
+      resizeObserver.observe(contentRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [contentRef.current]);
+
+  const { move, dragEnd, dragStart, isDragging } = useZoom();
+
+  const isChildrenObject = equals(type(children), 'Object');
+
+  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"
+          rx={radius}
+          width={Math.max(contentClientRect?.width || 0, width)}
+        />
+        <g
+          data-testid="zoom-content"
+          ref={contentRef}
+          transform={zoom.toString()}
+        >
+          {isChildrenObject ? children : children({ height, width })}
+        </g>
+      </svg>
+      <div className={classes.actionsAndZoom} data-position={minimapPosition}>
+        {showMinimap && contentClientRect && (
+          <svg
+            className={classes.minimapContainer}
+            data-testid="minimap"
+            height={height * minimapScale}
+            width={width * minimapScale}
+          >
+            <Minimap
+              contentClientRect={contentClientRect}
+              height={height}
+              isDraggingFromContainer={isDragging}
+              width={width}
+              zoom={zoom}
+            >
+              <Group left={0} top={contentClientRect.height / 10}>
+                {isChildrenObject ? children : children({ height, width })}
+              </Group>
+            </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>
+  );
+};
+
+export default ZoomContent;

package/src/components/Zoom/constants.ts

@@ -1,2 +1,2 @@
-export const radius = 30;
+export const radius = 16;
 export const minimapScale = 0.2;

package/src/components/Zoom/models.ts

@@ -8,3 +8,9 @@ export interface ZoomState {
     translateY: number;
   };
 }
+
+export type MinimapPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';

package/src/components/Zoom/useMinimap.ts

@@ -1,7 +1,8 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
-import { ProvidedZoom } from '@visx/zoom/lib/types';
-import { equals, gt } from 'ramda';
+import { ProvidedZoom, Translate } from '@visx/zoom/lib/types';
+import { equals, gt, isNil, pick } from 'ramda';
+import { Point } from '@visx/point';
 
 import { ZoomState } from './models';
 
@@ -9,11 +10,14 @@ export interface UseMinimapProps {
   height: number;
   isDraggingFromContainer: boolean;
   minimapScale: number;
+  scale: number;
   width: number;
   zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
 }
 
 interface UseMinimapState {
+  dragEnd: (e) => void;
+  dragStart: (e) => void;
   move: (e) => void;
   transformTo: (e) => void;
   zoomInOut: (e) => void;
@@ -24,26 +28,42 @@ export const useMinimap = ({
   height,
   zoom,
   minimapScale,
-  isDraggingFromContainer
+  isDraggingFromContainer,
+  scale
 }: UseMinimapProps): UseMinimapState => {
+  const [startPoint, setStartPoint] = useState<Pick<Point, 'x' | 'y'> | null>(
+    null
+  );
+  const [startTranslate, setStartTranslate] = useState<Translate | null>(null);
+
   const getMatrixPoint = useCallback(
-    (event): { x: number; y: number } => {
+    (event, newScale?: number): { x: number; y: number } => {
+      const hasScale = scale > 1;
       const point = {
         x: event.nativeEvent.offsetX * (1 / minimapScale),
         y: event.nativeEvent.offsetY * (1 / minimapScale)
       };
 
+      const dx = -(
+        point.x * (newScale || zoom.transformMatrix.scaleX) -
+        width / 2
+      );
+      const dy = -(
+        point.y * (newScale || zoom.transformMatrix.scaleY) -
+        height / 2
+      );
+
       return {
-        x: -(point.x * zoom.transformMatrix.scaleX - width / 2),
-        y: -(point.y * zoom.transformMatrix.scaleY - height / 2)
+        x: !hasScale ? dx : dx * scale - width / 2,
+        y: !hasScale ? dy : dy * scale - height / 2
       };
     },
-    [zoom.transformMatrix]
+    [zoom.transformMatrix, scale, width, height, minimapScale]
   );
 
   const transformTo = useCallback(
     (e): void => {
-      if (!equals(e.nativeEvent.which, 1)) {
+      if (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) {
         return;
       }
       const { x, y } = getMatrixPoint(e);
@@ -53,40 +73,82 @@ export const useMinimap = ({
         translateY: y
       });
     },
-    [zoom.transformMatrix]
+    [zoom.transformMatrix, scale]
   );
 
+  const dragStart = (e): void => {
+    if (
+      (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) ||
+      isDraggingFromContainer
+    ) {
+      return;
+    }
+    setStartPoint(getMatrixPoint(e));
+    setStartTranslate(pick(['translateX', 'translateY'], zoom.transformMatrix));
+  };
+
+  const dragEnd = (): void => {
+    setStartPoint(null);
+    setStartTranslate(null);
+  };
+
   const move = useCallback(
     (e): void => {
-      if (!equals(e.nativeEvent.which, 1) || isDraggingFromContainer) {
+      if (!startPoint || !startTranslate) {
         return;
       }
-      transformTo(e);
+      const { x, y } = getMatrixPoint(e);
+
+      const diffX = startPoint.x - x;
+      const diffY = startPoint.y - y;
+
+      zoom.setTransformMatrix({
+        ...zoom.transformMatrix,
+        translateX: startTranslate.translateX - diffX,
+        translateY: startTranslate.translateY - diffY
+      });
     },
-    [zoom.transformMatrix, isDraggingFromContainer]
+
+    [zoom.transformMatrix, isDraggingFromContainer, scale, startPoint]
   );
 
   const zoomInOut = useCallback(
     (e): void => {
       const isZoomIn = gt(0, e.deltaY);
-      const { x, y } = getMatrixPoint(e);
+
+      const newScaleX = isZoomIn
+        ? zoom.transformMatrix.scaleX + 0.1
+        : zoom.transformMatrix.scaleX - 0.1;
+
+      const newScaleY = isZoomIn
+        ? zoom.transformMatrix.scaleX + 0.1
+        : zoom.transformMatrix.scaleX - 0.1;
+      const { x, y } = getMatrixPoint(e, newScaleX);
+
+      const diffX = x - zoom.transformMatrix.translateX;
+      const diffY = y - zoom.transformMatrix.translateY;
 
       zoom.setTransformMatrix({
         ...zoom.transformMatrix,
-        scaleX: isZoomIn
-          ? zoom.transformMatrix.scaleX + 0.1
-          : zoom.transformMatrix.scaleX - 0.1,
-        scaleY: isZoomIn
-          ? zoom.transformMatrix.scaleY + 0.1
-          : zoom.transformMatrix.scaleY - 0.1,
-        translateX: x,
-        translateY: y
+        scaleX: newScaleX,
+        scaleY: newScaleY,
+        translateX: zoom.transformMatrix.translateX + diffX / 4,
+        translateY: zoom.transformMatrix.translateY + diffY / 4
       });
     },
-    [zoom.transformMatrix]
+    [
+      zoom.transformMatrix,
+      width,
+      height,
+      isDraggingFromContainer,
+      scale,
+      startPoint
+    ]
   );
 
   return {
+    dragEnd,
+    dragStart,
     move,
     transformTo,
     zoomInOut