Merge pull request #145 from UW-Macrostrat/postgrest-scroll-group

Postgrest scroll grouping

Author: davidsklar99

packages/ui-components/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Changelog
 
-## [4.4.0] -
+## [4.4.1] - 2025-07-18
+
+For PostgRESTInfiniteScrollView
+
+- Multiselect disapears if only one searchColumn is inputted
+- Handles grouping
+
+## [4.4.0] - 2025-07-10
 
 For PostgRESTInfiniteScrollView
 

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/ui-components",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "UI components for React and Blueprint.js",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -46,6 +46,7 @@
     "@blueprintjs/datetime2": "^2.3.11",
     "@blueprintjs/select": "^5.3.10",
     "@macrostrat/hyper": "^3.0.6",
+    "@macrostrat/map-interface": "workspace:^",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18",
     "axios": "^1.7.9",

packages/ui-components/src/postgrest-infinite-scroll.ts

@@ -5,6 +5,7 @@ import { useMemo, useState } from "react";
 import { MultiSelect, ItemRenderer, ItemPredicate } from "@blueprintjs/select";
 import { MenuItem, Spinner, InputGroup } from "@blueprintjs/core";
 import styles from "./postgrest.module.sass";
+import { ExpansionPanel } from "@macrostrat/map-interface";
 
 const h = hyper.styled(styles);
 
@@ -32,6 +33,8 @@ interface PostgRESTInfiniteScrollProps extends InfiniteScrollProps<any> {
     tagInputProps: any;
     popoverProps: any;
   }>;
+  group_key?: string;
+  groups?: Array<{ value: string; label: string }>;
 }
 
 export function PostgRESTInfiniteScrollView(
@@ -54,6 +57,7 @@ export function PostgRESTInfiniteScrollView(
     key,
     toggles = null,
     searchColumns = undefined,
+    group_key = undefined,
     ...rest
   } = props;
 
@@ -236,35 +240,50 @@ export function PostgRESTInfiniteScrollView(
         h(SearchBarToUse, {
           onChange: (value) => setFilterValue(value || ""),
         }),
-        h(MultiSelectToUse, {
-          items: keys.filter((item) => !selectedItems.includes(item.value)),
-          itemRenderer,
-          itemPredicate: filterItem,
-          selectedItems,
-          onItemSelect: handleSelect,
-          tagRenderer: (value) => {
-            const found = keys.find((k) => k.value === value);
-            return found ? found.label : value;
-          },
-          onRemove: handleRemove,
-          tagInputProps: {
+        h.if(searchColumns == null || searchColumns.length > 1)(
+          MultiSelectToUse,
+          {
+            items: keys.filter((item) => !selectedItems.includes(item.value)),
+            itemRenderer,
+            itemPredicate: filterItem,
+            selectedItems,
+            onItemSelect: handleSelect,
+            tagRenderer: (value) => {
+              const found = keys.find((k) => k.value === value);
+              return found ? found.label : value;
+            },
             onRemove: handleRemove,
-            placeholder: "Select a column(s) to filter by...",
+            tagInputProps: {
+              onRemove: handleRemove,
+              placeholder: "Select a column(s) to filter by...",
+            },
+            popoverProps: { minimal: true },
           },
-          popoverProps: { minimal: true },
-        }),
+        ),
       ]),
       h.if(toggles)("div.toggles", toggles),
     ]),
-    h(InfiniteScrollView, {
-      ...rest,
-      route,
-      getNextParams: getNextParams ?? defaultGetNextParams,
-      params: params ?? defaultParams,
-      initialItems: newInitialItems,
-      hasMore: hasMore ?? defaultHasMore,
-      key: newKey,
-    }),
+    group_key
+      ? Grouping({
+          group_key,
+          groups: props.groups ?? [],
+          route,
+          id_key,
+          params: defaultParams,
+          getNextParams: getNextParams ?? defaultGetNextParams,
+          hasMore: hasMore ?? defaultHasMore,
+          key: newKey,
+          rest,
+        })
+      : h(InfiniteScrollView, {
+          ...rest,
+          route,
+          getNextParams: getNextParams ?? defaultGetNextParams,
+          params: params ?? defaultParams,
+          initialItems: newInitialItems,
+          hasMore: hasMore ?? defaultHasMore,
+          key: newKey,
+        }),
   ]);
 }
 
@@ -282,3 +301,80 @@ function SearchBar({ onChange, placeholder = "Search..." }) {
     leftIcon: "search",
   });
 }
+
+interface GroupingProps {
+  group_key: string;
+  groups: Array<{ value: string; label: string }>;
+  route: string;
+  id_key: string;
+  params?: Record<string, any>;
+  getNextParams?: (
+    response: any[],
+    params: Record<string, any>,
+  ) => Record<string, any>;
+  hasMore?: (response: any[]) => boolean;
+  key?: string;
+  rest?: any;
+}
+
+function Grouping(props: GroupingProps) {
+  const {
+    group_key,
+    groups,
+    route,
+    id_key,
+    params,
+    getNextParams,
+    hasMore,
+    rest,
+  } = props;
+
+  return h("div.group-page", [
+    groups.map((group) => {
+      if (!group.value || !group.label) {
+        throw new Error("Each group must have a value and label");
+      }
+
+      return h(GroupPanel, {
+        group,
+        route,
+        id_key,
+        params: {
+          ...params,
+          [group_key]: "eq." + group.value,
+        },
+        getNextParams,
+        hasMore,
+        ...rest,
+      });
+    }),
+  ]);
+}
+
+function GroupPanel(props) {
+  const { group, route, params, getNextParams, hasMore, key, ...rest } = props;
+
+  const data = useAPIResult(route, {
+    ...params,
+    limit: 1,
+  });
+
+  if (!data || data?.length === 0) return null;
+
+  return h(
+    ExpansionPanel,
+    {
+      title: group.label,
+    },
+    [
+      h(InfiniteScrollView, {
+        key: key || group.value,
+        route,
+        params,
+        getNextParams,
+        hasMore,
+        ...rest,
+      }),
+    ],
+  );
+}

packages/ui-components/stories/postgrest-infinite-scroll.stories.ts

@@ -28,15 +28,43 @@ Primary.args = {
   searchColumns: [{ value: "name", label: "Name" }],
 };
 
-export const CustomMultiselect = Template.bind({});
+export const Multiselect = Template.bind({});
 
-CustomMultiselect.args = {
+Multiselect.args = {
   limit: 5,
   id_key: "source_id",
   filterable: true,
   ascending: true,
   route: "https://dev.macrostrat.org/api/pg/sources_metadata",
   delay: 100,
   toggles: h("h1", "Toggles here"),
+  searchColumns: [
+    { value: "name", label: "Name" },
+    { value: "authors", label: "Author" },
+  ],
+};
+
+export const Grouping = Template.bind({});
+
+Grouping.args = {
+  limit: 20,
+  id_key: "id",
+  filterable: true,
+  ascending: true,
+  route: "https://dev2.macrostrat.org/api/pg/autocomplete",
+  delay: 100,
+  toggles: h("h1", "Toggles here"),
   searchColumns: [{ value: "name", label: "Name" }],
+  group_key: "type",
+  groups: [
+    { value: "minerals", label: "Minerals" },
+    { value: "group", label: "Column groups" },
+    { value: "econ", label: "Economics" },
+  ],
+  itemComponent: (item) => {
+    return h("div.item", { key: item.data.id }, [
+      h("div.name", item.data.name),
+      h("div.type", item.data.type),
+    ]);
+  },
 };

yarn.lock

@@ -2641,6 +2641,7 @@ __metadata:
     "@blueprintjs/datetime2": "npm:^2.3.11"
     "@blueprintjs/select": "npm:^5.3.10"
     "@macrostrat/hyper": "npm:^3.0.6"
+    "@macrostrat/map-interface": "workspace:^"
     "@types/react": "npm:^18.3.12"
     "@types/react-dom": "npm:^18"
     axios: "npm:^1.7.9"