@databiosphere/findable-ui 38.1.0 → 38.1.1

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "38.1.0"
+  ".": "38.1.1"
 }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [38.1.1](https://github.com/DataBiosphere/findable-ui/compare/v38.1.0...v38.1.1) (2025-07-09)
+
+
+### Bug Fixes
+
+* table view fails to render after switching from graph view ([#560](https://github.com/DataBiosphere/findable-ui/issues/560)) ([#561](https://github.com/DataBiosphere/findable-ui/issues/561)) ([35a2f0c](https://github.com/DataBiosphere/findable-ui/commit/35a2f0c84119f66c372750442c8b29ca93af9057))
+
 ## [38.1.0](https://github.com/DataBiosphere/findable-ui/compare/v38.0.0...v38.1.0) (2025-07-09)
 
 

package/lib/components/Table/components/TableBody/tableBody.d.ts

@@ -1,10 +1,10 @@
 import { Row, RowData, Table } from "@tanstack/react-table";
-import { RefObject } from "react";
+import { Virtualizer } from "@tanstack/react-virtual";
 import { ROW_DIRECTION } from "../../common/entities";
 export interface TableBodyProps<T extends RowData> {
     rowDirection: ROW_DIRECTION;
     rows: Row<T>[];
-    tableContainerRef: RefObject<HTMLDivElement>;
     tableInstance: Table<T>;
+    virtualizer: Virtualizer<HTMLDivElement, Element>;
 }
-export declare const TableBody: <T extends RowData>({ rowDirection, rows, tableContainerRef, tableInstance, }: TableBodyProps<T>) => JSX.Element;
+export declare const TableBody: <T extends RowData>({ rowDirection, rows, tableInstance, virtualizer, }: TableBodyProps<T>) => JSX.Element;

package/lib/components/Table/components/TableBody/tableBody.js

@@ -1,22 +1,12 @@
 import { TableBody as MTableBody } from "@mui/material";
-import { useVirtualizer } from "@tanstack/react-virtual";
 import React from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 import { CollapsableRows } from "../TableRows/components/CollapsableRows/collapsableRows";
 import { VirtualizedRow } from "../TableRows/components/VirtualizedRow/virtualizedRow";
 import { TableRows } from "../TableRows/tableRows";
-import { getAllVirtualizedRows } from "./utils";
-export const TableBody = ({ rowDirection, rows, tableContainerRef, tableInstance, }) => {
-    const virtualizedRows = getAllVirtualizedRows(tableInstance, rows, rowDirection);
-    const virtualizer = useVirtualizer({
-        count: virtualizedRows.length,
-        estimateSize: () => 56,
-        gap: 1,
-        getScrollElement: () => tableContainerRef.current,
-        overscan: 20,
-    });
+export const TableBody = ({ rowDirection, rows, tableInstance, virtualizer, }) => {
     return (React.createElement(MTableBody, null,
         React.createElement(VirtualizedRow, { isUpperRow: true, virtualizer: virtualizer }),
-        rowDirection === ROW_DIRECTION.DEFAULT ? (React.createElement(TableRows, { rows: virtualizedRows, virtualizer: virtualizer })) : (React.createElement(CollapsableRows, { rows: virtualizedRows, tableInstance: tableInstance, virtualizer: virtualizer })),
+        rowDirection === ROW_DIRECTION.DEFAULT ? (React.createElement(TableRows, { rows: rows, virtualizer: virtualizer })) : (React.createElement(CollapsableRows, { rows: rows, tableInstance: tableInstance, virtualizer: virtualizer })),
         React.createElement(VirtualizedRow, { isUpperRow: false, virtualizer: virtualizer })));
 };

package/lib/components/Table/hooks/UseVirtualization/hook.d.ts

@@ -0,0 +1,7 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { ROW_DIRECTION } from "../../common/entities";
+import { UseVirtualizationProps } from "./types";
+export declare const useVirtualization: <T extends RowData>({ rowDirection, table, }: {
+    rowDirection: ROW_DIRECTION;
+    table: Table<T>;
+}) => UseVirtualizationProps<T>;

package/lib/components/Table/hooks/UseVirtualization/hook.js

@@ -0,0 +1,18 @@
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useRef } from "react";
+import { getRowsForVirtualization } from "./utils";
+export const useVirtualization = ({ rowDirection, table, }) => {
+    // Ref for the scrollable container.
+    const scrollElementRef = useRef(null);
+    // Derive the list of rows eligible for virtualization based on grouping and row direction.
+    const rows = getRowsForVirtualization(table, rowDirection);
+    // Build virtualizer instance.
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        estimateSize: () => 56,
+        gap: 1,
+        getScrollElement: () => scrollElementRef.current,
+        overscan: 20,
+    });
+    return { rows, scrollElementRef, virtualizer };
+};

package/lib/components/Table/hooks/UseVirtualization/types.d.ts

@@ -0,0 +1,8 @@
+import { Row, RowData } from "@tanstack/react-table";
+import { Virtualizer } from "@tanstack/react-virtual";
+import { RefObject } from "react";
+export interface UseVirtualizationProps<T extends RowData> {
+    rows: Row<T>[];
+    scrollElementRef: RefObject<HTMLDivElement>;
+    virtualizer: Virtualizer<HTMLDivElement, Element>;
+}

package/lib/components/Table/hooks/UseVirtualization/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/{components/TableBody → hooks/UseVirtualization}/utils.d.ts

@@ -3,10 +3,8 @@ import { ROW_DIRECTION } from "../../common/entities";
 /**
  * Filters and returns the appropriate rows for a virtualized table based on row direction
  * and grouping state.
- * Rows are filtered if `ROW_DIRECTION` is `VERTICAL` and the table is grouped.
  * @param table - Table.
- * @param rows - Rows.
  * @param rowDirection - Row direction.
  * @returns Rows based on the provided row direction and table grouping state.
  */
-export declare function getAllVirtualizedRows<T extends RowData>(table: Table<T>, rows: Row<T>[], rowDirection: ROW_DIRECTION): Row<T>[];
+export declare function getRowsForVirtualization<T extends RowData>(table: Table<T>, rowDirection: ROW_DIRECTION): Row<T>[];

package/lib/components/Table/{components/TableBody → hooks/UseVirtualization}/utils.js

@@ -2,16 +2,20 @@ import { ROW_DIRECTION } from "../../common/entities";
 /**
  * Filters and returns the appropriate rows for a virtualized table based on row direction
  * and grouping state.
- * Rows are filtered if `ROW_DIRECTION` is `VERTICAL` and the table is grouped.
  * @param table - Table.
- * @param rows - Rows.
  * @param rowDirection - Row direction.
  * @returns Rows based on the provided row direction and table grouping state.
  */
-export function getAllVirtualizedRows(table, rows, rowDirection) {
+export function getRowsForVirtualization(table, rowDirection) {
+    const { getRowModel, getState } = table;
+    const { rows } = getRowModel();
+    const { grouping } = getState();
+    // If the row direction is DEFAULT, return all rows.
     if (rowDirection === ROW_DIRECTION.DEFAULT)
         return rows;
-    if (table.getState().grouping.length === 0)
+    // If the table is not grouped, return all rows.
+    if (grouping.length === 0)
         return rows;
+    // If the row direction is VERTICAL, return only grouped rows.
     return rows.filter(({ getIsGrouped }) => getIsGrouped());
 }

package/lib/components/Table/table.js

@@ -1,11 +1,10 @@
 import { TableContainer } from "@mui/material";
-import React, { Fragment, useRef } from "react";
+import React, { Fragment, useCallback } from "react";
 import { track } from "../../common/analytics/analytics";
 import { EVENT_NAME, EVENT_PARAM, PAGINATION_DIRECTION, } from "../../common/analytics/entities";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../hooks/useBreakpointHelper";
 import { useExploreMode } from "../../hooks/useExploreMode/useExploreMode";
 import { useExploreState } from "../../hooks/useExploreState";
-import { useScroll } from "../../hooks/useScroll";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { TABLET } from "../../theme/common/breakpoints";
 import { Loading, LOADING_PANEL_STYLE } from "../Loading/loading";
@@ -17,9 +16,9 @@ import { TableBody } from "./components/TableBody/tableBody";
 import { TableHead } from "./components/TableHead/tableHead";
 import { TablePagination } from "./components/TablePagination/tablePagination";
 import { TableToolbar } from "./components/TableToolbar/tableToolbar";
+import { useVirtualization } from "./hooks/UseVirtualization/hook";
 import { GridTable } from "./table.styles";
 export const Table = ({ listView, loading, table, }) => {
-    const tableContainerRef = useRef(null);
     const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
     const exploreMode = useExploreMode();
     const { exploreDispatch, exploreState } = useExploreState();
@@ -30,11 +29,13 @@ export const Table = ({ listView, loading, table, }) => {
     const rowDirection = tabletDown
         ? ROW_DIRECTION.VERTICAL
         : ROW_DIRECTION.DEFAULT;
-    const { getRowModel, getVisibleFlatColumns, nextPage: tableNextPage, previousPage: tablePreviousPage, } = table;
-    const { rows } = getRowModel();
+    const { rows, scrollElementRef, virtualizer } = useVirtualization({
+        rowDirection,
+        table,
+    });
+    const { getVisibleFlatColumns, nextPage: tableNextPage, previousPage: tablePreviousPage, } = table;
     const noResults = !loading && (!rows || rows.length === 0);
-    const scrollTop = useScroll();
-    const handleTableNextPage = () => {
+    const handleTableNextPage = useCallback(() => {
         let nextPage = tableNextPage;
         if (!clientFiltering) {
             nextPage = () => {
@@ -50,9 +51,8 @@ export const Table = ({ listView, loading, table, }) => {
             });
         }
         nextPage();
-        scrollTop();
-    };
-    const handleTablePreviousPage = () => {
+    }, [clientFiltering, exploreDispatch, exploreState, tableNextPage]);
+    const handleTablePreviousPage = useCallback(() => {
         let previousPage = tablePreviousPage;
         if (!clientFiltering) {
             previousPage = () => {
@@ -67,8 +67,7 @@ export const Table = ({ listView, loading, table, }) => {
             });
         }
         previousPage();
-        scrollTop();
-    };
+    }, [clientFiltering, exploreDispatch, exploreState, tablePreviousPage]);
     function canNextPage() {
         return currentPage < pages;
     }
@@ -78,9 +77,9 @@ export const Table = ({ listView, loading, table, }) => {
     return noResults ? (React.createElement(NoResults, { Paper: null, title: "No Results found" })) : (React.createElement(Fragment, null,
         React.createElement(TableToolbar, { listView: listView, tableInstance: table }),
         React.createElement(Loading, { appear: false, autoPosition: false, loading: loading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
-        React.createElement(TableContainer, { ref: tableContainerRef },
+        React.createElement(TableContainer, { ref: scrollElementRef },
             React.createElement(GridTable, { collapsable: true, gridTemplateColumns: getColumnTrackSizing(getVisibleFlatColumns()), stickyHeader: true },
                 React.createElement(TableHead, { tableInstance: table }),
-                React.createElement(TableBody, { rows: rows, rowDirection: rowDirection, tableContainerRef: tableContainerRef, tableInstance: table }))),
+                React.createElement(TableBody, { rows: rows, rowDirection: rowDirection, tableInstance: table, virtualizer: virtualizer }))),
         !disablePagination && (React.createElement(TablePagination, { canNextPage: canNextPage(), canPreviousPage: canPreviousPage(), currentPage: currentPage, onNextPage: handleTableNextPage, onPreviousPage: handleTablePreviousPage, totalPage: pages ?? 0 }))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "38.1.0",
+  "version": "38.1.1",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/Table/components/TableBody/tableBody.tsx

@@ -1,46 +1,33 @@
 import { TableBody as MTableBody } from "@mui/material";
 import { Row, RowData, Table } from "@tanstack/react-table";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import React, { RefObject } from "react";
+import { Virtualizer } from "@tanstack/react-virtual";
+import React from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 import { CollapsableRows } from "../TableRows/components/CollapsableRows/collapsableRows";
 import { VirtualizedRow } from "../TableRows/components/VirtualizedRow/virtualizedRow";
 import { TableRows } from "../TableRows/tableRows";
-import { getAllVirtualizedRows } from "./utils";
 
 export interface TableBodyProps<T extends RowData> {
   rowDirection: ROW_DIRECTION;
   rows: Row<T>[];
-  tableContainerRef: RefObject<HTMLDivElement>;
   tableInstance: Table<T>;
+  virtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 
 export const TableBody = <T extends RowData>({
   rowDirection,
   rows,
-  tableContainerRef,
   tableInstance,
+  virtualizer,
 }: TableBodyProps<T>): JSX.Element => {
-  const virtualizedRows = getAllVirtualizedRows(
-    tableInstance,
-    rows,
-    rowDirection
-  );
-  const virtualizer = useVirtualizer({
-    count: virtualizedRows.length,
-    estimateSize: () => 56,
-    gap: 1,
-    getScrollElement: () => tableContainerRef.current,
-    overscan: 20,
-  });
   return (
     <MTableBody>
       <VirtualizedRow isUpperRow={true} virtualizer={virtualizer} />
       {rowDirection === ROW_DIRECTION.DEFAULT ? (
-        <TableRows rows={virtualizedRows} virtualizer={virtualizer} />
+        <TableRows rows={rows} virtualizer={virtualizer} />
       ) : (
         <CollapsableRows
-          rows={virtualizedRows}
+          rows={rows}
           tableInstance={tableInstance}
           virtualizer={virtualizer}
         />

package/src/components/Table/hooks/UseVirtualization/hook.ts

@@ -0,0 +1,31 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useRef } from "react";
+import { ROW_DIRECTION } from "../../common/entities";
+import { UseVirtualizationProps } from "./types";
+import { getRowsForVirtualization } from "./utils";
+
+export const useVirtualization = <T extends RowData>({
+  rowDirection,
+  table,
+}: {
+  rowDirection: ROW_DIRECTION;
+  table: Table<T>;
+}): UseVirtualizationProps<T> => {
+  // Ref for the scrollable container.
+  const scrollElementRef = useRef<HTMLDivElement>(null);
+
+  // Derive the list of rows eligible for virtualization based on grouping and row direction.
+  const rows = getRowsForVirtualization(table, rowDirection);
+
+  // Build virtualizer instance.
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    estimateSize: () => 56,
+    gap: 1,
+    getScrollElement: () => scrollElementRef.current,
+    overscan: 20,
+  });
+
+  return { rows, scrollElementRef, virtualizer };
+};

package/src/components/Table/hooks/UseVirtualization/types.ts

@@ -0,0 +1,9 @@
+import { Row, RowData } from "@tanstack/react-table";
+import { Virtualizer } from "@tanstack/react-virtual";
+import { RefObject } from "react";
+
+export interface UseVirtualizationProps<T extends RowData> {
+  rows: Row<T>[];
+  scrollElementRef: RefObject<HTMLDivElement>;
+  virtualizer: Virtualizer<HTMLDivElement, Element>;
+}

package/src/components/Table/{components/TableBody → hooks/UseVirtualization}/utils.ts

@@ -4,18 +4,24 @@ import { ROW_DIRECTION } from "../../common/entities";
 /**
  * Filters and returns the appropriate rows for a virtualized table based on row direction
  * and grouping state.
- * Rows are filtered if `ROW_DIRECTION` is `VERTICAL` and the table is grouped.
  * @param table - Table.
- * @param rows - Rows.
  * @param rowDirection - Row direction.
  * @returns Rows based on the provided row direction and table grouping state.
  */
-export function getAllVirtualizedRows<T extends RowData>(
+export function getRowsForVirtualization<T extends RowData>(
   table: Table<T>,
-  rows: Row<T>[],
   rowDirection: ROW_DIRECTION
 ): Row<T>[] {
+  const { getRowModel, getState } = table;
+  const { rows } = getRowModel();
+  const { grouping } = getState();
+
+  // If the row direction is DEFAULT, return all rows.
   if (rowDirection === ROW_DIRECTION.DEFAULT) return rows;
-  if (table.getState().grouping.length === 0) return rows;
+
+  // If the table is not grouped, return all rows.
+  if (grouping.length === 0) return rows;
+
+  // If the row direction is VERTICAL, return only grouped rows.
   return rows.filter(({ getIsGrouped }) => getIsGrouped());
 }

package/src/components/Table/table.tsx

@@ -1,6 +1,6 @@
 import { TableContainer } from "@mui/material";
 import { RowData, Table as TanStackTable } from "@tanstack/react-table";
-import React, { Fragment, useRef } from "react";
+import React, { Fragment, useCallback } from "react";
 import { track } from "../../common/analytics/analytics";
 import {
   EVENT_NAME,
@@ -14,7 +14,6 @@ import {
 } from "../../hooks/useBreakpointHelper";
 import { useExploreMode } from "../../hooks/useExploreMode/useExploreMode";
 import { useExploreState } from "../../hooks/useExploreState";
-import { useScroll } from "../../hooks/useScroll";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { TABLET } from "../../theme/common/breakpoints";
 import { Loading, LOADING_PANEL_STYLE } from "../Loading/loading";
@@ -26,6 +25,7 @@ import { TableBody } from "./components/TableBody/tableBody";
 import { TableHead } from "./components/TableHead/tableHead";
 import { TablePagination } from "./components/TablePagination/tablePagination";
 import { TableToolbar } from "./components/TableToolbar/tableToolbar";
+import { useVirtualization } from "./hooks/UseVirtualization/hook";
 import { GridTable } from "./table.styles";
 
 export interface TableProps<T extends RowData> {
@@ -39,7 +39,6 @@ export const Table = <T extends RowData>({
   loading,
   table,
 }: TableProps<T>): JSX.Element => {
-  const tableContainerRef = useRef<HTMLDivElement>(null);
   const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
   const exploreMode = useExploreMode();
   const { exploreDispatch, exploreState } = useExploreState();
@@ -50,19 +49,20 @@ export const Table = <T extends RowData>({
   const rowDirection = tabletDown
     ? ROW_DIRECTION.VERTICAL
     : ROW_DIRECTION.DEFAULT;
+  const { rows, scrollElementRef, virtualizer } = useVirtualization({
+    rowDirection,
+    table,
+  });
 
   const {
-    getRowModel,
     getVisibleFlatColumns,
     nextPage: tableNextPage,
     previousPage: tablePreviousPage,
   } = table;
 
-  const { rows } = getRowModel();
   const noResults = !loading && (!rows || rows.length === 0);
-  const scrollTop = useScroll();
 
-  const handleTableNextPage = (): void => {
+  const handleTableNextPage = useCallback((): void => {
     let nextPage = tableNextPage;
     if (!clientFiltering) {
       nextPage = (): void => {
@@ -78,10 +78,9 @@ export const Table = <T extends RowData>({
       });
     }
     nextPage();
-    scrollTop();
-  };
+  }, [clientFiltering, exploreDispatch, exploreState, tableNextPage]);
 
-  const handleTablePreviousPage = (): void => {
+  const handleTablePreviousPage = useCallback((): void => {
     let previousPage = tablePreviousPage;
     if (!clientFiltering) {
       previousPage = (): void => {
@@ -96,8 +95,7 @@ export const Table = <T extends RowData>({
       });
     }
     previousPage();
-    scrollTop();
-  };
+  }, [clientFiltering, exploreDispatch, exploreState, tablePreviousPage]);
 
   function canNextPage(): boolean {
     return currentPage < pages;
@@ -118,7 +116,7 @@ export const Table = <T extends RowData>({
         loading={loading}
         panelStyle={LOADING_PANEL_STYLE.INHERIT}
       />
-      <TableContainer ref={tableContainerRef}>
+      <TableContainer ref={scrollElementRef}>
         <GridTable
           collapsable={true}
           gridTemplateColumns={getColumnTrackSizing(getVisibleFlatColumns())}
@@ -128,8 +126,8 @@ export const Table = <T extends RowData>({
           <TableBody
             rows={rows}
             rowDirection={rowDirection}
-            tableContainerRef={tableContainerRef}
             tableInstance={table}
+            virtualizer={virtualizer}
           />
         </GridTable>
       </TableContainer>

package/lib/hooks/useScroll.d.ts

@@ -1,10 +0,0 @@
-type ScrollType = "top" | "bottom";
-type UseScrollReturn = () => void;
-/**
- * Hook used to scroll the to top or bottom of the page.
- * This hook can only be used on the client-side.
- * @param scrollType - top or bottom of the page. Default = top
- * @returns scroll function
- */
-export declare const useScroll: (scrollType?: ScrollType) => UseScrollReturn;
-export {};

package/lib/hooks/useScroll.js

@@ -1,12 +0,0 @@
-import { useCallback } from "react";
-/**
- * Hook used to scroll the to top or bottom of the page.
- * This hook can only be used on the client-side.
- * @param scrollType - top or bottom of the page. Default = top
- * @returns scroll function
- */
-export const useScroll = (scrollType = "top") => {
-    return useCallback(() => window.scrollTo({
-        top: scrollType === "top" ? 0 : document.body.scrollHeight,
-    }), [scrollType]);
-};

package/src/hooks/useScroll.ts

@@ -1,21 +0,0 @@
-import { useCallback } from "react";
-
-type ScrollType = "top" | "bottom";
-
-type UseScrollReturn = () => void;
-
-/**
- * Hook used to scroll the to top or bottom of the page.
- * This hook can only be used on the client-side.
- * @param scrollType - top or bottom of the page. Default = top
- * @returns scroll function
- */
-export const useScroll = (scrollType: ScrollType = "top"): UseScrollReturn => {
-  return useCallback(
-    () =>
-      window.scrollTo({
-        top: scrollType === "top" ? 0 : document.body.scrollHeight,
-      }),
-    [scrollType]
-  );
-};