From 070da4f4bbc491d183ac06293e5cdf7ec4f9e0eb Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Wed, 13 Nov 2024 13:33:48 -0600 Subject: [PATCH 01/14] Centralize map development pages --- deps/web-components | 2 +- pages/dev/+Page.mdx | 4 ++++ pages/{map/dev => dev/map-layers}/+Page.ts | 2 +- pages/{map/dev => dev/map-layers}/+config.ts | 2 +- .../dev => dev/map-layers}/color-schemes.ts | 0 .../column-inspector.module.styl | 0 .../map-layers}/column-inspector/index.ts | 0 .../map-layers}/column-inspector/modal-panel.ts | 0 .../dev => dev/map-layers}/main.module.styl | 0 .../map-layers}/map-layers/catalog.ts | 2 +- .../dev => dev/map-layers}/map-layers/index.ts | 2 +- .../map-layers}/map-layers/raster-map.ts | 2 +- .../dev => dev/map-layers}/map-layers/utils.ts | 0 .../map-layers}/strabospot-integration/index.ts | 0 .../strabospot-integration/main.module.styl | 0 .../{map/dev => dev/map-layers}/weaver/index.ts | 0 pages/dev/sources/+Page.client.ts | 2 +- yarn.lock | 17 +++++++++++++++-- 18 files changed, 26 insertions(+), 9 deletions(-) rename pages/{map/dev => dev/map-layers}/+Page.ts (98%) rename pages/{map/dev => dev/map-layers}/+config.ts (80%) rename pages/{map/dev => dev/map-layers}/color-schemes.ts (100%) rename pages/{map/dev => dev/map-layers}/column-inspector/column-inspector.module.styl (100%) rename pages/{map/dev => dev/map-layers}/column-inspector/index.ts (100%) rename pages/{map/dev => dev/map-layers}/column-inspector/modal-panel.ts (100%) rename pages/{map/dev => dev/map-layers}/main.module.styl (100%) rename pages/{map/dev => dev/map-layers}/map-layers/catalog.ts (97%) rename pages/{map/dev => dev/map-layers}/map-layers/index.ts (99%) rename pages/{map/dev => dev/map-layers}/map-layers/raster-map.ts (97%) rename pages/{map/dev => dev/map-layers}/map-layers/utils.ts (100%) rename pages/{map/dev => dev/map-layers}/strabospot-integration/index.ts (100%) rename pages/{map/dev => dev/map-layers}/strabospot-integration/main.module.styl (100%) rename pages/{map/dev => dev/map-layers}/weaver/index.ts (100%) diff --git a/deps/web-components b/deps/web-components index 6acf3a2d..00fa0eb9 160000 --- a/deps/web-components +++ b/deps/web-components @@ -1 +1 @@ -Subproject commit 6acf3a2d9bfd7de21ed8478f2ad3b6286c70d055 +Subproject commit 00fa0eb9c40aa65ab3b0a351fcd3cf13d40cded2 diff --git a/pages/dev/+Page.mdx b/pages/dev/+Page.mdx index 877a5ec9..4a40f9d0 100644 --- a/pages/dev/+Page.mdx +++ b/pages/dev/+Page.mdx @@ -23,3 +23,7 @@ import { PageHeader, PageBreadcrumbs } from "~/components"; - [Built with Macrostrat](/dev/apps) - [Test Site](/dev/test-site/main-page) - [Documentation](/dev/docs) + +## Map layers + +- [Map layers development pages](/dev/map-layers) diff --git a/pages/map/dev/+Page.ts b/pages/dev/map-layers/+Page.ts similarity index 98% rename from pages/map/dev/+Page.ts rename to pages/dev/map-layers/+Page.ts index bea3742e..6931fb5e 100644 --- a/pages/map/dev/+Page.ts +++ b/pages/dev/map-layers/+Page.ts @@ -20,7 +20,7 @@ const h = hyper.styled(styles); export function Page() { // A route for each layer return h("div.dev-index-page", [ - h(Router, { basename: "/map/dev" }, [ + h(Router, { basename: "/dev/map-layers" }, [ h(Routes, [ h(Route, { path: "weaver", element: h(WeaverPage) }), h(Route, { diff --git a/pages/map/dev/+config.ts b/pages/dev/map-layers/+config.ts similarity index 80% rename from pages/map/dev/+config.ts rename to pages/dev/map-layers/+config.ts index da87986e..a61a9cb7 100644 --- a/pages/map/dev/+config.ts +++ b/pages/dev/map-layers/+config.ts @@ -1,5 +1,5 @@ export default { - route: "/map/dev*", + route: "/dev/map-layers*", meta: { Page: { env: { diff --git a/pages/map/dev/color-schemes.ts b/pages/dev/map-layers/color-schemes.ts similarity index 100% rename from pages/map/dev/color-schemes.ts rename to pages/dev/map-layers/color-schemes.ts diff --git a/pages/map/dev/column-inspector/column-inspector.module.styl b/pages/dev/map-layers/column-inspector/column-inspector.module.styl similarity index 100% rename from pages/map/dev/column-inspector/column-inspector.module.styl rename to pages/dev/map-layers/column-inspector/column-inspector.module.styl diff --git a/pages/map/dev/column-inspector/index.ts b/pages/dev/map-layers/column-inspector/index.ts similarity index 100% rename from pages/map/dev/column-inspector/index.ts rename to pages/dev/map-layers/column-inspector/index.ts diff --git a/pages/map/dev/column-inspector/modal-panel.ts b/pages/dev/map-layers/column-inspector/modal-panel.ts similarity index 100% rename from pages/map/dev/column-inspector/modal-panel.ts rename to pages/dev/map-layers/column-inspector/modal-panel.ts diff --git a/pages/map/dev/main.module.styl b/pages/dev/map-layers/main.module.styl similarity index 100% rename from pages/map/dev/main.module.styl rename to pages/dev/map-layers/main.module.styl diff --git a/pages/map/dev/map-layers/catalog.ts b/pages/dev/map-layers/map-layers/catalog.ts similarity index 97% rename from pages/map/dev/map-layers/catalog.ts rename to pages/dev/map-layers/map-layers/catalog.ts index f53f3152..4d63bd49 100644 --- a/pages/map/dev/map-layers/catalog.ts +++ b/pages/dev/map-layers/map-layers/catalog.ts @@ -6,7 +6,7 @@ import { burwellTileDomain } from "@macrostrat-web/settings"; import { ErrorBoundary, useAPIResult } from "@macrostrat/ui-components"; import { Link, Route, Routes, useParams } from "react-router-dom"; import { ParentRouteButton } from "~/components/map-navbar"; -import { BasicLayerInspectorPage } from "."; +import { BasicLayerInspectorPage } from "./index"; import styles from "../main.module.styl"; const h = hyper.styled(styles); diff --git a/pages/map/dev/map-layers/index.ts b/pages/dev/map-layers/map-layers/index.ts similarity index 99% rename from pages/map/dev/map-layers/index.ts rename to pages/dev/map-layers/map-layers/index.ts index e326a7c8..bba6d630 100644 --- a/pages/map/dev/map-layers/index.ts +++ b/pages/dev/map-layers/map-layers/index.ts @@ -25,7 +25,7 @@ import { useDarkMode, useStoredState } from "@macrostrat/ui-components"; import mapboxgl from "mapbox-gl"; import { useCallback, useMemo, useState } from "react"; import { ParentRouteButton } from "~/components/map-navbar"; -import { getBaseMapStyle } from "@macrostrat-web/map-utils"; +import { getBaseMapStyle } from "../../../../packages/map-utils"; import styles from "../main.module.styl"; import { useMapStyle } from "./utils"; import { Spacer } from "@macrostrat/ui-components"; diff --git a/pages/map/dev/map-layers/raster-map.ts b/pages/dev/map-layers/map-layers/raster-map.ts similarity index 97% rename from pages/map/dev/map-layers/raster-map.ts rename to pages/dev/map-layers/map-layers/raster-map.ts index f2496b6b..116b21aa 100644 --- a/pages/map/dev/map-layers/raster-map.ts +++ b/pages/dev/map-layers/map-layers/raster-map.ts @@ -14,7 +14,7 @@ import { useDarkMode } from "@macrostrat/ui-components"; import { useEffect, useMemo, useState } from "react"; import { useSelector } from "react-redux"; import { useAppActions, useAppState } from "#/map/map-interface/app-state"; -import { MacrostratRasterTileset, buildRasterStyle, h } from "."; +import { MacrostratRasterTileset, buildRasterStyle, h } from "./index"; import { useMapStyle } from "./utils"; export function RasterOpacityManager({ layerID, opacity }) { diff --git a/pages/map/dev/map-layers/utils.ts b/pages/dev/map-layers/map-layers/utils.ts similarity index 100% rename from pages/map/dev/map-layers/utils.ts rename to pages/dev/map-layers/map-layers/utils.ts diff --git a/pages/map/dev/strabospot-integration/index.ts b/pages/dev/map-layers/strabospot-integration/index.ts similarity index 100% rename from pages/map/dev/strabospot-integration/index.ts rename to pages/dev/map-layers/strabospot-integration/index.ts diff --git a/pages/map/dev/strabospot-integration/main.module.styl b/pages/dev/map-layers/strabospot-integration/main.module.styl similarity index 100% rename from pages/map/dev/strabospot-integration/main.module.styl rename to pages/dev/map-layers/strabospot-integration/main.module.styl diff --git a/pages/map/dev/weaver/index.ts b/pages/dev/map-layers/weaver/index.ts similarity index 100% rename from pages/map/dev/weaver/index.ts rename to pages/dev/map-layers/weaver/index.ts diff --git a/pages/dev/sources/+Page.client.ts b/pages/dev/sources/+Page.client.ts index 7f477186..e509dad9 100644 --- a/pages/dev/sources/+Page.client.ts +++ b/pages/dev/sources/+Page.client.ts @@ -17,7 +17,7 @@ import { FeatureSelectionHandler, } from "@macrostrat/map-interface"; import { NonIdealState } from "@blueprintjs/core"; -import { LinkItem } from "#/map/dev/map-layers"; +import { LinkItem } from "#/dev/map-layers/map-layers"; import { Link } from "~/components"; export function Page() { diff --git a/yarn.lock b/yarn.lock index 70eb9de1..6cdfc2c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5971,6 +5971,8 @@ __metadata: d3-format: "npm:^3.1.0" mapbox-gl: "npm:^2.15.0" parcel: "npm:^2.12.0" + postcss: "npm:^8.0.0" + postcss-modules: "npm:^4.3.0" query-string: "npm:^9.0.0" transition-hook: "npm:^1.5.2" underscore: "npm:^1.13.6" @@ -26948,7 +26950,7 @@ __metadata: languageName: node linkType: hard -"picocolors@npm:^1.1.0": +"picocolors@npm:^1.1.0, picocolors@npm:^1.1.1": version: 1.1.1 resolution: "picocolors@npm:1.1.1" checksum: 10/e1cf46bf84886c79055fdfa9dcb3e4711ad259949e3565154b004b260cd356c5d54b31a1437ce9782624bf766272fe6b0154f5f0c744fb7af5d454d2b60db045 @@ -27485,7 +27487,7 @@ __metadata: languageName: node linkType: hard -"postcss-modules@npm:^4.0.0": +"postcss-modules@npm:^4.0.0, postcss-modules@npm:^4.3.0": version: 4.3.1 resolution: "postcss-modules@npm:4.3.1" dependencies: @@ -27883,6 +27885,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.0.0": + version: 8.4.49 + resolution: "postcss@npm:8.4.49" + dependencies: + nanoid: "npm:^3.3.7" + picocolors: "npm:^1.1.1" + source-map-js: "npm:^1.2.1" + checksum: 10/28fe1005b1339870e0a5006375ba5ac1213fd69800f79e7db09c398e074421ba6e162898e94f64942fed554037fd292db3811d87835d25ab5ef7f3c9daacb6ca + languageName: node + linkType: hard + "postcss@npm:^8.2.1, postcss@npm:^8.3.6, postcss@npm:^8.4.27": version: 8.4.30 resolution: "postcss@npm:8.4.30" From ff459e5a1519014b9e79c1cb5fae61944d31b189 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Wed, 13 Nov 2024 13:42:33 -0600 Subject: [PATCH 02/14] Remove outmoded column inspector page --- pages/dev/map-layers/+Page.ts | 4 - .../column-inspector.module.styl | 74 --------------- .../dev/map-layers/column-inspector/index.ts | 95 ------------------- .../column-inspector/modal-panel.ts | 70 -------------- pages/map/map-interface/index.ts | 3 +- 5 files changed, 1 insertion(+), 245 deletions(-) delete mode 100644 pages/dev/map-layers/column-inspector/column-inspector.module.styl delete mode 100644 pages/dev/map-layers/column-inspector/index.ts delete mode 100644 pages/dev/map-layers/column-inspector/modal-panel.ts diff --git a/pages/dev/map-layers/+Page.ts b/pages/dev/map-layers/+Page.ts index 6931fb5e..44b7b979 100644 --- a/pages/dev/map-layers/+Page.ts +++ b/pages/dev/map-layers/+Page.ts @@ -83,10 +83,6 @@ export function Page() { tileset: MacrostratRasterTileset.Emphasized, }), }), - h(Route, { - path: "column-inspector", - element: loadableElement(() => import("./column-inspector")), - }), h(Route, { path: "catalog/*", element: h(MapLayerCatalog) }), h(Route, { path: "strabospot", diff --git a/pages/dev/map-layers/column-inspector/column-inspector.module.styl b/pages/dev/map-layers/column-inspector/column-inspector.module.styl deleted file mode 100644 index 262b2b31..00000000 --- a/pages/dev/map-layers/column-inspector/column-inspector.module.styl +++ /dev/null @@ -1,74 +0,0 @@ -.column-ui - * - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif - - --column-background-color: var(--background-color) - --column-stroke-color: var(--text-color) - - width 100vw - height 100vh - display flex - flex-direction row - position relative - .left-column - flex-grow 1 - overflow-y scroll - height 100vh - .right-column - min-width 200px - width 40% - max-width 500px - height 100vh - position relative - -.column-view - margin 0 2em - padding 0 - h1 - font-size 1.2em - margin-bottom 0.2em - padding-left 35px - -.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: 1/1 - 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) diff --git a/pages/dev/map-layers/column-inspector/index.ts b/pages/dev/map-layers/column-inspector/index.ts deleted file mode 100644 index 33b5aedf..00000000 --- a/pages/dev/map-layers/column-inspector/index.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { hyperStyled, compose, C } from "@macrostrat/hyper"; -import { useAPIResult } from "@macrostrat/ui-components"; -import { MacrostratAPIProvider } from "@macrostrat/api-views"; -import { useEffect, useState, useMemo } from "react"; -import { - UnitSelectionProvider, - useSelectedUnit, - useUnitSelectionDispatch, -} from "@macrostrat/column-views"; - -import { Column, useColumnNav } from "@macrostrat/column-views"; -import { PatternProvider } from "~/_providers.client"; -import ModalUnitPanel from "./modal-panel"; -import { ColumnNavigatorMap, preprocessUnits } from "@macrostrat/column-views"; -import styles from "./column-inspector.module.styl"; - -const h = hyperStyled(styles); - -const ColumnTitle = (props) => { - return h.if(props.data != null)("h1", props.data?.col_name); -}; - -function ColumnManager() { - const defaultArgs = { col_id: 495 }; - const [columnNavArgs, setCurrentColumn] = useColumnNav(defaultArgs); - const { unit_id, ...currentColumn } = columnNavArgs; - const selectedUnit = useSelectedUnit(); - const setSelectedUnit = useUnitSelectionDispatch(); - - const { col_id, ...projectParams } = currentColumn; - - const colParams = { ...currentColumn, format: "geojson" }; - const unitParams = { ...currentColumn, all: true, response: "long" }; - const columnFeature = useAPIResult("/columns", colParams)?.features[0]; - const unitData = useAPIResult("/units", unitParams); - - const units = useMemo(() => { - return preprocessUnits(unitData ?? []); - }, [unitData]); - - /* Harmonize selected unit and column data providers - TODO: we could link the providers for selecting units and columns, - but for now we have just nested together current separate state elements - */ - const [unitSelectionInitialized, setUnitSelectionInitialized] = - useState(false); - - useEffect(() => { - // Set initial unit selection - if (unit_id == null || unitSelectionInitialized || units?.length == 0) - return; - - const unit = units.find((d) => d.unit_id == unit_id); - setSelectedUnit(unit); - setUnitSelectionInitialized(true); - }, [units]); - - useEffect(() => { - if (selectedUnit == null && !unitSelectionInitialized) return; - setCurrentColumn({ ...currentColumn, unit_id: selectedUnit?.unit_id }); - }, [selectedUnit, unitSelectionInitialized]); - - if (unitData == null) return null; - - // 495 - return h("div.column-ui", [ - h("div.left-column", [ - h("div.column-view", [ - h(ColumnTitle, { data: columnFeature?.properties }), - h.if(unitData != null)(Column, { data: units }), - ]), - ]), - h("div.right-column", [ - h.if(selectedUnit == null)(ColumnNavigatorMap, { - className: "column-map", - currentColumn: columnFeature, - setCurrentColumn, - margin: 10, - ...projectParams, - }), - h(ModalUnitPanel, { unitData: units }), - ]), - ]); -} - -const APIProvider = C(MacrostratAPIProvider, { useDev: false }); - -const App = compose( - PatternProvider, - UnitSelectionProvider, - APIProvider, - ColumnManager -); - -export default App; diff --git a/pages/dev/map-layers/column-inspector/modal-panel.ts b/pages/dev/map-layers/column-inspector/modal-panel.ts deleted file mode 100644 index 7ef76d1a..00000000 --- a/pages/dev/map-layers/column-inspector/modal-panel.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { hyperStyled } from "@macrostrat/hyper"; -import { JSONView, ModalPanel, useKeyHandler } from "@macrostrat/ui-components"; -import { ButtonGroup, Button } from "@blueprintjs/core"; -import { - useSelectedUnit, - useUnitSelectionDispatch, -} from "@macrostrat/column-views"; -import { useEffect } from "react"; -import styles from "./column-inspector.module.styl"; - -const h = hyperStyled(styles); - -function ModalUnitPanel(props) { - const { unitData } = props; - const selectedUnit = useSelectedUnit(); - const selectUnit = useUnitSelectionDispatch(); - - const ix = unitData?.findIndex( - (unit) => unit.unit_id === selectedUnit?.unit_id - ); - - const keyMap = { - 38: ix - 1, - 40: ix + 1, - }; - - useKeyHandler( - (event) => { - const nextIx = keyMap[event.keyCode]; - if (nextIx == null || nextIx < 0 || nextIx >= unitData.length) return; - selectUnit(unitData[nextIx]); - event.stopPropagation(); - }, - [unitData, ix] - ); - - if (selectedUnit == null) return null; - - const headerChildren = h(ButtonGroup, { minimal: true }, [ - h(Button, { - icon: "arrow-up", - disabled: ix === 0, - onClick() { - selectUnit(unitData[ix - 1]); - }, - }), - h(Button, { - icon: "arrow-down", - disabled: ix === unitData.length - 1, - onClick() { - selectUnit(unitData[ix + 1]); - }, - }), - ]); - - return h( - ModalPanel, - { - onClose() { - selectUnit(null); - }, - title: selectedUnit.unit_name, - minimal: true, - headerChildren, - }, - h(JSONView, { data: selectedUnit, hideRoot: true }) - ); -} - -export default ModalUnitPanel; diff --git a/pages/map/map-interface/index.ts b/pages/map/map-interface/index.ts index 6a4d510e..fb5f61e4 100644 --- a/pages/map/map-interface/index.ts +++ b/pages/map/map-interface/index.ts @@ -17,6 +17,7 @@ import reducerStack, { useAppState, useAppActions, } from "./app-state"; +import MapPage from "./map-page"; /** Redux is used only for the main map applicaton. This heavy state-management approach is * essentially a legacy approach, and we are moving away from this in favor of more lightweight @@ -33,8 +34,6 @@ let store = createStore( composeEnhancers(applyMiddleware(routerMiddleware)) ); -import MapPage from "./map-page"; - export default function MapApp({ routerBasename }) { return h( Provider, From 140c2c6f33958f7773e0ee0a91bab98faf4c714b Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Wed, 13 Nov 2024 14:20:16 -0600 Subject: [PATCH 03/14] Continue to rework and simplify map development pages --- pages/dev/+Page.mdx | 22 ++++++++---------- pages/dev/map/+Page.mdx | 10 ++++++++ pages/dev/{filtering => map/filter}/+Page.ts | 0 .../dev/{filtering => map/filter}/+config.ts | 0 .../{filtering => map/filter}/interface.ts | 0 .../filter}/lithology-selector.ts | 0 .../filter}/main.module.styl | 0 pages/dev/{map-layers => map/layers}/+Page.ts | 23 +++---------------- .../dev/{map-layers => map/layers}/+config.ts | 2 +- .../layers}/color-schemes.ts | 0 .../layers}/main.module.styl | 0 .../layers}/map-layers/catalog.ts | 0 .../layers}/map-layers/index.ts | 2 +- .../layers}/map-layers/raster-map.ts | 0 .../layers}/map-layers/utils.ts | 0 .../layers}/strabospot-integration/index.ts | 0 .../strabospot-integration/main.module.styl | 0 .../layers}/weaver/index.ts | 0 .../{ => map}/legend-affinity/+Page.client.ts | 0 .../dev/{ => map}/legend-affinity/+config.ts | 0 .../legend-affinity/main.module.sass | 0 pages/dev/{ => map}/sources/+Page.client.ts | 2 +- 22 files changed, 26 insertions(+), 35 deletions(-) create mode 100644 pages/dev/map/+Page.mdx rename pages/dev/{filtering => map/filter}/+Page.ts (100%) rename pages/dev/{filtering => map/filter}/+config.ts (100%) rename pages/dev/{filtering => map/filter}/interface.ts (100%) rename pages/dev/{filtering => map/filter}/lithology-selector.ts (100%) rename pages/dev/{filtering => map/filter}/main.module.styl (100%) rename pages/dev/{map-layers => map/layers}/+Page.ts (81%) rename pages/dev/{map-layers => map/layers}/+config.ts (80%) rename pages/dev/{map-layers => map/layers}/color-schemes.ts (100%) rename pages/dev/{map-layers => map/layers}/main.module.styl (100%) rename pages/dev/{map-layers => map/layers}/map-layers/catalog.ts (100%) rename pages/dev/{map-layers => map/layers}/map-layers/index.ts (98%) rename pages/dev/{map-layers => map/layers}/map-layers/raster-map.ts (100%) rename pages/dev/{map-layers => map/layers}/map-layers/utils.ts (100%) rename pages/dev/{map-layers => map/layers}/strabospot-integration/index.ts (100%) rename pages/dev/{map-layers => map/layers}/strabospot-integration/main.module.styl (100%) rename pages/dev/{map-layers => map/layers}/weaver/index.ts (100%) rename pages/dev/{ => map}/legend-affinity/+Page.client.ts (100%) rename pages/dev/{ => map}/legend-affinity/+config.ts (100%) rename pages/dev/{ => map}/legend-affinity/main.module.sass (100%) rename pages/dev/{ => map}/sources/+Page.client.ts (98%) diff --git a/pages/dev/+Page.mdx b/pages/dev/+Page.mdx index 4a40f9d0..74df9bed 100644 --- a/pages/dev/+Page.mdx +++ b/pages/dev/+Page.mdx @@ -1,29 +1,27 @@ export { ContentPage as default } from "~/layouts"; -import { PageHeader, PageBreadcrumbs } from "~/components"; +import { PageHeaderV2 } from "~/components"; - - + + +## [Map development pages](/dev/map) - [Globe](/dev/globe) - [Paleogeography](/dev/paleo) -- [User interface tests](/dev/ui-tests) -- [Feedback](/dev/feedback) -- [Map filter](/dev/filtering) -- [CriticalMAAS](/integrations/criticalmaas) -- [Sources](/dev/sources) + ## xDD integration -- [Map legend affinity](/dev/legend-affinity) +- [Map legend affinity](/dev/map/legend-affinity) - [Extractions](/integrations/xdd/extractions) ## Apps - [Concept apps](/dev/concepts) - [Built with Macrostrat](/dev/apps) -- [Test Site](/dev/test-site/main-page) +- [New homepage](/dev/test-site/main-page) - [Documentation](/dev/docs) -## Map layers +## Miscellaneous -- [Map layers development pages](/dev/map-layers) +- [User interface tests](/dev/ui-tests) +- [CriticalMAAS](/integrations/criticalmaas) diff --git a/pages/dev/map/+Page.mdx b/pages/dev/map/+Page.mdx new file mode 100644 index 00000000..380fba1b --- /dev/null +++ b/pages/dev/map/+Page.mdx @@ -0,0 +1,10 @@ +export { ContentPage as default } from "~/layouts"; +import { PageHeaderV2 } from "~/components"; + + + +- [Map layers](/dev/map/layers) - core map layers from Macrostrat's tile server +- [Weaver](/dev/map/weaver) - point data experiments +- [Server-side filtering](/dev/map/filter) - Map filtering using Macrostrat's *v3* API +- [Legend affinity](/dev/map/legend-affinity) - xDD integration +- [Sources](/dev/map/sources) - Map data sources and "reference geometries" diff --git a/pages/dev/filtering/+Page.ts b/pages/dev/map/filter/+Page.ts similarity index 100% rename from pages/dev/filtering/+Page.ts rename to pages/dev/map/filter/+Page.ts diff --git a/pages/dev/filtering/+config.ts b/pages/dev/map/filter/+config.ts similarity index 100% rename from pages/dev/filtering/+config.ts rename to pages/dev/map/filter/+config.ts diff --git a/pages/dev/filtering/interface.ts b/pages/dev/map/filter/interface.ts similarity index 100% rename from pages/dev/filtering/interface.ts rename to pages/dev/map/filter/interface.ts diff --git a/pages/dev/filtering/lithology-selector.ts b/pages/dev/map/filter/lithology-selector.ts similarity index 100% rename from pages/dev/filtering/lithology-selector.ts rename to pages/dev/map/filter/lithology-selector.ts diff --git a/pages/dev/filtering/main.module.styl b/pages/dev/map/filter/main.module.styl similarity index 100% rename from pages/dev/filtering/main.module.styl rename to pages/dev/map/filter/main.module.styl diff --git a/pages/dev/map-layers/+Page.ts b/pages/dev/map/layers/+Page.ts similarity index 81% rename from pages/dev/map-layers/+Page.ts rename to pages/dev/map/layers/+Page.ts index 44b7b979..9eacf586 100644 --- a/pages/dev/map-layers/+Page.ts +++ b/pages/dev/map/layers/+Page.ts @@ -20,7 +20,7 @@ const h = hyper.styled(styles); export function Page() { // A route for each layer return h("div.dev-index-page", [ - h(Router, { basename: "/dev/map-layers" }, [ + h(Router, { basename: "/dev/map/layers" }, [ h(Routes, [ h(Route, { path: "weaver", element: h(WeaverPage) }), h(Route, { @@ -65,12 +65,6 @@ export function Page() { title: "Map colors", }), }), - h(Route, { - path: "igcp-orogens", - element: h(VectorMapInspectorPage, { - tileset: MacrostratVectorTileset.IGCPOrogens, - }), - }), h(Route, { path: "carto-raster", element: h(RasterMapInspectorPage, { @@ -107,24 +101,13 @@ function MapInspectorIndex() { h(LinkItem, { to: "emphasized" }, "Carto (image, emphasized)"), h(LinkItem, { to: "all-maps" }, "All maps"), ]), - h("h2", "Additional layers"), + h("h2", "Integrations"), h("ul.layers", [ - h(LinkItem, { to: "igcp-orogens" }, "IGCP orogens"), + h(LinkItem, { to: "strabospot" }, "StraboSpot"), h(LinkItem, { to: "weaver" }, "Weaver (point data experiments)"), ]), h("h2", h(Link, { to: "catalog" }, "Map layer catalog")), - h("h1", "Rendering libraries"), - h("ul.renderers", [ - h(LinkItem, { to: "globe" }, "Globe"), - h(LinkItem, { to: "cesium-vector-providers" }, "Cesium Vector Provider"), - ]), - h("h1", "Stratigraphic column inspector"), - h(Link, { to: "column-inspector" }, "Stratigraphy"), - h("h1", "Visualizations"), - h(LinkItem, { to: "igcp-orogens" }, "IGCP orogens"), h("h2", "Color scheme testing"), h(Link, { to: "color-schemes" }, "Color schemes"), - h("h1", "Integrations"), - h(Link, { to: "strabospot" }, "StraboSpot"), ]); } diff --git a/pages/dev/map-layers/+config.ts b/pages/dev/map/layers/+config.ts similarity index 80% rename from pages/dev/map-layers/+config.ts rename to pages/dev/map/layers/+config.ts index a61a9cb7..a789cf39 100644 --- a/pages/dev/map-layers/+config.ts +++ b/pages/dev/map/layers/+config.ts @@ -1,5 +1,5 @@ export default { - route: "/dev/map-layers*", + route: "/dev/map/layers*", meta: { Page: { env: { diff --git a/pages/dev/map-layers/color-schemes.ts b/pages/dev/map/layers/color-schemes.ts similarity index 100% rename from pages/dev/map-layers/color-schemes.ts rename to pages/dev/map/layers/color-schemes.ts diff --git a/pages/dev/map-layers/main.module.styl b/pages/dev/map/layers/main.module.styl similarity index 100% rename from pages/dev/map-layers/main.module.styl rename to pages/dev/map/layers/main.module.styl diff --git a/pages/dev/map-layers/map-layers/catalog.ts b/pages/dev/map/layers/map-layers/catalog.ts similarity index 100% rename from pages/dev/map-layers/map-layers/catalog.ts rename to pages/dev/map/layers/map-layers/catalog.ts diff --git a/pages/dev/map-layers/map-layers/index.ts b/pages/dev/map/layers/map-layers/index.ts similarity index 98% rename from pages/dev/map-layers/map-layers/index.ts rename to pages/dev/map/layers/map-layers/index.ts index bba6d630..216dac03 100644 --- a/pages/dev/map-layers/map-layers/index.ts +++ b/pages/dev/map/layers/map-layers/index.ts @@ -25,7 +25,7 @@ import { useDarkMode, useStoredState } from "@macrostrat/ui-components"; import mapboxgl from "mapbox-gl"; import { useCallback, useMemo, useState } from "react"; import { ParentRouteButton } from "~/components/map-navbar"; -import { getBaseMapStyle } from "../../../../packages/map-utils"; +import { getBaseMapStyle } from "../../../../../packages/map-utils"; import styles from "../main.module.styl"; import { useMapStyle } from "./utils"; import { Spacer } from "@macrostrat/ui-components"; diff --git a/pages/dev/map-layers/map-layers/raster-map.ts b/pages/dev/map/layers/map-layers/raster-map.ts similarity index 100% rename from pages/dev/map-layers/map-layers/raster-map.ts rename to pages/dev/map/layers/map-layers/raster-map.ts diff --git a/pages/dev/map-layers/map-layers/utils.ts b/pages/dev/map/layers/map-layers/utils.ts similarity index 100% rename from pages/dev/map-layers/map-layers/utils.ts rename to pages/dev/map/layers/map-layers/utils.ts diff --git a/pages/dev/map-layers/strabospot-integration/index.ts b/pages/dev/map/layers/strabospot-integration/index.ts similarity index 100% rename from pages/dev/map-layers/strabospot-integration/index.ts rename to pages/dev/map/layers/strabospot-integration/index.ts diff --git a/pages/dev/map-layers/strabospot-integration/main.module.styl b/pages/dev/map/layers/strabospot-integration/main.module.styl similarity index 100% rename from pages/dev/map-layers/strabospot-integration/main.module.styl rename to pages/dev/map/layers/strabospot-integration/main.module.styl diff --git a/pages/dev/map-layers/weaver/index.ts b/pages/dev/map/layers/weaver/index.ts similarity index 100% rename from pages/dev/map-layers/weaver/index.ts rename to pages/dev/map/layers/weaver/index.ts diff --git a/pages/dev/legend-affinity/+Page.client.ts b/pages/dev/map/legend-affinity/+Page.client.ts similarity index 100% rename from pages/dev/legend-affinity/+Page.client.ts rename to pages/dev/map/legend-affinity/+Page.client.ts diff --git a/pages/dev/legend-affinity/+config.ts b/pages/dev/map/legend-affinity/+config.ts similarity index 100% rename from pages/dev/legend-affinity/+config.ts rename to pages/dev/map/legend-affinity/+config.ts diff --git a/pages/dev/legend-affinity/main.module.sass b/pages/dev/map/legend-affinity/main.module.sass similarity index 100% rename from pages/dev/legend-affinity/main.module.sass rename to pages/dev/map/legend-affinity/main.module.sass diff --git a/pages/dev/sources/+Page.client.ts b/pages/dev/map/sources/+Page.client.ts similarity index 98% rename from pages/dev/sources/+Page.client.ts rename to pages/dev/map/sources/+Page.client.ts index e509dad9..62549e18 100644 --- a/pages/dev/sources/+Page.client.ts +++ b/pages/dev/map/sources/+Page.client.ts @@ -17,7 +17,7 @@ import { FeatureSelectionHandler, } from "@macrostrat/map-interface"; import { NonIdealState } from "@blueprintjs/core"; -import { LinkItem } from "#/dev/map-layers/map-layers"; +import { LinkItem } from "#/dev/map/layers/map-layers"; import { Link } from "~/components"; export function Page() { From 4df22831c24ff795e06b86fbc8cd5ff95850308d Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Wed, 13 Nov 2024 14:31:45 -0600 Subject: [PATCH 04/14] Moved color schemes dev page --- pages/dev/+Page.mdx | 11 ++++++----- pages/dev/map/+Page.mdx | 3 +++ .../+Page.client.ts} | 7 +++++-- pages/dev/map/layers/+Page.ts | 9 --------- 4 files changed, 14 insertions(+), 16 deletions(-) rename pages/dev/map/{layers/color-schemes.ts => color-schemes/+Page.client.ts} (96%) diff --git a/pages/dev/+Page.mdx b/pages/dev/+Page.mdx index 74df9bed..5d72904b 100644 --- a/pages/dev/+Page.mdx +++ b/pages/dev/+Page.mdx @@ -3,21 +3,22 @@ import { PageHeaderV2 } from "~/components"; -## [Map development pages](/dev/map) +## Maps +- [Map development pages](/dev/map) - [Globe](/dev/globe) - [Paleogeography](/dev/paleo) -## xDD integration +## xDD - [Map legend affinity](/dev/map/legend-affinity) - [Extractions](/integrations/xdd/extractions) -## Apps +## Concept apps -- [Concept apps](/dev/concepts) -- [Built with Macrostrat](/dev/apps) +- [Concept app index](/dev/concepts) +- [Built with Macrostrat](/dev/test-site/about) - [New homepage](/dev/test-site/main-page) - [Documentation](/dev/docs) diff --git a/pages/dev/map/+Page.mdx b/pages/dev/map/+Page.mdx index 380fba1b..204edac7 100644 --- a/pages/dev/map/+Page.mdx +++ b/pages/dev/map/+Page.mdx @@ -3,8 +3,11 @@ import { PageHeaderV2 } from "~/components"; +Pages for development of Macrostrat mapping interfaces + - [Map layers](/dev/map/layers) - core map layers from Macrostrat's tile server - [Weaver](/dev/map/weaver) - point data experiments - [Server-side filtering](/dev/map/filter) - Map filtering using Macrostrat's *v3* API - [Legend affinity](/dev/map/legend-affinity) - xDD integration - [Sources](/dev/map/sources) - Map data sources and "reference geometries" +- [Color schemes](/dev/map/color-schemes) - Color schemes for map layers diff --git a/pages/dev/map/layers/color-schemes.ts b/pages/dev/map/color-schemes/+Page.client.ts similarity index 96% rename from pages/dev/map/layers/color-schemes.ts rename to pages/dev/map/color-schemes/+Page.client.ts index 29587a42..fdb6c288 100644 --- a/pages/dev/map/layers/color-schemes.ts +++ b/pages/dev/map/color-schemes/+Page.client.ts @@ -1,4 +1,7 @@ -import { VectorMapInspectorPage, MacrostratVectorTileset } from "./map-layers"; +import { + VectorMapInspectorPage, + MacrostratVectorTileset, +} from "../layers/map-layers"; import h from "@macrostrat/hyper"; import { useState } from "react"; import { ButtonGroup, Button } from "@blueprintjs/core"; @@ -71,7 +74,7 @@ const newStyle = { }), }; -export function MapColorsInspector() { +export function Page() { const [tileset, setTileset] = useState(MacrostratVectorTileset.CartoSlim); const tilesetSwitch = h("p.tileset-switch", [ h(ButtonGroup, [ diff --git a/pages/dev/map/layers/+Page.ts b/pages/dev/map/layers/+Page.ts index 9eacf586..4f98342a 100644 --- a/pages/dev/map/layers/+Page.ts +++ b/pages/dev/map/layers/+Page.ts @@ -11,7 +11,6 @@ import { } from "./map-layers"; import { loadableElement } from "~/_utils"; import styles from "./main.module.styl"; -import { MapColorsInspector } from "./color-schemes"; import { WeaverPage } from "./weaver"; import { BrowserRouter as Router } from "react-router-dom"; @@ -59,12 +58,6 @@ export function Page() { path: "sources/:layer", element: h(MapLayerPage), }), - h(Route, { - path: "color-schemes", - element: h(MapColorsInspector, { - title: "Map colors", - }), - }), h(Route, { path: "carto-raster", element: h(RasterMapInspectorPage, { @@ -107,7 +100,5 @@ function MapInspectorIndex() { h(LinkItem, { to: "weaver" }, "Weaver (point data experiments)"), ]), h("h2", h(Link, { to: "catalog" }, "Map layer catalog")), - h("h2", "Color scheme testing"), - h(Link, { to: "color-schemes" }, "Color schemes"), ]); } From d03db9c27bc3af60fb870597639c5ac025217741 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Wed, 13 Nov 2024 14:37:04 -0600 Subject: [PATCH 05/14] Moved weaver page up a level --- pages/dev/map/layers/+Page.ts | 8 ++------ .../{layers/weaver/index.ts => weaver/+Page.client.ts} | 2 +- 2 files changed, 3 insertions(+), 7 deletions(-) rename pages/dev/map/{layers/weaver/index.ts => weaver/+Page.client.ts} (99%) diff --git a/pages/dev/map/layers/+Page.ts b/pages/dev/map/layers/+Page.ts index 4f98342a..27914696 100644 --- a/pages/dev/map/layers/+Page.ts +++ b/pages/dev/map/layers/+Page.ts @@ -11,7 +11,7 @@ import { } from "./map-layers"; import { loadableElement } from "~/_utils"; import styles from "./main.module.styl"; -import { WeaverPage } from "./weaver"; +import { WeaverPage } from "../weaver/+Page.client"; import { BrowserRouter as Router } from "react-router-dom"; const h = hyper.styled(styles); @@ -21,7 +21,6 @@ export function Page() { return h("div.dev-index-page", [ h(Router, { basename: "/dev/map/layers" }, [ h(Routes, [ - h(Route, { path: "weaver", element: h(WeaverPage) }), h(Route, { path: "carto", element: h(VectorMapInspectorPage, { @@ -95,10 +94,7 @@ function MapInspectorIndex() { h(LinkItem, { to: "all-maps" }, "All maps"), ]), h("h2", "Integrations"), - h("ul.layers", [ - h(LinkItem, { to: "strabospot" }, "StraboSpot"), - h(LinkItem, { to: "weaver" }, "Weaver (point data experiments)"), - ]), + h("ul.layers", [h(LinkItem, { to: "strabospot" }, "StraboSpot")]), h("h2", h(Link, { to: "catalog" }, "Map layer catalog")), ]); } diff --git a/pages/dev/map/layers/weaver/index.ts b/pages/dev/map/weaver/+Page.client.ts similarity index 99% rename from pages/dev/map/layers/weaver/index.ts rename to pages/dev/map/weaver/+Page.client.ts index 9b1c65f8..1c0e9aae 100644 --- a/pages/dev/map/layers/weaver/index.ts +++ b/pages/dev/map/weaver/+Page.client.ts @@ -30,7 +30,7 @@ import { import mapboxgl from "mapbox-gl"; import { useCallback, useEffect, useState } from "react"; -export function WeaverPage() { +export function Page() { return h( "div.weaver-page", h(WeaverMap, { mapboxToken: SETTINGS.mapboxAccessToken }) From 05f7fdba6aa798a4a23aeb1152210a0a77ec25b9 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Wed, 13 Nov 2024 14:45:19 -0600 Subject: [PATCH 06/14] Move StraboSpot dev page up a level --- pages/dev/map/+Page.mdx | 6 +++++- pages/dev/map/layers/+Page.ts | 7 ------- .../index.ts => strabospot/+Page.client.ts} | 4 ++-- .../strabospot-integration => strabospot}/main.module.styl | 0 4 files changed, 7 insertions(+), 10 deletions(-) rename pages/dev/map/{layers/strabospot-integration/index.ts => strabospot/+Page.client.ts} (98%) rename pages/dev/map/{layers/strabospot-integration => strabospot}/main.module.styl (100%) diff --git a/pages/dev/map/+Page.mdx b/pages/dev/map/+Page.mdx index 204edac7..aaf99c6d 100644 --- a/pages/dev/map/+Page.mdx +++ b/pages/dev/map/+Page.mdx @@ -6,8 +6,12 @@ import { PageHeaderV2 } from "~/components"; Pages for development of Macrostrat mapping interfaces - [Map layers](/dev/map/layers) - core map layers from Macrostrat's tile server -- [Weaver](/dev/map/weaver) - point data experiments - [Server-side filtering](/dev/map/filter) - Map filtering using Macrostrat's *v3* API - [Legend affinity](/dev/map/legend-affinity) - xDD integration - [Sources](/dev/map/sources) - Map data sources and "reference geometries" - [Color schemes](/dev/map/color-schemes) - Color schemes for map layers + +## Integrations + +- [StraboSpot](/dev/map/strabospot) - StraboSpot development integration +- [Weaver](/dev/map/weaver) - point data experiments diff --git a/pages/dev/map/layers/+Page.ts b/pages/dev/map/layers/+Page.ts index 27914696..46abdd7c 100644 --- a/pages/dev/map/layers/+Page.ts +++ b/pages/dev/map/layers/+Page.ts @@ -9,9 +9,7 @@ import { MapLayerPage, LinkItem, } from "./map-layers"; -import { loadableElement } from "~/_utils"; import styles from "./main.module.styl"; -import { WeaverPage } from "../weaver/+Page.client"; import { BrowserRouter as Router } from "react-router-dom"; const h = hyper.styled(styles); @@ -70,10 +68,6 @@ export function Page() { }), }), h(Route, { path: "catalog/*", element: h(MapLayerCatalog) }), - h(Route, { - path: "strabospot", - element: loadableElement(() => import("./strabospot-integration")), - }), h(Route, { path: "*", element: h(MapInspectorIndex) }), ]), ]), @@ -94,7 +88,6 @@ function MapInspectorIndex() { h(LinkItem, { to: "all-maps" }, "All maps"), ]), h("h2", "Integrations"), - h("ul.layers", [h(LinkItem, { to: "strabospot" }, "StraboSpot")]), h("h2", h(Link, { to: "catalog" }, "Map layer catalog")), ]); } diff --git a/pages/dev/map/layers/strabospot-integration/index.ts b/pages/dev/map/strabospot/+Page.client.ts similarity index 98% rename from pages/dev/map/layers/strabospot-integration/index.ts rename to pages/dev/map/strabospot/+Page.client.ts index da9973f0..76246b8a 100644 --- a/pages/dev/map/layers/strabospot-integration/index.ts +++ b/pages/dev/map/strabospot/+Page.client.ts @@ -24,7 +24,7 @@ import { } from "@macrostrat/mapbox-styles"; import { mergeStyles } from "@macrostrat/mapbox-utils"; import { ParentRouteButton } from "~/components/map-navbar"; -import { useMapStyle } from "../map-layers/utils"; +import { useMapStyle } from "../layers/map-layers/utils"; const h = hyperStyled(styles); @@ -144,7 +144,7 @@ const overlays = mergeStyles(_macrostratStyle, straboOverlays); // https://www.strabospot.org/search/interfacesearch.php?dsids=8-204825 -export default function StraboSpotIntegrationPage({ +export function Page({ children, }: { headerElement?: React.ReactElement; diff --git a/pages/dev/map/layers/strabospot-integration/main.module.styl b/pages/dev/map/strabospot/main.module.styl similarity index 100% rename from pages/dev/map/layers/strabospot-integration/main.module.styl rename to pages/dev/map/strabospot/main.module.styl From 1e8e4130298b5bbdc62370227d2cd28de9e5c8f1 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Thu, 14 Nov 2024 04:36:19 -0600 Subject: [PATCH 07/14] Updated map routing --- deps/web-components | 2 +- pages/dev/map/layers/+Page.ts | 3 ++- pages/dev/map/layers/map-layers/index.ts | 23 ++++++++++-------- pages/dev/map/strabospot/+Page.client.ts | 6 ++++- .../map/map-interface/app-state/nav-hooks.ts | 4 ++++ src/components/map-navbar/index.ts | 24 +++++++++++++++---- 6 files changed, 45 insertions(+), 17 deletions(-) diff --git a/deps/web-components b/deps/web-components index 00fa0eb9..812d2d65 160000 --- a/deps/web-components +++ b/deps/web-components @@ -1 +1 @@ -Subproject commit 00fa0eb9c40aa65ab3b0a351fcd3cf13d40cded2 +Subproject commit 812d2d65206ea921b8abadfdb3c2552f3e696708 diff --git a/pages/dev/map/layers/+Page.ts b/pages/dev/map/layers/+Page.ts index 46abdd7c..ad481c57 100644 --- a/pages/dev/map/layers/+Page.ts +++ b/pages/dev/map/layers/+Page.ts @@ -11,6 +11,7 @@ import { } from "./map-layers"; import styles from "./main.module.styl"; import { BrowserRouter as Router } from "react-router-dom"; +import { PageHeaderV2 } from "~/components"; const h = hyper.styled(styles); @@ -76,7 +77,7 @@ export function Page() { function MapInspectorIndex() { return h("div.page.map-inspector-index", [ - h("h1", "Map layer inspectors"), + h(PageHeaderV2, { title: "Map layer inspectors", showLogo: true }), h("h2", "Core layers"), h("ul.layers", [ h(LinkItem, { to: "carto" }, "Carto"), diff --git a/pages/dev/map/layers/map-layers/index.ts b/pages/dev/map/layers/map-layers/index.ts index 216dac03..e1411287 100644 --- a/pages/dev/map/layers/map-layers/index.ts +++ b/pages/dev/map/layers/map-layers/index.ts @@ -16,7 +16,6 @@ import { MapAreaContainer, PanelCard, } from "@macrostrat/map-interface"; -import { useMapStatus } from "@macrostrat/mapbox-react"; import { buildBasicStyle, buildMacrostratStyle, @@ -25,7 +24,7 @@ import { useDarkMode, useStoredState } from "@macrostrat/ui-components"; import mapboxgl from "mapbox-gl"; import { useCallback, useMemo, useState } from "react"; import { ParentRouteButton } from "~/components/map-navbar"; -import { getBaseMapStyle } from "../../../../../packages/map-utils"; +import { getBaseMapStyle } from "@macrostrat-web/map-utils"; import styles from "../main.module.styl"; import { useMapStyle } from "./utils"; import { Spacer } from "@macrostrat/ui-components"; @@ -61,7 +60,7 @@ function isStateValid(state) { } // Must have several specific boolean keys for (let k of ["showLineSymbols", "xRay", "showTileExtent", "bypassCache"]) { - if (typeof state[k] != "boolean") { + if (state[k] != null && typeof state[k] != "boolean") { return false; } } @@ -78,8 +77,9 @@ export function VectorMapInspectorPage({ overlayStyle = _macrostratStyle, title = null, headerElement = null, + children, }: { - headerElement?: React.ReactElement; + headerElement?: React.ReactNode; title?: string; tileset?: MacrostratVectorTileset; overlayStyle?: mapboxgl.Style; @@ -112,12 +112,11 @@ export function VectorMapInspectorPage({ ); const _overlayStyle = useMemo(() => { - const style = replaceSourcesForTileset(overlayStyle, tileset); - console.log("Overlay style", style); - return style; + return replaceSourcesForTileset(overlayStyle, tileset); }, [tileset, overlayStyle]) as mapboxgl.Style; const controls = h([ + children, h(Switch, { checked: showLineSymbols, label: "Show line symbols", @@ -135,10 +134,16 @@ export function VectorMapInspectorPage({ h(LineSymbolManager, { showLineSymbols }), ]); + // TODO: styles need to be updated + const _headerElement = h([ + h(ParentRouteButton), + headerElement ?? h("h2", title ?? tileset), + ]); + return h( DevMapPage, { - headerElement, + headerElement: _headerElement, mapboxToken: mapboxAccessToken, title: title ?? tileset, overlayStyle: _overlayStyle, @@ -172,8 +177,6 @@ export function BasicLayerInspectorPage({ const tileset = layer.id; - const { isInitialized: loaded, isLoading } = useMapStatus(); - const [isOpen, setOpen] = useState(false); const [state, setState] = useState({ showTileExtent: false }); diff --git a/pages/dev/map/strabospot/+Page.client.ts b/pages/dev/map/strabospot/+Page.client.ts index 76246b8a..8f1b7d21 100644 --- a/pages/dev/map/strabospot/+Page.client.ts +++ b/pages/dev/map/strabospot/+Page.client.ts @@ -209,7 +209,11 @@ export function Page({ MapAreaContainer, { navbar: h(FloatingNavbar, [ - h([h(ParentRouteButton), "Macrostrat + StraboSpot"]), + h([ + // TODO: change the route to be auto-managed. + h(ParentRouteButton, { parentRoute: "/dev/map" }), + "Macrostrat + StraboSpot", + ]), ]), contextPanel: h(PanelCard, [ h.if(selectedDataset == null)("h3", "No dataset selected"), diff --git a/pages/map/map-interface/app-state/nav-hooks.ts b/pages/map/map-interface/app-state/nav-hooks.ts index b7f81929..f1729207 100644 --- a/pages/map/map-interface/app-state/nav-hooks.ts +++ b/pages/map/map-interface/app-state/nav-hooks.ts @@ -53,6 +53,10 @@ export function useHashNavigate(to: string) { const navigate = useNavigate(); const location = useLocation(); + if (navigate == null || location == null) { + return null; + } + return () => { // This may be needed because of module/context stuff // Compute relative path if necessary diff --git a/src/components/map-navbar/index.ts b/src/components/map-navbar/index.ts index 495f9175..6c4337b4 100644 --- a/src/components/map-navbar/index.ts +++ b/src/components/map-navbar/index.ts @@ -4,6 +4,7 @@ import { FloatingNavbar, MapLoadingButton } from "@macrostrat/map-interface"; import { useMapStatus } from "@macrostrat/mapbox-react"; import { hyperStyled } from "@macrostrat/hyper"; import styles from "./main.module.sass"; +import { useInRouterContext } from "react-router"; const h = hyperStyled(styles); @@ -12,12 +13,27 @@ export function ParentRouteButton({ icon = "arrow-left", ...rest }) { - // A button that links to the parent route. This may not be responsive to all needs. - if (parentRoute != null) { - return h(AnchorButton, { href: parentRoute, icon, minimal: true }); + // Check if we are in a react-router context + const inRouterContext = useInRouterContext(); + + let _parentRoute = parentRoute; + if (parentRoute == null) { + // Check if the current route ends with a slash + const path = window.location.pathname; + if (path.endsWith("/")) { + _parentRoute = ".."; + } else { + _parentRoute = "."; + } } - return h(LinkButton, { to: "..", icon, minimal: true, ...rest }); + if (inRouterContext) { + // Should check whether we are the "root" route + return h(LinkButton, { to: "..", icon, minimal: true, ...rest }); + } + + // A button that links to the parent route. This may not be responsive to all needs. + return h(AnchorButton, { href: _parentRoute, icon, minimal: true }); } export function MapNavbar({ From e17e92ce8e0348f312b5d988a7469a3d301b77c8 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Thu, 14 Nov 2024 05:12:33 -0600 Subject: [PATCH 08/14] Deleted redundant layer inspector code --- pages/dev/map/layers/+Page.ts | 7 +- pages/dev/map/layers/main.module.styl | 14 +++- pages/dev/map/layers/map-layers/catalog.ts | 7 +- pages/dev/map/layers/map-layers/index.ts | 98 ++++------------------ 4 files changed, 30 insertions(+), 96 deletions(-) diff --git a/pages/dev/map/layers/+Page.ts b/pages/dev/map/layers/+Page.ts index ad481c57..85cf8466 100644 --- a/pages/dev/map/layers/+Page.ts +++ b/pages/dev/map/layers/+Page.ts @@ -52,10 +52,6 @@ export function Page() { tileset: MacrostratVectorTileset.AllMaps, }), }), - h(Route, { - path: "sources/:layer", - element: h(MapLayerPage), - }), h(Route, { path: "carto-raster", element: h(RasterMapInspectorPage, { @@ -83,12 +79,11 @@ function MapInspectorIndex() { h(LinkItem, { to: "carto" }, "Carto"), h(LinkItem, { to: "carto-slim" }, "Carto (slim)"), h(LinkItem, { to: "carto-v1" }, "Carto (v1)"), - h(LinkItem, { to: "carto-slim-v1" }, "Carto (v1)"), + h(LinkItem, { to: "carto-slim-v1" }, "Carto (slim, v1)"), h(LinkItem, { to: "carto-raster" }, "Carto (image)"), h(LinkItem, { to: "emphasized" }, "Carto (image, emphasized)"), h(LinkItem, { to: "all-maps" }, "All maps"), ]), - h("h2", "Integrations"), h("h2", h(Link, { to: "catalog" }, "Map layer catalog")), ]); } diff --git a/pages/dev/map/layers/main.module.styl b/pages/dev/map/layers/main.module.styl index 5296c77e..ea2348a0 100644 --- a/pages/dev/map/layers/main.module.styl +++ b/pages/dev/map/layers/main.module.styl @@ -1,3 +1,6 @@ +:root + --navbar + .feature-panel position: relative overflow-x: hidden @@ -5,16 +8,20 @@ .key-value display: inline-block margin-right: 1em + .key font-weight: bold font-size: 0.9em + &:after content: ': ' + .value font-size: 0.9em .feature-properties position: relative + &:before content: "–" position: absolute @@ -31,6 +38,7 @@ margin-left: -1em margin-right: -1em margin-bottom: 0.5em + &:last-child border-bottom: none @@ -39,11 +47,13 @@ flex-direction: row align-items: baseline padding 0 1em + h3 - margin-right: 0.5em + margin-right: 0.5em .opacity-slider margin: 0 1em 0.5em + :global .bp5-slider-handle .bp5-slider-label background-color: var(--secondary-color) @@ -60,4 +70,4 @@ max-width: 50em .dev-index-page - overflow-y: scroll \ No newline at end of file + overflow-y: scroll diff --git a/pages/dev/map/layers/map-layers/catalog.ts b/pages/dev/map/layers/map-layers/catalog.ts index 4d63bd49..4a535d1e 100644 --- a/pages/dev/map/layers/map-layers/catalog.ts +++ b/pages/dev/map/layers/map-layers/catalog.ts @@ -43,6 +43,8 @@ function MapLayerCatalogList() { const url = burwellTileDomain + "/tables.json"; const layers = useAPIResult(url); + console.log(layers); + if (layers == null) { return h("div.loading", h(Spinner)); } @@ -63,14 +65,11 @@ function MapLayerCatalogItem({ layer }) { export function MapLayerPage() { const { layer } = useParams(); - const l1 = `sources.${layer}_polygons`; // get path from URL - const url = burwellTileDomain + "/table/" + l1 + ".json"; - console.log(url); + const url = burwellTileDomain + "/table/" + layer + ".json"; const layerDef = useAPIResult(url); if (layerDef == null) { return h("div", [h(BackButton), h("div.loading", h(Spinner))]); } - console.log(layerDef); return h(ErrorBoundary, h(BasicLayerInspectorPage, { layer: layerDef })); } diff --git a/pages/dev/map/layers/map-layers/index.ts b/pages/dev/map/layers/map-layers/index.ts index e1411287..cf47dd12 100644 --- a/pages/dev/map/layers/map-layers/index.ts +++ b/pages/dev/map/layers/map-layers/index.ts @@ -20,6 +20,7 @@ import { buildBasicStyle, buildMacrostratStyle, } from "@macrostrat/mapbox-styles"; +import { Text } from "@blueprintjs/core"; import { useDarkMode, useStoredState } from "@macrostrat/ui-components"; import mapboxgl from "mapbox-gl"; import { useCallback, useMemo, useState } from "react"; @@ -137,7 +138,7 @@ export function VectorMapInspectorPage({ // TODO: styles need to be updated const _headerElement = h([ h(ParentRouteButton), - headerElement ?? h("h2", title ?? tileset), + headerElement ?? h(Text, { tag: "h2", ellipsize: true }, title) ?? tileset, ]); return h( @@ -177,93 +178,22 @@ export function BasicLayerInspectorPage({ const tileset = layer.id; - const [isOpen, setOpen] = useState(false); - - const [state, setState] = useState({ showTileExtent: false }); - const { showTileExtent } = state; - - const [inspectPosition, setInspectPosition] = - useState(null); - - const [data, setData] = useState(null); - - const onSelectPosition = useCallback((position: mapboxgl.LngLat) => { - setInspectPosition(position); - }, []); - - let detailElement = null; - if (inspectPosition != null) { - detailElement = h( - LocationPanel, - { - onClose() { - setInspectPosition(null); - }, - position: inspectPosition, - // This should be inverted probably - showCopyPositionButton: false, - }, - [ - h(TileInfo, { - feature: data?.[0] ?? null, - showExtent: showTileExtent, - setShowExtent() { - setState({ ...state, showTileExtent: !showTileExtent }); - }, - }), - h(FeaturePanel, { features: data }), - ] - ); - } - - const { isEnabled } = useDarkMode(); - - // Style management - const baseMapURL = getBaseMapStyle(false, isEnabled); - - const _overlayStyle = useMemo(() => { - return buildBasicStyle({ - inDarkMode: isEnabled, - tileURL: layer.tileurl, - }); - }, [layer, isEnabled]) as mapboxgl.Style; - - const style = useMapStyle(baseMapURL, _overlayStyle); - - let tile = null; - if (showTileExtent && data?.[0] != null) { - let f = data[0]; - tile = { x: f._x, y: f._y, z: f._z }; - } - - //if (!loaded) return h(Spinner); + const _headerElement = h([ + h(ParentRouteButton), + headerElement ?? h(Text, { tag: "h2", ellipsize: true }, title ?? tileset), + ]); return h( - MapAreaContainer, + DevMapPage, { - navbar: h(FloatingNavbar, { className: "searchbar" }, [ - h([h(ParentRouteButton), headerElement ?? h("h2", title ?? tileset)]), - h(Spacer), - h(MapLoadingButton, { - active: isOpen, - onClick: () => setOpen(!isOpen), - }), - ]), - contextPanel: h(PanelCard, [children]), - detailPanel: detailElement, - contextPanelOpen: isOpen, - }, - h(MapView, { style, transformRequest, accessToken: mapboxgl.accessToken }, [ - h(FeatureSelectionHandler, { - selectedLocation: inspectPosition, - setFeatures: setData, - }), - h(MapMarker, { - position: inspectPosition, - setPosition: onSelectPosition, + headerElement: _headerElement, + transformRequest, + overlayStyle: buildBasicStyle({ + inDarkMode: false, + tileURL: layer.tileurl, }), - h(TileExtentLayer, { tile, color: isEnabled ? "white" : "black" }), - ]) + }, + children ); } From 2565516c213b8fb99c32bace1a234c8b3304edc1 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Thu, 14 Nov 2024 13:06:23 -0600 Subject: [PATCH 09/14] Some simplifications to map layer helpers --- deps/web-components | 2 +- pages/dev/map/layers/+Page.ts | 1 - pages/dev/map/layers/map-layers/catalog.ts | 5 +- pages/dev/map/layers/map-layers/index.ts | 56 ++++++++----------- pages/dev/map/layers/map-layers/raster-map.ts | 2 - 5 files changed, 25 insertions(+), 41 deletions(-) diff --git a/deps/web-components b/deps/web-components index 812d2d65..3cfe425b 160000 --- a/deps/web-components +++ b/deps/web-components @@ -1 +1 @@ -Subproject commit 812d2d65206ea921b8abadfdb3c2552f3e696708 +Subproject commit 3cfe425b5ea3040991e3db7c1a33d8f547ed7d87 diff --git a/pages/dev/map/layers/+Page.ts b/pages/dev/map/layers/+Page.ts index 85cf8466..9bcb4c63 100644 --- a/pages/dev/map/layers/+Page.ts +++ b/pages/dev/map/layers/+Page.ts @@ -6,7 +6,6 @@ import { MacrostratRasterTileset, RasterMapInspectorPage, MapLayerCatalog, - MapLayerPage, LinkItem, } from "./map-layers"; import styles from "./main.module.styl"; diff --git a/pages/dev/map/layers/map-layers/catalog.ts b/pages/dev/map/layers/map-layers/catalog.ts index 4a535d1e..d11477e7 100644 --- a/pages/dev/map/layers/map-layers/catalog.ts +++ b/pages/dev/map/layers/map-layers/catalog.ts @@ -8,6 +8,7 @@ import { Link, Route, Routes, useParams } from "react-router-dom"; import { ParentRouteButton } from "~/components/map-navbar"; import { BasicLayerInspectorPage } from "./index"; import styles from "../main.module.styl"; +import { PageHeaderV2 } from "~/components"; const h = hyper.styled(styles); @@ -33,7 +34,7 @@ const BackButton = () => h(ParentRouteButton, {}, "Back"); function MapLayerCatalogPage() { return h("div.page.layer-catalog-page", [ - h(BackButton), + h(PageHeaderV2, { title: "Table Catalog" }), h(MapLayerCatalogList), ]); } @@ -43,8 +44,6 @@ function MapLayerCatalogList() { const url = burwellTileDomain + "/tables.json"; const layers = useAPIResult(url); - console.log(layers); - if (layers == null) { return h("div.loading", h(Spinner)); } diff --git a/pages/dev/map/layers/map-layers/index.ts b/pages/dev/map/layers/map-layers/index.ts index cf47dd12..d6cbd16a 100644 --- a/pages/dev/map/layers/map-layers/index.ts +++ b/pages/dev/map/layers/map-layers/index.ts @@ -2,33 +2,17 @@ import { Switch } from "@blueprintjs/core"; import { burwellTileDomain, mapboxAccessToken } from "@macrostrat-web/settings"; import hyper from "@macrostrat/hyper"; -import { - DevMapPage, - FeaturePanel, - FeatureSelectionHandler, - FloatingNavbar, - LocationPanel, - MapLoadingButton, - MapMarker, - MapView, - TileExtentLayer, - TileInfo, - MapAreaContainer, - PanelCard, -} from "@macrostrat/map-interface"; +import { DevMapPage } from "@macrostrat/map-interface"; import { buildBasicStyle, buildMacrostratStyle, } from "@macrostrat/mapbox-styles"; import { Text } from "@blueprintjs/core"; -import { useDarkMode, useStoredState } from "@macrostrat/ui-components"; +import { useInDarkMode, useStoredState } from "@macrostrat/ui-components"; import mapboxgl from "mapbox-gl"; import { useCallback, useMemo, useState } from "react"; import { ParentRouteButton } from "~/components/map-navbar"; -import { getBaseMapStyle } from "@macrostrat-web/map-utils"; import styles from "../main.module.styl"; -import { useMapStyle } from "./utils"; -import { Spacer } from "@macrostrat/ui-components"; import { MacrostratVectorTileset, MacrostratRasterTileset, @@ -113,7 +97,9 @@ export function VectorMapInspectorPage({ ); const _overlayStyle = useMemo(() => { - return replaceSourcesForTileset(overlayStyle, tileset); + const style = replaceSourcesForTileset(overlayStyle, tileset); + console.log("style", style); + return style; }, [tileset, overlayStyle]) as mapboxgl.Style; const controls = h([ @@ -135,18 +121,11 @@ export function VectorMapInspectorPage({ h(LineSymbolManager, { showLineSymbols }), ]); - // TODO: styles need to be updated - const _headerElement = h([ - h(ParentRouteButton), - headerElement ?? h(Text, { tag: "h2", ellipsize: true }, title) ?? tileset, - ]); - return h( DevMapPage, { - headerElement: _headerElement, + headerElement: h(DevPageHeader, { headerElement, title, tileset }), mapboxToken: mapboxAccessToken, - title: title ?? tileset, overlayStyle: _overlayStyle, transformRequest, }, @@ -176,22 +155,24 @@ export function BasicLayerInspectorPage({ the search bar on mobile platforms */ - const tileset = layer.id; + const inDarkMode = useInDarkMode(); - const _headerElement = h([ - h(ParentRouteButton), - headerElement ?? h(Text, { tag: "h2", ellipsize: true }, title ?? tileset), - ]); + console.log(layer); return h( DevMapPage, { - headerElement: _headerElement, + headerElement: h(DevPageHeader, { + headerElement, + title: title ?? layer.id, + }), transformRequest, overlayStyle: buildBasicStyle({ - inDarkMode: false, + inDarkMode, tileURL: layer.tileurl, }), + mapboxToken: mapboxAccessToken, + bounds: layer.bounds, }, children ); @@ -199,3 +180,10 @@ export function BasicLayerInspectorPage({ export * from "./catalog"; export * from "./raster-map"; + +function DevPageHeader({ headerElement, title }) { + return h([ + h(ParentRouteButton), + headerElement ?? h(Text, { tag: "h2", ellipsize: true }, title), + ]); +} diff --git a/pages/dev/map/layers/map-layers/raster-map.ts b/pages/dev/map/layers/map-layers/raster-map.ts index 116b21aa..7f651e2e 100644 --- a/pages/dev/map/layers/map-layers/raster-map.ts +++ b/pages/dev/map/layers/map-layers/raster-map.ts @@ -12,8 +12,6 @@ import { ParentRouteButton } from "~/components/map-navbar"; import { useMapRef } from "@macrostrat/mapbox-react"; import { useDarkMode } from "@macrostrat/ui-components"; import { useEffect, useMemo, useState } from "react"; -import { useSelector } from "react-redux"; -import { useAppActions, useAppState } from "#/map/map-interface/app-state"; import { MacrostratRasterTileset, buildRasterStyle, h } from "./index"; import { useMapStyle } from "./utils"; From f3d0634f0d926d1652ace14b7955650e064fbeb0 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Thu, 14 Nov 2024 13:31:35 -0600 Subject: [PATCH 10/14] Renamed folder to 'lib' --- pages/dev/map/color-schemes/+Page.client.ts | 5 +---- pages/dev/map/layers/+Page.ts | 2 +- pages/dev/map/layers/{map-layers => lib}/catalog.ts | 0 pages/dev/map/layers/{map-layers => lib}/index.ts | 0 pages/dev/map/layers/{map-layers => lib}/raster-map.ts | 0 pages/dev/map/layers/{map-layers => lib}/utils.ts | 0 pages/dev/map/sources/+Page.client.ts | 2 +- pages/dev/map/strabospot/+Page.client.ts | 2 +- 8 files changed, 4 insertions(+), 7 deletions(-) rename pages/dev/map/layers/{map-layers => lib}/catalog.ts (100%) rename pages/dev/map/layers/{map-layers => lib}/index.ts (100%) rename pages/dev/map/layers/{map-layers => lib}/raster-map.ts (100%) rename pages/dev/map/layers/{map-layers => lib}/utils.ts (100%) diff --git a/pages/dev/map/color-schemes/+Page.client.ts b/pages/dev/map/color-schemes/+Page.client.ts index fdb6c288..0501a629 100644 --- a/pages/dev/map/color-schemes/+Page.client.ts +++ b/pages/dev/map/color-schemes/+Page.client.ts @@ -1,7 +1,4 @@ -import { - VectorMapInspectorPage, - MacrostratVectorTileset, -} from "../layers/map-layers"; +import { VectorMapInspectorPage, MacrostratVectorTileset } from "../layers/lib"; import h from "@macrostrat/hyper"; import { useState } from "react"; import { ButtonGroup, Button } from "@blueprintjs/core"; diff --git a/pages/dev/map/layers/+Page.ts b/pages/dev/map/layers/+Page.ts index 9bcb4c63..5c83fe96 100644 --- a/pages/dev/map/layers/+Page.ts +++ b/pages/dev/map/layers/+Page.ts @@ -7,7 +7,7 @@ import { RasterMapInspectorPage, MapLayerCatalog, LinkItem, -} from "./map-layers"; +} from "./lib"; import styles from "./main.module.styl"; import { BrowserRouter as Router } from "react-router-dom"; import { PageHeaderV2 } from "~/components"; diff --git a/pages/dev/map/layers/map-layers/catalog.ts b/pages/dev/map/layers/lib/catalog.ts similarity index 100% rename from pages/dev/map/layers/map-layers/catalog.ts rename to pages/dev/map/layers/lib/catalog.ts diff --git a/pages/dev/map/layers/map-layers/index.ts b/pages/dev/map/layers/lib/index.ts similarity index 100% rename from pages/dev/map/layers/map-layers/index.ts rename to pages/dev/map/layers/lib/index.ts diff --git a/pages/dev/map/layers/map-layers/raster-map.ts b/pages/dev/map/layers/lib/raster-map.ts similarity index 100% rename from pages/dev/map/layers/map-layers/raster-map.ts rename to pages/dev/map/layers/lib/raster-map.ts diff --git a/pages/dev/map/layers/map-layers/utils.ts b/pages/dev/map/layers/lib/utils.ts similarity index 100% rename from pages/dev/map/layers/map-layers/utils.ts rename to pages/dev/map/layers/lib/utils.ts diff --git a/pages/dev/map/sources/+Page.client.ts b/pages/dev/map/sources/+Page.client.ts index 62549e18..70b6a22a 100644 --- a/pages/dev/map/sources/+Page.client.ts +++ b/pages/dev/map/sources/+Page.client.ts @@ -17,7 +17,7 @@ import { FeatureSelectionHandler, } from "@macrostrat/map-interface"; import { NonIdealState } from "@blueprintjs/core"; -import { LinkItem } from "#/dev/map/layers/map-layers"; +import { LinkItem } from "pages/dev/map/layers/lib"; import { Link } from "~/components"; export function Page() { diff --git a/pages/dev/map/strabospot/+Page.client.ts b/pages/dev/map/strabospot/+Page.client.ts index 8f1b7d21..8df951f2 100644 --- a/pages/dev/map/strabospot/+Page.client.ts +++ b/pages/dev/map/strabospot/+Page.client.ts @@ -24,7 +24,7 @@ import { } from "@macrostrat/mapbox-styles"; import { mergeStyles } from "@macrostrat/mapbox-utils"; import { ParentRouteButton } from "~/components/map-navbar"; -import { useMapStyle } from "../layers/map-layers/utils"; +import { useMapStyle } from "#/dev/map/layers/lib/utils"; const h = hyperStyled(styles); From 30fb040ce76ae4a4c91767a93d495dfaf1341f15 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Thu, 14 Nov 2024 17:51:23 -0600 Subject: [PATCH 11/14] Updated map layers --- pages/dev/map/layers/+Page.ts | 88 ------------------- pages/dev/map/layers/+config.ts | 11 --- pages/dev/map/layers/@layer/+Page.client.ts | 14 +++ pages/dev/map/layers/@layer/+data.ts | 78 ++++++++++++++++ pages/dev/map/layers/index/+Page.ts | 28 ++++++ .../map/layers/{ => index}/main.module.styl | 11 --- pages/dev/map/layers/lib/catalog.ts | 4 +- pages/dev/map/layers/lib/index.ts | 20 ++--- .../dev/map/layers/lib/raster-map.module.sass | 7 ++ pages/dev/map/layers/lib/raster-map.ts | 15 ++-- pages/dev/map/layers/lib/utils.ts | 11 ++- src/_utils/map-layers.client.ts | 13 +-- src/_utils/map-layers.ts | 38 +++++--- 13 files changed, 181 insertions(+), 157 deletions(-) delete mode 100644 pages/dev/map/layers/+Page.ts delete mode 100644 pages/dev/map/layers/+config.ts create mode 100644 pages/dev/map/layers/@layer/+Page.client.ts create mode 100644 pages/dev/map/layers/@layer/+data.ts create mode 100644 pages/dev/map/layers/index/+Page.ts rename pages/dev/map/layers/{ => index}/main.module.styl (82%) create mode 100644 pages/dev/map/layers/lib/raster-map.module.sass diff --git a/pages/dev/map/layers/+Page.ts b/pages/dev/map/layers/+Page.ts deleted file mode 100644 index 5c83fe96..00000000 --- a/pages/dev/map/layers/+Page.ts +++ /dev/null @@ -1,88 +0,0 @@ -import hyper from "@macrostrat/hyper"; -import { Routes, Route, Link } from "react-router-dom"; -import { - VectorMapInspectorPage, - MacrostratVectorTileset, - MacrostratRasterTileset, - RasterMapInspectorPage, - MapLayerCatalog, - LinkItem, -} from "./lib"; -import styles from "./main.module.styl"; -import { BrowserRouter as Router } from "react-router-dom"; -import { PageHeaderV2 } from "~/components"; - -const h = hyper.styled(styles); - -export function Page() { - // A route for each layer - return h("div.dev-index-page", [ - h(Router, { basename: "/dev/map/layers" }, [ - h(Routes, [ - h(Route, { - path: "carto", - element: h(VectorMapInspectorPage, { - tileset: MacrostratVectorTileset.Carto, - }), - }), - h(Route, { - path: "carto-slim", - element: h(VectorMapInspectorPage, { - tileset: MacrostratVectorTileset.CartoSlim, - }), - }), - h(Route, { - path: "carto-v1", - element: h(VectorMapInspectorPage, { - title: "Carto (v1)", - tileset: "https://tiles.macrostrat.org/carto/{z}/{x}/{y}.mvt", - }), - }), - h(Route, { - path: "carto-slim-v1", - element: h(VectorMapInspectorPage, { - title: "Carto (slim, v1)", - tileset: "https://tiles.macrostrat.org/carto-slim/{z}/{x}/{y}.mvt", - }), - }), - h(Route, { - path: "all-maps", - element: h(VectorMapInspectorPage, { - tileset: MacrostratVectorTileset.AllMaps, - }), - }), - h(Route, { - path: "carto-raster", - element: h(RasterMapInspectorPage, { - tileset: MacrostratRasterTileset.Carto, - }), - }), - h(Route, { - path: "emphasized", - element: h(RasterMapInspectorPage, { - tileset: MacrostratRasterTileset.Emphasized, - }), - }), - h(Route, { path: "catalog/*", element: h(MapLayerCatalog) }), - h(Route, { path: "*", element: h(MapInspectorIndex) }), - ]), - ]), - ]); -} - -function MapInspectorIndex() { - return h("div.page.map-inspector-index", [ - h(PageHeaderV2, { title: "Map layer inspectors", showLogo: true }), - h("h2", "Core layers"), - h("ul.layers", [ - h(LinkItem, { to: "carto" }, "Carto"), - h(LinkItem, { to: "carto-slim" }, "Carto (slim)"), - h(LinkItem, { to: "carto-v1" }, "Carto (v1)"), - h(LinkItem, { to: "carto-slim-v1" }, "Carto (slim, v1)"), - h(LinkItem, { to: "carto-raster" }, "Carto (image)"), - h(LinkItem, { to: "emphasized" }, "Carto (image, emphasized)"), - h(LinkItem, { to: "all-maps" }, "All maps"), - ]), - h("h2", h(Link, { to: "catalog" }, "Map layer catalog")), - ]); -} diff --git a/pages/dev/map/layers/+config.ts b/pages/dev/map/layers/+config.ts deleted file mode 100644 index a789cf39..00000000 --- a/pages/dev/map/layers/+config.ts +++ /dev/null @@ -1,11 +0,0 @@ -export default { - route: "/dev/map/layers*", - meta: { - Page: { - env: { - client: true, - server: false, - }, - }, - }, -}; diff --git a/pages/dev/map/layers/@layer/+Page.client.ts b/pages/dev/map/layers/@layer/+Page.client.ts new file mode 100644 index 00000000..1f4adfb6 --- /dev/null +++ b/pages/dev/map/layers/@layer/+Page.client.ts @@ -0,0 +1,14 @@ +import { RasterMapInspectorPage, VectorMapInspectorPage } from "../lib"; +import h from "@macrostrat/hyper"; +import { useData } from "vike-react/useData"; + +export function Page() { + const layerInfo: any = useData(); + + const { title, tileset, type } = layerInfo; + + const component: any = + type == "raster" ? RasterMapInspectorPage : VectorMapInspectorPage; + + return h(component, { title, tileset }); +} diff --git a/pages/dev/map/layers/@layer/+data.ts b/pages/dev/map/layers/@layer/+data.ts new file mode 100644 index 00000000..b2d8a312 --- /dev/null +++ b/pages/dev/map/layers/@layer/+data.ts @@ -0,0 +1,78 @@ +import { PageContextServer } from "vike/types"; +import { useConfig } from "vike-react/useConfig"; +import { + MacrostratRasterTileset, + MacrostratVectorTileset, +} from "~/_utils/map-layers"; +import { render } from "vike/abort"; + +export async function data(pageContext: PageContextServer) { + const config = useConfig(); + const { layer } = pageContext.routeParams; + + const layerInfo = layerIndex.find((l) => l.slug == layer); + + if (layerInfo == null) { + throw render(404, "Layer not found"); + } + + const { title, tileset, type } = layerInfo; + + let _title = title; + if (_title == null) { + // Capitalize the first letter + _title = tileset.charAt(0).toUpperCase() + tileset.slice(1); + } + + config({ + title: _title + "– Layer", + }); + + return { title: _title, tileset, type }; +} + +type LayerInfo = { + title?: string; + slug: string; + tileset: MacrostratRasterTileset | MacrostratVectorTileset | string; + type: "raster" | "vector"; +}; + +/** Index of allowed map layers. + * TODO: we could get this from the Macrostrat API somehow + */ + +const layerIndex: LayerInfo[] = [ + { slug: "carto", tileset: MacrostratRasterTileset.Carto, type: "vector" }, + { + slug: "carto-slim", + tileset: MacrostratVectorTileset.CartoSlim, + type: "vector", + }, + { + slug: "carto-v1", + tileset: "https://tiles.macrostrat.org/carto/{z}/{x}/{y}.mvt", + type: "vector", + }, + { + slug: "carto-slim-v1", + tileset: "https://tiles.macrostrat.org/carto-slim/{z}/{x}/{y}.mvt", + type: "vector", + }, + { + slug: "all-maps", + tileset: MacrostratVectorTileset.AllMaps, + type: "vector", + }, + { + slug: "carto-raster", + tileset: MacrostratRasterTileset.Carto, + type: "raster", + title: "Carto (raster)", + }, + { + slug: "emphasized", + tileset: MacrostratRasterTileset.Emphasized, + type: "raster", + }, +]; diff --git a/pages/dev/map/layers/index/+Page.ts b/pages/dev/map/layers/index/+Page.ts new file mode 100644 index 00000000..c1e1b67b --- /dev/null +++ b/pages/dev/map/layers/index/+Page.ts @@ -0,0 +1,28 @@ +import hyper from "@macrostrat/hyper"; +import { Routes, Route, Link } from "react-router-dom"; +import styles from "./main.module.styl"; +import { BrowserRouter as Router } from "react-router-dom"; +import { PageHeaderV2 } from "~/components"; + +const h = hyper.styled(styles); + +export function Page() { + return h("div.page.map-inspector-index", [ + h(PageHeaderV2, { title: "Layer inspectors", showLogo: true }), + h("h2", "Core layers"), + h("ul.layers", [ + h(LinkItem, { to: "carto" }, "Carto"), + h(LinkItem, { to: "carto-slim" }, "Carto (slim)"), + h(LinkItem, { to: "carto-v1" }, "Carto (v1)"), + h(LinkItem, { to: "carto-slim-v1" }, "Carto (slim, v1)"), + h(LinkItem, { to: "carto-raster" }, "Carto (image)"), + h(LinkItem, { to: "emphasized" }, "Carto (image, emphasized)"), + h(LinkItem, { to: "all-maps" }, "All maps"), + ]), + h("h2", h("a", { href: "./layers/catalog" }, "Map layer catalog")), + ]); +} + +function LinkItem({ to, children }) { + return h("li", h("a", { href: "./layers/" + to }, children)); +} diff --git a/pages/dev/map/layers/main.module.styl b/pages/dev/map/layers/index/main.module.styl similarity index 82% rename from pages/dev/map/layers/main.module.styl rename to pages/dev/map/layers/index/main.module.styl index ea2348a0..42a23ee7 100644 --- a/pages/dev/map/layers/main.module.styl +++ b/pages/dev/map/layers/index/main.module.styl @@ -1,6 +1,3 @@ -:root - --navbar - .feature-panel position: relative overflow-x: hidden @@ -51,14 +48,6 @@ h3 margin-right: 0.5em -.opacity-slider - margin: 0 1em 0.5em - - :global - .bp5-slider-handle .bp5-slider-label - background-color: var(--secondary-color) - color: var(--text-color) - .unit-number .unit font-size: 0.9em diff --git a/pages/dev/map/layers/lib/catalog.ts b/pages/dev/map/layers/lib/catalog.ts index d11477e7..24b0ad81 100644 --- a/pages/dev/map/layers/lib/catalog.ts +++ b/pages/dev/map/layers/lib/catalog.ts @@ -7,13 +7,13 @@ import { ErrorBoundary, useAPIResult } from "@macrostrat/ui-components"; import { Link, Route, Routes, useParams } from "react-router-dom"; import { ParentRouteButton } from "~/components/map-navbar"; import { BasicLayerInspectorPage } from "./index"; -import styles from "../main.module.styl"; +import styles from "../index/main.module.styl"; import { PageHeaderV2 } from "~/components"; const h = hyper.styled(styles); export function LinkItem({ to, children }) { - return h("li", h(Link, { to }, children)); + return h("li", h("a", { href: "./layers/" + to }, children)); } export function MapLayerCatalog() { diff --git a/pages/dev/map/layers/lib/index.ts b/pages/dev/map/layers/lib/index.ts index d6cbd16a..31a76efc 100644 --- a/pages/dev/map/layers/lib/index.ts +++ b/pages/dev/map/layers/lib/index.ts @@ -7,12 +7,10 @@ import { buildBasicStyle, buildMacrostratStyle, } from "@macrostrat/mapbox-styles"; -import { Text } from "@blueprintjs/core"; import { useInDarkMode, useStoredState } from "@macrostrat/ui-components"; import mapboxgl from "mapbox-gl"; -import { useCallback, useMemo, useState } from "react"; -import { ParentRouteButton } from "~/components/map-navbar"; -import styles from "../main.module.styl"; +import { useCallback, useMemo } from "react"; +import { DevPageHeader } from "./utils"; import { MacrostratVectorTileset, MacrostratRasterTileset, @@ -30,7 +28,7 @@ export { buildMapStyle, }; -export const h = hyper.styled(styles); +export const h = hyper; const _macrostratStyle = buildMacrostratStyle({ tileserverDomain: burwellTileDomain, @@ -124,7 +122,10 @@ export function VectorMapInspectorPage({ return h( DevMapPage, { - headerElement: h(DevPageHeader, { headerElement, title, tileset }), + headerElement: h(DevPageHeader, { + headerElement, + title, + }), mapboxToken: mapboxAccessToken, overlayStyle: _overlayStyle, transformRequest, @@ -180,10 +181,3 @@ export function BasicLayerInspectorPage({ export * from "./catalog"; export * from "./raster-map"; - -function DevPageHeader({ headerElement, title }) { - return h([ - h(ParentRouteButton), - headerElement ?? h(Text, { tag: "h2", ellipsize: true }, title), - ]); -} diff --git a/pages/dev/map/layers/lib/raster-map.module.sass b/pages/dev/map/layers/lib/raster-map.module.sass new file mode 100644 index 00000000..e3cef3ee --- /dev/null +++ b/pages/dev/map/layers/lib/raster-map.module.sass @@ -0,0 +1,7 @@ +.opacity-slider + margin: 0 1em 0.5em + + :global + .bp5-slider-handle .bp5-slider-label + background-color: var(--secondary-color) + color: var(--text-color) diff --git a/pages/dev/map/layers/lib/raster-map.ts b/pages/dev/map/layers/lib/raster-map.ts index 7f651e2e..a48ff198 100644 --- a/pages/dev/map/layers/lib/raster-map.ts +++ b/pages/dev/map/layers/lib/raster-map.ts @@ -7,13 +7,14 @@ import { MapView, PanelCard, } from "@macrostrat/map-interface"; -import { ParentRouteButton } from "~/components/map-navbar"; +import { DevPageHeader } from "./utils"; import { useMapRef } from "@macrostrat/mapbox-react"; import { useDarkMode } from "@macrostrat/ui-components"; import { useEffect, useMemo, useState } from "react"; -import { MacrostratRasterTileset, buildRasterStyle, h } from "./index"; +import { MacrostratRasterTileset, buildRasterStyle } from "./index"; import { useMapStyle } from "./utils"; +import h from "./raster-map.module.sass"; export function RasterOpacityManager({ layerID, opacity }) { const mapRef = useMapRef(); @@ -29,6 +30,7 @@ export function RasterOpacityManager({ layerID, opacity }) { export function RasterMapInspectorPage({ tileset, + title, }: { tileset: MacrostratRasterTileset; }) { @@ -67,15 +69,14 @@ export function RasterMapInspectorPage({ return h( MapAreaContainer, { - navbar: h(FloatingNavbar, { className: "searchbar" }, [ - h([h(ParentRouteButton), h("h2", `${tileset}`)]), - h("div.spacer"), - h(MapLoadingButton, { + navbar: h(FloatingNavbar, { + rightElement: h(MapLoadingButton, { active: isOpen, onClick: () => setOpen(!isOpen), isLoading, }), - ]), + headerElement: h(DevPageHeader, { title }), + }), contextPanel: h(PanelCard, [ h(FormGroup, { className: "opacity-slider" }, [ h(Label, "Opacity"), diff --git a/pages/dev/map/layers/lib/utils.ts b/pages/dev/map/layers/lib/utils.ts index 032a75b5..27f8e3fd 100644 --- a/pages/dev/map/layers/lib/utils.ts +++ b/pages/dev/map/layers/lib/utils.ts @@ -1,6 +1,8 @@ import mapboxgl from "mapbox-gl"; import { useEffect, useState } from "react"; -import { buildMapStyle } from "./index"; +import { buildMapStyle, h } from "./index"; +import { ParentRouteButton } from "~/components/map-navbar"; +import { Text } from "@blueprintjs/core"; export function useMapStyle( baseMapURL: string, @@ -12,3 +14,10 @@ export function useMapStyle( }, [baseMapURL, overlayStyle]); return style; } + +export function DevPageHeader({ headerElement, title }) { + return h([ + h(ParentRouteButton), + headerElement ?? h(Text, { tagName: "h2", ellipsize: true }, title), + ]); +} diff --git a/src/_utils/map-layers.client.ts b/src/_utils/map-layers.client.ts index 3339f0b1..105efe5c 100644 --- a/src/_utils/map-layers.client.ts +++ b/src/_utils/map-layers.client.ts @@ -8,18 +8,9 @@ import { removeMapLabels, } from "@macrostrat/mapbox-utils"; import mapboxgl from "mapbox-gl"; +import { MacrostratVectorTileset, MacrostratRasterTileset } from "./map-layers"; -export enum MacrostratVectorTileset { - Carto = "carto", - CartoSlim = "carto-slim", - IGCPOrogens = "igcp-orogens", - AllMaps = "all-maps", -} - -export enum MacrostratRasterTileset { - Carto = "carto", - Emphasized = "emphasized", -} +export * from "./map-layers"; export function replaceSourcesForTileset( style: mapboxgl.Style, diff --git a/src/_utils/map-layers.ts b/src/_utils/map-layers.ts index c4aa5073..f9f6c64e 100644 --- a/src/_utils/map-layers.ts +++ b/src/_utils/map-layers.ts @@ -1,5 +1,17 @@ /** Functions to apply specific layers to map UIs */ +export enum MacrostratVectorTileset { + Carto = "carto", + CartoSlim = "carto-slim", + IGCPOrogens = "igcp-orogens", + AllMaps = "all-maps", +} + +export enum MacrostratRasterTileset { + Carto = "carto", + Emphasized = "emphasized", +} + export function buildCrossSectionLayers(): mapboxgl.Layer[] { // Get CSS colors from settings const ruleColor = getComputedStyle(document.body).getPropertyValue( @@ -14,17 +26,17 @@ export function buildCrossSectionLayers(): mapboxgl.Layer[] { "circle-radius": { stops: [ [0, 3], - [12, 5] - ] + [12, 5], + ], }, "circle-color": centerColor, "circle-stroke-width": { stops: [ [0, 2], - [12, 4] - ] + [12, 4], + ], }, - "circle-stroke-color": ruleColor + "circle-stroke-color": ruleColor, }; return [ @@ -36,18 +48,18 @@ export function buildCrossSectionLayers(): mapboxgl.Layer[] { "line-width": { stops: [ [0, 1], - [12, 3] - ] + [12, 3], + ], }, "line-color": ruleColor, - "line-opacity": 1 - } + "line-opacity": 1, + }, }, { id: "crossSectionEndpoint", type: "circle", source: "crossSectionEndpoints", - paint: crossSectionPointPaint + paint: crossSectionPointPaint, }, { id: "elevationMarker", @@ -55,8 +67,8 @@ export function buildCrossSectionLayers(): mapboxgl.Layer[] { source: "elevationMarker", paint: { ...crossSectionPointPaint, - "circle-color": "#4bc0c0" - } - } + "circle-color": "#4bc0c0", + }, + }, ]; } From db4c38bd06c000e745dc6a3758f8905bcf78b543 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Thu, 14 Nov 2024 18:08:22 -0600 Subject: [PATCH 12/14] Improve catalog index --- pages/dev/map/layers/index/+Page.ts | 11 +++----- pages/dev/map/layers/lib/index.ts | 1 - .../catalog.ts => tables/+Page.client.ts} | 26 +++++++++++-------- 3 files changed, 19 insertions(+), 19 deletions(-) rename pages/dev/map/layers/{lib/catalog.ts => tables/+Page.client.ts} (76%) diff --git a/pages/dev/map/layers/index/+Page.ts b/pages/dev/map/layers/index/+Page.ts index c1e1b67b..4af78787 100644 --- a/pages/dev/map/layers/index/+Page.ts +++ b/pages/dev/map/layers/index/+Page.ts @@ -1,13 +1,10 @@ -import hyper from "@macrostrat/hyper"; +import h from "@macrostrat/hyper"; import { Routes, Route, Link } from "react-router-dom"; -import styles from "./main.module.styl"; -import { BrowserRouter as Router } from "react-router-dom"; import { PageHeaderV2 } from "~/components"; - -const h = hyper.styled(styles); +import { ContentPage } from "~/layouts"; export function Page() { - return h("div.page.map-inspector-index", [ + return h(ContentPage, [ h(PageHeaderV2, { title: "Layer inspectors", showLogo: true }), h("h2", "Core layers"), h("ul.layers", [ @@ -19,7 +16,7 @@ export function Page() { h(LinkItem, { to: "emphasized" }, "Carto (image, emphasized)"), h(LinkItem, { to: "all-maps" }, "All maps"), ]), - h("h2", h("a", { href: "./layers/catalog" }, "Map layer catalog")), + h("h2", h("a", { href: "./layers/tables" }, "Map layer catalog")), ]); } diff --git a/pages/dev/map/layers/lib/index.ts b/pages/dev/map/layers/lib/index.ts index 31a76efc..5b28de25 100644 --- a/pages/dev/map/layers/lib/index.ts +++ b/pages/dev/map/layers/lib/index.ts @@ -179,5 +179,4 @@ export function BasicLayerInspectorPage({ ); } -export * from "./catalog"; export * from "./raster-map"; diff --git a/pages/dev/map/layers/lib/catalog.ts b/pages/dev/map/layers/tables/+Page.client.ts similarity index 76% rename from pages/dev/map/layers/lib/catalog.ts rename to pages/dev/map/layers/tables/+Page.client.ts index 24b0ad81..634c554d 100644 --- a/pages/dev/map/layers/lib/catalog.ts +++ b/pages/dev/map/layers/tables/+Page.client.ts @@ -1,4 +1,7 @@ -// Map layer catalog +/** + * Map layer catalog. + * This page is a good example of nesting react-router within a Vike page. + */ import hyper from "@macrostrat/hyper"; import { Spinner } from "@blueprintjs/core"; @@ -6,33 +9,34 @@ import { burwellTileDomain } from "@macrostrat-web/settings"; import { ErrorBoundary, useAPIResult } from "@macrostrat/ui-components"; import { Link, Route, Routes, useParams } from "react-router-dom"; import { ParentRouteButton } from "~/components/map-navbar"; -import { BasicLayerInspectorPage } from "./index"; +import { BasicLayerInspectorPage } from "../lib"; +import { BrowserRouter as Router } from "react-router-dom"; + import styles from "../index/main.module.styl"; import { PageHeaderV2 } from "~/components"; const h = hyper.styled(styles); -export function LinkItem({ to, children }) { - return h("li", h("a", { href: "./layers/" + to }, children)); +function LinkItem({ to, children }) { + return h("li", h(Link, { to }, children)); } -export function MapLayerCatalog() { +export function Page() { // A route for each layer - return h( - ErrorBoundary, + return h(Router, { basename: "/dev/map/layers/tables" }, [ h(Routes, [ h(Route, { path: ":layer", element: h(MapLayerPage), }), - h(Route, { path: "*", element: h(MapLayerCatalogPage) }), - ]) - ); + h(Route, { path: "*", element: h(TableCatalogIndexPage) }), + ]), + ]); } const BackButton = () => h(ParentRouteButton, {}, "Back"); -function MapLayerCatalogPage() { +function TableCatalogIndexPage() { return h("div.page.layer-catalog-page", [ h(PageHeaderV2, { title: "Table Catalog" }), h(MapLayerCatalogList), From e87fdd02e4b480f76699450ce8dc56296f57adfa Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Thu, 14 Nov 2024 19:13:47 -0600 Subject: [PATCH 13/14] Updated dev map layers --- pages/dev/map/layers/index/+Page.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pages/dev/map/layers/index/+Page.ts b/pages/dev/map/layers/index/+Page.ts index 4af78787..f5d6878a 100644 --- a/pages/dev/map/layers/index/+Page.ts +++ b/pages/dev/map/layers/index/+Page.ts @@ -1,5 +1,4 @@ import h from "@macrostrat/hyper"; -import { Routes, Route, Link } from "react-router-dom"; import { PageHeaderV2 } from "~/components"; import { ContentPage } from "~/layouts"; @@ -16,7 +15,7 @@ export function Page() { h(LinkItem, { to: "emphasized" }, "Carto (image, emphasized)"), h(LinkItem, { to: "all-maps" }, "All maps"), ]), - h("h2", h("a", { href: "./layers/tables" }, "Map layer catalog")), + h("h2", h("a", { href: "./layers/tables" }, "Table catalog")), ]); } From d67ef23084ca19b6b7790c17a3363c3edcc10a19 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Thu, 14 Nov 2024 20:48:17 -0600 Subject: [PATCH 14/14] Add more specificity to error page --- pages/_error/+Page.ts | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/pages/_error/+Page.ts b/pages/_error/+Page.ts index b5a17435..49c057cc 100644 --- a/pages/_error/+Page.ts +++ b/pages/_error/+Page.ts @@ -1,15 +1,23 @@ -export { Page }; - import h from "@macrostrat/hyper"; import { CenteredContentPage } from "~/layouts"; import { PageHeader } from "~/components"; +import { usePageContext } from "vike-react/usePageContext"; + +export function Page() { + const ctx = usePageContext(); + const is404 = ctx.is404; + + return h(CenteredContentPage, [ + h(PageHeader, { title: "Macrostrat" }), + h(PageContent, { is404, path: ctx.urlPathname }), + ]); +} -function PageContent({ is404 }: { is404: boolean }) { +function PageContent({ is404, path }: { is404: boolean; path: string }) { if (is404) { return h([ - h("h1", "Page Not Found"), - h("p", " This page could not be found."), - h("p", ["Code: ", h("code", "404")]), + h("h1", [h("code.bp5-code", "404"), " Page Not Found"]), + h("p", ["Could not find a page at path ", h("code.bp5-code", path), "."]), ]); } else { return h([ @@ -19,10 +27,3 @@ function PageContent({ is404 }: { is404: boolean }) { ]); } } - -function Page({ is404 }: { is404: boolean }) { - return h(CenteredContentPage, [ - h(PageHeader, { title: "Macrostrat" }, [h("span.secondary", "v2")]), - h(PageContent, { is404 }), - ]); -}