Merge pull request #133 from UW-Macrostrat/postgrest-scroll

Postgrest scroll 4.4.0

Author: davidsklar99

packages/ui-components/CHANGELOG.md

@@ -1,9 +1,11 @@
 # Changelog
 
-## [unreleased] -
+## [4.4.0] -
 
 For PostgRESTInfiniteScrollView
 
+- Custom multiselect labels
+
 ## [4.3.8] - 2025-07-09
 
 For PostgRESTInfiniteScrollView

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/ui-components",
-  "version": "4.3.8",
+  "version": "4.4.0",
   "description": "UI components for React and Blueprint.js",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -5,19 +5,16 @@ 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 "@blueprintjs/core/lib/css/blueprint.css";
-import "@blueprintjs/select/lib/css/blueprint-select.css";
 
 const h = hyper.styled(styles);
-const b = hyper;
 
 interface PostgRESTInfiniteScrollProps extends InfiniteScrollProps<any> {
   id_key: string;
   limit: number;
   extraParams?: Record<string, any>;
   ascending?: boolean;
   filterable?: boolean;
-  searchColumns?: string[];
+  searchColumns?: Array<{ value: string; label: string }>;
   order_key?: string;
   key?: string;
   toggles?: any;
@@ -65,8 +62,9 @@ export function PostgRESTInfiniteScrollView(
   }
 
   const [selectedItems, setSelectedItems] = useState<string[]>(
-    searchColumns || [],
+    (searchColumns ?? []).map((col) => col.value),
   );
+
   const [filterValue, setFilterValue] = useState<string>("");
 
   const SearchBarToUse = SearchBarComponent ?? SearchBar;
@@ -137,16 +135,25 @@ export function PostgRESTInfiniteScrollView(
   }
 
   const keys =
-    searchColumns ||
-    Object.keys(res[0] || {}).filter((key) => typeof res[0][key] === "string");
+    searchColumns ??
+    (res?.[0]
+      ? Object.keys(res[0])
+          .filter((key) => typeof res[0][key] === "string")
+          .map((key) => ({
+            label: key.replace(/_/g, " "),
+            value: key,
+          }))
+      : []);
 
   // Filtering function
-  const filterItem: ItemPredicate<string> = (query, item) =>
-    item.toLowerCase().includes(query.toLowerCase());
+  const filterItem: ItemPredicate<{ label: string; value: string }> = (
+    query,
+    item,
+  ) => item.label.toLowerCase().includes(query.toLowerCase());
 
-  const handleSelect = (item: string) => {
-    if (!selectedItems.includes(item)) {
-      setSelectedItems([...selectedItems, item]);
+  const handleSelect = (item: { label: string; value: string }) => {
+    if (!selectedItems.includes(item.value)) {
+      setSelectedItems([...selectedItems, item.value]);
     }
   };
 
@@ -198,14 +205,14 @@ export function PostgRESTInfiniteScrollView(
   };
 
   // Function to render each item in dropdown
-  const itemRenderer: ItemRenderer<string> = (
+  const itemRenderer: ItemRenderer<{ label: string; value: string }> = (
     item,
     { handleClick, modifiers },
   ) => {
     if (!modifiers.matchesPredicate) return null;
     return h(MenuItem, {
-      key: item,
-      text: item,
+      key: item.value,
+      text: item.label,
       active: modifiers.active,
       onClick: handleClick,
       shouldDismissPopover: false,
@@ -226,16 +233,19 @@ export function PostgRESTInfiniteScrollView(
   return h("div.postgrest-infinite-scroll", [
     h("div.header", [
       h.if(filterable)("div.search-bar", [
-        b(SearchBarToUse, {
+        h(SearchBarToUse, {
           onChange: (value) => setFilterValue(value || ""),
         }),
-        b(MultiSelectToUse, {
-          items: keys.filter((item) => !selectedItems.includes(item)),
+        h(MultiSelectToUse, {
+          items: keys.filter((item) => !selectedItems.includes(item.value)),
           itemRenderer,
           itemPredicate: filterItem,
           selectedItems,
           onItemSelect: handleSelect,
-          tagRenderer: (item) => item,
+          tagRenderer: (value) => {
+            const found = keys.find((k) => k.value === value);
+            return found ? found.label : value;
+          },
           onRemove: handleRemove,
           tagInputProps: {
             onRemove: handleRemove,

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

@@ -1,6 +1,7 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react-vite";
 import h from "@macrostrat/hyper";
 import { PostgRESTInfiniteScrollView } from "../src/postgrest-infinite-scroll";
+import { MultiSelect } from "@blueprintjs/select";
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -15,7 +16,6 @@ const Template: ComponentStory<typeof PostgRESTInfiniteScrollView> = (args) =>
   h(PostgRESTInfiniteScrollView, args);
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 
 Primary.args = {
   limit: 5,
@@ -25,5 +25,18 @@ Primary.args = {
   route: "https://dev.macrostrat.org/api/pg/sources_metadata",
   delay: 100,
   toggles: h("h1", "Toggles here"),
-  searchColumns: ["name"],
+  searchColumns: [{ value: "name", label: "Name" }],
+};
+
+export const CustomMultiselect = Template.bind({});
+
+CustomMultiselect.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" }],
 };