@centreon/ui 24.4.1-MON-38245-ba-tree-widget.5 → 24.4.1-MON-38194-widgets-display-optimizations.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-38245-ba-tree-widget.5",
+  "version": "24.4.1-MON-38194-widgets-display-optimizations.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -82,7 +82,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "axios-mock-adapter": "^1.22.0",
-    "cypress": "^13.7.1",
+    "cypress": "^13.7.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
@@ -114,20 +114,15 @@
     "@lexical/selection": "^0.12.6",
     "@lexical/utils": "^0.12.6",
     "@react-spring/web": "^9.7.3",
-    "@visx/clip-path": "^3.3.0",
     "@visx/curve": "^2.1.0",
-    "@visx/event": "^3.3.0",
     "@visx/group": "^3.3.0",
-    "@visx/hierarchy": "^3.3.0",
     "@visx/legend": "^3.5.0",
     "@visx/pattern": "^3.3.0",
-    "@visx/point": "^3.3.0",
     "@visx/scale": "^3.5.0",
-    "@visx/shape": "^2.18.0",
+    "@visx/shape": "^2.12.2",
     "@visx/text": "^3.3.0",
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",
-    "@visx/zoom": "^3.3.0",
     "anylogger": "^1.0.11",
     "d3-array": "3.2.4",
     "humanize-duration": "^3.31.0",

package/src/Graph/index.ts

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

package/src/components/Button/Button.styles.ts

@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme) => ({
         paddingLeft: theme.spacing(2),
         paddingRight: theme.spacing(2)
       },
-      fontSize: '14px',
+      fontSize: theme.typography.button.fontSize,
       height: 'unset',
       lineHeight: '22px'
     },
@@ -36,7 +36,7 @@ const useStyles = makeStyles()((theme) => ({
       color: theme.palette.primary.main
     },
 
-    textWrap: 'noWrap',
+    textWrap: 'nowrap',
     transition: 'unset'
   }
 }));

package/src/components/index.ts

@@ -11,4 +11,3 @@ export * from './ItemComposition';
 export * from './Avatar';
 export * from './CollapsibleItem';
 export * from './Inputs';
-export { default as Zoom } from './Zoom/Zoom';

package/src/Graph/Tree/DescendantNodes.tsx

@@ -1,88 +0,0 @@
-import { useState } from 'react';
-
-import { HierarchyPointNode } from '@visx/hierarchy/lib/types';
-import { Group } from '@visx/group';
-import { gt, isNil, pluck } from 'ramda';
-
-import { BaseProp, Node, TreeProps } from './models';
-
-interface Props<TData> extends Pick<TreeProps<TData>, 'children'> {
-  descendants: Array<HierarchyPointNode<Node<TData>>>;
-  expandCollapseNode: (targetNode: Node<TData>) => void;
-  getExpanded: (d: Node<TData>) => Array<Node<TData>> | undefined;
-  nodeSize: {
-    height: number;
-    width: number;
-  };
-}
-
-const DescendantNodes = <TData extends BaseProp>({
-  descendants,
-  children,
-  expandCollapseNode,
-  getExpanded,
-  nodeSize
-}: Props<TData>): Array<JSX.Element> => {
-  const [pressEventTimeStamp, setPressEventTimeStamp] = useState<number | null>(
-    null
-  );
-
-  const mouseDown = (e: MouseEvent): void => {
-    setPressEventTimeStamp(e.timeStamp);
-  };
-
-  const mouseUp =
-    (callback) =>
-    (e: MouseEvent): void => {
-      if (isNil(pressEventTimeStamp)) {
-        callback();
-
-        return;
-      }
-
-      const diffTimeStamp = e.timeStamp - pressEventTimeStamp;
-
-      if (gt(diffTimeStamp, 120)) {
-        return;
-      }
-
-      callback();
-    };
-
-  return descendants.map((node) => {
-    const top = node.x;
-    const left = node.y;
-    const ancestorIds = node
-      .ancestors()
-      .map((ancestor) => ancestor.data.data.id);
-    const descendantIds = node
-      .descendants()
-      .map((ancestor) => ancestor.data.data.id);
-
-    const key = `${node.data.data.id}-${node.data.data.name}-${ancestorIds.toString()}-${descendantIds.toString()}`;
-
-    return (
-      <Group key={key} left={left} top={top}>
-        <foreignObject
-          height={nodeSize.height}
-          width={nodeSize.width}
-          x={-nodeSize.width / 2}
-          y={-nodeSize.height / 2}
-        >
-          {children({
-            ancestors: pluck('data', node.ancestors()),
-            depth: node.depth,
-            expandCollapseNode,
-            isExpanded: !!getExpanded(node.data),
-            node: node.data,
-            nodeSize,
-            onMouseDown: mouseDown,
-            onMouseUp: mouseUp
-          })}
-        </foreignObject>
-      </Group>
-    );
-  });
-};
-
-export default DescendantNodes;

package/src/Graph/Tree/Links.tsx

@@ -1,77 +0,0 @@
-import {
-  LinkHorizontal,
-  LinkHorizontalStep,
-  LinkHorizontalLine
-} from '@visx/shape';
-import { HierarchyPointLink } from '@visx/hierarchy/lib/types';
-import { always, cond, equals, T } from 'ramda';
-
-import { useTheme } from '@mui/material';
-
-import { TreeProps, Node, BaseProp } from './models';
-
-interface Props<TData> extends Pick<TreeProps<TData>, 'treeLink'> {
-  links: Array<HierarchyPointLink<Node<TData>>>;
-}
-
-const getLinkComponent = cond([
-  [equals('line'), always(LinkHorizontalLine)],
-  [equals('step'), always(LinkHorizontalStep)],
-  [T, always(LinkHorizontal)]
-]);
-
-const Links = <TData extends BaseProp>({
-  links,
-  treeLink
-}: Props<TData>): Array<JSX.Element> => {
-  const theme = useTheme();
-
-  return links.map((link) => {
-    const ancestorIds = link.target
-      .ancestors()
-      .map((ancestor) => ancestor.data.data.id);
-
-    const descendantIds = link.target
-      .descendants()
-      .map((ancestor) => ancestor.data.data.id);
-
-    const LinkComponent = getLinkComponent(treeLink?.type);
-
-    const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}`;
-
-    return (
-      <LinkComponent
-        data={link}
-        data-testid={`${link.source.data.data.id}_to_${link.target.data.data.id}`}
-        fill="none"
-        key={key}
-        stroke={
-          treeLink?.getStroke?.({
-            source: link.source.data.data,
-            target: link.target.data.data
-          }) || theme.palette.text.primary
-        }
-        strokeDasharray={
-          treeLink?.getStrokeDasharray?.({
-            source: link.source.data.data,
-            target: link.target.data.data
-          }) || '0'
-        }
-        strokeOpacity={
-          treeLink?.getStrokeOpacity?.({
-            source: link.source.data.data,
-            target: link.target.data.data
-          }) || 1
-        }
-        strokeWidth={
-          treeLink?.getStrokeWidth?.({
-            source: link.source.data.data,
-            target: link.target.data.data
-          }) || '2'
-        }
-      />
-    );
-  });
-};
-
-export default Links;

package/src/Graph/Tree/StandaloneTree.tsx

@@ -1,32 +0,0 @@
-import { useState } from 'react';
-
-import { ParentSize } from '../..';
-
-import { BaseProp, TreeProps } from './models';
-import { Tree } from './Tree';
-
-export const StandaloneTree = <TData extends BaseProp>({
-  tree,
-  ...props
-}: Omit<
-  TreeProps<TData>,
-  'containerHeight' | 'containerWidth'
->): JSX.Element => {
-  const [currentTree, setTree] = useState(tree);
-
-  return (
-    <ParentSize>
-      {({ width, height }) => (
-        <svg height={height} width={width}>
-          <Tree
-            {...props}
-            changeTree={setTree}
-            containerHeight={height}
-            containerWidth={width}
-            tree={currentTree}
-          />
-        </svg>
-      )}
-    </ParentSize>
-  );
-};

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

@@ -1,195 +0,0 @@
-import { equals } from 'ramda';
-
-import {
-  ComplexData,
-  complexData,
-  SimpleData,
-  simpleData
-} from './stories/datas';
-import { ComplexContent, SimpleContent } from './stories/contents';
-
-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.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 {
-  ComplexData,
-  complexData,
-  moreComplexData,
-  SimpleData,
-  simpleData
-} from './stories/datas';
-import { ComplexContent, SimpleContent } from './stories/contents';
-
-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
-};