@databiosphere/findable-ui 17.0.0 → 19.0.0

package/lib/viewModelBuilders/common/utils.js

@@ -13,27 +13,27 @@ export function mapCategoryKeyLabel(CATEGORY_KEY, CATEGORY_LABEL) {
     return categoryKeyLabel;
 }
 /**
- * Sanitizes a string for display i.e. any empty, null or undefined value is sanitized to "Unspecified".
- * @param str - String to sanitize.
+ * Sanitizes a value to a string for display i.e. any empty, null or undefined value is sanitized to "Unspecified".
+ * @param value - Value to sanitize.
  * @returns the string or sanitized string value.
  */
-export function sanitizeString(str) {
-    if (str === "" || str === null || str === undefined) {
+export function sanitizeString(value) {
+    if (value === "" || value === null || value === undefined) {
         return "Unspecified";
     }
     else {
-        return str;
+        return String(value);
     }
 }
 /**
- * Sanitizes a string array for display i.e. any string element within the string array that is an empty, null or
+ * Sanitizes array elements to strings for display i.e. any element within the string array that is an empty, null or
  * undefined value is sanitized to "Unspecified".
- * @param strArray - String array to sanitize.
+ * @param array - Array to sanitize.
  * @returns the string array, sanitized.
  */
-export function sanitizeStringArray(strArray) {
-    if (!strArray || strArray.length === 0) {
+export function sanitizeStringArray(array) {
+    if (!array || array.length === 0) {
         return ["Unspecified"];
     }
-    return strArray.map(sanitizeString);
+    return array.map(sanitizeString);
 }

package/lib/views/ExploreView/exploreView.js

@@ -72,7 +72,7 @@ export const ExploreView = (props) => {
         if (selected) {
             track(EVENT_NAME.FILTER_SELECTED, {
                 [EVENT_PARAM.FILTER_NAME]: categoryKey,
-                [EVENT_PARAM.FILTER_VALUE]: selectedCategoryValue,
+                [EVENT_PARAM.FILTER_VALUE]: String(selectedCategoryValue),
             });
         }
     };
@@ -152,7 +152,7 @@ function renderComponent(componentsConfig, response) {
 function renderList(exploreState, entityConfig, entityListType) {
     const { listItems, loading, tabValue } = exploreState;
     const { getId: getRowId, list, listView } = entityConfig;
-    const { columns: columnsConfig, defaultSort, tableOptions } = list;
+    const { columns: columnsConfig } = list;
     if (!exploreState || !tabValue) {
         return React.createElement(React.Fragment, null); //TODO: return the loading UI component
     }
@@ -161,7 +161,7 @@ function renderList(exploreState, entityConfig, entityListType) {
         // loads with the previous tabs data on the first render after switching tabs. (or similar)
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading, tableOptions: tableOptions }));
+    return (React.createElement(TableCreator, { columns: columnsConfig, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading }));
 }
 /**
  * Renders Summaries component when all the following requirements are fulfilled:

package/package.json

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

package/src/apis/azul/common/filterTransformer.ts

@@ -131,7 +131,7 @@ export function transformTermFacets(
       categoryValues.push({
         count: 0,
         key: term,
-        label: term ?? LABEL.UNSPECIFIED,
+        label: String(term ?? LABEL.UNSPECIFIED),
         selected: false, // Selected state updated in filter hook
       });
     }

package/src/apis/azul/common/utils.ts

@@ -5,7 +5,7 @@ import { ParamValue } from "./filterTransformer";
  * @param value - Filter value.
  * @returns filter parameter value.
  */
-export function getFilterParameterValue(value: string): ParamValue {
+export function getFilterParameterValue(value: unknown): ParamValue {
   if (value === "Unspecified") {
     return null;
   }
@@ -15,5 +15,7 @@ export function getFilterParameterValue(value: string): ParamValue {
   if (value === "false") {
     return false;
   }
-  return value;
+  if (typeof value === "string" || typeof value === "boolean") return value;
+  if (value === null || value === undefined) return null;
+  return String(value);
 }

package/src/common/entities.ts

@@ -15,7 +15,7 @@ export interface CategoryTag {
 /**
  * Category values to be used as keys. For example, "Homo sapiens" or "10X 3' v2 sequencing".
  */
-export type CategoryValueKey = string;
+export type CategoryValueKey = unknown;
 
 /**
  * Set of selected category values.
@@ -53,7 +53,7 @@ export interface SelectCategory {
  */
 export interface SelectCategoryValue {
   count: number;
-  key: CategoryKey;
+  key: CategoryValueKey;
   label: string; // Allows for displaying null values as "Unspecified"
   selected: boolean;
 }
@@ -73,7 +73,7 @@ export interface SelectCategoryValueView {
  */
 export interface SelectCategoryView {
   isDisabled?: boolean;
-  key: CategoryValueKey;
+  key: CategoryKey;
   label: string;
   values: SelectCategoryValueView[];
 }

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -3,6 +3,7 @@ import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
 import { TableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
+import { useCollapsableRows } from "../../../../../../../Table/components/TableRows/components/CollapsableRows/hook";
 
 export interface CollapsableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
@@ -13,6 +14,7 @@ export const CollapsableRows = <T extends RowData>({
 }: CollapsableRowsProps<T>): JSX.Element => {
   const { getRowModel } = tableInstance;
   const { rows } = getRowModel();
+  useCollapsableRows(tableInstance);
   return (
     <Fragment>
       {rows.map((row) => {

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -1,5 +1,5 @@
 import { TableCell } from "@mui/material";
-import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
+import { flexRender, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import {
   getTableCellAlign,
@@ -26,9 +26,9 @@ export const TableRows = <T extends RowData>({
       {rows.map((row) => {
         return (
           <TableRow
-            id={getRowId(row)}
-            isPreview={row.getIsPreview()}
             key={row.id}
+            isGrouped={row.getIsGrouped()}
+            isPreview={row.getIsPreview()}
           >
             {row.getVisibleCells().map((cell) => {
               if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.
@@ -50,18 +50,3 @@ export const TableRows = <T extends RowData>({
     </Fragment>
   );
 };
-
-/**
- * Returns identifier for a row.
- * @param row - Row.
- * @returns row identifier.
- */
-function getRowId<T extends RowData>(row: Row<T>): string | undefined {
-  const { depth, getIsGrouped, id } = row;
-  if (getIsGrouped()) {
-    return `grouped-row-${id}`;
-  }
-  if (depth > 0) {
-    return `sub-row-${id}`;
-  }
-}

package/src/components/Export/components/ExportForm/components/ExportFileSummaryForm/exportFileSummaryForm.tsx

@@ -8,7 +8,7 @@ import {
   TableHead,
   TableRow,
 } from "@mui/material";
-import React, { Fragment } from "react";
+import React from "react";
 import { formatCountSize } from "../../../../../../utils/formatCountSize";
 import { formatFileSize } from "../../../../../../utils/formatFileSize";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
@@ -81,37 +81,33 @@ export const ExportFileSummaryForm = ({
             </TableRow>
           </TableHead>
           <TableBody>
-            <TableRow>
-              {fileSummaryFacet.terms.map(
-                ({ count, name, selected, size = 0 }) => (
-                  <Fragment key={name}>
-                    <TableCell>
-                      <FormControlLabel
-                        control={
-                          <Checkbox
-                            checked={selected}
-                            checkedIcon={<CheckedIcon />}
-                            icon={
-                              error ? <UncheckedErrorIcon /> : <UncheckedIcon />
-                            }
-                            onChange={(): void => {
-                              onClearError(error, ERROR.FILE_SUMMARY_ERROR);
-                              onFilter(fileSummaryFacet.name, name, selected);
-                            }}
-                          />
-                        }
-                        key={name}
-                        label={name}
-                      />
-                    </TableCell>
-                    <TableCell>{formatCountSize(count)}</TableCell>
-                    {hasFileSize && (
-                      <TableCell>{formatFileSize(size)}</TableCell>
-                    )}
-                  </Fragment>
-                )
-              )}
-            </TableRow>
+            {fileSummaryFacet.terms.map(
+              ({ count, name, selected, size = 0 }) => (
+                <TableRow key={name}>
+                  <TableCell>
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          checked={selected}
+                          checkedIcon={<CheckedIcon />}
+                          icon={
+                            error ? <UncheckedErrorIcon /> : <UncheckedIcon />
+                          }
+                          onChange={(): void => {
+                            onClearError(error, ERROR.FILE_SUMMARY_ERROR);
+                            onFilter(fileSummaryFacet.name, name, selected);
+                          }}
+                        />
+                      }
+                      key={name}
+                      label={name}
+                    />
+                  </TableCell>
+                  <TableCell>{formatCountSize(count)}</TableCell>
+                  {hasFileSize && <TableCell>{formatFileSize(size)}</TableCell>}
+                </TableRow>
+              )
+            )}
           </TableBody>
         </GridTable>
       </GridPaper>

package/src/components/Filter/common/utils.ts

@@ -74,7 +74,7 @@ export function getSortMatchesFn(
       let match = matchString(value.label || "");
       if (match) {
         matches.push({ labelRanges: match.ranges, score: match.score, value });
-      } else {
+      } else if (typeof value.key === "string") {
         match = matchString(value.key || "");
         if (match) matches.push({ score: match.score, value });
       }

package/src/components/Filter/components/VariableSizeList/VariableSizeList.tsx

@@ -17,7 +17,7 @@ import { FilterMenuSearchMatch } from "../../common/entities";
 import { List as FilterList } from "../FilterList/filterList.styles";
 import VariableSizeListItem from "../VariableSizeListItem/variableSizeListItem";
 
-export type ItemSizeByItemKey = Map<string, number>;
+export type ItemSizeByItemKey = Map<unknown, number>;
 
 export interface VariableSizeListProps {
   categoryKey: CategoryKey;

package/src/components/Filter/components/VariableSizeListItem/variableSizeListItem.tsx

@@ -19,7 +19,7 @@ interface Props {
   categorySection?: string;
   matchedItem: FilterMenuSearchMatch;
   onFilter: OnFilterFn;
-  onUpdateItemSizeByItemKey: (itemKey: string, itemSize: number) => void;
+  onUpdateItemSizeByItemKey: (itemKey: unknown, itemSize: number) => void;
   style: CSSProperties;
 }
 

package/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx

@@ -1,6 +1,6 @@
-import { ColumnSort } from "@tanstack/react-table";
+import { ColumnSort, GroupingState } from "@tanstack/react-table";
 import Link from "next/link";
-import React, { useCallback } from "react";
+import React from "react";
 import { UrlObject } from "url";
 import { SelectedFilter } from "../../../../../../common/entities";
 import { useExploreState } from "../../../../../../hooks/useExploreState";
@@ -16,6 +16,7 @@ import {
 import { LinkProps } from "../../link";
 
 const PARAM_FILTER = "filter";
+const PARAM_GROUPING = "grouping";
 const PARAM_SORTING = "sorting";
 
 export interface ExploreViewLinkProps
@@ -36,22 +37,22 @@ export const ExploreViewLink = ({
     throwError(url);
   }
 
-  const onNavigate = useCallback(() => {
-    const entityListType = getEntityListType(url.href);
-    const filters = getSelectedFilters(url.query);
-    const sorting = getSorting(url.query);
-    exploreDispatch({
-      payload: { entityListType, filters, sorting },
-      type: ExploreActionKind.UpdateEntityFilters,
-    });
-    onClick?.();
-  }, [exploreDispatch, onClick, url]);
+  const entityListType = getEntityListType(url.href);
+  const filters = getSelectedFilters(url.query);
+  const grouping = getGrouping(url.query);
+  const sorting = getSorting(url.query);
 
   return (
     <Link
       className={className}
       href={url.href}
-      onClick={onNavigate}
+      onClick={(): void => {
+        exploreDispatch({
+          payload: { entityListType, filters, grouping, sorting },
+          type: ExploreActionKind.UpdateEntityFilters,
+        });
+        onClick?.();
+      }}
       rel={REL_ATTRIBUTE.NO_OPENER}
       target={target}
     >
@@ -69,6 +70,19 @@ function getEntityListType(href: UrlObjectWithHrefAndQuery["href"]): string {
   return href.substring(href.lastIndexOf("/") + 1);
 }
 
+/**
+ * Returns the grouping from the given query.
+ * @param query - Query.
+ * @returns grouping.
+ */
+function getGrouping(
+  query: UrlObjectWithHrefAndQuery["query"]
+): GroupingState | undefined {
+  const decodedQuery = decodeURIComponent(query);
+  const parsedQuery = JSON.parse(decodedQuery);
+  return parsedQuery[PARAM_GROUPING];
+}
+
 /**
  * Returns the selected filters from the given query.
  * @param query - Query.

package/src/components/Table/common/columnDef.ts

@@ -6,6 +6,7 @@ import { RowPositionCell } from "../components/TableCell/components/RowPositionC
 export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
   ROW_POSITION: {
     cell: RowPositionCell,
+    enableGrouping: false,
     enableHiding: false,
     enableSorting: false,
     header: "",

package/src/components/Table/common/gridTable.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Table as MTable } from "@mui/material";
-import { smokeLightest, white } from "../../../styles/common/mixins/colors";
+import { white } from "../../../styles/common/mixins/colors";
 
 export interface GridTableProps {
   gridTemplateColumns: string;
@@ -17,7 +17,10 @@ export const GridTable = styled(MTable, {
   tbody,
   thead,
   tr {
-    display: contents; /* required; allows grandchildren of grid template to appear as though direct child */
+    display: grid;
+    gap: inherit;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
   }
 
   tr {
@@ -39,13 +42,4 @@ export const GridTable = styled(MTable, {
       min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
     }
   }
-
-  [id^="grouped-row"] {
-    background-color: ${smokeLightest};
-
-    td {
-      background-color: inherit;
-      grid-column: 1 / -1;
-    }
-  }
 `;

package/src/components/Table/common/utils.ts

@@ -1,16 +1,12 @@
-import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
-import { TableSortLabelProps } from "@mui/material";
 import {
   Cell,
   Column,
   ColumnFiltersState,
-  ColumnSort,
   InitialTableState,
   memo,
   PaginationState,
   Row,
   RowData,
-  SortDirection,
   sortingFns,
   Table,
   VisibilityState,
@@ -24,6 +20,7 @@ import {
 import { EXPLORE_MODE, ExploreMode } from "../../../hooks/useExploreMode";
 import { ACCESSOR_KEYS } from "../../TableCreator/common/constants";
 import { CheckboxMenuListItem } from "../components/CheckboxMenu/checkboxMenu";
+import { handleToggleVisibility } from "../components/TableFeatures/ColumnVisibility/utils";
 
 /**
  * Internal model of a category term count keyed by category term.
@@ -88,7 +85,7 @@ export function buildCategoryViews<T extends RowData>(
       const values = [...getFacetedUniqueValues()].map(([value, count]) => ({
         count,
         key: value,
-        label: value,
+        label: String(value ?? ""),
         selected: false, // Selected state updated in reducer.
       }));
       categoryViews.push({
@@ -122,20 +119,6 @@ function formatDataToTSV(data: TableData[][]): string {
     .join("\n");
 }
 
-/**
- * Returns the column sort direction.
- * @param sortDirection - Column sort direction.
- * @returns the coumn sort direction.
- */
-export function getColumnSortDirection(
-  sortDirection: false | SortDirection
-): SortDirection | undefined {
-  if (!sortDirection) {
-    return;
-  }
-  return sortDirection;
-}
-
 /**
  * Returns filtered entity results as a blob.
  * @param rows - Table rows.
@@ -164,31 +147,27 @@ export function getEditColumnOptions<T extends RowData>(
   const { getAllColumns, initialState } = table;
   const { columnVisibility: initialVisibilityState } = initialState;
   const allColumns = getAllColumns();
-  return allColumns.reduce(
-    (
-      acc,
-      {
-        columnDef: { header },
-        getCanHide,
-        getIsVisible,
-        getToggleVisibilityHandler,
-        id,
-      }
-    ) => {
-      if (getCanHide()) {
-        const option: CheckboxMenuListItem = {
-          checked: getIsVisible(),
-          disabled: initialVisibilityState[id],
-          label: header as string, // TODO revisit type assertion here
-          onChange: getToggleVisibilityHandler(),
-          value: id,
-        };
-        acc.push(option);
-      }
-      return acc;
-    },
-    [] as CheckboxMenuListItem[]
-  );
+  return allColumns.reduce((acc, column) => {
+    const {
+      columnDef: { header },
+      getCanHide,
+      getIsVisible,
+      id,
+    } = column;
+    if (getCanHide()) {
+      const option: CheckboxMenuListItem = {
+        checked: getIsVisible(),
+        disabled: initialVisibilityState[id], // TODO(cc) column visibility toggle should be disabled when table enableGrouping is false, and column is grouped.
+        label: header as string, // TODO revisit type assertion here
+        onChange: () => {
+          handleToggleVisibility(table, column);
+        },
+        value: id,
+      };
+      acc.push(option);
+    }
+    return acc;
+  }, [] as CheckboxMenuListItem[]);
 }
 
 /**
@@ -243,6 +222,7 @@ export function getGridTemplateColumns<T extends RowData>(
   columns: Column<T>[]
 ): string {
   return columns
+    .filter(filterGroupedColumn)
     .map(({ columnDef: { meta } }) => {
       const width = meta?.width;
       if (isGridTrackMinMax(width)) {
@@ -256,35 +236,17 @@ export function getGridTemplateColumns<T extends RowData>(
 /**
  * Returns initial table state.
  * @param columns - Column configuration.
- * @param defaultSort - Column sort configuration.
  * @returns initial table state.
  */
-export function getInitialState(
-  columns: ColumnConfig[],
-  defaultSort: ColumnSort | undefined
+export function getInitialState<T extends RowData>(
+  columns: ColumnConfig<T>[]
 ): InitialTableState {
   const columnVisibility = getInitialTableColumnVisibility(columns);
-  const sorting = getInitialTableStateSorting(defaultSort);
   return {
     columnVisibility,
-    sorting,
   };
 }
 
-/**
- * Returns the initial table sorting state for the specified column sort configuration.
- * @param defaultSort - Column sort configuration.
- * @returns initial table sorting state.
- */
-export function getInitialTableStateSorting(
-  defaultSort: ColumnSort | undefined
-): ColumnSort[] {
-  if (!defaultSort) {
-    return [];
-  }
-  return [defaultSort];
-}
-
 /**
  * Returns the pinned cell and its index tuple.
  * @param row - Row.
@@ -296,7 +258,12 @@ export function getPinnedCellIndex<T extends RowData>(
   const visibleCells = row.getVisibleCells();
   let pinnedIndex = 0;
   for (let i = 0; i < visibleCells.length; i++) {
-    if (visibleCells[i].column.columnDef.meta?.columnPinned) {
+    const cell = visibleCells[i];
+    if (cell.getIsGrouped()) {
+      pinnedIndex = i;
+      break;
+    }
+    if (cell.column.columnDef.meta?.columnPinned) {
       pinnedIndex = i;
       break;
     }
@@ -304,24 +271,6 @@ export function getPinnedCellIndex<T extends RowData>(
   return [visibleCells[pinnedIndex], pinnedIndex];
 }
 
-/**
- * Returns table sort label props.
- * @param column - Table column.
- * @returns table sort label props.
- */
-export function getTableSortLabelProps<T extends RowData>(
-  column: Column<T>
-): TableSortLabelProps {
-  const { getCanSort, getIsSorted, getToggleSortingHandler } = column;
-  return {
-    IconComponent: SouthRoundedIcon,
-    active: isColumnSortActive(getIsSorted()),
-    direction: getColumnSortDirection(getIsSorted()),
-    disabled: !getCanSort(),
-    onClick: getToggleSortingHandler(),
-  };
-}
-
 /**
  * Returns table state pagination.
  * @param pageIndex - Explore state page index.
@@ -364,21 +313,23 @@ function getRowsTableData<T extends RowData>(rows: Row<T>[]): TableData[][] {
   );
 }
 
+/**
+ * Returns true if the column is not grouped (filters out grouped columns).
+ * @param column - Table column.
+ * @returns true if the column is not grouped.
+ */
+function filterGroupedColumn<T extends RowData>(column: Column<T>): boolean {
+  return !column.getIsGrouped();
+}
+
 /**
  * Returns true if any or all table rows are selected.
  * @param table - Table.
  * @returns true if a row is selected.
  */
 export function isAnyRowSelected<T extends RowData>(table: Table<T>): boolean {
-  const {
-    getIsAllPageRowsSelected,
-    getIsSomePageRowsSelected,
-    options: { enableRowSelection },
-  } = table;
-  return Boolean(
-    enableRowSelection &&
-      (getIsSomePageRowsSelected() || getIsAllPageRowsSelected())
-  );
+  const { getIsAllPageRowsSelected, getIsSomePageRowsSelected } = table;
+  return getIsSomePageRowsSelected() || getIsAllPageRowsSelected();
 }
 
 /**
@@ -404,20 +355,6 @@ export function isCollapsableRowDisabled<T extends RowData>(
   return tableInstance.getVisibleLeafColumns().length === 1;
 }
 
-/**
- * Returns true if column has a sort direction.
- * @param sortDirection - Column sort direction.
- * @returns true when column has a sort direction.
- */
-export function isColumnSortActive(
-  sortDirection: false | SortDirection
-): boolean {
-  if (!sortDirection) {
-    return sortDirection;
-  }
-  return true;
-}
-
 /**
  * Returns sort return value from the compare function. The compare function is dependent on the row value type:
  * - row values of type "array" use a compare function based off React Table "basic" compare function,
@@ -465,8 +402,8 @@ function basicSort<TValue>(val0: TValue, val1: TValue): number {
  * @param columns - Column configuration.
  * @returns initial table visibility state.
  */
-export function getInitialTableColumnVisibility(
-  columns: ColumnConfig[]
+export function getInitialTableColumnVisibility<T extends RowData>(
+  columns: ColumnConfig<T>[]
 ): VisibilityState {
   return columns.reduce((acc, { columnVisible = true, id }) => {
     Object.assign(acc, { [id]: columnVisible });

package/src/components/Table/components/TableBody/hooks/virtualizer/constants.ts

@@ -0,0 +1,3 @@
+export const VIRTUALIZER_OPTIONS = {
+  overscan: 20,
+};