fix: various fixes again

Author: aldbr

packages/diracx-web-components/src/components/JobMonitor/JobMonitor.tsx

@@ -44,6 +44,7 @@ import {
   jobMonitorReducer,
   defaultColumnVisibility,
   defaultPagination,
+  useJobMonitorContext,
 } from "./JobMonitorContext";
 
 // Static sx props extracted to avoid new object references on every render
@@ -120,7 +121,6 @@ function loadInitialState(appId: string): JobMonitorState {
  */
 export default function JobMonitor() {
   const appId = useApplicationId();
-  const theme = useTheme();
   const diracxUrl = useDiracxUrl();
 
   const [state, dispatch] = useReducer(
@@ -198,49 +198,6 @@ export default function JobMonitor() {
     [],
   );
 
-  // Precompute status colors adjusted for theme mode
-  const statusBackgroundColors: Record<string, string> = useMemo(() => {
-    const adjust =
-      theme.palette.mode === "light"
-        ? (c: string) => darken(c, 0.1)
-        : (c: string) => lighten(c, 0.1);
-    const result: Record<string, string> = {};
-    for (const [key, value] of Object.entries(statusColors)) {
-      result[key] = adjust(value);
-    }
-    return result;
-  }, [theme.palette.mode, statusColors]);
-
-  const defaultStatusColor = useMemo(
-    () =>
-      theme.palette.mode === "light"
-        ? darken(brown[500], 0.1)
-        : lighten(brown[500], 0.1),
-    [theme.palette.mode],
-  );
-
-  /**
-   * Renders the status cell with colors
-   */
-  const renderStatusCell = useCallback(
-    (status: string) => (
-      <span
-        style={{
-          display: "inline-block",
-          borderRadius: "10px",
-          padding: "1px 8px",
-          fontSize: "0.75rem",
-          backgroundColor: statusBackgroundColors[status] ?? defaultStatusColor,
-          color: "white",
-          fontWeight: "bold",
-        }}
-      >
-        {status}
-      </span>
-    ),
-    [statusBackgroundColors, defaultStatusColor],
-  );
-
   const columnHelper = useMemo(() => createColumnHelper<Job>(), []);
 
   /**
@@ -256,7 +213,7 @@ export default function JobMonitor() {
       columnHelper.accessor("Status", {
         id: "Status",
         header: "Status",
-        cell: (info) => renderStatusCell(info.getValue()),
+        cell: (info) => <StatusCell status={info.getValue()} />,
         meta: {
           type: CategoryType.STRING,
           values: Object.keys(statusColors).sort(),
@@ -335,7 +292,7 @@ export default function JobMonitor() {
         meta: { type: CategoryType.NUMBER },
       }),
     ],
-    [columnHelper, renderStatusCell, statusColors],
+    [columnHelper, statusColors],
   );
 
   // Handle the application of filters
@@ -470,6 +427,36 @@ export default function JobMonitor() {
   );
 }
 
+/**
+ * Renders a status badge with theme-aware colors.
+ * Defined outside JobMonitor so the column definition stays stable across theme toggles.
+ */
+function StatusCell({ status }: { status: string }) {
+  const theme = useTheme();
+  const { statusColors } = useJobMonitorContext();
+  const baseColor = statusColors[status] ?? brown[500];
+  const bg =
+    theme.palette.mode === "light"
+      ? darken(baseColor, 0.1)
+      : lighten(baseColor, 0.1);
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        borderRadius: "10px",
+        padding: "1px 8px",
+        fontSize: "0.75rem",
+        backgroundColor: bg,
+        color: "white",
+        fontWeight: "bold",
+      }}
+    >
+      {status}
+    </span>
+  );
+}
+
 /**
  * This function validates and converts the state of the application
  * It ensure that the state is in the correct format

packages/diracx-web-components/src/components/shared/DataTable/DataTable.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { memo, useCallback, useMemo, useRef, useState } from "react";
 import Box from "@mui/material/Box";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -30,6 +30,24 @@ import { DataTableToolbar } from "./DataTableToolbar";
 import { DataTableHeader } from "./DataTableHeader";
 import type { ToolbarAction } from "./SplitActionButton";
 
+// Static styles for virtualized row cells
+const checkboxCellStyle: React.CSSProperties = {
+  position: "sticky",
+  left: 0,
+  zIndex: 1,
+};
+
+const unpinnedCellStyle: React.CSSProperties = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+};
+
+const paddingCellStyle: React.CSSProperties = {
+  padding: 0,
+  border: "none",
+};
+
 /**
  * Menu item
  */
@@ -76,7 +94,9 @@ export interface DataTableProps<T extends Record<string, unknown>> {
  *
  * @returns a DataTable component
  */
-export function DataTable<T extends Record<string, unknown>>({
+export const DataTable = memo(function DataTable<
+  T extends Record<string, unknown>,
+>({
   title,
   table,
   totalRows,
@@ -166,19 +186,16 @@ export function DataTable<T extends Record<string, unknown>>({
     [table, checkboxWidth],
   );
 
+  const checkboxCellWithWidth = useMemo<React.CSSProperties>(
+    () => ({ ...checkboxCellStyle, width: checkboxWidth }),
+    [checkboxWidth],
+  );
+
   const itemContent = useCallback(
     (_index: number, row: Row<T>) => (
       <>
         {!disableCheckbox && (
-          <TableCell
-            padding="checkbox"
-            style={{
-              position: "sticky",
-              left: 0,
-              zIndex: 1,
-              width: checkboxWidth,
-            }}
-          >
+          <TableCell padding="checkbox" style={checkboxCellWithWidth}>
             <Checkbox
               size="small"
               name={`select-row-${row.id}`}
@@ -188,29 +205,33 @@ export function DataTable<T extends Record<string, unknown>>({
             />
           </TableCell>
         )}
-        {row.getVisibleCells().map((cell) => (
-          <TableCell
-            key={cell.id}
-            style={{
-              position: cell.column.getIsPinned() ? "sticky" : "static",
-              left:
-                cell.column.getIsPinned() === "left"
-                  ? getLeftOffsetForColumn(cell.column)
-                  : undefined,
-              right: cell.column.getIsPinned() === "right" ? 0 : undefined,
-              zIndex: cell.column.getIsPinned() ? 1 : 0,
-              width: cell.column.getSize(),
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            }}
-          >
-            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-          </TableCell>
-        ))}
+        {row.getVisibleCells().map((cell) => {
+          const isPinned = cell.column.getIsPinned();
+          const style: React.CSSProperties = isPinned
+            ? {
+                ...unpinnedCellStyle,
+                position: "sticky",
+                left:
+                  isPinned === "left"
+                    ? getLeftOffsetForColumn(cell.column)
+                    : undefined,
+                right: isPinned === "right" ? 0 : undefined,
+                zIndex: 1,
+                width: cell.column.getSize(),
+              }
+            : {
+                ...unpinnedCellStyle,
+                width: cell.column.getSize(),
+              };
+          return (
+            <TableCell key={cell.id} style={style}>
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </TableCell>
+          );
+        })}
       </>
     ),
-    [disableCheckbox, checkboxWidth, getLeftOffsetForColumn],
+    [disableCheckbox, checkboxCellWithWidth, getLeftOffsetForColumn],
   );
 
   const selectedRows = table.getSelectedRowModel().rows;
@@ -377,9 +398,8 @@ export function DataTable<T extends Record<string, unknown>>({
                 <tr>
                   <td
                     style={{
+                      ...paddingCellStyle,
                       height: rowVirtualizer.getVirtualItems()[0].start,
-                      padding: 0,
-                      border: "none",
                     }}
                   />
                 </tr>
@@ -408,11 +428,10 @@ export function DataTable<T extends Record<string, unknown>>({
                 <tr>
                   <td
                     style={{
+                      ...paddingCellStyle,
                       height:
                         rowVirtualizer.getTotalSize() -
                         (rowVirtualizer.getVirtualItems().at(-1)?.end ?? 0),
-                      padding: 0,
-                      border: "none",
                     }}
                   />
                 </tr>
@@ -464,4 +483,6 @@ export function DataTable<T extends Record<string, unknown>>({
       )}
     </Box>
   );
-}
+}) as <T extends Record<string, unknown>>(
+  props: DataTableProps<T>,
+) => React.ReactElement;