@centreon/ui 24.11.13 → 24.11.14

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

@@ -1,197 +0,0 @@
-import { equals } from 'ramda';
-
-import { ComplexContent, SimpleContent } from './stories/contents';
-import {
-  ComplexData,
-  SimpleData,
-  complexData,
-  simpleData
-} from './stories/datas';
-
-import { Node, StandaloneTree, TreeProps } from '.';
-
-const validateTree = (tree): void => {
-  if (!tree.children) {
-    cy.contains(tree.data.name).should('be.visible');
-
-    return;
-  }
-
-  cy.contains(tree.data.name).should('be.visible');
-  tree.children.forEach((child) => {
-    validateTree(child);
-  });
-};
-
-interface InitializeProps
-  extends Pick<TreeProps<SimpleData | ComplexData>, 'treeLink' | 'children'> {
-  data?: Node<SimpleData | ComplexData>;
-  isDefaultExpanded?: (data: SimpleData | ComplexData) => boolean;
-}
-
-const initializeStandaloneTree = ({
-  data = simpleData,
-  isDefaultExpanded = undefined,
-  treeLink,
-  children = SimpleContent
-}: InitializeProps): void => {
-  cy.adjustViewport();
-
-  cy.mount({
-    Component: (
-      <div style={{ height: '99vh' }}>
-        <StandaloneTree
-          node={{ height: 70, isDefaultExpanded, width: 70 }}
-          tree={data}
-          treeLink={treeLink}
-        >
-          {children}
-        </StandaloneTree>
-      </div>
-    )
-  });
-};
-
-describe('Simple data tree', () => {
-  it('displays the whole tree', () => {
-    initializeStandaloneTree({});
-
-    validateTree(simpleData);
-
-    cy.makeSnapshot();
-  });
-
-  it("collapses a node's childrens when a node is clicked", () => {
-    initializeStandaloneTree({});
-
-    cy.contains(/^E$/).should('be.visible');
-    cy.contains(/^E1$/).should('be.visible');
-
-    cy.contains(/^C$/).click();
-
-    cy.contains(/^E$/).should('not.exist');
-    cy.contains(/^E1$/).should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it("expands a node's childrens when a node is clicked", () => {
-    initializeStandaloneTree({});
-
-    cy.contains(/^A$/).click();
-
-    cy.contains(/^A1$/).should('not.exist');
-    cy.contains(/^A2$/).should('not.exist');
-    cy.contains(/^A3$/).should('not.exist');
-    cy.contains(/^C$/).should('not.exist');
-
-    cy.contains(/^A$/).click();
-
-    cy.contains(/^A1$/).should('be.visible');
-    cy.contains(/^A2$/).should('be.visible');
-    cy.contains(/^A3$/).should('be.visible');
-    cy.contains(/^C$/).should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('cannot collapses a node when a leaf is clicked', () => {
-    initializeStandaloneTree({});
-
-    cy.contains(/^Z$/).click();
-
-    cy.contains(/^Z$/).should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('expands nodes by default when a prop is set', () => {
-    initializeStandaloneTree({
-      isDefaultExpanded: (data: SimpleData) => equals('critical', data.status)
-    });
-
-    cy.contains(/^T$/).should('be.visible');
-    cy.contains(/^A$/).should('be.visible');
-    cy.contains(/^A3$/).should('be.visible');
-    cy.contains(/^C$/).should('be.visible');
-    cy.contains(/^E$/).should('be.visible');
-    cy.contains(/^E1$/).should('be.visible');
-
-    cy.contains(/^B1$/).should('not.exist');
-    cy.contains(/^D1$/).should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays customized links when a prop is set', () => {
-    initializeStandaloneTree({
-      treeLink: {
-        getStroke: ({ target }) => (target.status === 'ok' ? 'grey' : 'black'),
-        getStrokeDasharray: ({ target }) =>
-          target.status === 'ok' ? '5,5' : '0',
-        getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
-        getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
-      }
-    });
-
-    cy.contains(/^Z$/).should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});
-
-describe('Complex data tree', () => {
-  it('cannot collapse a node when a node is not clickable', () => {
-    initializeStandaloneTree({
-      children: ComplexContent,
-      data: complexData
-    });
-
-    cy.contains('BA 3').should('be.visible');
-
-    cy.contains('BA 2').click();
-
-    cy.contains('BA 3').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('collapses a node when a node is clickable', () => {
-    initializeStandaloneTree({
-      children: ComplexContent,
-      data: complexData
-    });
-
-    cy.contains('BA 3').should('be.visible');
-
-    cy.contains('2').click();
-
-    cy.contains('BA 3').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the tree with step links when a prop is set', () => {
-    initializeStandaloneTree({
-      treeLink: {
-        type: 'step'
-      }
-    });
-
-    cy.contains('T').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the tree with line links when a prop is set', () => {
-    initializeStandaloneTree({
-      treeLink: {
-        type: 'line'
-      }
-    });
-
-    cy.contains('T').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});

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

@@ -1,160 +0,0 @@
-import { useState } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react';
-import { equals, has } from 'ramda';
-
-import { Zoom } from '../../components';
-
-import { ComplexContent, SimpleContent } from './stories/contents';
-import {
-  ComplexData,
-  SimpleData,
-  complexData,
-  moreComplexData,
-  simpleData
-} from './stories/datas';
-
-import { StandaloneTree, Tree, TreeProps } from '.';
-
-const meta: Meta<typeof StandaloneTree> = {
-  component: StandaloneTree
-};
-
-export default meta;
-type Story = StoryObj<typeof StandaloneTree>;
-
-const StandaloneTreeTemplate = (args): JSX.Element => (
-  <div style={{ height: '90vh', width: '100%' }}>
-    <StandaloneTree<SimpleData> {...args} />
-  </div>
-);
-
-const TreeWithZoom = <TData,>({
-  tree,
-  ...args
-}: TreeProps<TData>): JSX.Element => {
-  const [currentTree, setTree] = useState(tree);
-
-  return (
-    <div style={{ height: '90vh', width: '100%' }}>
-      <Zoom
-        showMinimap
-        labels={{
-          clear: 'Clear'
-        }}
-      >
-        {({ width, height }) => (
-          <Tree<ComplexData>
-            {...args}
-            changeTree={setTree}
-            containerHeight={height}
-            containerWidth={width}
-            tree={currentTree}
-          />
-        )}
-      </Zoom>
-    </div>
-  );
-};
-
-export const DefaultStandaloneTree: Story = {
-  args: {
-    children: SimpleContent,
-    node: {
-      height: 90,
-      width: 90
-    },
-    tree: simpleData
-  },
-  render: StandaloneTreeTemplate
-};
-
-export const WithDefaultExpandFilter: Story = {
-  args: {
-    children: SimpleContent,
-    node: {
-      height: 90,
-      isDefaultExpanded: (data: SimpleData) => equals('critical', data.status),
-      width: 90
-    },
-    tree: simpleData
-  },
-  render: StandaloneTreeTemplate
-};
-
-export const WithStepLink: Story = {
-  args: {
-    children: SimpleContent,
-    node: {
-      height: 90,
-      width: 90
-    },
-    tree: simpleData,
-    treeLink: {
-      type: 'step'
-    }
-  },
-  render: StandaloneTreeTemplate
-};
-
-export const WithCustomLinks: Story = {
-  args: {
-    children: SimpleContent,
-    node: {
-      height: 90,
-      width: 90
-    },
-    tree: simpleData,
-    treeLink: {
-      getStroke: ({ target }) => (target.status === 'ok' ? 'grey' : 'black'),
-      getStrokeDasharray: ({ target }) =>
-        target.status === 'ok' ? '5,5' : '0',
-      getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
-      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2),
-      type: 'line'
-    }
-  },
-  render: StandaloneTreeTemplate
-};
-
-export const WithComplexData: Story = {
-  args: {
-    children: ComplexContent,
-    node: {
-      height: 90,
-      isDefaultExpanded: (data: SimpleData) =>
-        equals('critical', data.status) || !has('count', data),
-      width: 90
-    },
-    tree: complexData,
-    treeLink: {
-      getStroke: ({ target }) => (target.status === 'ok' ? 'grey' : 'black'),
-      getStrokeDasharray: ({ target }) =>
-        target.status === 'ok' ? '5,5' : '0',
-      getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
-      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
-    }
-  },
-  render: StandaloneTreeTemplate
-};
-
-export const treeWithZoom: Story = {
-  args: {
-    children: ComplexContent,
-    node: {
-      height: 90,
-      isDefaultExpanded: (data: SimpleData) =>
-        equals('critical', data.status) || !has('count', data),
-      width: 90
-    },
-    tree: moreComplexData,
-    treeLink: {
-      getStroke: ({ target }) => (target.status === 'ok' ? 'grey' : 'black'),
-      getStrokeDasharray: ({ target }) =>
-        target.status === 'ok' ? '5,5' : '0',
-      getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
-      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
-    }
-  },
-  render: TreeWithZoom
-};

package/src/Graph/Tree/Tree.tsx

@@ -1,116 +0,0 @@
-import { useCallback, useMemo } from 'react';
-
-import { Group } from '@visx/group';
-import { Tree as VisxTree, hierarchy } from '@visx/hierarchy';
-import { isNil } from 'ramda';
-
-import { useDeepCompare } from '../../utils';
-
-import DescendantNodes from './DescendantNodes';
-import Links from './Links';
-import { nodeMargins } from './constants';
-import { BaseProp, Node, TreeProps } from './models';
-import { updateNodeFromTree } from './utils';
-
-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 { T, always, cond, equals, has } from 'ramda';
-
-import SpaIcon from '@mui/icons-material/Spa';
-import { Avatar, Paper, Typography, useTheme } from '@mui/material';
-
-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>
-  );
-};