@centreon/ui 24.4.64 → 24.4.65

package/src/Graph/Tree/models.ts

@@ -0,0 +1,52 @@
+export interface Node<T> {
+  children?: Array<Node<T>>;
+  data: T;
+  isExpanded?: boolean;
+}
+
+export interface LinkProps<T> {
+  source: T;
+  target: T;
+}
+
+export interface BaseProp {
+  id: number;
+  name: string;
+}
+
+export interface ChildrenProps<TData> {
+  ancestors: Array<Node<TData>>;
+  depth: number;
+  expandCollapseNode: (targetNode: Node<TData>) => void;
+  isExpanded: boolean;
+  node: Node<TData>;
+  nodeSize: {
+    height: number;
+    width: number;
+  };
+  onMouseDown: (e) => void;
+  onMouseUp: (callback) => (e) => void;
+}
+
+export interface TreeProps<TData> {
+  changeTree?: (newTree: Node<TData>) => void;
+  children: (props: ChildrenProps<TData>) => JSX.Element;
+  containerHeight: number;
+  containerWidth: number;
+  contentHeight?: number;
+  contentWidth?: number;
+  node: {
+    height: number;
+    isDefaultExpanded?: (data: TData) => boolean;
+    width: number;
+  };
+  tree: Node<TData>;
+  treeLink?: {
+    getStroke?: (props: LinkProps<TData>) => string | undefined;
+    getStrokeDasharray?: (
+      props: LinkProps<TData>
+    ) => string | number | undefined;
+    getStrokeOpacity?: (props: LinkProps<TData>) => string | number | undefined;
+    getStrokeWidth?: (props: LinkProps<TData>) => string | number | undefined;
+  };
+}

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

@@ -0,0 +1,164 @@
+import { always, cond, equals, has, T } from 'ramda';
+
+import { Avatar, Paper, Typography, useTheme } from '@mui/material';
+import SpaIcon from '@mui/icons-material/Spa';
+
+import { ChildrenProps } from '..';
+
+import { ComplexData, SimpleData } from './datas';
+
+export const SimpleContent = ({
+  node,
+  depth,
+  isExpanded,
+  nodeSize,
+  expandCollapseNode
+}: ChildrenProps<SimpleData>): JSX.Element => {
+  const theme = useTheme();
+  const fillColor = cond([
+    [equals('critical'), always(theme.palette.error.main)],
+    [equals('warning'), always(theme.palette.warning.main)],
+    [T, always(theme.palette.success.main)]
+  ])(node.data.status);
+
+  if (equals(depth, 0)) {
+    return (
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          height: '100%',
+          justifyContent: 'center',
+          width: '100%'
+        }}
+      >
+        <Avatar
+          sx={{
+            backgroundColor: fillColor,
+            color: theme.palette.text.primary,
+            cursor: 'pointer'
+          }}
+        >
+          {node.data.name}
+        </Avatar>
+      </div>
+    );
+  }
+
+  return (
+    <Paper
+      sx={{
+        alignItems: 'center',
+        backgroundColor: fillColor,
+        cursor: node.children ? 'pointer' : 'default',
+        display: 'flex',
+        flexDirection: 'column',
+        height: nodeSize.height,
+        justifyContent: 'center',
+        p: 1,
+        position: 'relative',
+        width: nodeSize.width
+      }}
+      onClick={() => {
+        expandCollapseNode(node);
+      }}
+    >
+      {!node.children && (
+        <SpaIcon
+          fontSize="small"
+          sx={{ position: 'absolute', right: 8, top: 8 }}
+        />
+      )}
+      <Typography>{node.data.name}</Typography>
+      {node.children && (
+        <Typography>{isExpanded ? 'Expanded' : 'Collapsed'}</Typography>
+      )}
+    </Paper>
+  );
+};
+
+export const ComplexContent = ({
+  node,
+  depth,
+  nodeSize,
+  expandCollapseNode,
+  onMouseDown,
+  onMouseUp
+}: ChildrenProps<ComplexData>): JSX.Element => {
+  const theme = useTheme();
+  const fillColor = cond([
+    [equals('critical'), always(theme.palette.error.main)],
+    [equals('warning'), always(theme.palette.warning.main)],
+    [T, always(theme.palette.success.main)]
+  ])(node.data.status);
+
+  if (equals(depth, 0)) {
+    return (
+      <Paper
+        sx={{
+          alignItems: 'center',
+          backgroundColor: fillColor,
+          display: 'flex',
+          flexDirection: 'column',
+          height: nodeSize.height,
+          justifyContent: 'center',
+          p: 1,
+          position: 'relative',
+          width: nodeSize.width
+        }}
+      >
+        <Typography>{node.data.name}</Typography>
+      </Paper>
+    );
+  }
+
+  if (has('count', node.data)) {
+    return (
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          height: '100%',
+          justifyContent: 'center',
+          width: '100%'
+        }}
+      >
+        <Avatar
+          sx={{
+            backgroundColor: fillColor,
+            color: theme.palette.text.primary,
+            cursor: 'pointer'
+          }}
+          onMouseDown={onMouseDown}
+          onMouseUp={onMouseUp(() => expandCollapseNode(node))}
+        >
+          {node.data.count}
+        </Avatar>
+      </div>
+    );
+  }
+
+  return (
+    <Paper
+      sx={{
+        alignItems: 'center',
+        backgroundColor: fillColor,
+        display: 'flex',
+        flexDirection: 'column',
+        height: nodeSize.height,
+        justifyContent: 'center',
+        p: 1,
+        position: 'relative',
+        width: nodeSize.width
+      }}
+    >
+      {!node.children && (
+        <SpaIcon
+          fontSize="small"
+          sx={{ position: 'absolute', right: 8, top: 8 }}
+        />
+      )}
+      <Typography>{node.data.name}</Typography>
+    </Paper>
+  );
+};

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

@@ -0,0 +1,305 @@
+import { Node } from '../models';
+
+export interface SimpleData {
+  id: number;
+  name: string;
+  status: 'critical' | 'warning' | 'ok';
+}
+
+export interface ComplexData {
+  count?: number;
+  id: number;
+  name: string;
+  status: 'critical' | 'warning' | 'ok';
+}
+
+export const simpleData: Node<SimpleData> = {
+  children: [
+    {
+      children: [
+        { data: { id: 2, name: 'A1', status: 'ok' } },
+        { data: { id: 3, name: 'A2', status: 'ok' } },
+        { data: { id: 4, name: 'A3', status: 'critical' } },
+        {
+          children: [
+            {
+              data: { id: 10, name: 'C1', status: 'warning' }
+            },
+            {
+              children: [
+                {
+                  data: { id: 11, name: 'D1', status: 'ok' }
+                },
+                {
+                  data: { id: 12, name: 'D2', status: 'ok' }
+                },
+                {
+                  data: { id: 13, name: 'D3', status: 'ok' }
+                }
+              ],
+              data: { id: 14, name: 'D', status: 'ok' }
+            },
+            {
+              children: [
+                {
+                  data: { id: 21, name: 'E1', status: 'critical' }
+                }
+              ],
+              data: { id: 20, name: 'E', status: 'critical' }
+            }
+          ],
+          data: { id: 3, name: 'C', status: 'critical' }
+        }
+      ],
+      data: { id: 6273286320, name: 'A', status: 'critical' }
+    },
+    { data: { id: 1, name: 'Z', status: 'ok' } },
+    {
+      children: [{ data: { id: 50, name: 'B1', status: 'warning' } }],
+      data: { id: 2, name: 'B', status: 'warning' }
+    }
+  ],
+  data: {
+    id: 0,
+    name: 'T',
+    status: 'critical'
+  }
+};
+
+export const complexData: Node<ComplexData> = {
+  children: [
+    {
+      children: [
+        { data: { id: 2, name: 'Indicator 1', status: 'critical' } },
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 6, name: 'Indicator 6', status: 'critical' } },
+                { data: { id: 7, name: 'Indicator 7', status: 'ok' } }
+              ],
+              data: { count: 2, id: 0, name: 'critical', status: 'critical' }
+            },
+            {
+              children: [
+                {
+                  children: [
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 8,
+                            name: 'Indicator 8',
+                            status: 'warning'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 4,
+                        name: 'warning',
+                        status: 'warning'
+                      }
+                    },
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 10,
+                            name: 'Indicator 10',
+                            status: 'ok'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 0,
+                        name: 'ok',
+                        status: 'ok'
+                      }
+                    }
+                  ],
+                  data: {
+                    id: 6,
+                    name: 'BA 3',
+                    status: 'warning'
+                  }
+                }
+              ],
+              data: {
+                count: 1,
+                id: 4,
+                name: 'warning',
+                status: 'warning'
+              }
+            },
+            {
+              children: [
+                { data: { id: 9, name: 'Indicator 9', status: 'ok' } }
+              ],
+              data: { count: 1, id: 0, name: 'ok', status: 'ok' }
+            }
+          ],
+          data: { id: 3, name: 'BA 2', status: 'critical' }
+        }
+      ],
+      data: { count: 2, id: 6, name: 'critical', status: 'critical' }
+    },
+    {
+      children: [
+        { data: { id: 4, name: 'Indicator 4', status: 'warning' } },
+        { data: { id: 5, name: 'Indicator 5', status: 'warning' } }
+      ],
+      data: { count: 2, id: 4, name: 'warning', status: 'warning' }
+    },
+    {
+      children: [
+        { data: { id: 6, name: 'Indicator 2', status: 'ok' } },
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 6, name: 'Indicator 2', status: 'ok' } }
+              ],
+              data: {
+                count: 1,
+                name: 'ok',
+                status: 'ok'
+              }
+            }
+          ],
+          data: { id: 0, name: 'BA 4', status: 'ok' }
+        }
+      ],
+      data: { count: 2, id: 0, name: 'ok', status: 'ok' }
+    }
+  ],
+  data: {
+    id: 1,
+    name: 'BA 1',
+    status: 'critical'
+  }
+};
+
+export const moreComplexData: Node<ComplexData> = {
+  children: [
+    {
+      children: [
+        { data: { id: 2, name: 'Indicator 1', status: 'critical' } },
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 6, name: 'Indicator 6', status: 'critical' } },
+                { data: { id: 7, name: 'Indicator 7', status: 'ok' } }
+              ],
+              data: { count: 2, id: 0, name: 'critical', status: 'critical' }
+            },
+            {
+              children: [
+                {
+                  children: [
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 8,
+                            name: 'Indicator 8',
+                            status: 'warning'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 4,
+                        name: 'warning',
+                        status: 'warning'
+                      }
+                    },
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 10,
+                            name: 'Indicator 10',
+                            status: 'ok'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 0,
+                        name: 'ok',
+                        status: 'ok'
+                      }
+                    }
+                  ],
+                  data: {
+                    id: 6,
+                    name: 'BA 3',
+                    status: 'warning'
+                  }
+                }
+              ],
+              data: {
+                count: 1,
+                id: 4,
+                name: 'warning',
+                status: 'warning'
+              }
+            },
+            {
+              children: [
+                { data: { id: 9, name: 'Indicator 9', status: 'ok' } }
+              ],
+              data: { count: 1, id: 0, name: 'ok', status: 'ok' }
+            }
+          ],
+          data: { id: 3, name: 'BA 2', status: 'critical' }
+        }
+      ],
+      data: { count: 2, id: 6, name: 'critical', status: 'critical' }
+    },
+    {
+      children: [
+        { data: { id: 4, name: 'Indicator 4', status: 'warning' } },
+        { data: { id: 5, name: 'Indicator 5', status: 'warning' } }
+      ],
+      data: { count: 2, id: 4, name: 'warning', status: 'warning' }
+    },
+    {
+      children: [
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 11, name: 'Indicator 11', status: 'ok' } }
+              ],
+              data: {
+                count: 1,
+                name: 'ok',
+                status: 'ok'
+              }
+            }
+          ],
+          data: { id: 0, name: 'BA 3', status: 'ok' }
+        },
+        { data: { id: 30, name: 'Indicator 30', status: 'ok' } },
+        { data: { id: 31, name: 'Indicator 31', status: 'ok' } },
+        { data: { id: 32, name: 'Indicator 32', status: 'ok' } },
+        { data: { id: 33, name: 'Indicator 33', status: 'ok' } },
+        { data: { id: 34, name: 'Indicator 34', status: 'ok' } },
+        { data: { id: 35, name: 'Indicator 35', status: 'ok' } },
+        { data: { id: 36, name: 'Indicator 36', status: 'ok' } },
+        { data: { id: 37, name: 'Indicator 37', status: 'ok' } },
+        { data: { id: 38, name: 'Indicator 38', status: 'ok' } }
+      ],
+      data: { count: 9, id: 0, name: 'ok', status: 'ok' }
+    }
+  ],
+  data: {
+    id: 1,
+    name: 'BA 1',
+    status: 'critical'
+  }
+};

package/src/Graph/Tree/utils.ts

@@ -0,0 +1,49 @@
+import { equals, omit } from 'ramda';
+
+import { BaseProp, Node } from './models';
+
+interface UpdateNodeFromTreeProps<TData> {
+  callback: (tree: Node<TData>) => Partial<Node<TData>>;
+  targetNode: Node<TData>;
+  tree: Node<TData>;
+}
+
+export const updateNodeFromTree = <TData extends BaseProp>({
+  tree,
+  targetNode,
+  callback
+}: UpdateNodeFromTreeProps<TData>): Node<TData> => {
+  if (!tree.children) {
+    return tree;
+  }
+
+  if (
+    equals(tree.data, targetNode.data) &&
+    equals(tree.children, targetNode.children)
+  ) {
+    return {
+      ...tree,
+      ...callback(tree)
+    };
+  }
+
+  return {
+    ...tree,
+    children: tree.children?.map((child) =>
+      updateNodeFromTree({ callback, targetNode, tree: child })
+    )
+  };
+};
+
+export const cleanUpTree = <TData extends BaseProp>(
+  tree: Node<TData>
+): Node<TData> => {
+  if (!tree.children) {
+    return tree;
+  }
+
+  return {
+    ...omit(['isExpanded'], tree),
+    children: tree.children?.map((child) => cleanUpTree(child))
+  };
+};

package/src/Graph/index.ts

@@ -6,3 +6,4 @@ export { Text as GraphText } from './Text';
 export { HeatMap } from './HeatMap';
 export { BarStack } from './BarStack';
 export { PieChart } from './PieChart';
+export * from './Tree';

package/src/components/Zoom/Minimap.tsx

@@ -0,0 +1,127 @@
+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' | 'scale'> {
+  children: JSX.Element;
+  contentClientRect: {
+    height: number;
+    width: number;
+  };
+  diffBetweenContentAndSvg: {
+    left: number;
+    top: number;
+  };
+  isDraggingFromContainer: boolean;
+}
+
+const Minimap = ({
+  zoom,
+  children,
+  height,
+  width,
+  contentClientRect,
+  isDraggingFromContainer,
+  diffBetweenContentAndSvg
+}: Props): JSX.Element => {
+  const { classes } = useZoomStyles();
+
+  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 = 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 translateX = useMemo(
+    () =>
+      -diffBetweenContentAndSvg.left /
+      zoom.transformMatrix.scaleX /
+      minimapScale,
+    [diffBetweenContentAndSvg.left]
+  );
+  const translateY = useMemo(
+    () =>
+      -diffBetweenContentAndSvg.top /
+      zoom.transformMatrix.scaleX /
+      minimapScale,
+    [diffBetweenContentAndSvg.top]
+  );
+
+  return (
+    <g className={classes.minimap} clipPath="url(#zoom-clip)">
+      <rect
+        className={classes.minimapBackground}
+        height={finalHeight}
+        rx={radius}
+        width={finalWidth}
+      />
+      <g
+        className={classes.movingZone}
+        style={{
+          transform: `scale(${scaleToUse - additionalScale}) translate(${translateX}px, ${translateY}px)`
+        }}
+      >
+        {children}
+        <g>
+          <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={dragStart}
+        onMouseEnter={dragStart}
+        onMouseLeave={dragEnd}
+        onMouseMove={move}
+        onMouseUp={dragEnd}
+        onWheel={zoomInOut}
+      />
+    </g>
+  );
+};
+
+export default Minimap;