@gridsuite/commons-ui 0.214.0 → 0.216.0

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

@@ -0,0 +1,216 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback, useMemo } from "react";
+import { useTheme, Box, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
+import { useReactTable, getExpandedRowModel, getCoreRowModel, flexRender } from "@tanstack/react-table";
+import { DragDropContext, Droppable } from "@hello-pangea/dnd";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { MODIFICATION_ROW_HEIGHT, networkModificationTableStyles, createHeaderCellStyle } from "./network-modification-table-styles.js";
+import { AUTO_EXTENSIBLE_COLUMNS } from "./columns-definition.js";
+import { useModificationsDragAndDrop } from "./use-modifications-drag-and-drop.js";
+import { useModificationsSelection } from "./use-modifications-selection.js";
+import { formatToComposedModification, mergeSubModificationsIntoTree, findAllLoadedCompositeModifications, fetchSubModificationsForExpandedRows, isCompositeModification } from "./utils.js";
+import "@mui/icons-material";
+import "react-intl";
+import "../../utils/conversionUtils.js";
+import "../../utils/types/equipmentType.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import { ModificationRow } from "./row/modification-row.js";
+function NetworkModificationsTable({
+  modifications,
+  handleCellClick,
+  isRowDragDisabled = false,
+  onRowDragStart,
+  onRowDragEnd,
+  onRowSelected,
+  columns,
+  highlightedModificationUuid,
+  studyUuid = null,
+  currentNodeId = void 0,
+  currentRootNetworkUuid,
+  rootNetworks,
+  modificationsToExclude,
+  setModificationsToExclude,
+  isDisabled = false,
+  isImpactedByNotification,
+  notificationMessageId,
+  isFetchingModifications,
+  pendingState
+}) {
+  const theme = useTheme();
+  const containerRef = useRef(null);
+  const [expanded, setExpanded] = useState({});
+  const [composedModifications, setComposedModifications] = useState(
+    formatToComposedModification(modifications)
+  );
+  const { rowSelection, onRowSelectionChange, lastClickedRowId, emitSelection } = useModificationsSelection({
+    modifications: composedModifications,
+    onRowSelected
+  });
+  useEffect(() => {
+    setComposedModifications((prevMods) => {
+      const nextMods = mergeSubModificationsIntoTree(formatToComposedModification(modifications), prevMods);
+      const loadedComposite = [];
+      findAllLoadedCompositeModifications(nextMods, loadedComposite);
+      fetchSubModificationsForExpandedRows(
+        loadedComposite.map((mod) => mod.uuid),
+        nextMods,
+        setComposedModifications,
+        true
+      );
+      return nextMods;
+    });
+  }, [modifications]);
+  const handleExpandRow = useCallback((updater) => {
+    setExpanded((prevExpanded) => {
+      const nextExpanded = typeof updater === "function" ? updater(prevExpanded) : updater;
+      const prevRecord = prevExpanded === true ? {} : prevExpanded;
+      const nextRecord = nextExpanded === true ? {} : nextExpanded;
+      const newlyExpandedIds = Object.keys(nextRecord).filter((id) => nextRecord[id] && !prevRecord[id]);
+      setComposedModifications((prevMods) => {
+        fetchSubModificationsForExpandedRows(newlyExpandedIds, prevMods, setComposedModifications);
+        return [...prevMods];
+      });
+      return nextExpanded;
+    });
+  }, []);
+  const tableMeta = useMemo(
+    () => ({
+      context: {
+        studyUuid,
+        currentNodeId,
+        currentRootNetworkUuid,
+        rootNetworks
+      },
+      modifications: {
+        count: modifications.length,
+        toExclude: modificationsToExclude,
+        setToExclude: setModificationsToExclude
+      },
+      interaction: {
+        lastClickedRowId,
+        onRowSelected,
+        isRowDragDisabled
+      },
+      status: {
+        isImpactedByNotification,
+        notificationMessageId,
+        isFetchingModifications,
+        pendingState,
+        isDisabled
+      }
+    }),
+    [
+      studyUuid,
+      currentNodeId,
+      currentRootNetworkUuid,
+      rootNetworks,
+      modifications.length,
+      modificationsToExclude,
+      setModificationsToExclude,
+      lastClickedRowId,
+      onRowSelected,
+      isRowDragDisabled,
+      isImpactedByNotification,
+      notificationMessageId,
+      isFetchingModifications,
+      pendingState,
+      isDisabled
+    ]
+  );
+  const table = useReactTable({
+    data: composedModifications,
+    columns,
+    state: { expanded, rowSelection },
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getSubRows: (row) => row.subModifications,
+    getRowId: (row) => row.uuid,
+    getRowCanExpand: (row) => isCompositeModification(row.original),
+    enableRowSelection: true,
+    enableSubRowSelection: true,
+    enableExpanding: true,
+    onExpandedChange: handleExpandRow,
+    onRowSelectionChange,
+    meta: tableMeta
+  });
+  const { rows, flatRows } = table.getRowModel();
+  useEffect(() => {
+    emitSelection(flatRows);
+  }, [rowSelection, flatRows, emitSelection]);
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => containerRef.current,
+    overscan: 5,
+    estimateSize: () => MODIFICATION_ROW_HEIGHT
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const { handleDragUpdate, handleDragEnd, renderClone } = useModificationsDragAndDrop({
+    table,
+    containerRef,
+    composedModifications,
+    setComposedModifications,
+    onDragEnd: onRowDragEnd,
+    studyUuid,
+    currentNodeUuid: currentNodeId
+  });
+  useEffect(() => {
+    table.resetRowSelection();
+    table.resetExpanded();
+    lastClickedRowId.current = null;
+  }, [lastClickedRowId, table, currentNodeId]);
+  useEffect(() => {
+    if (highlightedModificationUuid && containerRef.current) {
+      const rowIndex = rows.findIndex((row) => row.original.uuid === highlightedModificationUuid);
+      if (rowIndex !== -1) {
+        virtualizer.scrollToIndex(rowIndex, { align: "start", behavior: "auto" });
+      }
+    }
+  }, [highlightedModificationUuid, rows, virtualizer]);
+  return /* @__PURE__ */ jsx(DragDropContext, { onDragEnd: handleDragEnd, onDragStart: onRowDragStart, onDragUpdate: handleDragUpdate, children: /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.tableWrapper, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "modifications-table", mode: "virtual", renderClone, children: (provided) => /* @__PURE__ */ jsx(Box, { ref: containerRef, sx: networkModificationTableStyles.container, children: /* @__PURE__ */ jsxs(Table, { sx: networkModificationTableStyles.table, children: [
+    /* @__PURE__ */ jsx(TableHead, { sx: networkModificationTableStyles.thead, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { sx: networkModificationTableStyles.tableRow, children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        sx: createHeaderCellStyle(
+          header,
+          theme,
+          header.index === 0,
+          header.index === headerGroup.headers.length - 1,
+          AUTO_EXTENSIBLE_COLUMNS.includes(header.column.id)
+        ),
+        children: flexRender(header.column.columnDef.header, header.getContext())
+      },
+      header.id
+    )) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsx(
+      TableBody,
+      {
+        ref: provided.innerRef,
+        ...provided.droppableProps,
+        sx: {
+          ...networkModificationTableStyles.tableBody,
+          height: `${virtualizer.getTotalSize()}px`
+        },
+        children: virtualItems.map((virtualRow) => {
+          const row = rows[virtualRow.index];
+          return /* @__PURE__ */ jsx(
+            ModificationRow,
+            {
+              virtualRow,
+              row,
+              handleCellClick,
+              isRowDragDisabled,
+              highlightedModificationUuid
+            },
+            row.id
+          );
+        })
+      }
+    )
+  ] }) }) }) }) });
+}
+export {
+  NetworkModificationsTable
+};

package/dist/features/network-modification-table/renderers/description-cell.js

@@ -0,0 +1,74 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Tooltip, IconButton } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import "react-hook-form";
+import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import { DescriptionModificationDialog } from "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import { setModificationMetadata } from "../../../services/networkModification.js";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "@hello-pangea/dnd";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
+import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
+import { EditNoteIcon } from "../../../components/ui/icons/EditNoteIcon.js";
+import { createEditDescriptionStyle } from "../network-modification-table-styles.js";
+function DescriptionCell(props) {
+  const { data, studyUuid, currentNodeId, isDisabled = false } = props;
+  const [isLoading, setIsLoading] = useState(false);
+  const [openDescModificationDialog, setOpenDescModificationDialog] = useState(false);
+  const modificationUuid = data.uuid;
+  const { description } = data;
+  const empty = !description;
+  const updateModification = useCallback(
+    async (descriptionRecord) => {
+      setIsLoading(true);
+      return setModificationMetadata(studyUuid, currentNodeId, modificationUuid, {
+        description: descriptionRecord.description,
+        type: data.type
+      }).finally(() => {
+        setIsLoading(false);
+      });
+    },
+    [studyUuid, currentNodeId, modificationUuid, data.type]
+  );
+  const handleDescDialogClose = useCallback(() => {
+    setOpenDescModificationDialog(false);
+  }, []);
+  const handleModifyDescription = useCallback(() => {
+    setOpenDescModificationDialog(true);
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    openDescModificationDialog && modificationUuid && /* @__PURE__ */ jsx(
+      DescriptionModificationDialog,
+      {
+        open: true,
+        description: description ?? "",
+        onClose: handleDescDialogClose,
+        updateElement: updateModification
+      }
+    ),
+    /* @__PURE__ */ jsx(Tooltip, { title: description ?? /* @__PURE__ */ jsx(FormattedMessage, { id: "addDescription" }), arrow: true, enterDelay: 250, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: handleModifyDescription,
+        disabled: isLoading || isDisabled,
+        sx: createEditDescriptionStyle(data.description),
+        children: /* @__PURE__ */ jsx(EditNoteIcon, { empty })
+      }
+    ) }) })
+  ] });
+}
+export {
+  DescriptionCell
+};

package/dist/features/network-modification-table/renderers/name-cell.js

@@ -0,0 +1,220 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState, useEffect, useRef } from "react";
+import { useIntl } from "react-intl";
+import { useTheme, Box, IconButton, InputBase } from "@mui/material";
+import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
+import { CustomTooltip } from "../../../components/ui/tooltip/CustomTooltip.js";
+import { networkModificationTableStyles, createNameCellLabelBoxSx, createModificationNameCellStyle, createNameCellRootStyle } from "../network-modification-table-styles.js";
+import { DepthBox } from "./depth-box.js";
+import { isCompositeModification } from "../utils.js";
+import { useModificationLabelComputer } from "../../../hooks/useModificationLabelComputer.js";
+import "../../../utils/conversionUtils.js";
+import { snackWithFallback } from "../../../utils/error.js";
+import "../../../utils/types/equipmentType.js";
+import { mergeSx } from "../../../utils/styles.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
+const MIN_CHAR_WIDTH = 30;
+function measureTextPx(text, font) {
+  const ctx = document.createElement("canvas").getContext("2d");
+  if (ctx) {
+    ctx.font = font;
+    return ctx.measureText(text).width;
+  }
+  return text.length * 8;
+}
+function NameCell({ row, onChange }) {
+  const intl = useIntl();
+  const theme = useTheme();
+  const { computeLabel } = useModificationLabelComputer();
+  const { snackError } = useSnackMessage();
+  const { depth } = row;
+  const isComposite = isCompositeModification(row.original);
+  const getModificationLabel = useCallback(
+    (modification, formatBold = true) => {
+      return intl.formatMessage(
+        { id: `network_modifications.${modification.messageType}` },
+        { ...modification, ...computeLabel(modification, formatBold) }
+      );
+    },
+    [computeLabel, intl]
+  );
+  const savedCompositeName = useMemo(() => {
+    if (!isComposite) {
+      return "";
+    }
+    try {
+      return JSON.parse(row.original.messageValues)?.name ?? "";
+    } catch {
+      return "";
+    }
+  }, [isComposite, row.original.messageValues]);
+  const [compositeName, setCompositeName] = useState(savedCompositeName);
+  useEffect(() => {
+    setCompositeName(savedCompositeName);
+  }, [savedCompositeName]);
+  const label = useMemo(
+    () => isComposite ? getModificationLabel({ ...row.original, messageValues: JSON.stringify({ name: compositeName }) }) : getModificationLabel(row.original),
+    [getModificationLabel, row.original, isComposite, compositeName]
+  );
+  const [isEditing, setIsEditing] = useState(false);
+  const [draftName, setDraftName] = useState("");
+  const [inputBaseWidthPx, setInputBaseWidthPx] = useState(null);
+  const labelRef = useRef(null);
+  const inputRef = useRef(null);
+  const isEditingRef = useRef(false);
+  const stopEditing = useCallback(() => {
+    isEditingRef.current = false;
+    setIsEditing(false);
+    setInputBaseWidthPx(null);
+  }, []);
+  const updateName = useCallback(
+    (newName) => {
+      setCompositeName(newName);
+      Promise.resolve(onChange?.(row.original, newName)).catch((error) => {
+        setCompositeName(savedCompositeName);
+        snackWithFallback(snackError, error, { headerId: "networkModificationRenamingError" });
+      });
+    },
+    [onChange, row.original, savedCompositeName, snackError]
+  );
+  const handleBlur = useCallback(() => {
+    if (!isEditingRef.current) {
+      return;
+    }
+    const trimmed = draftName.trim();
+    if (trimmed !== "" && trimmed !== compositeName) {
+      updateName(trimmed);
+    }
+    stopEditing();
+  }, [compositeName, draftName, updateName, stopEditing]);
+  const handleLabelClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      setDraftName(compositeName);
+      if (labelRef.current) {
+        const style = globalThis.getComputedStyle(labelRef.current);
+        const font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+        const px = compositeName.length >= MIN_CHAR_WIDTH ? measureTextPx(compositeName, font) + 20 : measureTextPx("a".repeat(MIN_CHAR_WIDTH), font) + 20;
+        setInputBaseWidthPx(px);
+      }
+      isEditingRef.current = true;
+      setIsEditing(true);
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    },
+    [compositeName]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        const trimmed = draftName.trim();
+        if (trimmed !== "" && trimmed !== compositeName) {
+          updateName(trimmed);
+        }
+        stopEditing();
+        inputRef.current?.blur();
+      } else if (e.key === "Escape") {
+        stopEditing();
+        inputRef.current?.blur();
+      }
+    },
+    [compositeName, draftName, updateName, stopEditing]
+  );
+  const renderDepthBox = () => {
+    const depthLevelCount = depth;
+    return Array.from({ length: depthLevelCount }, (_, i) => /* @__PURE__ */ jsx(DepthBox, { firstLevel: i === 0, displayAsFolder: isComposite && i === depthLevelCount - 1 }, i));
+  };
+  const compositeReadModeProps = isComposite ? {
+    ref: labelRef,
+    onClick: handleLabelClick,
+    sx: {
+      cursor: "text",
+      "&:hover": {
+        textDecoration: "underline dotted",
+        textDecorationColor: theme.palette.text.secondary
+      }
+    }
+  } : {};
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: mergeSx(
+        networkModificationTableStyles.tableCell,
+        createNameCellRootStyle(theme, row.getIsExpanded(), depth)
+      ),
+      children: [
+        renderDepthBox(),
+        /* @__PURE__ */ jsxs(Box, { sx: networkModificationTableStyles.nameCellInnerRow, children: [
+          isComposite && /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.nameCellTogglerBox, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: (e) => {
+                e.stopPropagation();
+                row.getToggleExpandedHandler()();
+              },
+              sx: networkModificationTableStyles.nameCellToggleButton,
+              "aria-label": row.getIsExpanded() ? "Collapse" : "Expand",
+              children: row.getIsExpanded() ? /* @__PURE__ */ jsx(KeyboardArrowDown, { fontSize: "small" }) : /* @__PURE__ */ jsx(KeyboardArrowRight, { fontSize: "small" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Box, { sx: createNameCellLabelBoxSx(row.getIsExpanded(), depth), children: isComposite && isEditing ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: mergeSx(networkModificationTableStyles.modificationLabel, {
+                display: "inline-flex",
+                width: inputBaseWidthPx ? `${inputBaseWidthPx}px` : `${MIN_CHAR_WIDTH}ch`,
+                maxWidth: "100%",
+                flexShrink: 0
+              }),
+              children: /* @__PURE__ */ jsx(
+                InputBase,
+                {
+                  inputRef,
+                  value: draftName,
+                  onChange: (e) => setDraftName(e.target.value),
+                  onBlur: handleBlur,
+                  onKeyDown: handleKeyDown,
+                  onMouseDown: (e) => e.stopPropagation(),
+                  sx: {
+                    width: "100%",
+                    fontSize: "inherit",
+                    fontFamily: "inherit",
+                    color: "inherit",
+                    "& .MuiInputBase-input": {
+                      border: `1px solid ${theme.palette.primary.main}`,
+                      borderRadius: `${theme.shape.borderRadius}px`,
+                      backgroundColor: theme.palette.background.paper
+                    }
+                  }
+                }
+              )
+            }
+          ) : (
+            /* Read mode */
+            /* @__PURE__ */ jsx(CustomTooltip, { disableFocusListener: true, disableTouchListener: true, title: label, children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                ...compositeReadModeProps,
+                sx: mergeSx(
+                  networkModificationTableStyles.modificationLabel,
+                  createModificationNameCellStyle(row.original.activated),
+                  compositeReadModeProps.sx
+                ),
+                children: label
+              }
+            ) })
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  NameCell
+};

package/dist/features/network-modification-table/renderers/root-network-chip-cell.js

@@ -0,0 +1,113 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from "react";
+import "react-intl";
+import "@mui/material";
+import { ActivableChip } from "../../../components/ui/inputs/ActivableChip.js";
+import "../../../utils/conversionUtils.js";
+import { snackWithFallback } from "../../../utils/error.js";
+import "../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import { updateModificationStatusByRootNetwork } from "../../../services/networkModification.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
+function getUpdatedExcludedModifications(prev, rootNetworkUuid, modificationUuid) {
+  const exists = prev.some((item) => item.rootNetworkUuid === rootNetworkUuid);
+  if (exists) {
+    let newStatus = false;
+    const nextExcluded = prev.map((modif) => {
+      if (modif.rootNetworkUuid !== rootNetworkUuid) {
+        return modif;
+      }
+      const isExcluded = modif.modificationUuidsToExclude.includes(modificationUuid);
+      const newModificationUuidsToExclude = isExcluded ? modif.modificationUuidsToExclude.filter((id) => id !== modificationUuid) : [...modif.modificationUuidsToExclude, modificationUuid];
+      newStatus = isExcluded;
+      return {
+        ...modif,
+        modificationUuidsToExclude: newModificationUuidsToExclude
+      };
+    });
+    return { nextExcluded, newStatus };
+  }
+  return {
+    nextExcluded: [
+      ...prev,
+      {
+        rootNetworkUuid,
+        modificationUuidsToExclude: [modificationUuid]
+      }
+    ],
+    newStatus: false
+  };
+}
+function RootNetworkChipCell(props) {
+  const {
+    data,
+    studyUuid,
+    currentNodeId,
+    rootNetwork,
+    modificationsToExclude,
+    setModificationsToExclude,
+    isDisabled = false
+  } = props;
+  const [isLoading, setIsLoading] = useState(false);
+  const { snackError } = useSnackMessage();
+  const modificationUuid = data.uuid;
+  const isModificationActivated = useMemo(() => {
+    if (rootNetwork.isCreating) {
+      return true;
+    }
+    const excludedSet = new Set(
+      modificationsToExclude.find((item) => item.rootNetworkUuid === rootNetwork.rootNetworkUuid)?.modificationUuidsToExclude || []
+    );
+    return !excludedSet.has(modificationUuid);
+  }, [modificationUuid, modificationsToExclude, rootNetwork.rootNetworkUuid, rootNetwork.isCreating]);
+  const handleModificationActivationByRootNetwork = useCallback(() => {
+    if (!studyUuid || !currentNodeId) {
+      return;
+    }
+    setIsLoading(true);
+    const { nextExcluded, newStatus } = getUpdatedExcludedModifications(
+      modificationsToExclude,
+      rootNetwork.rootNetworkUuid,
+      modificationUuid
+    );
+    setModificationsToExclude(nextExcluded);
+    updateModificationStatusByRootNetwork(
+      studyUuid,
+      currentNodeId,
+      rootNetwork.rootNetworkUuid,
+      modificationUuid,
+      newStatus
+    ).catch((error) => {
+      setModificationsToExclude(
+        (prev) => getUpdatedExcludedModifications(prev, rootNetwork.rootNetworkUuid, modificationUuid).nextExcluded
+      );
+      snackWithFallback(snackError, error, { headerId: "modificationActivationByRootNetworkError" });
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }, [
+    modificationUuid,
+    studyUuid,
+    currentNodeId,
+    modificationsToExclude,
+    rootNetwork.rootNetworkUuid,
+    setModificationsToExclude,
+    snackError
+  ]);
+  return /* @__PURE__ */ jsx(
+    ActivableChip,
+    {
+      label: rootNetwork.tag,
+      tooltipMessage: rootNetwork.name,
+      isActivated: isModificationActivated,
+      isDisabled: isLoading || isDisabled,
+      onClick: handleModificationActivationByRootNetwork
+    }
+  );
+}
+export {
+  RootNetworkChipCell
+};

package/dist/features/network-modification-table/renderers/switch-cell.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { Tooltip, Switch } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import "../../../utils/conversionUtils.js";
+import { snackWithFallback } from "../../../utils/error.js";
+import "../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import { setModificationMetadata } from "../../../services/networkModification.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
+function SwitchCell(props) {
+  const { data, studyUuid, currentNodeId, isDisabled = false } = props;
+  const [isLoading, setIsLoading] = useState(false);
+  const { snackError } = useSnackMessage();
+  const modificationUuid = data.uuid;
+  const [modificationActivated, setModificationActivated] = useState(data.activated);
+  useEffect(() => {
+    setModificationActivated(data.activated);
+  }, [data.activated]);
+  const toggleModificationActive = useCallback(
+    (_event, checked) => {
+      if (!modificationUuid) {
+        return;
+      }
+      setIsLoading(true);
+      setModificationActivated(checked);
+      setModificationMetadata(studyUuid, currentNodeId, modificationUuid, {
+        activated: checked,
+        type: data.type
+      }).catch((error) => {
+        setModificationActivated(data.activated);
+        snackWithFallback(snackError, error, { headerId: "networkModificationActivationError" });
+      }).finally(() => {
+        setIsLoading(false);
+      });
+    },
+    [modificationUuid, studyUuid, currentNodeId, data.type, data.activated, snackError]
+  );
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: /* @__PURE__ */ jsx(FormattedMessage, { id: modificationActivated ? "deactivateModification" : "activateModification" }),
+      arrow: true,
+      enterDelay: 250,
+      children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+        Switch,
+        {
+          size: "small",
+          disabled: isLoading || isDisabled,
+          checked: modificationActivated,
+          onChange: toggleModificationActive
+        }
+      ) })
+    }
+  );
+}
+export {
+  SwitchCell
+};