@databiosphere/findable-ui 5.0.0 → 7.0.0

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.tsx

@@ -0,0 +1,51 @@
+import { Grid, Typography } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { ListConfig } from "../../../../../../../../../../config/entities";
+import { TEXT_BODY_400 } from "../../../../../../../../../../theme/common/typography";
+import { ButtonTextPrimary } from "../../../../../../../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
+import { ComponentCreator } from "../../../../../../../../../ComponentCreator/ComponentCreator";
+import { Section } from "./rowDetail.styles";
+
+const MIN_COLUMNS = 6;
+
+interface RowDetailProps<T extends RowData> {
+  className?: string;
+  columns: ListConfig<T>["columns"];
+  expanded?: boolean;
+  minColumns?: number;
+  rowData: T;
+}
+
+export const RowDetail = <T extends RowData>({
+  className,
+  columns,
+  expanded = true,
+  minColumns = MIN_COLUMNS,
+  rowData,
+}: RowDetailProps<T>): JSX.Element | null => {
+  const [showMore, setShowMore] = React.useState<boolean>(expanded);
+  const visibleColumns = showMore ? columns : columns.slice(0, minColumns);
+  const buttonText = showMore ? "Show less" : "Show more";
+  const onToggleShowMore = (): void => setShowMore(!showMore);
+  if (!rowData) return null;
+  return (
+    <Section className={className}>
+      {visibleColumns.map(({ componentConfig, header }, i) => (
+        <Grid key={i}>
+          <Typography
+            color="ink.light"
+            variant={TEXT_BODY_400}
+            {...componentConfig.props?.TypographyProps}
+          >
+            {header}
+          </Typography>
+          <ComponentCreator components={[componentConfig]} response={rowData} />
+        </Grid>
+      ))}
+      <ButtonTextPrimary onClick={onToggleShowMore}>
+        {buttonText}
+      </ButtonTextPrimary>
+    </Section>
+  );
+};

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.styles.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+
+export const Section = styled.div`
+  display: grid;
+  gap: 16px;
+  padding: 16px 24px 24px;
+
+  .MuiTypography-text-heading-small {
+    font-size: 18px;
+    line-height: 26px;
+  }
+`;

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.tsx

@@ -0,0 +1,25 @@
+import { Typography } from "@mui/material";
+import React, { ReactNode } from "react";
+import { TEXT_HEADING_SMALL } from "../../../../../../../../theme/common/typography";
+import { Section as PreviewSection } from "./section.styles";
+
+export interface SectionProps {
+  children?: ReactNode | ReactNode[];
+  className?: string;
+  title?: ReactNode;
+}
+
+export const Section = ({
+  children,
+  className,
+  title,
+}: SectionProps): JSX.Element => {
+  return (
+    <PreviewSection className={className}>
+      <Typography component="div" variant={TEXT_HEADING_SMALL}>
+        {title}
+      </Typography>
+      {children}
+    </PreviewSection>
+  );
+};

package/src/components/Table/components/TableToolbar/components/RowPreview/rowPreview.tsx

@@ -0,0 +1,26 @@
+import { RowData, Table } from "@tanstack/react-table";
+import React from "react";
+import { ComponentsConfig } from "../../../../../../config/entities";
+import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
+
+export interface RowPreviewProps<T extends RowData> {
+  rowPreviewView?: ComponentsConfig;
+  tableInstance: Table<T>;
+}
+
+export const RowPreview = <T extends RowData>({
+  rowPreviewView,
+  tableInstance,
+}: RowPreviewProps<T>): JSX.Element | null => {
+  if (!rowPreviewView) return null;
+  const { getRowPreviewRow } = tableInstance;
+  const { original: response } = getRowPreviewRow() || {};
+  if (!response) return null;
+  return (
+    <ComponentCreator
+      components={rowPreviewView}
+      response={response}
+      viewContext={{ tableInstance }}
+    />
+  );
+};

package/src/components/Table/components/TableToolbar/components/RowSelection/rowSelection.tsx

@@ -1,18 +1,18 @@
 import { Typography } from "@mui/material";
-import { Row } from "@tanstack/react-table";
+import { Row, RowData } from "@tanstack/react-table";
 import React from "react";
 import { ComponentsConfig } from "../../../../../../config/entities";
 import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
 import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
 import { RowSelection as RowSelectionActions } from "./rowSelection.styles";
 
-export interface RowSelectionProps<T> {
+export interface RowSelectionProps<T extends RowData> {
   className?: string;
   rows: Row<T>[];
   rowSelectionView?: ComponentsConfig;
 }
 
-export const RowSelection = <T extends object>({
+export const RowSelection = <T extends RowData>({
   className,
   rows,
   rowSelectionView,

package/src/components/Table/components/TableToolbar/tableToolbar.tsx

@@ -1,4 +1,4 @@
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { ListViewConfig } from "../../../../config/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
@@ -7,16 +7,17 @@ import { getEditColumnOptions, isAnyRowSelected } from "../../common/utils";
 import { CheckboxMenu } from "../CheckboxMenu/checkboxMenu";
 import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
 import { PaginationSummary } from "../PaginationSummary/paginationSummary";
+import { RowPreview } from "./components/RowPreview/rowPreview";
 import { RowSelection } from "./components/RowSelection/rowSelection";
 import { Toolbar, ToolbarActions } from "./tableToolbar.styles";
 
-export interface TableToolbarProps<T> {
+export interface TableToolbarProps<T extends RowData> {
   listView?: ListViewConfig;
   rowDirection: ROW_DIRECTION;
   tableInstance: Table<T>;
 }
 
-export const TableToolbar = <T extends object>({
+export const TableToolbar = <T extends RowData>({
   listView,
   rowDirection,
   tableInstance,
@@ -25,7 +26,7 @@ export const TableToolbar = <T extends object>({
   const { paginationState } = exploreState;
   const { currentPage, pages, pageSize, rows } = paginationState;
   const { getSelectedRowModel, resetColumnVisibility } = tableInstance;
-  const { enableDownload } = listView || {};
+  const { enableDownload, rowPreviewView } = listView || {};
   const isLastPage = currentPage === pages;
   const editColumnOptions = getEditColumnOptions(tableInstance);
   const showToolbar =
@@ -70,6 +71,10 @@ export const TableToolbar = <T extends object>({
           </ToolbarActions>
         </Toolbar>
       )}
+      <RowPreview
+        rowPreviewView={rowPreviewView}
+        tableInstance={tableInstance}
+      />
     </Fragment>
   );
 };

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

@@ -0,0 +1,65 @@
+import {
+  functionalUpdate,
+  InitialTableState,
+  makeStateUpdater,
+  Row,
+  RowData,
+  Table,
+  TableFeature,
+  TableOptionsResolved,
+  TableState,
+  Updater,
+} from "@tanstack/react-table";
+import { RowPreviewState } from "./entities";
+import {
+  getIsPreview,
+  getIsRowPreview,
+  getRowPreviewRow,
+  togglePreview,
+  toggleRowPreview,
+} from "./utils";
+
+export const ROW_PREVIEW: TableFeature = {
+  createRow: <T extends RowData>(row: Row<T>, table: Table<T>): void => {
+    row.getIsPreview = (): boolean => {
+      return getIsPreview(row, table);
+    };
+    row.togglePreview = (): void => {
+      togglePreview(row, table);
+    };
+  },
+  createTable: <T extends RowData>(table: Table<T>): void => {
+    table.getIsRowPreview = (): boolean => {
+      return getIsRowPreview(table);
+    };
+    table.getRowPreviewRow = (): Row<T> | undefined => {
+      return getRowPreviewRow(table);
+    };
+    table.resetRowPreview = (): void => {
+      table.setRowPreview(undefined);
+    };
+    table.setRowPreview = (updater: Updater<RowPreviewState>): void => {
+      const safeUpdater: Updater<RowPreviewState> = (old: RowPreviewState) => {
+        return functionalUpdate(updater, old);
+      };
+      return table.options.onRowPreviewChange?.(safeUpdater);
+    };
+    table.toggleRowPreview = (): void => {
+      toggleRowPreview(table);
+    };
+  },
+  getDefaultOptions: <T extends RowData>(
+    table: Table<T>
+  ): Partial<TableOptionsResolved<T>> => {
+    return {
+      enableRowPreview: true,
+      onRowPreviewChange: makeStateUpdater("rowPreview", table),
+    };
+  },
+  getInitialState: (initialState?: InitialTableState): Partial<TableState> => {
+    return {
+      ...initialState,
+      rowPreview: undefined,
+    } as Partial<TableState>;
+  },
+};

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

@@ -0,0 +1,25 @@
+import { OnChangeFn, Row, RowData, Updater } from "@tanstack/react-table";
+
+export interface RowPreviewInstance<T extends RowData> {
+  getIsRowPreview: () => boolean /* Is row preview open */;
+  getRowPreviewRow: () => Row<T> | undefined;
+  resetRowPreview: () => void;
+  setRowPreview: (updater: Updater<RowPreviewState>) => void;
+  toggleRowPreview: () => void;
+}
+
+export interface RowPreviewOptions {
+  enableRowPreview?: boolean;
+  onRowPreviewChange?: OnChangeFn<RowPreviewState>;
+}
+
+export interface RowPreviewRow {
+  getIsPreview: () => boolean /* Is row previewed */;
+  togglePreview: () => void;
+}
+
+export type RowPreviewState = { [id: string]: boolean } | undefined;
+
+export interface RowPreviewTableState {
+  rowPreview: RowPreviewState;
+}

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> {