@centreon/ui 24.7.2 → 24.7.4

package/src/Graph/Tree/Tree.tsx

@@ -1,116 +0,0 @@
-import { useCallback, useMemo } from 'react';
-
-import { Group } from '@visx/group';
-import { hierarchy, Tree as VisxTree } from '@visx/hierarchy';
-import { isNil } from 'ramda';
-
-import { useDeepCompare } from '../../utils';
-
-import { nodeMargins } from './constants';
-import { BaseProp, Node, TreeProps } from './models';
-import { updateNodeFromTree } from './utils';
-import Links from './Links';
-import DescendantNodes from './DescendantNodes';
-
-export const Tree = <TData extends BaseProp>({
-  containerHeight,
-  containerWidth,
-  tree,
-  node,
-  treeLink = {},
-  changeTree,
-  children
-}: TreeProps<TData>): JSX.Element => {
-  const formattedTree: Node<TData> = useMemo(
-    () => ({
-      ...tree,
-      isExpanded: true
-    }),
-    useDeepCompare([tree])
-  );
-
-  const toggleTreeNodesExpanded = useCallback(
-    ({ currentTree, targetNode }): Node<TData> => {
-      return updateNodeFromTree({
-        callback: (subTree) => {
-          if (isNil(subTree.isExpanded) && isNil(node.isDefaultExpanded)) {
-            return {
-              isExpanded: false
-            };
-          }
-
-          return {
-            isExpanded: isNil(subTree.isExpanded)
-              ? !node.isDefaultExpanded?.(subTree.data)
-              : !subTree.isExpanded || false
-          };
-        },
-        targetNode,
-        tree: currentTree
-      });
-    },
-    [node.isDefaultExpanded]
-  );
-
-  const expandCollapseNode = useCallback(
-    (targetNode: Node<TData>): void => {
-      changeTree?.(
-        toggleTreeNodesExpanded({ currentTree: formattedTree, targetNode })
-      );
-    },
-    [formattedTree]
-  );
-
-  const getExpanded = useCallback(
-    (d: Node<TData>): Array<Node<TData>> | undefined | null => {
-      if (isNil(d.isExpanded) && isNil(node.isDefaultExpanded)) {
-        return d.children;
-      }
-      if (isNil(d.isExpanded)) {
-        return node.isDefaultExpanded?.(d.data) ? d.children : null;
-      }
-
-      return d.isExpanded ? d.children : null;
-    },
-    [node.isDefaultExpanded]
-  );
-
-  const origin = useMemo(
-    () => ({
-      x: 0,
-      y: containerHeight / 2
-    }),
-    [containerHeight]
-  );
-
-  return (
-    <Group left={node.width}>
-      <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}>
-            <Links links={subTree.links()} treeLink={treeLink} />
-
-            <DescendantNodes
-              descendants={subTree.descendants()}
-              expandCollapseNode={expandCollapseNode}
-              getExpanded={getExpanded}
-              nodeSize={{
-                height: node.height,
-                width: node.width
-              }}
-            >
-              {children}
-            </DescendantNodes>
-          </Group>
-        )}
-      </VisxTree>
-    </Group>
-  );
-};

package/src/Graph/Tree/constants.ts

@@ -1,2 +0,0 @@
-export const margins = { bottom: 30, left: 30, right: 30, top: 30 };
-export const nodeMargins = { x: 90, y: 16 };

package/src/Graph/Tree/index.ts

@@ -1,4 +0,0 @@
-export { Tree } from './Tree';
-export { StandaloneTree } from './StandaloneTree';
-export * from './utils';
-export type { Node, TreeProps, ChildrenProps } from './models';

package/src/Graph/Tree/models.ts

@@ -1,55 +0,0 @@
-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 type Link = 'curve' | 'line' | 'step';
-
-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;
-    type?: Link;
-  };
-}

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

@@ -1,164 +0,0 @@
-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

@@ -1,305 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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))
-  };
-};