@centreon/ui 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.11 → 24.4.1-MON-38245-ba-tree-widget.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.11",
+  "version": "24.4.1-MON-38245-ba-tree-widget.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.0",
+    "cypress": "^13.7.1",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",

package/src/Graph/Tree/Links.tsx

@@ -1,5 +1,10 @@
-import { LinkHorizontal } from '@visx/shape';
+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';
 
@@ -9,6 +14,12 @@ 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
@@ -24,10 +35,12 @@ const Links = <TData extends BaseProp>({
       .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 (
-      <LinkHorizontal
+      <LinkComponent
         data={link}
         data-testid={`${link.source.data.data.id}_to_${link.target.data.data.id}`}
         fill="none"

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

@@ -168,4 +168,28 @@ describe('Complex data tree', () => {
 
     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

@@ -82,6 +82,21 @@ export const WithDefaultExpandFilter: Story = {
   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,
@@ -95,7 +110,8 @@ export const WithCustomLinks: Story = {
       getStrokeDasharray: ({ target }) =>
         target.status === 'ok' ? '5,5' : '0',
       getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
-      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
+      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2),
+      type: 'line'
     }
   },
   render: StandaloneTreeTemplate

package/src/Graph/Tree/models.ts

@@ -14,6 +14,8 @@ export interface BaseProp {
   name: string;
 }
 
+export type Link = 'curve' | 'line' | 'step';
+
 export interface ChildrenProps<TData> {
   ancestors: Array<Node<TData>>;
   depth: number;
@@ -48,5 +50,6 @@ export interface TreeProps<TData> {
     ) => string | number | undefined;
     getStrokeOpacity?: (props: LinkProps<TData>) => string | number | undefined;
     getStrokeWidth?: (props: LinkProps<TData>) => string | number | undefined;
+    type?: Link;
   };
 }

package/src/components/Zoom/Zoom.cypress.spec.tsx

@@ -196,7 +196,7 @@ describe('Zoom', () => {
     cy.findByTestId('zoom-content').should(
       'have.attr',
       'transform',
-      'matrix(1, 0, 0, 1, 200, 0)'
+      'matrix(1, 0, 0, 1, 0, 0)'
     );
 
     cy.makeSnapshot();

package/src/components/Zoom/useZoom.ts

@@ -6,6 +6,9 @@ import { equals, isNil } from 'ramda';
 import { localPoint } from './localPoint';
 import { ZoomState } from './models';
 
+const isLeftMouseButtonClicked = (e): boolean =>
+  !isNil(e.nativeEvent.which) && equals(e.nativeEvent.which, 1);
+
 interface UseZoomState {
   dragEnd: () => void;
   dragStart: (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) => (e) => void;
@@ -14,19 +17,17 @@ interface UseZoomState {
 }
 
 export const useZoom = (): UseZoomState => {
-  const [startTranslate, setStartTranslate] = useState<Translate | undefined>(
-    undefined
-  );
-  const [startPoint, setStartPoint] = useState<Point | undefined>(undefined);
+  const [startTranslate, setStartTranslate] = useState<Translate | null>(null);
+  const [startPoint, setStartPoint] = useState<Point | null>(null);
 
   const dragStart = useCallback(
     (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) =>
       (e): void => {
-        if (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) {
+        if (!isLeftMouseButtonClicked(e)) {
           return;
         }
         const { translateX, translateY } = zoom.transformMatrix;
-        setStartPoint(localPoint(e) || undefined);
+        setStartPoint(localPoint(e) || null);
         setStartTranslate({ translateX, translateY });
       },
     []
@@ -56,8 +57,8 @@ export const useZoom = (): UseZoomState => {
     [startPoint, startTranslate]
   );
   const dragEnd = useCallback((): void => {
-    setStartPoint(undefined);
-    setStartTranslate(undefined);
+    setStartPoint(null);
+    setStartTranslate(null);
   }, []);
 
   return {