@databiosphere/findable-ui 29.0.2 → 30.0.0

package/lib/views/ExploreView/exploreView.js

@@ -46,9 +46,10 @@ export const ExploreView = (props) => {
      * @param selectedCategoryValue - The value to set or clear.
      * @param selected - Indication of whether the selected value is being set or cleared.
      * @param categorySection - Name of group the category is in.
+     * @param viewKind - View kind.
      * @param searchTerm - Search term used to find the value.
      */
-    const onFilterChange = (fromSearchAll, categoryKey, selectedCategoryValue, selected, categorySection, searchTerm) => {
+    const onFilterChange = (fromSearchAll, categoryKey, selectedCategoryValue, selected, categorySection, viewKind, searchTerm) => {
         const dispatchType = categoryKey === SELECT_CATEGORY_KEY.SAVED_FILTERS
             ? ExploreActionKind.ApplySavedFilter
             : ExploreActionKind.UpdateFilter;
@@ -57,6 +58,7 @@ export const ExploreView = (props) => {
                 categoryKey,
                 selected,
                 selectedValue: selectedCategoryValue,
+                viewKind,
             },
             type: dispatchType,
         });
@@ -107,25 +109,25 @@ export const ExploreView = (props) => {
 };
 /**
  * Builds the category views into category views grouped by the given category group configuration.
- * @param selectCategoryViews - View models of categories to display.
+ * @param categoryViews - View models of categories to display.
  * @param categoryGroups - Category groups.
  * @returns category filters.
  */
-function buildCategoryFilters(selectCategoryViews, categoryGroups) {
+function buildCategoryFilters(categoryViews, categoryGroups) {
     if (!categoryGroups) {
-        return [{ categoryViews: selectCategoryViews }];
+        return [{ categoryViews }];
     }
     return categoryGroups.reduce((accGroups, { categoryConfigs, label }) => {
         // Grab the category views for the configured grouped categories.
-        const categoryViews = categoryConfigs.reduce((accViews, { key: categoryKey }) => {
-            const categoryView = selectCategoryViews.find(({ key }) => key === categoryKey);
+        const views = categoryConfigs.reduce((accViews, { key: categoryKey }) => {
+            const categoryView = categoryViews.find(({ key }) => key === categoryKey);
             if (categoryView) {
                 accViews.push(categoryView);
             }
             return accViews;
         }, []);
-        if (categoryViews.length > 0) {
-            accGroups.push({ categoryViews, label });
+        if (views.length > 0) {
+            accGroups.push({ categoryViews: views, label });
         }
         return accGroups;
     }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "29.0.2",
+  "version": "30.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -24,6 +24,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
+    "@emotion/jest": "^11.13.0",
     "@mui/types": "^7.4.0",
     "@next/eslint-plugin-next": "^14.2.28",
     "@storybook/addon-actions": "^8.6.4",

package/src/common/categories/config/types.ts

@@ -0,0 +1,42 @@
+import {
+  CategoryKey,
+  DataDictionaryAnnotation,
+  SelectCategoryValueView,
+} from "../../entities";
+import { RangeViewKind } from "../views/range/types";
+import { SelectViewKind } from "../views/select/types";
+
+/**
+ * Category config.
+ */
+export type CategoryConfig = RangeCategoryConfig | SelectCategoryConfig;
+
+/**
+ * Common category config.
+ */
+export interface CommonCategoryConfig {
+  annotation?: DataDictionaryAnnotation;
+  key: CategoryKey;
+  label: string; // human readable label
+}
+
+/**
+ * Range category config.
+ */
+export interface RangeCategoryConfig
+  extends CommonCategoryConfig,
+    RangeViewKind {
+  unit?: string; // e.g. "kg"
+}
+
+/**
+ * Select category config.
+ */
+export interface SelectCategoryConfig
+  extends CommonCategoryConfig,
+    SelectViewKind {
+  enableChartView?: boolean;
+  mapSelectCategoryValue?: (
+    selectCategoryValue: SelectCategoryValueView
+  ) => SelectCategoryValueView;
+}

package/src/common/categories/config/utils.ts

@@ -0,0 +1,47 @@
+import { Category } from "../models/types";
+import { VIEW_KIND } from "../views/types";
+import { CategoryConfig } from "./types";
+
+/**
+ * Returns the category config for the given category config key and view kind.
+ * @param viewKind - View kind.
+ * @param key - Category config key.
+ * @param configs - Category configs.
+ * @returns category config.
+ */
+export function findCategoryConfig<V extends VIEW_KIND>(
+  viewKind: V,
+  key: Category["key"],
+  configs: CategoryConfig[]
+): Extract<CategoryConfig, { viewKind: V }> | undefined {
+  return configs.find(
+    (c): c is Extract<CategoryConfig, { viewKind: V }> =>
+      c.viewKind === viewKind && c.key === key
+  );
+}
+
+/**
+ * Returns the range category config for the given category config key.
+ * @param key - Category config key.
+ * @param configs - Category configs.
+ * @returns category config.
+ */
+export function findRangeCategoryConfig(
+  key: Category["key"],
+  configs: CategoryConfig[]
+): Extract<CategoryConfig, { viewKind: VIEW_KIND.RANGE }> | undefined {
+  return findCategoryConfig(VIEW_KIND.RANGE, key, configs);
+}
+
+/**
+ * Returns the select category config for the given category config key.
+ * @param key - Category config key.
+ * @param configs - Category configs.
+ * @returns category config.
+ */
+export function findSelectCategoryConfig(
+  key: Category["key"],
+  configs: CategoryConfig[]
+): Extract<CategoryConfig, { viewKind?: VIEW_KIND.SELECT }> | undefined {
+  return findCategoryConfig(VIEW_KIND.SELECT, key, configs);
+}

package/src/common/categories/models/range/typeGuards.ts

@@ -0,0 +1,24 @@
+import { Category } from "../types";
+import { RangeCategory, SelectedRange } from "./types";
+
+/**
+ * Determine if category is a range category.
+ * @param category - Category to check if range category.
+ * @returns true if category is a range category.
+ */
+export function isRangeCategory(category: Category): category is RangeCategory {
+  return "max" in category && "min" in category;
+}
+
+/**
+ * Determine if value is a selected range.
+ * @param value - Value to check if selected range.
+ * @returns true if value is a selected range.
+ */
+export function isSelectedRange(value: unknown): value is SelectedRange {
+  return (
+    Array.isArray(value) &&
+    value.length === 2 &&
+    value.every((v) => v === null || typeof v === "number")
+  );
+}

package/src/common/categories/models/range/types.ts

@@ -0,0 +1,17 @@
+import { CategoryKey } from "../../../entities";
+
+/**
+ * Internal filter model of a range category.
+ */
+export interface RangeCategory {
+  key: CategoryKey;
+  max: number;
+  min: number;
+  selectedMax: SelectedRange[1];
+  selectedMin: SelectedRange[0];
+}
+
+/**
+ * Min and max values selected in range category.
+ */
+export type SelectedRange = [number | null, number | null];

package/src/common/categories/models/range/utils.ts

@@ -0,0 +1,51 @@
+import { CategoryValueKey, SelectedFilter } from "../../../entities";
+import { isSelectedRange } from "./typeGuards";
+import { SelectedRange } from "./types";
+
+/**
+ * Asserts that the given value is a selected range.
+ * Throws an error if the value is not a selected range.
+ * @param value - Value to assert is a selected range.
+ */
+export function assertIsRange(value: unknown): asserts value is SelectedRange {
+  if (!isSelectedRange(value)) {
+    throw new Error("Value is not SelectedRange");
+  }
+}
+
+/**
+ * Build the next filter state for the given range category.
+ * @param nextCategorySelectedFilter - Next filter state for the range category.
+ * @param selectedValue - Selected value for the range category.
+ * @param selected - Whether the category value is selected.
+ */
+export function buildNextRangeFilterState(
+  nextCategorySelectedFilter: SelectedFilter,
+  selectedValue: CategoryValueKey,
+  selected: boolean
+): void {
+  if (selected) {
+    // Assert that the selected value is a range.
+    assertIsRange(selectedValue);
+    // Set the selected range.
+    nextCategorySelectedFilter.value = selectedValue;
+  } else {
+    // Remove the selected range.
+    nextCategorySelectedFilter.value = [];
+  }
+}
+
+/**
+ * Get the selected values for the given category, if any.
+ * Handles type checking for selected range.
+ * Falls back to empty array if no selected values or invalid type (should never happen).
+ * @param categorySelectedFilter - Current filter state for a category.
+ * @returns The selected filter (i.e. the set of selected values) for the given category.
+ */
+export function getRangeSelectedValue(
+  categorySelectedFilter?: SelectedFilter
+): SelectedRange {
+  return isSelectedRange(categorySelectedFilter?.value)
+    ? categorySelectedFilter?.value
+    : [null, null];
+}

package/src/common/categories/models/select/utils.ts

@@ -0,0 +1,23 @@
+import { CategoryValueKey, SelectedFilter } from "../../../entities";
+
+/**
+ * Build the next filter state for the given select category.
+ * @param nextCategorySelectedFilter - Next filter state for the select category.
+ * @param selectedValue - Selected value for the select category.
+ * @param selected - Whether the category value is selected.
+ */
+export function buildNextSelectFilterState(
+  nextCategorySelectedFilter: SelectedFilter,
+  selectedValue: CategoryValueKey,
+  selected: boolean
+): void {
+  if (selected) {
+    // Set the selected value.
+    nextCategorySelectedFilter.value.push(selectedValue);
+  } else {
+    // Remove the selected value from the selected set of values.
+    nextCategorySelectedFilter.value = nextCategorySelectedFilter.value.filter(
+      (value: CategoryValueKey) => value !== selectedValue
+    );
+  }
+}

package/src/common/categories/models/types.ts

@@ -0,0 +1,7 @@
+import { SelectCategory } from "../../entities";
+import { RangeCategory } from "./range/types";
+
+/**
+ * Internal filter model of a category.
+ */
+export type Category = SelectCategory | RangeCategory;

package/src/common/categories/views/common/types.ts

@@ -0,0 +1,11 @@
+import { CategoryKey, DataDictionaryAnnotation } from "../../../entities";
+
+/**
+ * Common properties for category views.
+ */
+export interface BaseCategoryView {
+  annotation?: DataDictionaryAnnotation;
+  isDisabled?: boolean;
+  key: CategoryKey;
+  label: string;
+}

package/src/common/categories/views/range/typeGuards.ts

@@ -0,0 +1,13 @@
+import { CategoryView } from "../types";
+import { RangeCategoryView } from "./types";
+
+/**
+ * Returns true if the category view is a range category view.
+ * @param view - Category view.
+ * @returns true if the category view is a range category view.
+ */
+export function isRangeCategoryView(
+  view: CategoryView
+): view is RangeCategoryView {
+  return "max" in view && "min" in view;
+}

package/src/common/categories/views/range/types.ts

@@ -0,0 +1,21 @@
+import { SelectedRange } from "../../models/range/types";
+import { BaseCategoryView } from "../common/types";
+import { VIEW_KIND } from "../types";
+
+/**
+ * View model of range category.
+ */
+export interface RangeCategoryView extends BaseCategoryView {
+  max: number;
+  min: number;
+  selectedMax: SelectedRange[1];
+  selectedMin: SelectedRange[0];
+  unit?: string;
+}
+
+/**
+ * Model of range category view kind.
+ */
+export interface RangeViewKind {
+  viewKind: VIEW_KIND.RANGE;
+}

package/src/common/categories/views/range/utils.ts

@@ -0,0 +1,35 @@
+import { SelectedFilter } from "../../../entities";
+import { CategoryConfig } from "../../config/types";
+import { findRangeCategoryConfig } from "../../config/utils";
+import { RangeCategory } from "../../models/range/types";
+import { getRangeSelectedValue } from "../../models/range/utils";
+import { RangeCategoryView } from "../../views/range/types";
+
+/**
+ * Build the view-specific model of the given range category.
+ * @param category - The range category to build a view model of.
+ * @param categoryConfigs - Category configs indicating accept list as well as label configuration.
+ * @param categorySelectedFilter - Current filter state for a category.
+ * @returns Full built range category view, ready for display.
+ */
+export function buildRangeCategoryView(
+  category: RangeCategory,
+  categoryConfigs: CategoryConfig[],
+  categorySelectedFilter?: SelectedFilter
+): RangeCategoryView {
+  const categoryConfig = findRangeCategoryConfig(category.key, categoryConfigs);
+  const [selectedMin, selectedMax] = getRangeSelectedValue(
+    categorySelectedFilter
+  );
+  return {
+    annotation: categoryConfig?.annotation,
+    isDisabled: false,
+    key: category.key,
+    label: categoryConfig?.label || category.key,
+    max: category.max,
+    min: category.min,
+    selectedMax,
+    selectedMin,
+    unit: categoryConfig?.unit,
+  };
+}

package/src/common/categories/views/select/typeGuards.ts

@@ -0,0 +1,13 @@
+import { SelectCategoryView } from "../../../entities";
+import { CategoryView } from "../types";
+
+/**
+ * Returns true if the category view is a select category view.
+ * @param view - Category view.
+ * @returns true if the category view is a select category view.
+ */
+export function isSelectCategoryView(
+  view: CategoryView
+): view is SelectCategoryView {
+  return "values" in view;
+}

package/src/common/categories/views/select/types.ts

@@ -0,0 +1,8 @@
+import { VIEW_KIND } from "../types";
+
+/**
+ * Model of select category view kind.
+ */
+export interface SelectViewKind {
+  viewKind?: VIEW_KIND.SELECT;
+}

package/src/common/categories/views/types.ts

@@ -0,0 +1,15 @@
+import { SelectCategoryView } from "../../entities";
+import { RangeCategoryView } from "./range/types";
+
+/**
+ * Possible category view model types.
+ */
+export type CategoryView = RangeCategoryView | SelectCategoryView;
+
+/**
+ * Category view kind.
+ */
+export enum VIEW_KIND {
+  RANGE = "RANGE",
+  SELECT = "SELECT",
+}

package/src/common/entities.ts

@@ -1,4 +1,5 @@
 import { ColumnDef } from "@tanstack/react-table";
+import { GridTrackSize } from "../config/entities";
 
 /**
  * Model of a value of a metadata class.
@@ -21,7 +22,7 @@ export interface Attribute {
 /**
  * Model of attribute key types; used mostly when building data dictionary column definitions.
  */
-export type AttributeValueTypes = string | boolean;
+export type AttributeValueTypes<TValue = unknown> = TValue;
 
 /**
  * Filterable metadata keys.
@@ -76,13 +77,17 @@ export interface DataDictionary {
  * Display model of a data dictionary column.
  */
 export interface DataDictionaryColumnDef {
+  attributeAccessorFnName?: string; // Name of accessor function to map to.
+  attributeCellName?: string; // Name of cell renderer component to map to.
   attributeDisplayName: string;
   attributeSlotName: string;
   // Adding width here for now; possibly revisit separating column def and UI.
-  width: {
-    max: string;
-    min: string;
-  };
+  width:
+    | Omit<GridTrackSize, "GridTrackMinMax">
+    | {
+        max: string;
+        min: string;
+      };
 }
 
 /**

package/src/components/DataDictionary/components/Table/components/BasicCell/basicCell.tsx

@@ -1,12 +1,20 @@
 import { Typography } from "@mui/material";
-import React from "react";
+import { CellContext, RowData } from "@tanstack/react-table";
+import React, { ReactNode } from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
-import { BasicCellProps } from "./types";
+import { parseValue } from "./utils";
 
-export const BasicCell = ({ getValue }: BasicCellProps): JSX.Element => {
+export const BasicCell = <
+  T extends RowData,
+  TValue extends ReactNode = ReactNode
+>({
+  getValue,
+}: CellContext<T, TValue>): JSX.Element | null => {
+  const value = getValue();
+  if (value === undefined || value === null) return null;
   return (
     <Typography variant={TYPOGRAPHY_PROPS.VARIANT.INHERIT}>
-      {getValue()}
+      {parseValue(value)}
     </Typography>
   );
 };

package/src/components/DataDictionary/components/Table/components/BasicCell/utils.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+/**
+ * Returns a parsed value based on the original value.
+ * If the value is a boolean, it is converted to its string representation ("true" or "false").
+ * For all other types of ReactNode, the value is returned unchanged.
+ * @param value - The original value.
+ * @returns Parsed value or original value.
+ */
+export function parseValue(value: ReactNode): ReactNode {
+  if (typeof value === "boolean") return value.toString();
+  return value;
+}

package/src/components/DataDictionary/dataDictionary.styles.ts

@@ -11,12 +11,11 @@ export const grid = css`
 export const View = styled("div")`
   ${grid};
   flex: 1;
-  margin: 0 auto;
-  max-width: min(calc(100vw - 48px), 1392px);
+  margin: 0 24px;
   position: relative;
 
   ${mediaTabletDown} {
     grid-template-columns: 1fr;
-    max-width: calc(100vw - 32px);
+    margin: 0 16px;
   }
 `;

package/src/components/Filter/components/Filter/filter.tsx

@@ -1,15 +1,23 @@
 import { CloseRounded } from "@mui/icons-material";
 import { Grow, PopoverPosition, PopoverProps } from "@mui/material";
 import React, { MouseEvent, ReactNode, useState } from "react";
-import { SelectCategoryView } from "../../../../common/entities";
+import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
+import { CategoryView } from "../../../../common/categories/views/types";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { FilterLabel } from "../FilterLabel/filterLabel";
 import { FilterMenu } from "../FilterMenu/filterMenu";
+import { FilterRange } from "../FilterRange/filterRange";
 import { DrawerTransition } from "./components/DrawerTransition/drawerTransition";
 import { FilterPopover, IconButton } from "./filter.styles";
 
+/**
+ * Filter component.
+ * TODO(cc) refactor: build tags from categoryView for selected values.
+ * TODO(cc) tests: add tests for selected values (rending of tags) for select and range categories.
+ */
+
 const DEFAULT_POSITION: PopoverPosition = { left: 0, top: 0 };
 const DEFAULT_SLOT_PROPS: PopoverProps["slotProps"] = {
   paper: { variant: "menu" },
@@ -20,7 +28,7 @@ const DRAWER_SLOT_PROPS: PopoverProps["slotProps"] = {
 
 export interface FilterProps {
   categorySection?: string;
-  categoryView: SelectCategoryView;
+  categoryView: CategoryView;
   closeAncestor?: () => void;
   isFilterDrawer: boolean;
   onFilter: OnFilterFn;
@@ -44,6 +52,7 @@ export const Filter = ({
   const TransitionComponent = isFilterDrawer ? DrawerTransition : Grow;
   const transitionDuration = isOpen ? 250 : 300;
   const TransitionDuration = isFilterDrawer ? transitionDuration : undefined;
+  const isRangeView = isRangeCategoryView(categoryView);
 
   /**
    * Closes filter popover.
@@ -79,7 +88,7 @@ export const Filter = ({
     <>
       <FilterLabel
         annotation={categoryView.annotation}
-        count={categoryView.values.length}
+        count={isRangeView ? undefined : categoryView.values.length}
         disabled={categoryView.isDisabled}
         isOpen={isOpen}
         label={categoryView.label}
@@ -93,7 +102,7 @@ export const Filter = ({
         onClose={onCloseFilters}
         open={isOpen}
         slotProps={slotProps}
-        TransitionComponent={TransitionComponent}
+        slots={{ transition: TransitionComponent }}
         transitionDuration={TransitionDuration}
       >
         {isOpen && isFilterDrawer && (
@@ -103,15 +112,31 @@ export const Filter = ({
             size="medium"
           />
         )}
-        <FilterMenu
-          categorySection={categorySection}
-          categoryKey={categoryView.key}
-          categoryLabel={categoryView.label}
-          isFilterDrawer={isFilterDrawer}
-          onFilter={onFilter}
-          onCloseFilter={onCloseFilter}
-          values={categoryView.values}
-        />
+        {isRangeView ? (
+          <FilterRange
+            categoryKey={categoryView.key}
+            categoryLabel={categoryView.label}
+            categorySection={categorySection}
+            isFilterDrawer={isFilterDrawer}
+            max={categoryView.max}
+            min={categoryView.min}
+            selectedMax={categoryView.selectedMax}
+            selectedMin={categoryView.selectedMin}
+            onCloseFilter={onCloseFilter}
+            onFilter={onFilter}
+            unit={categoryView.unit}
+          />
+        ) : (
+          <FilterMenu
+            categoryKey={categoryView.key}
+            categoryLabel={categoryView.label}
+            categorySection={categorySection}
+            isFilterDrawer={isFilterDrawer}
+            onCloseFilter={onCloseFilter}
+            onFilter={onFilter}
+            values={categoryView.values}
+          />
+        )}
       </FilterPopover>
       {tags}
     </>

package/src/components/Filter/components/Filter/stories/args.ts

@@ -0,0 +1,24 @@
+import { fn } from "@storybook/test";
+import { ComponentProps } from "react";
+import { DONOR_COUNT, GENUS_SPECIES } from "../../Filters/stories/constants";
+import { Filter } from "../filter";
+
+export const SELECT_ARGS: ComponentProps<typeof Filter> = {
+  categoryView: GENUS_SPECIES,
+  isFilterDrawer: false,
+  onFilter: fn(),
+};
+
+export const DISABLED_SELECT_ARGS: ComponentProps<typeof Filter> = {
+  ...SELECT_ARGS,
+  categoryView: {
+    ...SELECT_ARGS.categoryView,
+    isDisabled: true,
+  },
+};
+
+export const RANGE_ARGS: ComponentProps<typeof Filter> = {
+  categoryView: DONOR_COUNT,
+  isFilterDrawer: false,
+  onFilter: fn(),
+};

package/src/components/Filter/components/Filter/stories/filter.stories.tsx

@@ -0,0 +1,32 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Filter } from "../filter";
+import { DISABLED_SELECT_ARGS, RANGE_ARGS, SELECT_ARGS } from "./args";
+
+const meta: Meta<typeof Filter> = {
+  component: Filter,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box sx={{ width: 248 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SelectCategory: Story = {
+  args: SELECT_ARGS,
+};
+
+export const DisabledSelectCategory: Story = {
+  args: DISABLED_SELECT_ARGS,
+};
+
+export const RangeCategory: Story = {
+  args: RANGE_ARGS,
+};