@gridsuite/commons-ui 0.197.0 → 0.198.0

package/dist/components/index.js

@@ -256,7 +256,7 @@ import { SelectCell } from "./network-modification-table/renderers/select-cell.j
 import { SelectHeaderCell } from "./network-modification-table/renderers/select-header-cell.js";
 import { DragCloneRow } from "./network-modification-table/row/drag-row-clone.js";
 import { ModificationRow } from "./network-modification-table/row/modification-row.js";
-import { fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./network-modification-table/utils.js";
+import { MAX_COMPOSITE_NESTING_DEPTH, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./network-modification-table/utils.js";
 export {
   ACCURACY,
   ACTIVE,
@@ -464,6 +464,7 @@ export {
   MAP_BASE_MAP,
   MAP_MANUAL_REFRESH,
   MARGIN_CALCULATION_START_TIME,
+  MAX_COMPOSITE_NESTING_DEPTH,
   MAX_ROWS_NUMBER,
   MAX_VALUE_ALLOWED_FOR_LIMIT_REDUCTION,
   MIN_VALUE_ALLOWED_FOR_LIMIT_REDUCTION,

package/dist/components/network-modification-table/drag-forbidden-chip.d.ts

@@ -0,0 +1,2 @@
+export declare const CHIP_ATTR = "data-drag-depth-chip";
+export declare const injectForbiddenChips: (container: HTMLDivElement, rowEl: HTMLElement, isMovingDown: boolean) => void;

package/dist/components/network-modification-table/drag-forbidden-chip.js

@@ -0,0 +1,39 @@
+const CHIP_ATTR = "data-drag-depth-chip";
+const createDragForbiddenChip = ({ side, chipStyle, label, title }) => {
+  const chip = document.createElement("span");
+  chip.setAttribute(CHIP_ATTR, side);
+  chip.setAttribute("style", `${chipStyle}; ${side}: 0px`);
+  chip.textContent = label;
+  if (title) {
+    chip.title = title;
+  }
+  return chip;
+};
+const injectForbiddenChips = (container, rowEl, isMovingDown) => {
+  container.querySelectorAll(`[${CHIP_ATTR}]`).forEach((c) => c.remove());
+  const containerRect = container.getBoundingClientRect();
+  const rowRect = rowEl.getBoundingClientRect();
+  const shadowLineY = isMovingDown ? rowRect.bottom - containerRect.top + container.scrollTop : rowRect.top - containerRect.top + container.scrollTop;
+  const chipStyle = [
+    "position: absolute",
+    `top: ${shadowLineY}px`,
+    "transform: translateY(-50%)",
+    "display: flex",
+    "align-items: center",
+    "justify-content: center",
+    "height: 20px",
+    "min-width: 20px",
+    "padding: 0 6px",
+    "border-radius: 10px",
+    "font-size: 11px",
+    "background-color: #d32f2f",
+    "color: #ffffff",
+    "z-index: 10",
+    "box-shadow: 0 1px 3px rgba(0,0,0,0.3)"
+  ].join("; ");
+  container.appendChild(createDragForbiddenChip({ side: "left", chipStyle, label: "✕" }));
+};
+export {
+  CHIP_ATTR,
+  injectForbiddenChips
+};

package/dist/components/network-modification-table/index.js

@@ -10,7 +10,7 @@ import { SelectCell } from "./renderers/select-cell.js";
 import { SelectHeaderCell } from "./renderers/select-header-cell.js";
 import { DragCloneRow } from "./row/drag-row-clone.js";
 import { ModificationRow } from "./row/modification-row.js";
-import { fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./utils.js";
+import { MAX_COMPOSITE_NESTING_DEPTH, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./utils.js";
 export {
   AUTO_EXTENSIBLE_COLUMNS,
   BASE_MODIFICATION_TABLE_COLUMNS,
@@ -23,6 +23,7 @@ export {
   DepthBox,
   DragCloneRow,
   DragHandleCell,
+  MAX_COMPOSITE_NESTING_DEPTH,
   MODIFICATION_ROW_HEIGHT,
   ModificationRow,
   NameCell,

package/dist/components/network-modification-table/network-modifications-table.js

@@ -98,7 +98,7 @@ function NetworkModificationsTable({
   });
   const virtualItems = virtualizer.getVirtualItems();
   const { handleDragUpdate, handleDragEnd, renderClone } = useModificationsDragAndDrop({
-    rows,
+    table,
     containerRef,
     composedModifications,
     setComposedModifications,

package/dist/components/network-modification-table/use-modifications-drag-and-drop.d.ts

@@ -1,10 +1,10 @@
 import { default as React, JSX, RefObject } from 'react';
-import { Row } from '@tanstack/react-table';
+import { Table } from '@tanstack/react-table';
 import { DraggableProvided, DraggableRubric, DraggableStateSnapshot, DragUpdate, DropResult } from '@hello-pangea/dnd';
 import { UUID } from 'node:crypto';
 import { ComposedModificationMetadata } from '../../utils';
 interface UseModificationsDragAndDropParams {
-    rows: Row<ComposedModificationMetadata>[];
+    table: Table<ComposedModificationMetadata>;
     containerRef: RefObject<HTMLDivElement | null>;
     composedModifications: ComposedModificationMetadata[];
     setComposedModifications: React.Dispatch<React.SetStateAction<ComposedModificationMetadata[]>>;
@@ -17,5 +17,5 @@ interface UseModificationsDragAndDropReturn {
     handleDragEnd: (result: DropResult) => void;
     renderClone: (provided: DraggableProvided, snapshot: DraggableStateSnapshot, rubric: DraggableRubric) => JSX.Element;
 }
-export declare const useModificationsDragAndDrop: ({ rows, containerRef, composedModifications, setComposedModifications, onDragEnd, studyUuid, currentNodeUuid, }: UseModificationsDragAndDropParams) => UseModificationsDragAndDropReturn;
+export declare const useModificationsDragAndDrop: ({ table, containerRef, composedModifications, setComposedModifications, onDragEnd, studyUuid, currentNodeUuid, }: UseModificationsDragAndDropParams) => UseModificationsDragAndDropReturn;
 export {};

package/dist/components/network-modification-table/use-modifications-drag-and-drop.js

@@ -7,12 +7,13 @@ import "@hello-pangea/dnd";
 import "react-intl";
 import "./columns-definition.js";
 import { DROP_FORBIDDEN_INDICATOR_BOTTOM, DROP_FORBIDDEN_INDICATOR_TOP, DROP_INDICATOR_BOTTOM, DROP_INDICATOR_TOP } from "./network-modification-table-styles.js";
-import { moveSubModificationInTree, isCompositeModification, findModificationInTree } from "./utils.js";
+import { isCompositeModification, MAX_COMPOSITE_NESTING_DEPTH, findModificationInTree, moveSubModificationInTree } from "./utils.js";
 import "../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../utils/error.js";
 import "../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import "../../utils/yupConfig.js";
+import { injectForbiddenChips, CHIP_ATTR } from "./drag-forbidden-chip.js";
 import { changeCompositeSubModificationOrder, changeNetworkModificationOrder } from "../../services/networkModification.js";
 import "localized-countries";
 import "localized-countries/data/fr";
@@ -23,13 +24,7 @@ const clearRowDragIndicators = (container) => {
   rowElements?.forEach((rowElement) => {
     rowElement.style.boxShadow = "";
   });
-};
-const isDropForbidden = (sourceRow, targetRow) => {
-  const isDraggingDown = targetRow.index > sourceRow.index;
-  if (isCompositeModification(sourceRow.original) && (isCompositeModification(targetRow.original) && targetRow.getIsExpanded() && isDraggingDown || isCompositeModification(targetRow.getParentRow()?.original))) {
-    return true;
-  }
-  return !!(isCompositeModification(sourceRow.original) && findModificationInTree(targetRow.original.uuid, [sourceRow.original]));
+  container?.querySelectorAll(`[${CHIP_ATTR}]`).forEach((chip) => chip.remove());
 };
 function getTargetCompositeUuid(droppingIntoExpandedComposite, targetRow) {
   if (droppingIntoExpandedComposite) {
@@ -47,7 +42,7 @@ function getContainerShadow(forbidden, isMovingDown) {
   return isMovingDown ? DROP_INDICATOR_BOTTOM : DROP_INDICATOR_TOP;
 }
 const useModificationsDragAndDrop = ({
-  rows,
+  table,
   containerRef,
   composedModifications,
   setComposedModifications,
@@ -56,6 +51,30 @@ const useModificationsDragAndDrop = ({
   currentNodeUuid = void 0
 }) => {
   const { snackError } = useSnackMessage();
+  const { rows } = table.getRowModel();
+  const computeTargetDepth = useCallback(
+    (sourceRow, targetRow) => {
+      const sourceRowIndex = table.getRowModel().flatRows.findIndex((row) => {
+        return row.id === sourceRow.id;
+      });
+      const targetRowIndex = table.getRowModel().flatRows.findIndex((row) => {
+        return row.id === targetRow.id;
+      });
+      const isDraggingDown = sourceRowIndex < targetRowIndex;
+      return isCompositeModification(targetRow.original) && targetRow.getIsExpanded() && isDraggingDown ? targetRow.depth + 1 : targetRow.depth;
+    },
+    [table]
+  );
+  const isDropForbidden = useCallback(
+    (sourceRow, targetRow) => {
+      if (isCompositeModification(sourceRow.original)) {
+        const targetDepth = computeTargetDepth(sourceRow, targetRow);
+        return (sourceRow.original.maxDepth ?? 0) + targetDepth > MAX_COMPOSITE_NESTING_DEPTH || !!(isCompositeModification(sourceRow.original) && findModificationInTree(targetRow.original.uuid, [sourceRow.original]));
+      }
+      return false;
+    },
+    [computeTargetDepth]
+  );
   const handleDragUpdate = useCallback(
     (update) => {
       clearRowDragIndicators(containerRef.current);
@@ -72,8 +91,11 @@ const useModificationsDragAndDrop = ({
       const forbidden = isDropForbidden(sourceRow, targetRow);
       const isMovingDown = destination.index > source.index;
       el.style.boxShadow = getContainerShadow(forbidden, isMovingDown);
+      if (forbidden && containerRef.current) {
+        injectForbiddenChips(containerRef.current, el, isMovingDown);
+      }
     },
-    [rows, containerRef]
+    [containerRef, isDropForbidden, rows]
   );
   const handleDragEndComposite = useCallback(
     (sourceRow, targetRow, droppingIntoExpandedComposite, isDraggingDown) => {
@@ -151,12 +173,13 @@ const useModificationsDragAndDrop = ({
       containerRef,
       onDragEnd,
       rows,
-      studyUuid,
-      currentNodeUuid,
-      snackError,
+      isDropForbidden,
+      handleDragEndComposite,
       composedModifications,
+      currentNodeUuid,
       setComposedModifications,
-      handleDragEndComposite
+      studyUuid,
+      snackError
     ]
   );
   const renderClone = useCallback(

package/dist/components/network-modification-table/utils.d.ts

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { UUID } from 'node:crypto';
 import { ComposedModificationMetadata, NetworkModificationMetadata } from '../../utils';
+export declare const MAX_COMPOSITE_NESTING_DEPTH = 5;
 export declare const formatToComposedModification: (modifications: NetworkModificationMetadata[]) => ComposedModificationMetadata[];
 export declare function isCompositeModification(modification: ComposedModificationMetadata | undefined): boolean;
 /**

package/dist/components/network-modification-table/utils.js

@@ -5,6 +5,7 @@ import "react/jsx-runtime";
 import "@mui/icons-material";
 import "../../utils/yupConfig.js";
 import { getNetworkModificationsFromComposite } from "../../services/networkModification.js";
+const MAX_COMPOSITE_NESTING_DEPTH = 5;
 const formatToComposedModification = (modifications) => {
   return modifications.map((modification) => ({ ...modification, subModifications: [] }));
 };
@@ -152,6 +153,7 @@ function fetchSubModificationsForExpandedRows(expandedIds, mods, setMods, force
   });
 }
 export {
+  MAX_COMPOSITE_NESTING_DEPTH,
   fetchSubModificationsForExpandedRows,
   findAllLoadedCompositeModifications,
   findModificationInTree,

package/dist/index.js

@@ -309,7 +309,7 @@ import { SelectCell } from "./components/network-modification-table/renderers/se
 import { SelectHeaderCell } from "./components/network-modification-table/renderers/select-header-cell.js";
 import { DragCloneRow } from "./components/network-modification-table/row/drag-row-clone.js";
 import { ModificationRow } from "./components/network-modification-table/row/modification-row.js";
-import { fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./components/network-modification-table/utils.js";
+import { MAX_COMPOSITE_NESTING_DEPTH, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./components/network-modification-table/utils.js";
 import { useStateBoolean } from "./hooks/customStates/useStateBoolean.js";
 import { useStateNumber } from "./hooks/customStates/useStateNumber.js";
 import { useModificationLabelComputer } from "./hooks/useModificationLabelComputer.js";
@@ -651,6 +651,7 @@ export {
   MAP_MANUAL_REFRESH,
   MARGIN_CALCULATION_START_TIME,
   MAX_CHAR_DESCRIPTION,
+  MAX_COMPOSITE_NESTING_DEPTH,
   MAX_ROWS_NUMBER,
   MAX_VALUE_ALLOWED_FOR_LIMIT_REDUCTION,
   MEGA_VAR,

package/dist/utils/types/network-modification-metadata.d.ts

@@ -12,4 +12,5 @@ export interface NetworkModificationMetadata {
 }
 export interface ComposedModificationMetadata extends NetworkModificationMetadata {
     subModifications: ComposedModificationMetadata[];
+    maxDepth?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.197.0",
+    "version": "0.198.0",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",