@databiosphere/findable-ui 5.0.0 → 6.0.0

package/src/components/Table/features/RowPreview/utils.ts

@@ -0,0 +1,93 @@
+import { Row, RowData, Table } from "@tanstack/react-table";
+
+/**
+ * Returns true if the row is selected for preview.
+ * @param row - Row.
+ * @param table - Table.
+ * @returns true if the row is selected for preview.
+ */
+export function getIsPreview<T extends RowData>(
+  row: Row<T>,
+  table: Table<T>
+): boolean {
+  const keyValue = getRowPreviewKeyValue(table);
+  if (!keyValue) return false;
+  const [key, value] = keyValue;
+  if (!value) return false;
+  return key === row.id;
+}
+
+/**
+ * Returns true if any row is selected for preview.
+ * @param table - Table.
+ * @returns true if any row is selected for preview.
+ */
+export function getIsRowPreview<T extends RowData>(table: Table<T>): boolean {
+  const keyValue = getRowPreviewKeyValue(table);
+  if (!keyValue) return false;
+  const [, value] = keyValue;
+  return value;
+}
+
+/**
+ * Returns row selected for preview. Row data is returned even if the row is no longer "previewed" i.e. selected for preview.
+ * @param table - Table.
+ * @returns row selected for preview.
+ */
+export function getRowPreviewRow<T extends RowData>(
+  table: Table<T>
+): Row<T> | undefined {
+  const keyValue = getRowPreviewKeyValue(table);
+  if (!keyValue) return;
+  const [key] = keyValue;
+  // We return the original row data, even if the row is no longer "previewed" i.e. selected for preview.
+  // This is to ensure any drawer or modal that is still open can display the row data, until the modal or drawer is closed.
+  const rowsById = table.getRowModel().rowsById;
+  return rowsById[key];
+}
+
+/**
+ * Returns the key, value tuple of the row selected for preview.
+ * @param table - Table.
+ * @returns row preview key, value tuple.
+ */
+function getRowPreviewKeyValue<T extends RowData>(
+  table: Table<T>
+): [string, boolean] | undefined {
+  const { getState } = table;
+  const { rowPreview } = getState();
+  if (!rowPreview) return;
+  const [[key, value]] = Object.entries(rowPreview);
+  return [key, value];
+}
+
+/**
+ * Toggles the preview state of the row.
+ * If the row is already selected for preview, the preview state is toggled off.
+ * If the row is not selected for preview, the preview state is updated.
+ * @param row - Row.
+ * @param table - Table.
+ */
+export function togglePreview<T extends RowData>(
+  row: Row<T>,
+  table: Table<T>
+): void {
+  if (row.getIsPreview()) {
+    table.toggleRowPreview();
+    return;
+  }
+  table.setRowPreview({ [row.id]: true });
+}
+
+/**
+ * Toggles the preview state of any row selected for preview.
+ * @param table - Table.
+ */
+export function toggleRowPreview<T extends RowData>(table: Table<T>): void {
+  const keyValue = getRowPreviewKeyValue(table);
+  if (!keyValue) {
+    return;
+  }
+  const [key, value] = keyValue;
+  table.setRowPreview({ [key]: !value });
+}

package/src/components/Table/features/entities.ts

@@ -0,0 +1,13 @@
+import { RowData } from "@tanstack/react-table";
+import {
+  RowPreviewInstance,
+  RowPreviewOptions,
+  RowPreviewRow,
+  RowPreviewTableState,
+} from "./RowPreview/entities";
+
+export type CustomFeatureInitialTableState = Partial<RowPreviewTableState>;
+export type CustomFeatureInstance<T extends RowData> = RowPreviewInstance<T>;
+export type CustomFeatureOptions = RowPreviewOptions;
+export type CustomFeatureRow = RowPreviewRow;
+export type CustomFeatureTableState = RowPreviewTableState;

package/src/components/Table/table.tsx

@@ -2,20 +2,21 @@ import { TableContainer } from "@mui/material";
 import {
   ColumnDef,
   ColumnSort,
+  CoreOptions,
   getCoreRowModel,
   getFacetedRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
   InitialTableState,
+  RowData,
   RowSelectionState,
   TableState,
   Updater,
   useReactTable,
   VisibilityState,
 } from "@tanstack/react-table";
-import { CoreOptions } from "@tanstack/table-core";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { track } from "../../common/analytics/analytics";
 import {
   EVENT_NAME,
@@ -23,7 +24,6 @@ import {
   PAGINATION_DIRECTION,
   SORT_DIRECTION,
 } from "../../common/analytics/entities";
-import { Pagination } from "../../common/entities";
 import { ListViewConfig } from "../../config/entities";
 import {
   BREAKPOINT_FN_NAME,
@@ -32,7 +32,7 @@ import {
 import { useExploreMode } from "../../hooks/useExploreMode";
 import { useExploreState } from "../../hooks/useExploreState";
 import { useScroll } from "../../hooks/useScroll";
-import { ENTITY_VIEW, ExploreActionKind } from "../../providers/exploreState";
+import { ExploreActionKind } from "../../providers/exploreState";
 import { DEFAULT_PAGINATION_STATE } from "../../providers/exploreState/initializer/constants";
 import { TABLET } from "../../theme/common/breakpoints";
 import { FluidPaper, GridPaper } from "../common/Paper/paper.styles";
@@ -42,26 +42,24 @@ import {
   buildCategoryViews,
   getFacetedUniqueValuesWithArrayValues,
   getGridTemplateColumns,
+  getTableStatePagination,
   isClientFilteringEnabled,
 } from "./common/utils";
 import { Pagination as DXPagination } from "./components/Pagination/pagination";
 import { TableBody } from "./components/TableBody/tableBody";
 import { TableHead } from "./components/TableHead/tableHead";
 import { TableToolbar } from "./components/TableToolbar/tableToolbar";
+import { ROW_PREVIEW } from "./features/RowPreview/constants";
+import { RowPreviewState } from "./features/RowPreview/entities";
 import { GridTable } from "./table.styles";
 
-export interface TableProps<T extends object> {
+export interface TableProps<T extends RowData> {
   columns: ColumnDef<T>[];
-  count?: number;
   getRowId?: CoreOptions<T>["getRowId"];
   initialState: InitialTableState;
   items: T[];
   listView?: ListViewConfig;
   loading?: boolean;
-  pages?: number;
-  pageSize: number;
-  pagination?: Pagination;
-  total?: number;
 }
 
 /**
@@ -74,16 +72,14 @@ export interface TableProps<T extends object> {
  * @param tableProps.initialState - Initial table state.
  * @param tableProps.items - Row data to display.
  * @param tableProps.listView - List view configuration.
- * @param tableProps.total - Total number of rows in the result set.
  * @returns Configured table element for display.
  */
-export const TableComponent = <T extends object>({
+export const TableComponent = <T extends RowData>({
   columns,
   getRowId,
   initialState,
   items,
   listView,
-  total,
 }: // eslint-disable-next-line sonarjs/cognitive-complexity -- TODO fix component length / complexity
 TableProps<T>): JSX.Element => {
   const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
@@ -92,20 +88,25 @@ TableProps<T>): JSX.Element => {
   const {
     entityPageState,
     filterState,
-    isRelatedView,
     listItems,
     loading,
     paginationState,
+    rowPreview,
     tabValue,
   } = exploreState;
   const { columnsVisibility, enableRowSelection, rowSelection, sorting } =
     entityPageState[tabValue];
-  const { currentPage, pages, pageSize } = paginationState;
-  const { disablePagination = false } = listView || {};
+  const { currentPage, pages, pageSize, rows: pageCount } = paginationState;
+  const { disablePagination = false, enableRowPreview = false } =
+    listView || {};
   const clientFiltering = isClientFilteringEnabled(exploreMode);
   const rowDirection = tabletDown
     ? ROW_DIRECTION.VERTICAL
     : ROW_DIRECTION.DEFAULT;
+  const pagination = useMemo(
+    () => getTableStatePagination(currentPage - 1, pageSize),
+    [currentPage, pageSize]
+  );
 
   const onSortingChange = (updater: Updater<ColumnSort[]>): void => {
     exploreDispatch({
@@ -132,6 +133,13 @@ TableProps<T>): JSX.Element => {
     });
   };
 
+  const onRowPreviewChange = (updater: Updater<RowPreviewState>): void => {
+    exploreDispatch({
+      payload: typeof updater === "function" ? updater(rowPreview) : updater,
+      type: ExploreActionKind.UpdateRowPreview,
+    });
+  };
+
   const onRowSelectionChange = (updater: Updater<RowSelectionState>): void => {
     exploreDispatch({
       payload: typeof updater === "function" ? updater(rowSelection) : updater,
@@ -141,19 +149,19 @@ TableProps<T>): JSX.Element => {
 
   const state: Partial<TableState> = {
     columnVisibility: columnsVisibility,
-    pagination: {
-      pageIndex: 0,
-      pageSize: disablePagination ? Number.MAX_SAFE_INTEGER : pageSize,
-    },
+    pagination,
+    rowPreview,
     rowSelection,
     sorting,
   };
   const tableInstance = useReactTable({
+    _features: [ROW_PREVIEW],
     columns,
     data: items,
     enableColumnFilters: true, // client-side filtering.
     enableFilters: true, // client-side filtering.
     enableMultiSort: clientFiltering,
+    enableRowPreview,
     enableRowSelection,
     enableSorting: true, // client-side filtering.
     enableSortingRemoval: false, // client-side filtering.
@@ -167,12 +175,13 @@ TableProps<T>): JSX.Element => {
     getRowId,
     getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined,
     initialState,
-    manualPagination: clientFiltering,
+    manualPagination: true,
     manualSorting: !clientFiltering,
     onColumnVisibilityChange,
+    onRowPreviewChange,
     onRowSelectionChange,
     onSortingChange,
-    pageCount: total,
+    pageCount,
     state,
   });
   const {
@@ -206,7 +215,6 @@ TableProps<T>): JSX.Element => {
         [EVENT_PARAM.PAGINATION_DIRECTION]: PAGINATION_DIRECTION.NEXT,
       });
     }
-    // const nextPage = pagination?.nextPage ?? tableNextPage;
     nextPage();
     scrollTop();
   };
@@ -229,27 +237,20 @@ TableProps<T>): JSX.Element => {
     scrollTop();
   };
 
-  // Sets or resets react table column filters `columnFilters` state - for client-side filtering only - with update of filterState.
-  // - `columnFilters` state is "cleared" for related view, and
-  // - `columnFilters` state is "set" for all other views.
+  // Sets react table column filters `columnFilters` state - for client-side filtering only - with update of filterState.
   useEffect(() => {
     if (clientFiltering) {
-      if (isRelatedView) {
-        tableInstance.resetColumnFilters();
-      } else {
-        tableInstance.setColumnFilters(
-          filterState.map(({ categoryKey, value }) => ({
-            id: categoryKey,
-            value,
-          }))
-        );
-      }
+      tableInstance.setColumnFilters(
+        filterState.map(({ categoryKey, value }) => ({
+          id: categoryKey,
+          value,
+        }))
+      );
     }
-  }, [clientFiltering, filterState, isRelatedView, tableInstance]);
+  }, [clientFiltering, filterState, tableInstance]);
 
   // Process explore response - client-side filtering only.
   useEffect(() => {
-    if (isRelatedView) return;
     if (!listItems || listItems.length === 0) return;
     if (clientFiltering) {
       exploreDispatch({
@@ -271,21 +272,10 @@ TableProps<T>): JSX.Element => {
     clientFiltering,
     columnFilters,
     exploreDispatch,
-    isRelatedView,
     listItems,
     results,
   ]);
 
-  // Unmount - reset entity view to "exact".
-  useEffect(() => {
-    return () => {
-      exploreDispatch({
-        payload: ENTITY_VIEW.EXACT,
-        type: ExploreActionKind.ToggleEntityView,
-      });
-    };
-  }, [exploreDispatch]);
-
   function canNextPage(): boolean {
     return currentPage < pages;
   }
@@ -297,7 +287,7 @@ TableProps<T>): JSX.Element => {
   return noResults ? (
     <NoResults Paper={FluidPaper} title={"No Results found"} />
   ) : (
-    <FluidPaper>
+    <FluidPaper variant="table">
       <GridPaper>
         <TableToolbar
           listView={listView}

package/src/components/TableCreator/common/entities.ts

@@ -1,4 +1,4 @@
-import { ColumnMeta } from "@tanstack/table-core";
+import { ColumnMeta } from "@tanstack/react-table";
 import { ColumnConfig } from "../../../config/entities";
 
 export interface BaseColumnConfig<T, TValue> extends ColumnConfig<T> {

package/src/components/TableCreator/tableCreator.tsx

@@ -1,7 +1,12 @@
-import { CellContext, ColumnDef, ColumnSort } from "@tanstack/react-table";
-import { CoreOptions, HeaderContext, RowData } from "@tanstack/table-core";
+import {
+  CellContext,
+  ColumnDef,
+  ColumnSort,
+  CoreOptions,
+  HeaderContext,
+  RowData,
+} from "@tanstack/react-table";
 import React, { useMemo } from "react";
-import { Pagination } from "../../common/entities";
 import { ColumnConfig, ListViewConfig } from "../../config/entities";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
@@ -25,19 +30,17 @@ export interface TableCreatorProps<T> {
   items: T[];
   listView?: ListViewConfig;
   loading?: boolean;
-  pageCount?: number;
-  pages: number;
-  pageSize: number;
-  pagination?: Pagination;
-  total?: number;
 }
 
-const createCell = <T extends RowData>(config: ColumnConfig<T>) =>
-  function CellCreator({ row }: CellContext<T, unknown>): JSX.Element {
+const createCell = <T extends RowData = RowData, TData = unknown>(
+  config: ColumnConfig<T>
+) =>
+  function CellCreator(cellContext: CellContext<T, TData>): JSX.Element {
     return (
       <ComponentCreator
         components={[config.componentConfig]}
-        response={row.original}
+        response={cellContext.row.original}
+        viewContext={{ cellContext }}
       />
     );
   };
@@ -52,18 +55,13 @@ const createRowSelectionCell = <T extends RowData>() =>
     return <RowSelectionCell row={row} />;
   };
 
-export const TableCreator = <T extends object>({
+export const TableCreator = <T extends RowData>({
   columns,
   defaultSort,
   getRowId,
   items,
   listView,
   loading,
-  pageCount,
-  pages,
-  pageSize,
-  pagination,
-  total,
 }: TableCreatorProps<T>): JSX.Element => {
   const columnDefs: ColumnDef<T>[] = useMemo(
     () =>
@@ -98,16 +96,11 @@ export const TableCreator = <T extends object>({
       />
       <Table<T>
         columns={columnDefs}
-        count={pageCount}
         getRowId={getRowId}
         initialState={initialState}
         items={items}
         listView={listView}
         loading={loading}
-        pages={pages}
-        pageSize={pageSize}
-        pagination={pagination}
-        total={total}
       />
     </TableCreatorContainer>
   );

package/src/components/common/Button/button.tsx

@@ -1,5 +1,4 @@
-import { Button as MButton } from "@mui/material";
-import { ButtonProps as MButtonProps } from "@mui/material/Button/Button";
+import { Button as MButton, ButtonProps as MButtonProps } from "@mui/material";
 import React, { ElementType, forwardRef } from "react";
 
 /**

package/src/components/common/Drawer/components/DrawerTitle/drawerTitle.styles.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+
+export const DrawerTitle = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 14px 24px;
+
+  .MuiIconButton-root {
+    margin-right: -12px;
+  }
+`;

package/src/components/common/Drawer/components/DrawerTitle/drawerTitle.tsx

@@ -0,0 +1,27 @@
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { IconButton } from "@mui/material";
+import React, { ReactNode } from "react";
+import { DrawerTitle as Title } from "./drawerTitle.styles";
+
+export interface DrawerTitleProps {
+  className?: string;
+  onClose?: () => void;
+  title?: ReactNode;
+}
+
+export const DrawerTitle = ({
+  className,
+  onClose,
+  title,
+}: DrawerTitleProps): JSX.Element => {
+  return (
+    <Title className={className}>
+      {title}
+      {onClose && (
+        <IconButton color="ink" edge="end" onClick={onClose} size="xsmall">
+          <CloseRoundedIcon color="inkLight" fontSize="small" />
+        </IconButton>
+      )}
+    </Title>
+  );
+};

package/src/components/common/Drawer/components/drawer.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+
+export const DrawerContent = styled.div`
+  overflow-y: auto;
+  overscroll-behavior: none;
+`;

package/src/components/common/Drawer/drawer.tsx

@@ -0,0 +1,21 @@
+import { Drawer as MDrawer, DrawerProps as MDrawerProps } from "@mui/material";
+import React, { ReactNode } from "react";
+
+export interface DrawerProps extends MDrawerProps {
+  children?: ReactNode | ReactNode[];
+  className?: string;
+}
+
+export const Drawer = ({
+  children,
+  className,
+  onClose,
+  open,
+  ...props /* Spread props to allow for Mui Drawer specific prop overrides e.g. "hideBackdrop". */
+}: DrawerProps): JSX.Element => {
+  return (
+    <MDrawer className={className} onClose={onClose} open={open} {...props}>
+      {children}
+    </MDrawer>
+  );
+};

package/src/components/common/Grid/grid.tsx

@@ -1,10 +1,8 @@
 import { Box, SxProps } from "@mui/material";
 import React, { ReactNode } from "react";
 
-// TODO the prop "children" should not necessarily be optional, but it is for now to avoid typescript errors with the use of this component within site configuration files.
-
 export interface GridProps {
-  children?: ReactNode | ReactNode[];
+  children: ReactNode | ReactNode[];
   gridSx?: SxProps;
 }
 

package/src/components/common/Section/components/CollapsableSection/collapsableSection.tsx

@@ -1,7 +1,6 @@
 import AddRoundedIcon from "@mui/icons-material/AddRounded";
 import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
-import { Collapse } from "@mui/material";
-import { CollapseProps } from "@mui/material/Collapse/Collapse";
+import { Collapse, CollapseProps } from "@mui/material";
 import React, { ReactNode, useEffect, useState } from "react";
 import {
   BREAKPOINT_FN_NAME,

package/src/components/common/Typography/common/entities.ts

@@ -0,0 +1,5 @@
+import { TypographyProps as MTypographyProps } from "@mui/material";
+
+export type TypographyProps =
+  | Omit<MTypographyProps, "children" | "component" | "ref">
+  | undefined;

package/src/config/entities.ts

@@ -1,12 +1,7 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
-import { ColumnSort } from "@tanstack/react-table";
+import { CellContext, ColumnSort, RowData } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
-import {
-  CategoryKey,
-  SelectCategoryValueView,
-  SelectedFilter,
-  SelectedFilterValue,
-} from "../common/entities";
+import { SelectCategoryValueView, SelectedFilter } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
 import { FooterProps } from "../components/Layout/components/Footer/footer";
 import { HeaderProps } from "../components/Layout/components/Header/header";
@@ -119,7 +114,7 @@ export interface ComponentConfig<
   props?: React.ComponentProps<T>;
   viewBuilder?: (
     model: D,
-    viewContext?: ViewContext
+    viewContext?: ViewContext<D>
   ) => React.ComponentProps<T>;
 }
 
@@ -265,9 +260,10 @@ export interface ListConfig<T = any> {
 export interface ListViewConfig {
   disablePagination?: boolean;
   enableDownload?: boolean;
+  enableRowPreview?: boolean;
   enableRowSelection?: boolean;
   listHero?: ComponentsConfig;
-  relatedView?: RelatedViewConfig;
+  rowPreviewView?: ComponentsConfig; // Row preview view is expected to be a modal or drawer or similar.
   rowSelectionView?: ComponentsConfig;
   subTitleHero?: ComponentsConfig;
 }
@@ -304,15 +300,6 @@ export interface Override {
   withdrawn?: boolean;
 }
 
-/**
- * Related search function.
- */
-type RelatedSearchFunction = (
-  searchKey: CategoryKey | undefined,
-  resultKey: CategoryKey | undefined,
-  selectedCategoryValues: SelectedFilterValue | undefined
-) => Promise<RelatedSearchResult | undefined>;
-
 export interface SavedFilter {
   filters: SelectedFilter[];
   sorting?: ColumnSort[];
@@ -356,24 +343,6 @@ interface TrackingConfig {
   trackFilterOpened?: TrackFilterOpenedFunction;
 }
 
-/**
- * Product of the related search function.
- */
-export interface RelatedSearchResult {
-  resultKey: CategoryKey; // The related search function resultant search values' category key.
-  searchKey: CategoryKey; // The related search function search parameters' category key.
-  values: string[]; // Resultant search values.
-}
-
-/**
- * Related view configuration.
- */
-export interface RelatedViewConfig {
-  relatedSearchFn: RelatedSearchFunction;
-  resultKey: CategoryKey; // The related search function resultant search values' category key.
-  searchKey: CategoryKey; // The related search function search parameters' category key.
-}
-
 /**
  * Interface that will hold the whole configuration for a given site.
  */
@@ -459,8 +428,9 @@ export type ThemeOptionsFn = (theme: Theme) => ThemeOptions;
 /**
  * View context.
  */
-export interface ViewContext {
+export interface ViewContext<T extends RowData, TData = unknown> {
   authState: Pick<AuthContextProps, "authenticationStatus" | "isAuthenticated">;
+  cellContext?: CellContext<T, TData>;
   entityConfig: EntityConfig;
   exploreState: ExploreState;
   fileManifestState: FileManifestState;

package/src/providers/exploreState/entities.ts

@@ -1,11 +1,15 @@
-import { ColumnSort, RowSelectionState } from "@tanstack/react-table";
-import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
+import {
+  ColumnSort,
+  RowSelectionState,
+  VisibilityState,
+} from "@tanstack/react-table";
 import {
   CategoryValueKey,
   SelectCategory,
   SelectCategoryView,
   SelectedFilter,
 } from "../../common/entities";
+import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
 import {
   CategoryConfig,
   CategoryGroup,
@@ -18,6 +22,7 @@ export interface EntityPageState {
   categoryGroupConfigKey: CategoryGroupConfigKey;
   columnsVisibility: VisibilityState;
   enableRowSelection: boolean;
+  rowPreview: RowPreviewState;
   rowSelection: RowSelectionState;
   sorting: ColumnSort[];
 }

package/src/providers/exploreState/initializer/constants.ts

@@ -34,11 +34,9 @@ export const INITIAL_STATE: ExploreState = {
   featureFlagState: undefined,
   filterCount: 0,
   filterState: [],
-  isRelatedView: false,
   listItems: [],
-  listView: undefined,
   loading: true,
   paginationState: DEFAULT_PAGINATION_STATE,
-  relatedListItems: undefined,
+  rowPreview: undefined,
   tabValue: "",
 };