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

Postgrest scroll group fix dependency issue

Author: davidsklar99

packages/ui-components/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## [4.4.2] - 2025-07-18
+## [4.4.3] - 2025-07-18
 
 For PostgRESTInfiniteScrollView
 

packages/ui-components/package.json

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

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

@@ -3,9 +3,14 @@ import { InfiniteScrollProps, InfiniteScrollView } from "./infinite-scroll";
 import { useAPIResult } from "./api";
 import { useMemo, useState } from "react";
 import { MultiSelect, ItemRenderer, ItemPredicate } from "@blueprintjs/select";
-import { MenuItem, Spinner, InputGroup } from "@blueprintjs/core";
+import {
+  MenuItem,
+  Spinner,
+  InputGroup,
+  Collapse,
+  Icon,
+} from "@blueprintjs/core";
 import styles from "./postgrest.module.sass";
-import { ExpansionPanel } from "@macrostrat/map-interface";
 
 const h = hyper.styled(styles);
 
@@ -378,3 +383,23 @@ function GroupPanel(props) {
     ],
   );
 }
+
+function ExpansionPanel(props) {
+  const { title, children, className } = props;
+  const [isOpen, setOpen] = useState(false);
+
+  return h(
+    "div.expansion-panel",
+    { className: `expansion-panel ${className || ""}` },
+    [
+      h("div.panel-header", { onClick: () => setOpen(!isOpen) }, [
+        h("h2.title", title),
+        h(Icon, {
+          icon: isOpen ? "chevron-up" : "chevron-down",
+          className: "expansion-panel-icon",
+        }),
+      ]),
+      h(Collapse, { isOpen }, h("div.child-container", children)),
+    ],
+  );
+}

packages/ui-components/src/postgrest.module.sass

@@ -9,4 +9,22 @@
         flex: 1 1 auto
 
     .toggles
-        flex: 0 0 auto
+        flex: 0 0 auto
+
+.panel-header
+    background-color: var(--secondary-background)
+    width: 100%
+    padding: .2em
+    display: flex
+    justify-content: space-between
+    align-items: center
+    cursor: pointer
+
+    &:hover
+        background-color: var(--tertiary-color)
+
+    .title
+        margin: 0
+
+.child-container
+    padding-left: .2em

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

@@ -53,18 +53,16 @@ Grouping.args = {
   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" },
+    { value: "groups", label: "Column groups" },
+    { value: "econs", 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

@@ -2484,7 +2484,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@macrostrat/map-interface@npm:1.5.1, @macrostrat/map-interface@workspace:*, @macrostrat/map-interface@workspace:^, @macrostrat/map-interface@workspace:packages/map-interface":
+"@macrostrat/map-interface@workspace:*, @macrostrat/map-interface@workspace:^, @macrostrat/map-interface@workspace:packages/map-interface":
   version: 0.0.0-use.local
   resolution: "@macrostrat/map-interface@workspace:packages/map-interface"
   dependencies:
@@ -2641,7 +2641,6 @@ __metadata:
     "@blueprintjs/datetime2": "npm:^2.3.11"
     "@blueprintjs/select": "npm:^5.3.10"
     "@macrostrat/hyper": "npm:^3.0.6"
-    "@macrostrat/map-interface": "npm:1.5.1"
     "@types/react": "npm:^18.3.12"
     "@types/react-dom": "npm:^18"
     axios: "npm:^1.7.9"