test map works

Author: davidsklar99

pages/dev/test/+Page.client.ts

@@ -0,0 +1,37 @@
+import {
+  ColoredUnitComponent,
+  MacrostratDataProvider,
+  Column,
+} from "@macrostrat/column-views";
+import { hyperStyled } from "@macrostrat/hyper";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { apiV2Prefix } from "@macrostrat-web/settings";
+import { PatternProvider } from "~/_providers";
+import { navigate } from "vike/client/router";
+import { PageBreadcrumbs } from "~/components";
+import { onDemand } from "~/_utils";
+import styles from "./index.module.sass";
+const h = hyperStyled(styles);
+
+
+const ColumnMap = onDemand(() => import("./map").then((mod) => mod.ColumnMap));
+
+function dsf(props) {
+  return h(
+    MacrostratDataProvider,
+    { baseURL: apiV2Prefix },
+    h(PatternProvider, h(ColumnPageInner, props))
+  );
+}
+
+export function Page() {
+  return h("div.page-container", [
+          h(ColumnMap, {
+            className: "column-map",
+            inProcess: true,
+            projectID: null,
+            selectedColumn: 1,
+            onSelectColumn: () => {},
+          }),
+        ])
+}

pages/dev/test/index.module.sass

@@ -0,0 +1,108 @@
+.page-container
+  overflow-y: scroll
+  height: 100vh
+  position: relative
+
+.main
+  --column-background-color: var(--background-color)
+  --column-stroke-color: var(--text-color)
+
+  display: flex
+  flex-direction: row
+
+  max-width: 80rem
+  margin: 0 auto
+
+
+.left-column
+  flex-grow: 1
+
+.right-column
+  min-width: 200px
+  width: 40%
+  max-width: 500px
+  height: 100vh
+  position: sticky
+  top: 0
+  display: flex
+  flex-direction: column
+  padding: 2em 0
+
+.right-column-boxes
+  display: flex
+  flex-direction: column
+  gap: 2em
+
+
+.column-view
+  margin: 0 4em 4em
+  padding: 0
+
+.column-header
+  margin: 1em 4em
+
+  h1
+    font-size: 1.5em
+
+    .subtitle
+      font-weight: normal
+
+  nav
+    position: sticky
+    top: 2em
+
+.column-nav
+  position: sticky
+  top: 2.2em
+
+  h3
+    color: #444
+    margin-bottom: 0.3em
+
+.default-buttons
+  width: 100%
+  margin: 0 -10px
+
+.column-map
+  width: 100%
+  aspect-ratio: 3/2
+  cursor: pointer
+  z-index: 100
+
+  &.expanded
+    cursor: inherit
+
+    .columns path:hover
+      stroke: rgba(255, 0, 0, .4) !important
+
+
+  .close-button
+    position: absolute
+    top: 1em
+    right: 1em
+
+  .land
+    background-color: rgb(233, 252, 234)
+
+div.section
+  display: flex
+  flex-direction: row
+
+  div.timescale
+    width: 7em
+    --timescale-level-size: 1.5em
+
+
+.section .divisions .unit
+  cursor: pointer
+
+rect.selection-overlay
+  fill: rgba(255, 0, 0, .5)
+
+.unit-details-panel
+  flex: 1
+  min-height: 0
+
+.column-map, .unit-details-panel
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3)
+  border-radius: 6px

pages/dev/test/map.ts

@@ -0,0 +1,24 @@
+import h from "@macrostrat/hyper";
+import { ColumnNavigationMap } from "@macrostrat/column-views";
+import { mapboxAccessToken } from "@macrostrat-web/settings";
+import { ErrorBoundary } from "@macrostrat/ui-components";
+
+export function ColumnMap({
+  projectID,
+  inProcess,
+  className,
+  selectedColumn,
+  onSelectColumn,
+}) {
+  return h(
+    ErrorBoundary,
+    h(ColumnNavigationMap, {
+      className,
+      inProcess,
+      projectID,
+      accessToken: mapboxAccessToken,
+      selectedColumn,
+      onSelectColumn,
+    })
+  );
+}