@centreon/ui 24.11.14 → 24.11.21

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

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

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

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

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

package/src/Graph/Tree/index.ts

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

package/src/Graph/Tree/models.ts

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

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