Fix table scrolling (#1484)

swisstopo · Sep 4, 2024 · 2348cd6 · 2348cd6
2 parents 42c29e6 + e89f38c
commit 2348cd6
Show file tree

Hide file tree

Showing 8 changed files with 201 additions and 238 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -46,6 +46,7 @@
 - Label for description quality was wrong in lithology filter and settings.
 - Boreholes could not be deleted in the detail view if the publication status was not `Change in progess`.
 - Boreholes table loaded all boreholes instead of none when a filter combination with polygon was used that did not return any boreholes.
+- Boreholes table reset scroll position when hovering over a row.
 
 ## v2.1.772 - 2024-06-27
 

diff --git a/src/client/cypress/e2e/filters/polygonFilter.cy.js b/src/client/cypress/e2e/filters/polygonFilter.cy.js
@@ -49,8 +49,9 @@ describe("Polygon filter tests", () => {
     cy.get('[data-cy="polygon-filter-chip"]').children().eq(1).click();
 
     assertPolygonFilterInactive();
-
     cy.wait("@borehole_geojson");
+    // wait for map to redraw
+    cy.wait(2000);
 
     // Redraw polygon
     cy.get('[data-cy="polygon-filter-button"]').click();

diff --git a/src/client/src/api-lib/ReduxStateInterfaces.ts b/src/client/src/api-lib/ReduxStateInterfaces.ts
@@ -1,15 +1,35 @@
 export interface ReduxRootState {
+  filters: Filters;
+  editor: EditorStore;
+  setting: Setting;
   core_user: User;
   core_borehole_editor_list: Boreholes;
   core_borehole: Borehole;
 }
 
-export interface User {
-  data: UserData;
+export interface Setting {
+  data: SettingData;
+}
+
+export interface SettingData {
+  map: {
+    explorer: string;
+  };
+}
+export interface Filters {
+  filter: string;
+}
+
+export interface EditorStore {
+  mselected: string;
 }
 
 export type Role = "PUBLIC" | "VIEW" | "VALID" | "EDIT" | "CONTROL";
 
+export interface User {
+  data: UserData;
+}
+
 export interface UserData {
   // Incomplete type definition, add other properties as needed
   workgroups: Workgroup[];

diff --git a/src/client/src/pages/overview/boreholeTable/boreholeTable.tsx b/src/client/src/pages/overview/boreholeTable/boreholeTable.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useMemo, useRef } from "react";
+import React, { FC, useEffect, useMemo, useRef } from "react";
 import {
   DataGrid,
   GridColDef,
@@ -10,7 +10,7 @@ import {
   useGridApiRef,
 } from "@mui/x-data-grid";
 import LockIcon from "../../../assets/icons/lock.svg?react";
-import { Box, styled } from "@mui/system";
+import { Box } from "@mui/system";
 import { theme } from "../../../AppTheme.ts";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
@@ -28,7 +28,7 @@ export interface BoreholeTableProps {
   setSelectionModel: (model: GridRowSelectionModel) => void;
   sortModel: GridSortModel;
   setSortModel: (model: GridSortModel) => void;
-  onHover: (id: string | null) => void;
+  setHover: React.Dispatch<React.SetStateAction<number | null>>;
   rowToHighlight: number | null;
   isBusy: boolean;
 }
@@ -41,7 +41,7 @@ export const BoreholeTable: FC<BoreholeTableProps> = ({
   setSelectionModel,
   sortModel,
   setSortModel,
-  onHover,
+  setHover,
   rowToHighlight,
   isBusy,
 }: BoreholeTableProps) => {
@@ -160,11 +160,11 @@ export const BoreholeTable: FC<BoreholeTableProps> = ({
   useEffect(() => {
     if (apiRef.current) {
       const handleRowMouseEnter: GridEventListener<"rowMouseEnter"> = params => {
-        onHover(params.row.id);
+        setHover(params.row.id);
       };
 
       const handleRowMouseLeave: GridEventListener<"rowMouseLeave"> = () => {
-        onHover(null);
+        setHover(null);
       };
 
       const api = apiRef.current;
@@ -177,50 +177,49 @@ export const BoreholeTable: FC<BoreholeTableProps> = ({
         unsubscribeMouseLeave();
       };
     }
-  }, [apiRef, onHover]);
-
-  const StyledDataGrid = styled(DataGrid)(() => ({
-    ".MuiDataGrid-columnHeader": {
-      backgroundColor: theme.palette.boxShadow,
-    },
-    ".MuiDataGrid-root .MuiDataGrid-columnHeader:focus, &.MuiDataGrid-root .MuiDataGrid-cell:focus": {
-      outline: "none",
-    },
-    ".MuiTablePagination-toolbar p": {
-      margin: 0,
-    },
-    ".MuiDataGrid-footerContainer": {
-      height: "42px !important",
-    },
-    ".MuiTablePagination-selectLabel": {
-      fontSize: "12px",
-    },
-    ".MuiTablePagination-selectIcon": {
-      width: "14px",
-      height: "14px",
-    },
-    ".MuiTablePagination-displayedRows": {
-      fontSize: "12px",
-    },
-    ".MuiIconButton-root": {
-      color: "#0000008A",
-      backgroundColor: "rgba(0, 0, 0, 0)",
-    },
-    ".MuiIconButton-root.Mui-disabled": {
-      color: "#828e9a",
-    },
-    "& .highlighted-row": {
-      backgroundColor: theme.palette.background.lightgrey,
-      color: theme.palette.primary.main,
-    },
-    "& .locked-row": {
-      backgroundColor: theme.palette.background.default,
-      color: theme.palette.action.disabled,
-    },
-  }));
+  }, [apiRef, setHover]);
 
   return (
-    <StyledDataGrid
+    <DataGrid
+      sx={{
+        ".MuiDataGrid-columnHeader": {
+          backgroundColor: theme.palette.boxShadow,
+        },
+        ".MuiDataGrid-root .MuiDataGrid-columnHeader:focus, &.MuiDataGrid-root .MuiDataGrid-cell:focus": {
+          outline: "none",
+        },
+        ".MuiTablePagination-toolbar p": {
+          margin: 0,
+        },
+        ".MuiDataGrid-footerContainer": {
+          height: "42px !important",
+        },
+        ".MuiTablePagination-selectLabel": {
+          fontSize: "12px",
+        },
+        ".MuiTablePagination-selectIcon": {
+          width: "14px",
+          height: "14px",
+        },
+        ".MuiTablePagination-displayedRows": {
+          fontSize: "12px",
+        },
+        ".MuiIconButton-root": {
+          color: "#0000008A",
+          backgroundColor: "rgba(0, 0, 0, 0)",
+        },
+        ".MuiIconButton-root.Mui-disabled": {
+          color: "#828e9a",
+        },
+        "& .highlighted-row": {
+          backgroundColor: theme.palette.background.lightgrey,
+          color: theme.palette.primary.main,
+        },
+        "& .locked-row": {
+          backgroundColor: theme.palette.background.default,
+          color: theme.palette.action.disabled,
+        },
+      }}
       data-cy="borehole-table"
       apiRef={apiRef}
       onRowClick={handleRowClick}

diff --git a/src/client/src/pages/overview/boreholeTable/bottomBarContainer.tsx b/src/client/src/pages/overview/boreholeTable/bottomBarContainer.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { BoreholeTable } from "./boreholeTable.tsx";
 import BottomBar from "./bottomBar.tsx";
@@ -13,6 +13,7 @@ import { useSelector } from "react-redux";
 interface BottomBarContainerProps {
   boreholes: Boreholes;
   search: { filter: string };
+  setHover: React.Dispatch<React.SetStateAction<number | null>>;
   loadEditingBoreholes: (
     page: number,
     limit: number,
@@ -22,7 +23,6 @@ interface BottomBarContainerProps {
     featureIds: number[],
   ) => void;
   multipleSelected: (selection: GridRowSelectionModel, filter: string) => void;
-  onHover: (id: string | null) => void;
   rowToHighlight: number | null;
 }
 
@@ -31,7 +31,7 @@ const BottomBarContainer = ({
   loadEditingBoreholes,
   multipleSelected,
   search,
-  onHover,
+  setHover,
   rowToHighlight,
 }: BottomBarContainerProps) => {
   const user: User = useSelector((state: ReduxRootState) => state.core_user);
@@ -65,7 +65,7 @@ const BottomBarContainer = ({
 
   useEffect(() => {
     reloadBoreholes();
-  }, [sortModel, paginationModel, search, loadEditingBoreholes, featureIds, reloadBoreholes]);
+  }, [reloadBoreholes]);
 
   const onCopyBorehole = async () => {
     setIsBusy(true);
@@ -111,7 +111,7 @@ const BottomBarContainer = ({
           sortModel={sortModel}
           setSortModel={setSortModel}
           rowToHighlight={rowToHighlight}
-          onHover={onHover}
+          setHover={setHover}
           isBusy={isBusy}
         />
       </BottomDrawer>