update

InseeFrLab · Jan 20, 2025 · 33c3fe6 · 33c3fe6
1 parent f4be0ab
commit 33c3fe6
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 24 deletions.
diff --git a/web/src/core/usecases/dataExplorer/selectors.ts b/web/src/core/usecases/dataExplorer/selectors.ts
@@ -2,7 +2,6 @@ import type { State as RootState } from "core/bootstrap";
 import { createSelector } from "clean-architecture";
 import { name } from "./state";
 import { assert } from "tsafe/assert";
-import type { GridColDef } from "@mui/x-data-grid";
 
 const state = (rootState: RootState) => rootState[name];
 
@@ -13,20 +12,7 @@ const columns = createSelector(
             return undefined;
         }
 
-        const columns = data.columns.map(
-            column =>
-                ({
-                    field: column.name,
-                    sortable: false,
-                    type: (() => {
-                        if (column.type === "bigint") return "string";
-                        if (column.type === "binary") return "string";
-                        return column.type;
-                    })()
-                }) satisfies GridColDef
-        );
-
-        return columns;
+        return data.columns;
     }
 );
 

diff --git a/web/src/ui/pages/dataExplorer/DataExplorer.tsx b/web/src/ui/pages/dataExplorer/DataExplorer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { tss } from "tss";
 import type { PageRoute } from "./route";
 import { routes } from "ui/routes";
@@ -8,6 +8,7 @@ import { CircularProgress } from "onyxia-ui/CircularProgress";
 import { assert } from "tsafe/assert";
 import { UrlInput } from "./UrlInput";
 import { PageHeader } from "onyxia-ui/PageHeader";
+import { Text } from "onyxia-ui/Text";
 import { getIconUrlByName } from "lazy-icons";
 import { declareComponentKeys, useTranslation } from "ui/i18n";
 import type { Link } from "type-route";
@@ -17,7 +18,7 @@ import { autosizeOptions, CustomDataGrid } from "ui/shared/Datagrid/CustomDataGr
 import { SlotsDataGridToolbar } from "./SlotsDataGridToolbar";
 import { exclude } from "tsafe/exclude";
 import { useApplyClassNameToParent } from "ui/tools/useApplyClassNameToParent";
-import { useGridApiRef } from "@mui/x-data-grid";
+import { type GridColDef, useGridApiRef } from "@mui/x-data-grid";
 import { useEffectOnValueChange } from "powerhooks/useEffectOnValueChange";
 
 export type Props = {
@@ -62,6 +63,38 @@ export default function DataExplorer(props: Props) {
         isQuerying
     } = useCoreState("dataExplorer", "main");
 
+    const modifiedColumns = useMemo(() => {
+        if (columns === undefined) return undefined;
+        return columns.map(
+            column =>
+                ({
+                    field: column.name,
+                    sortable: false,
+                    renderHeader: () => (
+                        <Text typo="body 1">
+                            {column.name}
+                            <Text
+                                typo="caption"
+                                className={classes.dataGridColumnHeaderType}
+                            >
+                                {column.rowType}
+                            </Text>
+                        </Text>
+                    ),
+                    headerAlign: "left",
+                    type: (() => {
+                        switch (column.type) {
+                            case "bigint":
+                            case "binary":
+                                return "string";
+                            default:
+                                return column.type;
+                        }
+                    })()
+                }) satisfies GridColDef
+        );
+    }, [columns]);
+
     useEffect(() => {
         if (columns) {
             apiRef.current.autosizeColumns(autosizeOptions);
@@ -147,7 +180,7 @@ export default function DataExplorer(props: Props) {
                         );
                     }
 
-                    if (rows === undefined) {
+                    if (rows === undefined || modifiedColumns === undefined) {
                         if (!isQuerying) {
                             return null;
                         }
@@ -162,7 +195,6 @@ export default function DataExplorer(props: Props) {
                     assert(queryParams.page !== undefined);
                     assert(queryParams.rowsPerPage !== undefined);
 
-                    console.log();
                     return (
                         <div className={cx(classes.dataGridWrapper, className)}>
                             <CustomDataGrid
@@ -200,7 +232,7 @@ export default function DataExplorer(props: Props) {
                                     extraRestorableStates.selectedRowIndex ?? undefined
                                 ].filter(exclude(undefined))}
                                 rows={rows}
-                                columns={columns}
+                                columns={modifiedColumns}
                                 disableColumnMenu
                                 loading={isQuerying}
                                 paginationMode="server"
@@ -295,6 +327,9 @@ const useStyles = tss.withName({ DataExplorer }).create(({ theme }) => ({
                 backgroundColor: theme.colors.palette.focus.light
             }
         }
+    },
+    dataGridColumnHeaderType: {
+        fontStyle: "italic"
     }
 }));
 

diff --git a/web/src/ui/shared/Datagrid/CustomDataGrid.tsx b/web/src/ui/shared/Datagrid/CustomDataGrid.tsx
@@ -46,7 +46,6 @@ export const CustomDataGrid = <R extends GridValidRowModel = any>(
         () =>
             ({
                 ...props.classes,
-                columnSeparator: classes.columnSeparator,
                 iconSeparator: classes.iconSeparator
             }) satisfies Partial<GridClasses>,
         [props.classes, classes]
@@ -77,6 +76,7 @@ export const CustomDataGrid = <R extends GridValidRowModel = any>(
                                   />
                               </>
                           ),
+
                           display: "flex"
                       } satisfies GridColDef;
                   })
@@ -89,7 +89,6 @@ export const CustomDataGrid = <R extends GridValidRowModel = any>(
             {...propsRest}
             slots={{
                 noRowsOverlay: CustomNoRowsOverlay,
-
                 ...slots
             }}
             slotProps={{}}
@@ -115,8 +114,7 @@ const { i18n } = declareComponentKeys<
 
 export type I18n = typeof i18n;
 const useStyles = tss.withName({ CustomDataGrid }).create(({ theme }) => ({
-    columnSeparator: { "&&&&&&&": { opacity: "1" } }, //Ensures the column separator remains visible (opacity 1) when a column header is selected. By default, MUI reduces the opacity to 0 because an outline is applied to the selected column header
     iconSeparator: {
-        "&&": { color: theme.colors.useCases.typography.textDisabled }
+        "&&&&": { color: theme.colors.useCases.typography.textDisabled }
     }
 }));