H-3504, H-3561: Entities visualizer performance and fixes (#5633)

hashintel · Nov 12, 2024 · 69aac3b · 69aac3b
1 parent 9bad743
commit 69aac3b
Show file tree

Hide file tree

Showing 27 changed files with 1,788 additions and 1,075 deletions.
diff --git a/apps/hash-frontend/src/components/grid/grid.tsx b/apps/hash-frontend/src/components/grid/grid.tsx
@@ -125,10 +125,11 @@ export const Grid = <T extends GridRow>({
   }, []);
 
   const [sorts, setSorts] = useState<ColumnSort<Extract<keyof T, string>>[]>(
-    columns.map((column) => ({
-      columnKey: column.id as Extract<keyof T, string>,
-      direction: "asc",
-    })),
+    () =>
+      columns.map((column) => ({
+        columnKey: column.id as Extract<keyof T, string>,
+        direction: "asc",
+      })),
   );
 
   const [previousSortedColumnKey, setPreviousSortedColumnKey] = useState<
@@ -138,6 +139,32 @@ export const Grid = <T extends GridRow>({
     string | undefined
   >(initialSortedColumnKey ?? columns[0]?.id);
 
+  useEffect(() => {
+    const currentSortColumns = new Set(sorts.map((sort) => sort.columnKey));
+    const newSortColumns = new Set(columns.map((column) => column.id));
+
+    if (
+      initialSortedColumnKey &&
+      (!currentSortedColumnKey || !newSortColumns.has(initialSortedColumnKey))
+    ) {
+      setCurrentSortedColumnKey(initialSortedColumnKey);
+    }
+
+    if (
+      currentSortColumns.size === newSortColumns.size &&
+      currentSortColumns.isSubsetOf(newSortColumns)
+    ) {
+      return;
+    }
+
+    setSorts(
+      columns.map((column) => ({
+        columnKey: column.id as Extract<keyof T, string>,
+        direction: "asc",
+      })),
+    );
+  }, [columns, currentSortedColumnKey, initialSortedColumnKey, sorts]);
+
   const [openFilterColumnKey, setOpenFilterColumnKey] = useState<string>();
 
   const handleSortClick = useCallback(

diff --git a/apps/hash-frontend/src/pages/entities.page.tsx b/apps/hash-frontend/src/pages/entities.page.tsx
@@ -47,7 +47,7 @@ import { Tabs } from "../shared/ui/tabs";
 import { useUserPermissionsOnEntityType } from "../shared/use-user-permissions-on-entity-type";
 import type { Breadcrumb } from "./shared/breadcrumbs";
 import { CreateButton } from "./shared/create-button";
-import { EntitiesTable } from "./shared/entities-table";
+import { EntitiesVisualizer } from "./shared/entities-visualizer";
 import { TopContextBar } from "./shared/top-context-bar";
 import { useEnabledFeatureFlags } from "./shared/use-enabled-feature-flags";
 import { useActiveWorkspace } from "./shared/workspace-context";
@@ -366,8 +366,8 @@ const EntitiesPage: NextPageWithLayout = () => {
       </Box>
       <Container sx={{ maxWidth, py: 5 }}>
         <EntityTypeEntitiesContext.Provider value={entityTypeEntitiesValue}>
-          <EntitiesTable
-            hideColumns={entityTypeId ? ["entityTypeVersion"] : []}
+          <EntitiesVisualizer
+            hideColumns={entityTypeId ? ["entityTypes"] : []}
           />
         </EntityTypeEntitiesContext.Provider>
       </Container>