use map component

Author: davidsklar99

pages/columns/+Page.client.ts

@@ -4,7 +4,8 @@ import { Divider, AnchorButton, Tag, Card, Collapse, Icon } from "@blueprintjs/c
 import { useData } from "vike-react/useData";
 import { useState } from "react";
 import "./main.scss";
-import h from "@macrostrat/hyper";
+import { hyperStyled } from "@macrostrat/hyper";
+import styles from "./index.module.sass";
 import {
   MapAreaContainer,
   MapMarker,
@@ -14,7 +15,13 @@ import {
 import { SETTINGS } from "@macrostrat-web/settings";
 import mapboxgl, { LngLat } from "mapbox-gl";
 import { MapPosition } from "@macrostrat/mapbox-utils";
-import { useEffect } from "react";
+import { useEffect, useCallback } from "react";
+import { onDemand } from "~/_utils";
+import { navigate } from "vike/client/router";
+
+const h = hyperStyled(styles);
+
+const ColumnMap = onDemand(() => import("./map").then((mod) => mod.ColumnMap));
 
 export function Page(props) {
   return h(ColumnListPage, props);
@@ -24,6 +31,7 @@ function ColumnListPage({ title = "Columns", linkPrefix = "/" }) {
   const { columnGroups } = useData();
   const [columnInput, setColumnInput] = useState("");
   const [mapInstance, setMapInstance] = useState<mapboxgl.Map | null>(null);
+  const [selectedUnitID, setSelectedUnitID] = useState<number>(null);
 
   const filteredGroups = columnGroups.filter((group) => {
     const name = group.name.toLowerCase();
@@ -32,6 +40,8 @@ function ColumnListPage({ title = "Columns", linkPrefix = "/" }) {
     return name.includes(input) || columns.some((col) => col.includes(input));
   });
 
+  /*
+
   const mapPosition: MapPosition = {
     camera: {
       lat: 39,
@@ -127,18 +137,40 @@ function ColumnListPage({ title = "Columns", linkPrefix = "/" }) {
     const source = mapInstance.getSource("geojson-data") as mapboxgl.GeoJSONSource;
     if (source) source.setData(geojson);
   }, [filteredGroups, mapInstance]);
+    */
+
 
   const handleInputChange = (event) => {
     setColumnInput(event.target.value.toLowerCase());
   };
 
+  const onSelectColumn = useCallback(
+    (col_id: number) => {
+      // do nothing
+      // We could probably find a more elegant way to do this
+      setSelectedUnitID(null);
+      navigate(linkPrefix + `columns/${col_id}`, {
+        overwriteLastHistoryEntry: true,
+      });
+    },
+    [setSelectedUnitID]
+  );
+
   return h("div.column-list-page", [
     h(AssistantLinks, [
       h(AnchorButton, { href: "/projects", minimal: true }, "Projects"),
       h(DevLinkButton, { href: "/columns/correlation" }, "Correlation chart"),
     ]),
     h(ContentPage, [
       h(PageHeader, { title }),
+      h(ColumnMap, {
+        className: "column-map",
+        inProcess: true,
+        projectID: null,
+        selectedColumn: null,
+        onSelectColumn,
+      }),
+      /*
       h("div.map-section", [
         h("h2", "Map of Columns"),
         h("div.map-container",
@@ -152,6 +184,7 @@ function ColumnListPage({ title = "Columns", linkPrefix = "/" }) {
           )
         ),
       ]),
+      */
       h(Card, { className: "search-bar" }, [
         h(Icon, { icon: "search" }),
         h("input", {

pages/columns/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