use commons-ui to display netmods through tanstack

src/components/graph/menus/network-modifications/network-modification-menu.type.ts

@@ -33,11 +33,6 @@ export interface CaseInfos {
     caseFormat: string | null;
 }
 
-export interface ExcludedNetworkModifications {
-    rootNetworkUuid: UUID;
-    modificationUuidsToExclude: UUID[];
-}
-
 export enum NetworkModificationCopyType {
     COPY = 'COPY',
     MOVE = 'MOVE',

src/components/graph/menus/network-modifications/network-modification-node-editor.tsx

@@ -9,6 +9,7 @@
     ElementSaveDialog,
     ElementType,
     EquipmentType,
+    ExcludedNetworkModifications,
     fetchNetworkModification,
     IElementCreationDialog,
     IElementUpdateDialog,
@@ -82,7 +83,6 @@
     stashModifications,
 } from '../../../../services/study/network-modifications';
 import {
-    ExcludedNetworkModifications,
     MenuDefinitionSubItem,
     MenuDefinitionWithoutSubItem,
     MenuSection,

src/components/graph/menus/network-modifications/network-modification-table/columns-definition.tsx → src/components/graph/menus/network-modifications/network-modification-table/createColumns.tsx

@@ -1,67 +1,31 @@
-/*
+/**
  * Copyright (c) 2026, RTE (http://www.rte-france.com)
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-
-import React, { SetStateAction } from 'react';
-import { Badge, Box } from '@mui/material';
-import { NetworkModificationMetadata } from '@gridsuite/commons-ui';
-import { ColumnDef } from '@tanstack/react-table';
-import DragHandleCell from './renderers/drag-handle-cell';
 import {
+    BASE_MODIFICATION_TABLE_COLUMNS,
+    computeTagMinSize,
+    createRootNetworkChipCellSx,
+    DragHandleCell,
+    ExcludedNetworkModifications,
+    NameCell,
+    NameHeaderProps,
     NetworkModificationEditorNameHeader,
-    NetworkModificationEditorNameHeaderProps,
-} from './renderers/network-modification-node-editor-name-header';
-import NameCell from './renderers/name-cell';
+    NetworkModificationMetadata,
+    networkTableStyles,
+    SelectCell,
+    SelectHeaderCell,
+} from '@gridsuite/commons-ui';
+import React, { SetStateAction } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
 import DescriptionCell from './renderers/description-cell';
 import SwitchCell from './renderers/switch-cell';
-import { ExcludedNetworkModifications, RootNetworkMetadata } from '../network-modification-menu.type';
-import RootNetworkChipCell from './renderers/root-network-chip-cell';
+import { RootNetworkMetadata } from '../network-modification-menu.type';
+import { Badge, Box } from '@mui/material';
 import { RemoveRedEye as RemoveRedEyeIcon } from '@mui/icons-material';
-import SelectCell from './renderers/select-cell';
-import SelectHeaderCell from './renderers/select-header-cell';
-import { createRootNetworkChipCellSx, styles } from './styles';
-
-const CHIP_PADDING_PX = 24;
-const CHAR_WIDTH_PX = 8;
-const COLUMN_PADDING_PX = 12;
-const MIN_COLUMN_SIZE = 40;
-
-const computeTagMinSize = (tag: string): number => {
-    const chipContentWidth = tag.length * CHAR_WIDTH_PX + CHIP_PADDING_PX;
-    return Math.max(chipContentWidth + COLUMN_PADDING_PX, MIN_COLUMN_SIZE);
-};
-
-export const BASE_MODIFICATION_TABLE_COLUMNS = {
-    DRAG_HANDLE: {
-        id: 'dragHandle',
-        autoExtensible: false,
-    },
-    SELECT: {
-        id: 'select',
-        autoExtensible: false,
-    },
-    NAME: {
-        id: 'modificationName',
-        autoExtensible: true,
-    },
-    DESCRIPTION: {
-        id: 'modificationDescription',
-        autoExtensible: false,
-    },
-    SWITCH: {
-        id: 'switch',
-        autoExtensible: false,
-    },
-};
-
-export const AUTO_EXTENSIBLE_COLUMNS = Object.values(BASE_MODIFICATION_TABLE_COLUMNS)
-    .filter((column) => column.autoExtensible)
-    .map((column) => column.id);
-
-type NameHeaderProps = Omit<NetworkModificationEditorNameHeaderProps, 'modificationCount'>;
+import RootNetworkChipCell from './renderers/root-network-chip-cell';
 
 /**
  * Column definition is broken up in 2 parts : base columns which are always on display and root networks columns.
@@ -77,7 +41,7 @@
 ): ColumnDef<NetworkModificationMetadata>[] => [
     {
         id: BASE_MODIFICATION_TABLE_COLUMNS.DRAG_HANDLE.id,
-        cell: () => <DragHandleCell isRowDragDisabled={isRowDragDisabled} />,
+        cell: () => <DragHandleCell isRowDragDisabled />,
         size: 24,
         minSize: 24,
         meta: {
@@ -93,7 +57,7 @@
         size: 32,
         minSize: 32,
         meta: {
-            cellStyle: styles.columnCell.select,
+            cellStyle: networkTableStyles.columnCell.select,
         },
     },
     {
@@ -103,7 +67,7 @@
         ),
         cell: ({ row }) => <NameCell row={row} />,
         meta: {
-            cellStyle: styles.columnCell.modificationName,
+            cellStyle: networkTableStyles.columnCell.modificationName,
         },
         minSize: 160,
     },
@@ -145,7 +109,7 @@
             id: rootNetworkUuid,
             header: () =>
                 isCurrentRootNetwork && modificationsCount >= 1 ? (
-                    <Box sx={styles.rootNetworkHeader}>
+                    <Box sx={networkTableStyles.rootNetworkHeader}>
                         <Badge overlap="circular" color="primary" variant="dot">
                             <RemoveRedEyeIcon />
                         </Badge>
@@ -164,7 +128,7 @@
             size: sharedSize,
             minSize: tagMinSize,
             meta: {
-                cellStyle: styles.columnCell.rootNetworkChip,
+                cellStyle: networkTableStyles.columnCell.rootNetworkChip,
             },
         };
     });

src/components/graph/menus/network-modifications/network-modification-table/network-modifications-table.tsx

@@ -6,20 +6,25 @@
  */
 
 import React, { Dispatch, FunctionComponent, SetStateAction, useEffect, useMemo, useRef } from 'react';
-import { NetworkModificationMetadata } from '@gridsuite/commons-ui';
+import {
+    AUTO_EXTENSIBLE_COLUMNS,
+    createHeaderCellStyle,
+    ExcludedNetworkModifications,
+    MODIFICATION_ROW_HEIGHT,
+    ModificationRow,
+    NetworkModificationEditorNameHeaderProps,
+    NetworkModificationMetadata,
+    networkTableStyles,
+    useModificationsDragAndDrop,
+} from '@gridsuite/commons-ui';
 import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
 import { useSelector } from 'react-redux';
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { DragDropContext, DragStart, Droppable, DroppableProvided, DropResult } from '@hello-pangea/dnd';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { NetworkModificationEditorNameHeaderProps } from './renderers/network-modification-node-editor-name-header';
-import { ExcludedNetworkModifications } from '../network-modification-menu.type';
-import { createHeaderCellStyle, MODIFICATION_ROW_HEIGHT, styles } from './styles';
-import { AUTO_EXTENSIBLE_COLUMNS, createBaseColumns, createRootNetworksColumns } from './columns-definition';
-import ModificationRow from './row/modification-row';
 import { useTheme } from '@mui/material/styles';
-import { useModificationsDragAndDrop } from './use-modifications-drag-and-drop';
 import { AppState } from '../../../../../redux/reducer.type';
+import { createBaseColumns, createRootNetworksColumns } from './createColumns';
 
 interface NetworkModificationsTableProps extends Omit<NetworkModificationEditorNameHeaderProps, 'modificationCount'> {
     modifications: NetworkModificationMetadata[];
@@ -126,14 +131,14 @@ const NetworkModificationsTable: FunctionComponent<NetworkModificationsTableProp
 
     return (
         <DragDropContext onDragEnd={handleDragEnd} onDragStart={onRowDragStart} onDragUpdate={handleDragUpdate}>
-            <Box sx={styles.tableWrapper}>
+            <Box sx={networkTableStyles.tableWrapper}>
                 <Droppable droppableId="modifications-table" mode="virtual" renderClone={renderClone}>
                     {(provided: DroppableProvided) => (
-                        <Box ref={containerRef} sx={styles.container}>
-                            <Table sx={styles.table}>
-                                <TableHead sx={styles.thead}>
+                        <Box ref={containerRef} sx={networkTableStyles.container}>
+                            <Table sx={networkTableStyles.table}>
+                                <TableHead sx={networkTableStyles.thead}>
                                     {table.getHeaderGroups().map((headerGroup) => (
-                                        <TableRow key={headerGroup.id} sx={styles.tableRow}>
+                                        <TableRow key={headerGroup.id} sx={networkTableStyles.tableRow}>
                                             {headerGroup.headers.map((header) => (
                                                 <TableCell
                                                     key={header.id}
@@ -154,7 +159,7 @@ const NetworkModificationsTable: FunctionComponent<NetworkModificationsTableProp
                                 <TableBody
                                     ref={provided.innerRef}
                                     {...provided.droppableProps}
-                                    sx={{ ...styles.tableBody, height: `${virtualizer.getTotalSize()}px` }}
+                                    sx={{ ...networkTableStyles.tableBody, height: `${virtualizer.getTotalSize()}px` }}
                                 >
                                     {virtualItems.map((virtualRow) => {
                                         const row = rows[virtualRow.index];

src/components/graph/menus/network-modifications/network-modification-table/renderers/description-cell.tsx

@@ -4,13 +4,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { DescriptionModificationDialog, EditNoteIcon, NetworkModificationMetadata } from '@gridsuite/commons-ui';
+import {
+    createEditDescriptionStyle,
+    DescriptionModificationDialog,
+    EditNoteIcon,
+    NetworkModificationMetadata,
+} from '@gridsuite/commons-ui';
 import { FunctionComponent, useCallback, useState } from 'react';
 import { Tooltip } from '@mui/material';
 import { useSelector } from 'react-redux';
 import IconButton from '@mui/material/IconButton';
 import { useIsAnyNodeBuilding } from '../../../../../utils/is-any-node-building-hook';
-import { createEditDescriptionStyle } from '../styles';
 import { setModificationMetadata } from '../../../../../../services/study/network-modifications';
 import { AppState } from '../../../../../../redux/reducer.type';