Added basic unit_boundaries view

Author: davenquinn

pages/dev/column-editor/section/@section_id/unit-boundaries/+Page.ts

@@ -0,0 +1,105 @@
+import { FullscreenPage } from "~/layouts";
+import hyper from "@macrostrat/hyper";
+import styles from "./main.module.sass";
+import { DataSheetDensity, PostgRESTTableView } from "@macrostrat/data-sheet";
+import { postgrestPrefix } from "@macrostrat-web/settings";
+import { PageBreadcrumbs } from "~/components";
+import {
+  LongTextViewer,
+  lithologyRenderer,
+  ExpandedLithologies,
+} from "~/components/data-table";
+import { IntervalCell } from "@macrostrat/data-sheet";
+import { usePageContext } from "vike-react/usePageContext";
+import {
+  MacrostratDataProvider,
+  useMacrostratData,
+  useMacrostratStore,
+} from "@macrostrat/column-views";
+import { apiV2Prefix } from "@macrostrat-web/settings";
+import { useCallback, useMemo } from "react";
+import { Cell } from "@blueprintjs/table";
+import { Spinner } from "@blueprintjs/core";
+
+const h = hyper.styled(styles);
+
+export function Page() {
+  const { routeParams } = usePageContext();
+  const { section_id } = routeParams as { section_id: string };
+
+  return h(FullscreenPage, { className: "main" }, [
+    h(PageBreadcrumbs),
+    h("h1", "Unit boundaries"),
+    h(
+      MacrostratDataProvider,
+      { baseURL: apiV2Prefix },
+      h(SectionPostgRESTTable, { section_id })
+    ),
+  ]);
+}
+
+function SectionPostgRESTTable(props) {
+  const { section_id } = props;
+  const filter = useCallback(
+    (query) => query.eq("section_id", section_id),
+    [section_id]
+  );
+
+  // Force the loading of intervals data
+  // This is a hack due to poor design of the data loading system
+  useMacrostratData("intervals");
+
+  return h(PostgRESTTableView, {
+    endpoint: postgrestPrefix,
+    table: "unit_boundaries",
+    order: { key: "t1_age", ascending: true },
+    columnOptions,
+    filter,
+    density: DataSheetDensity.MEDIUM,
+    editable: true,
+  });
+}
+
+function IntervalIDCell(props) {
+  const { value } = props;
+
+  const intervalsMap = useMacrostratStore((d) => d.intervals);
+  const val = useMemo(
+    () => intervalsMap.get(parseInt(value)),
+    [intervalsMap, value]
+  );
+
+  if (val == null) return h(Cell, props);
+
+  return h(IntervalCell, { ...props, value: val });
+}
+
+const columnOptions = {
+  overrides: {
+    id: {
+      editable: false,
+    },
+    name: "Unit name",
+    comments: "Comments",
+    legend_id: "Legend ID",
+    strat_name: "Stratigraphic names",
+    t1: {
+      name: "Interval",
+      cellComponent: IntervalIDCell,
+    },
+    t1_prop: {
+      name: "Proportion",
+      width: 80,
+    },
+    unit_id: {
+      name: "Lower unit",
+    },
+    unit_id_2: {
+      name: "Upper unit",
+    },
+    descrip: {
+      name: "Description",
+      dataEditor: LongTextViewer,
+    },
+  },
+};

pages/dev/column-editor/section/@section_id/unit-boundaries/+config.ts

@@ -0,0 +1,10 @@
+export default {
+  meta: {
+    Page: {
+      env: {
+        client: true,
+        server: false,
+      },
+    },
+  },
+};

pages/dev/column-editor/section/@section_id/unit-boundaries/main.module.sass

@@ -0,0 +1,61 @@
+.main
+  padding: 2em 8em
+  display: flex
+  flex-direction: column
+  position: fixed
+  width: 100vw
+  height: 100vh
+  top: 0
+  left: 0
+
+.data-sheet-container
+  display: flex
+  flex-direction: column
+  flex: 1
+  position: relative
+  min-height: 0
+
+.lithology
+  font-weight: bold
+  display: inline-block
+  padding: 0 0.5em
+  border-radius: 0.5em
+
+.inline-lithology .lithology
+  line-height: 1.2em
+
+.basis-panel
+  :global(.bp5-tag)
+    margin: 0 0.5em 0.5em 0
+  td
+    vertical-align: top
+  th
+    text-align: left
+    font-weight: 400
+    font-size: 0.9em
+    font-style: italic
+    color: var(--secondary-color)
+
+.basis-panel, .long-text
+  max-width: 20em
+  padding: 8px
+  max-height: 30em
+  overflow-y: scroll
+  pointer-events: all
+
+.description
+  font-style: italic
+
+
+.tag-header
+  font-weight: bold
+  text-transform: small-caps
+  font-size: 0.8em
+  color: var(--secondary-color)
+
+.basis-col
+  max-width: 15em
+
+.liths :global(.bp5-tag)
+  padding: 0px 4px
+  min-height: 16px