From c2aba0ac541c8d28628aed3f97bb3ac0f279c0a6 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Sun, 21 Jan 2024 19:14:33 -0600 Subject: [PATCH 1/8] Extract some map helpers --- deps/web-components | 2 +- packages/globe-dev/src/index.ts | 31 +++-- src/pages/dev/paleo/paleo-map.ts | 47 ++++---- .../map-interface/app-state/handlers/index.ts | 27 +++-- .../app-state/reducers/hash-string.ts | 109 ++---------------- .../map-interface/map-page/settings-panel.ts | 36 +++--- .../map/map-interface/utils/formatting.ts | 16 --- 7 files changed, 79 insertions(+), 189 deletions(-) diff --git a/deps/web-components b/deps/web-components index 028600bf..bc079690 160000 --- a/deps/web-components +++ b/deps/web-components @@ -1 +1 @@ -Subproject commit 028600bfb025a38dd60eb9df97e52b248eeea73a +Subproject commit bc079690663cad901e3a5ef49c3e4851711f36d1 diff --git a/packages/globe-dev/src/index.ts b/packages/globe-dev/src/index.ts index ad7f4e33..da05311f 100644 --- a/packages/globe-dev/src/index.ts +++ b/packages/globe-dev/src/index.ts @@ -1,31 +1,28 @@ -import h from "@macrostrat/hyper"; -import CesiumView from "./cesium-view"; -import { MapPosition } from "@macrostrat/mapbox-utils"; -import { useState, useMemo, useRef, useEffect, useCallback, memo } from "react"; import { - flyToParams, - ViewInfo, - translateCameraPosition, - getInitialPosition, - buildPositionHash, CameraParams, DisplayQuality, + flyToParams, + translateCameraPosition, } from "@macrostrat/cesium-viewer"; +import h from "@macrostrat/hyper"; +import { MapPosition } from "@macrostrat/mapbox-utils"; +import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Link } from "~/renderer/Link"; +import CesiumView from "./cesium-view"; -import "./app.scss"; -import "cesium/Source/Widgets/widgets.css"; -import "@znemz/cesium-navigation/dist/index.css"; import { + applyMapPositionToHash, + getMapPositionForHash, +} from "@macrostrat/map-interface"; +import { + buildQueryString, getHashString, setHashString, - buildQueryString, } from "@macrostrat/ui-components"; +import "@znemz/cesium-navigation/dist/index.css"; +import "cesium/Source/Widgets/widgets.css"; +import "./app.scss"; import Map from "./map-comparison"; -import { - getMapPositionForHash, - applyMapPositionToHash, -} from "../../../src/pages/map/map-interface/app-state/reducers/hash-string"; function VisControl({ show, setShown, name }) { const className = show ? "active" : ""; diff --git a/src/pages/dev/paleo/paleo-map.ts b/src/pages/dev/paleo/paleo-map.ts index ca0173f6..0383e7e5 100644 --- a/src/pages/dev/paleo/paleo-map.ts +++ b/src/pages/dev/paleo/paleo-map.ts @@ -1,41 +1,38 @@ +import { HTMLSelect, Spinner, Switch } from "@blueprintjs/core"; import h from "@macrostrat/hyper"; -import { MacrostratVectorTileset } from "~/_legacy/map-dev/map-layers"; -import { buildMacrostratStyle } from "@macrostrat/mapbox-styles"; -import mapboxgl from "mapbox-gl"; -import { useCallback, useMemo, useReducer } from "react"; -import { SETTINGS } from "~/settings"; -import { Switch, HTMLSelect, Spinner } from "@blueprintjs/core"; -import { - Spacer, - useDarkMode, - useStoredState, - DarkModeButton, -} from "@macrostrat/ui-components"; -import { useState, useEffect } from "react"; import { FeaturePanel, FeatureSelectionHandler, - TileInfo, - MapView, + FloatingNavbar, LocationPanel, - MapMarker, MapAreaContainer, MapLoadingButton, - FloatingNavbar, + MapMarker, + MapView, PanelCard, + TileInfo, + applyMapPositionToHash, buildInspectorStyle, + getMapPositionForHash, } from "@macrostrat/map-interface"; +import { buildMacrostratStyle } from "@macrostrat/mapbox-styles"; +import { MapPosition } from "@macrostrat/mapbox-utils"; +import { + DarkModeButton, + Spacer, + getHashString, + setHashString, + useAPIResult, + useDarkMode, + useStoredState, +} from "@macrostrat/ui-components"; +import mapboxgl from "mapbox-gl"; +import { useCallback, useEffect, useMemo, useReducer, useState } from "react"; +import { MacrostratVectorTileset } from "~/_legacy/map-dev/map-layers"; +import { SETTINGS } from "~/settings"; import { TimescalePanel } from "./timescale"; -import { MapPosition, getMapPosition } from "@macrostrat/mapbox-utils"; -import { useAPIResult } from "@macrostrat/ui-components"; -import { getHashString, setHashString } from "@macrostrat/ui-components"; -// Having to include these global styles is a bit awkward import "~/styles/global.styl"; -import { - applyMapPositionToHash, - getMapPositionForHash, -} from "~/pages/map/map-interface/app-state/reducers/hash-string"; // Import other components diff --git a/src/pages/map/map-interface/app-state/handlers/index.ts b/src/pages/map/map-interface/app-state/handlers/index.ts index d62329e7..bf97ec63 100644 --- a/src/pages/map/map-interface/app-state/handlers/index.ts +++ b/src/pages/map/map-interface/app-state/handlers/index.ts @@ -1,27 +1,26 @@ +import { push } from "@lagunovsky/redux-react-router"; +import axios from "axios"; +import { mapPagePrefix, routerBasename } from "~/settings"; +import { AppAction, AppState } from "../reducers"; import { + base, + fetchAllColumns, fetchFilteredColumns, + getPBDBData, handleXDDQuery, runColumnQuery, runMapQuery, - getPBDBData, - base, - fetchAllColumns, } from "./fetch"; -import { AppAction, AppState } from "../reducers"; -import axios from "axios"; import { runFilter } from "./filters"; -import { push } from "@lagunovsky/redux-react-router"; -import { routerBasename, mapPagePrefix } from "~/settings"; -import { isDetailPanelRoute } from "../nav-hooks"; +import { formatCoordForZoomLevel } from "@macrostrat/mapbox-utils"; +import { LineString } from "geojson"; +import { matchPath } from "react-router"; +import { currentPageForPathName, isDetailPanelRoute } from "../nav-hooks"; import { MenuPage, setInfoMarkerPosition } from "../reducers"; -import { formatCoordForZoomLevel } from "~/pages/map/map-interface/utils/formatting"; -import { currentPageForPathName } from "../nav-hooks"; -import { getInitialStateFromHash } from "../reducers/hash-string"; -import { findColumnForLocation, ColumnGeoJSONRecord } from "./columns"; import { MapLayer } from "../reducers/core"; -import { matchPath } from "react-router"; -import { LineString } from "geojson"; +import { getInitialStateFromHash } from "../reducers/hash-string"; +import { ColumnGeoJSONRecord, findColumnForLocation } from "./columns"; function routeForActivePage(page: MenuPage) { let newPathname = routerBasename; diff --git a/src/pages/map/map-interface/app-state/reducers/hash-string.ts b/src/pages/map/map-interface/app-state/reducers/hash-string.ts index 1b4b1333..d9be55b9 100644 --- a/src/pages/map/map-interface/app-state/reducers/hash-string.ts +++ b/src/pages/map/map-interface/app-state/reducers/hash-string.ts @@ -1,15 +1,15 @@ -import { setHashString, getHashString } from "@macrostrat/ui-components"; -import { MapLayer, CoreState, InfoMarkerPosition } from "./core"; -import { MapPosition } from "@macrostrat/mapbox-utils"; -import { AppState, AppAction } from "./types"; -import { Filter, FilterType } from "../handlers/filters"; -import { ParsedQuery } from "query-string"; import { - formatCoordForZoomLevel, - fmtInt, - fmt1, - fmt2, -} from "~/pages/map/map-interface/utils/formatting"; + applyMapPositionToHash, + getMapPositionForHash, +} from "@macrostrat/map-interface"; +import { formatCoordForZoomLevel } from "@macrostrat/mapbox-utils"; +import { getHashString, setHashString } from "@macrostrat/ui-components"; +import { format } from "d3-format"; +import { Filter, FilterType } from "../handlers/filters"; +import { CoreState, InfoMarkerPosition, MapLayer } from "./core"; +import { AppAction, AppState } from "./types"; + +const fmtInt = format(".0f"); export function hashStringReducer(state: AppState, action: AppAction) { switch (action.type) { @@ -82,43 +82,6 @@ function applyInfoMarkerPosition( } } -export function applyMapPositionToHash( - args: HashParams, - mapPosition: MapPosition | null -) { - const pos = mapPosition?.camera; - if (pos == null) return; - const zoom = mapPosition.target?.zoom; - - args.x = formatCoordForZoomLevel(pos.lng, zoom); - args.y = formatCoordForZoomLevel(pos.lat, zoom); - - if (pos.bearing == 0 && pos.pitch == 0 && zoom != null) { - args.z = fmt1(zoom); - } else if (pos.altitude != null) { - if (pos.altitude > 5000) { - args.z = fmt2(pos.altitude / 1000) + "km"; - } else { - args.z = fmtInt(pos.altitude) + "m"; - } - } - if (pos.bearing != 0) { - let az = pos.bearing; - if (az < 0) az += 360; - args.a = fmtInt(az); - } - if (pos.pitch != 0) { - args.e = fmtInt(pos.pitch); - } -} - -function _fmt(x: string | number | string[]) { - if (Array.isArray(x)) { - x = x[0]; - } - return parseFloat(x.toString()); -} - interface HashLayerDesc { show?: string[]; hide?: string[]; @@ -211,56 +174,6 @@ function layerDescriptionToLayers( return validateLayers(layers); } -export function getMapPositionForHash( - hashData: ParsedQuery, - infoMarkerPosition: InfoMarkerPosition | null -): MapPosition { - const { - x = infoMarkerPosition?.lng ?? 0, - y = infoMarkerPosition?.lat ?? 0, - // Different default for zoom depending on whether we have a marker - z = infoMarkerPosition != null ? 7 : 2, - a = 0, - e = 0, - } = hashData; - - const lng = _fmt(x); - const lat = _fmt(y); - - let altitude = null; - let zoom = null; - const _z = z.toString(); - if (_z.endsWith("km")) { - altitude = _fmt(_z.substring(0, _z.length - 2)) * 1000; - } else if (_z.endsWith("m")) { - altitude = _fmt(_z.substring(0, _z.length - 1)); - } else { - zoom = _fmt(z); - } - const bearing = _fmt(a); - const pitch = _fmt(e); - - let target = undefined; - if (bearing == 0 && pitch == 0 && zoom != null) { - target = { - lat, - lng, - zoom, - }; - } - - return { - camera: { - lng: _fmt(x), - lat: _fmt(y), - altitude, - bearing: _fmt(a), - pitch: _fmt(e), - }, - target, - }; -} - export function updateMapPositionForHash( state: CoreState, hashString: string diff --git a/src/pages/map/map-interface/map-page/settings-panel.ts b/src/pages/map/map-interface/map-page/settings-panel.ts index 90344e0f..9bc74c58 100644 --- a/src/pages/map/map-interface/map-page/settings-panel.ts +++ b/src/pages/map/map-interface/map-page/settings-panel.ts @@ -2,30 +2,32 @@ // TODO: re-integrate LinkButton to @macrostrat/router-components import { - useAppState, - useAppActions, -} from "~/pages/map/map-interface/app-state"; -import { - Switch, - Icon, + AnchorButton, Button, - Intent, + Callout, + Collapse, + Icon, IconName, - AnchorButton, + Intent, + Switch, + Tag, } from "@blueprintjs/core"; import hyper from "@macrostrat/hyper"; -import { Tag, Collapse, Callout, Text, NumericInput } from "@blueprintjs/core"; -import { useState } from "react"; -import { useEffect } from "react"; -import { MapLayer } from "~/pages/map/map-interface/app-state"; -import styles from "./settings-panel.module.styl"; +import { applyMapPositionToHash } from "@macrostrat/map-interface"; import { DarkModeButton, - useDarkMode, - darkModeUpdater, buildQueryString, + darkModeUpdater, + useDarkMode, } from "@macrostrat/ui-components"; -import { LinkButton } from "../components/buttons"; +import { useEffect, useState } from "react"; +import { + MapLayer, + useAppActions, + useAppState, +} from "~/pages/map/map-interface/app-state"; + +import styles from "./settings-panel.module.styl"; const h = hyper.styled(styles); @@ -84,8 +86,6 @@ const SettingsPanel = (props) => { ]); }; -import { applyMapPositionToHash } from "~/pages/map/map-interface/app-state/reducers/hash-string"; - function GlobeLink() { const mapPosition = useAppState((s) => s.core.mapPosition); let args = {}; diff --git a/src/pages/map/map-interface/utils/formatting.ts b/src/pages/map/map-interface/utils/formatting.ts index 5dc0101a..78ad5979 100644 --- a/src/pages/map/map-interface/utils/formatting.ts +++ b/src/pages/map/map-interface/utils/formatting.ts @@ -1,21 +1,5 @@ import { format } from "d3-format"; -function trailingDigitsForZoom(zoom: number): number { - if (zoom < 2) { - return 1; - } else if (zoom < 4) { - return 2; - } else if (zoom < 7) { - return 3; - } else { - return 4; - } -} - -export function formatCoordForZoomLevel(val: number, zoom: number): string { - return val.toFixed(trailingDigitsForZoom(zoom)); -} - export function joinURL(...args) { let newURL = args[0]; for (let i = 1; i < args.length; i++) { From 4d4b2e858ca9b9325ffbd6025c6a3a1ded5ee34f Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Sun, 21 Jan 2024 23:44:13 -0600 Subject: [PATCH 2/8] Added map interface updates --- deps/web-components | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/deps/web-components b/deps/web-components index bc079690..cd472385 160000 --- a/deps/web-components +++ b/deps/web-components @@ -1 +1 @@ -Subproject commit bc079690663cad901e3a5ef49c3e4851711f36d1 +Subproject commit cd472385b927980aa3555f0ea417279f95828fae From 535a93f7f33769c2834db34fb69afcc4fb9ee593 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Mon, 22 Jan 2024 00:32:16 -0600 Subject: [PATCH 3/8] ~/settings -> @macrostrat-web/settings --- package.json | 1 + packages/settings/index.ts | 47 ++++++++++++++ packages/settings/package.json | 5 ++ src/_legacy/map-dev/map-layers/catalog.ts | 14 ++--- src/_legacy/map-dev/map-layers/index.ts | 61 ++++++++++--------- src/index.ts | 15 ----- src/main.d.ts | 2 + src/pages/column/@id/+onBeforeRender.ts | 2 +- src/pages/dev/paleo/paleo-map.ts | 4 +- .../map-interface/app-state/handlers/fetch.ts | 2 +- .../app-state/handlers/filters.ts | 2 +- .../map-interface/app-state/handlers/index.ts | 2 +- .../map/map-interface/app-state/nav-hooks.ts | 4 +- .../map-interface/app-state/reducers/index.ts | 19 +++--- .../map/map-interface/components/About.tsx | 10 ++- .../map/map-interface/components/docs.ts | 8 +-- .../components/elevation-chart/index.ts | 2 +- src/pages/map/map-interface/index.ts | 10 +-- src/pages/map/map-interface/map-page/index.ts | 26 ++++---- .../map-page/map-styles/map-sources.ts | 2 +- .../map-page/map-styles/overlay.ts | 2 +- .../map-page/map-view/filter-helpers.ts | 2 +- .../map-interface/map-page/map-view/index.ts | 22 +++---- .../map-interface/map-page/map-view/utils.ts | 26 ++++---- src/pages/map/map-interface/map-page/menu.ts | 53 ++++++++-------- src/pages/maps/+onBeforeRender.ts | 2 +- src/pages/maps/@id/+onBeforeRender.ts | 2 +- src/pages/maps/@id/edit/+Page.ts | 2 +- src/pages/maps/@id/edit/map-interface.ts | 2 +- src/pages/maps/@id/map-interface.ts | 2 +- src/settings.ts | 33 ---------- src/weaver/index.ts | 8 +-- tsconfig.json | 5 +- yarn.lock | 40 ++++++++++++ 34 files changed, 243 insertions(+), 196 deletions(-) create mode 100644 packages/settings/index.ts create mode 100644 packages/settings/package.json delete mode 100644 src/index.ts create mode 100644 src/main.d.ts delete mode 100644 src/settings.ts diff --git a/package.json b/package.json index 98cfb77b..e58d2d68 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "@macrostrat-web/data-sheet-test": "workspace:*", "@macrostrat-web/globe": "workspace:*", "@macrostrat-web/security": "workspace:*", + "@macrostrat-web/settings": "workspace:*", "@macrostrat/api-utils": "workspace:*", "@macrostrat/api-views": "workspace:*", "@macrostrat/column-components": "workspace:*", diff --git a/packages/settings/index.ts b/packages/settings/index.ts new file mode 100644 index 00000000..beef7f87 --- /dev/null +++ b/packages/settings/index.ts @@ -0,0 +1,47 @@ +export const darkMapURL = + "mapbox://styles/jczaplewski/cl5uoqzzq003614o6url9ou9z?optimize=true"; +export const baseMapURL = + "mapbox://styles/jczaplewski/clatdbkw4002q14lov8zx0bm0?optimize=true"; +export const satelliteMapURL = + "mapbox://styles/jczaplewski/cl51esfdm000e14mq51erype3?optimize=true"; +// TODO: make these configurable with environment variables +// burwellTileDomain: +// window.location.hostname === "localhost" +// ? "https://tiles.macrostrat.org" +// : window.location.hostname === "dev.macrostrat.org" +// ? "https://devtiles.macrostrat.org" +// : "https://tiles.macrostrat.org", +// apiDomain: +// window.location.hostname === "localhost" +// ? "https://dev.macrostrat.org" +// : `https://${window.location.hostname}`, +// burwellTileDomain: "https://devtiles.macrostrat.org", +// apiDomain: "https://dev.macrostrat.org", +export const burwellTileDomain = import.meta.env + .VITE_MACROSTRAT_TILESERVER_DOMAIN; +export const apiDomain = import.meta.env.VITE_MACROSTRAT_API_DOMAIN; +export const gddDomain = "https://xdd.wisc.edu"; +export const pbdbDomain = "https://paleobiodb.org"; +export const mapboxAccessToken = import.meta.env.VITE_MAPBOX_API_TOKEN; + +export const apiV2Prefix = + import.meta.env.VITE_MACROSTRAT_API_V2 ?? apiDomain + "/api/v2"; + +export const mapPagePrefix = "/map"; + +export const routerBasename = import.meta.env.BASE_URL + "map"; + +/** Legacy settings object */ +export const SETTINGS = { + darkMapURL, + baseMapURL, + satelliteMapURL, + burwellTileDomain, + apiDomain, + gddDomain, + pbdbDomain, + mapboxAccessToken, + apiV2Prefix, + mapPagePrefix, + routerBasename, +}; diff --git a/packages/settings/package.json b/packages/settings/package.json new file mode 100644 index 00000000..6db9216f --- /dev/null +++ b/packages/settings/package.json @@ -0,0 +1,5 @@ +{ + "name": "@macrostrat-web/settings", + "version": "1.0.0", + "source": "index.ts" +} diff --git a/src/_legacy/map-dev/map-layers/catalog.ts b/src/_legacy/map-dev/map-layers/catalog.ts index a39ea8e1..bcbe3a5b 100644 --- a/src/_legacy/map-dev/map-layers/catalog.ts +++ b/src/_legacy/map-dev/map-layers/catalog.ts @@ -1,13 +1,13 @@ // Map layer catalog import hyper from "@macrostrat/hyper"; -import { Routes, Route, Link, useParams } from "react-router-dom"; -import styles from "../main.module.styl"; -import { useAPIResult, ErrorBoundary } from "@macrostrat/ui-components"; -import { ParentRouteButton } from "~/components/map-navbar"; -import { SETTINGS } from "~/settings"; import { Spinner } from "@blueprintjs/core"; +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 styles from "../main.module.styl"; const h = hyper.styled(styles); @@ -40,7 +40,7 @@ function MapLayerCatalogPage() { function MapLayerCatalogList() { // A route for each layer - const url = SETTINGS.burwellTileDomain + "/tables.json"; + const url = burwellTileDomain + "/tables.json"; const layers = useAPIResult(url); if (layers == null) { @@ -64,7 +64,7 @@ function MapLayerCatalogItem({ layer }) { function MapLayerPage() { const { layer } = useParams(); // get path from URL - const url = SETTINGS.burwellTileDomain + "/table/" + layer + ".json"; + const url = burwellTileDomain + "/table/" + layer + ".json"; const layerDef = useAPIResult(url); if (layerDef == null) { return h("div", [h(BackButton), h("div.loading", h(Spinner))]); diff --git a/src/_legacy/map-dev/map-layers/index.ts b/src/_legacy/map-dev/map-layers/index.ts index 291e3f27..394602cf 100644 --- a/src/_legacy/map-dev/map-layers/index.ts +++ b/src/_legacy/map-dev/map-layers/index.ts @@ -1,41 +1,44 @@ // Import other components -import { Spinner, Switch } from "@blueprintjs/core"; +import { Switch } from "@blueprintjs/core"; +import { burwellTileDomain, mapboxAccessToken } from "@macrostrat-web/settings"; import hyper from "@macrostrat/hyper"; -import { useMapConditionalStyle, useMapRef } from "@macrostrat/mapbox-react"; +import { + DevMapPage, + FeaturePanel, + FeatureSelectionHandler, + FloatingNavbar, + LocationPanel, + MapLoadingButton, + MapMarker, + MapView, + TileExtentLayer, + TileInfo, +} from "@macrostrat/map-interface"; +import { + useMapConditionalStyle, + useMapRef, + useMapStatus, +} from "@macrostrat/mapbox-react"; +import { + buildBasicStyle, + buildMacrostratStyle, + toggleLineSymbols, +} from "@macrostrat/mapbox-styles"; import { getMapboxStyle, mergeStyles, removeMapLabels, - setMapPosition, } from "@macrostrat/mapbox-utils"; -import { useStoredState, useDarkMode } from "@macrostrat/ui-components"; +import { useDarkMode, useStoredState } from "@macrostrat/ui-components"; import mapboxgl from "mapbox-gl"; -import { useCallback, useEffect, useState, useMemo } from "react"; -import { SETTINGS } from "~/settings"; -import { FloatingNavbar } from "@macrostrat/map-interface"; +import { useCallback, useMemo, useState } from "react"; +import { ParentRouteButton } from "~/components/map-navbar"; import { useAppActions } from "../../../pages/map/map-interface/app-state"; -import { LocationPanel } from "@macrostrat/map-interface"; import { MapAreaContainer } from "../../../pages/map/map-interface/map-page"; -import { PanelCard } from "../../../pages/map/map-interface/map-page/menu"; import { getBaseMapStyle } from "../../../pages/map/map-interface/map-page/map-view"; -import { MapLoadingButton } from "@macrostrat/map-interface"; -import { - toggleLineSymbols, - buildMacrostratStyle, - buildBasicStyle, -} from "@macrostrat/mapbox-styles"; -import { MapView, MapMarker } from "@macrostrat/map-interface"; -import { - FeaturePanel, - FeatureSelectionHandler, - TileInfo, -} from "@macrostrat/map-interface"; -import { TileExtentLayer } from "@macrostrat/map-interface"; -import { useMapStatus } from "@macrostrat/mapbox-react"; +import { PanelCard } from "../../../pages/map/map-interface/map-page/menu"; import styles from "../main.module.styl"; import { useMapStyle } from "./utils"; -import { DevMapPage } from "@macrostrat/map-interface"; -import { ParentRouteButton } from "~/components/map-navbar"; export enum MacrostratVectorTileset { Carto = "carto", @@ -52,7 +55,7 @@ export enum MacrostratRasterTileset { export const h = hyper.styled(styles); const _macrostratStyle = buildMacrostratStyle({ - tileserverDomain: SETTINGS.burwellTileDomain, + tileserverDomain: burwellTileDomain, }) as mapboxgl.Style; function isStateValid(state) { @@ -104,7 +107,7 @@ export function VectorMapInspectorPage({ if ( bypassCache && resourceType === "Tile" && - url.startsWith(SETTINGS.burwellTileDomain) + url.startsWith(burwellTileDomain) ) { return { url: url + "?cache=bypass", @@ -143,7 +146,7 @@ export function VectorMapInspectorPage({ DevMapPage, { headerElement, - mapboxToken: SETTINGS.mapboxAccessToken, + mapboxToken: mapboxAccessToken, title: title ?? tileset, overlayStyle: _overlayStyle, transformRequest, @@ -397,5 +400,5 @@ function LineSymbolManager({ showLineSymbols }) { return null; } -export * from "./raster-map"; export * from "./catalog"; +export * from "./raster-map"; diff --git a/src/index.ts b/src/index.ts deleted file mode 100644 index 4dde05d2..00000000 --- a/src/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import "@blueprintjs/core/lib/css/blueprint.css"; -import "./styles/padding.css"; -import { FocusStyleManager } from "@blueprintjs/core"; - -import h from "@macrostrat/hyper"; -import { Page } from "./pages/map/map-interface"; - -FocusStyleManager.onlyShowFocusOnTabs(); - -import { createRoot } from "react-dom/client"; - -const root = createRoot(document.getElementById("app-container")); - -// Render the application -root.render(h(Page)); diff --git a/src/main.d.ts b/src/main.d.ts new file mode 100644 index 00000000..b73877bf --- /dev/null +++ b/src/main.d.ts @@ -0,0 +1,2 @@ +// Typings for import.meta.env +import "vite/client"; diff --git a/src/pages/column/@id/+onBeforeRender.ts b/src/pages/column/@id/+onBeforeRender.ts index 028d3b1b..839a9377 100644 --- a/src/pages/column/@id/+onBeforeRender.ts +++ b/src/pages/column/@id/+onBeforeRender.ts @@ -1,5 +1,5 @@ +import { apiV2Prefix } from "@macrostrat-web/settings"; import fetch from "node-fetch"; -import { apiV2Prefix } from "~/settings"; const apiAddress = apiV2Prefix + "/units"; diff --git a/src/pages/dev/paleo/paleo-map.ts b/src/pages/dev/paleo/paleo-map.ts index 0383e7e5..ff9f6218 100644 --- a/src/pages/dev/paleo/paleo-map.ts +++ b/src/pages/dev/paleo/paleo-map.ts @@ -1,4 +1,5 @@ import { HTMLSelect, Spinner, Switch } from "@blueprintjs/core"; +import { burwellTileDomain } from "@macrostrat-web/settings"; import h from "@macrostrat/hyper"; import { FeaturePanel, @@ -29,7 +30,6 @@ import { import mapboxgl from "mapbox-gl"; import { useCallback, useEffect, useMemo, useReducer, useState } from "react"; import { MacrostratVectorTileset } from "~/_legacy/map-dev/map-layers"; -import { SETTINGS } from "~/settings"; import { TimescalePanel } from "./timescale"; import "~/styles/global.styl"; @@ -229,7 +229,7 @@ export default function PaleoMap({ const plateModelId = model_id; const models: { id: string; max_age: number; min_age: number }[] = - useAPIResult(SETTINGS.burwellTileDomain + "/carto/rotation-models"); + useAPIResult(burwellTileDomain + "/carto/rotation-models"); useEffect(() => { if (models == null) return; diff --git a/src/pages/map/map-interface/app-state/handlers/fetch.ts b/src/pages/map/map-interface/app-state/handlers/fetch.ts index 57c66e51..f28eaeea 100644 --- a/src/pages/map/map-interface/app-state/handlers/fetch.ts +++ b/src/pages/map/map-interface/app-state/handlers/fetch.ts @@ -1,6 +1,6 @@ +import { SETTINGS, apiV2Prefix } from "@macrostrat-web/settings"; import axios from "axios"; import { joinURL } from "~/pages/map/map-interface/utils"; -import { SETTINGS, apiV2Prefix } from "~/settings"; import { ColumnGeoJSONRecord } from "../reducers"; import { UPDATE_FILTERED_COLUMNS } from "../reducers/filtered-columns"; diff --git a/src/pages/map/map-interface/app-state/handlers/filters.ts b/src/pages/map/map-interface/app-state/handlers/filters.ts index 47c8e878..6b659fb0 100644 --- a/src/pages/map/map-interface/app-state/handlers/filters.ts +++ b/src/pages/map/map-interface/app-state/handlers/filters.ts @@ -1,5 +1,5 @@ +import { apiV2Prefix } from "@macrostrat-web/settings"; import axios from "axios"; -import { apiV2Prefix } from "~/settings"; export const base = apiV2Prefix; diff --git a/src/pages/map/map-interface/app-state/handlers/index.ts b/src/pages/map/map-interface/app-state/handlers/index.ts index bf97ec63..40f7ed4b 100644 --- a/src/pages/map/map-interface/app-state/handlers/index.ts +++ b/src/pages/map/map-interface/app-state/handlers/index.ts @@ -1,6 +1,6 @@ import { push } from "@lagunovsky/redux-react-router"; +import { mapPagePrefix, routerBasename } from "@macrostrat-web/settings"; import axios from "axios"; -import { mapPagePrefix, routerBasename } from "~/settings"; import { AppAction, AppState } from "../reducers"; import { base, diff --git a/src/pages/map/map-interface/app-state/nav-hooks.ts b/src/pages/map/map-interface/app-state/nav-hooks.ts index 4beb510a..b7f81929 100644 --- a/src/pages/map/map-interface/app-state/nav-hooks.ts +++ b/src/pages/map/map-interface/app-state/nav-hooks.ts @@ -1,8 +1,8 @@ +import { mapPagePrefix, routerBasename } from "@macrostrat-web/settings"; +import classNames from "classnames"; import { useLocation, useNavigate } from "react-router"; import { useAppState } from "./hooks"; -import classNames from "classnames"; import { MenuPage } from "./reducers"; -import { routerBasename, mapPagePrefix } from "~/settings"; export function isDetailPanelRouteInternal(pathname: string) { /* Check if we're in a detail panel route from within the app. */ diff --git a/src/pages/map/map-interface/app-state/reducers/index.ts b/src/pages/map/map-interface/app-state/reducers/index.ts index bd6d1d36..f3e6a9f9 100644 --- a/src/pages/map/map-interface/app-state/reducers/index.ts +++ b/src/pages/map/map-interface/app-state/reducers/index.ts @@ -1,17 +1,16 @@ -import { createBrowserHistory } from "history"; -import { CoreAction, coreReducer } from "./core"; -import { contextPanelIsInitiallyOpen } from "../nav-hooks"; import { - createRouterReducer, RouterActions, + createRouterReducer, } from "@lagunovsky/redux-react-router"; -import { hashStringReducer } from "./hash-string"; +import { mapPagePrefix } from "@macrostrat-web/settings"; +import { createBrowserHistory } from "history"; import { matchPath } from "react-router"; -import { performanceReducer, PerformanceState } from "../../performance/core"; - -import { mapPagePrefix } from "~/settings"; +import { performanceReducer } from "../../performance/core"; +import { contextPanelIsInitiallyOpen } from "../nav-hooks"; +import { CoreAction, coreReducer } from "./core"; +import { hashStringReducer } from "./hash-string"; +import { AppAction, AppState, MenuAction, MenuState } from "./types"; export const browserHistory = createBrowserHistory(); -import { MenuState, AppState, AppAction, MenuAction } from "./types"; const routerReducer = createRouterReducer(browserHistory); @@ -143,9 +142,9 @@ export function setInfoMarkerPosition(state: AppState): AppState { export default appReducer; export * from "./core"; +export * from "./hash-string"; export * from "./map"; export * from "./types"; -export * from "./hash-string"; /* function overallReducer(state: AppState, action: Action): AppState { diff --git a/src/pages/map/map-interface/components/About.tsx b/src/pages/map/map-interface/components/About.tsx index 7e2ef6bf..ffc41c47 100644 --- a/src/pages/map/map-interface/components/About.tsx +++ b/src/pages/map/map-interface/components/About.tsx @@ -1,11 +1,9 @@ -import React from "react"; +import { AnchorButton } from "@blueprintjs/core"; +import { mapPagePrefix } from "@macrostrat-web/settings"; import hyper from "@macrostrat/hyper"; -import { NavLink, useNavigate } from "react-router-dom"; -import { Link } from "react-router-dom"; -import styles from "./about.module.styl"; import newGithubIssueUrl from "new-github-issue-url"; -import { AnchorButton } from "@blueprintjs/core"; -import { mapPagePrefix } from "~/settings"; +import { Link, NavLink, useNavigate } from "react-router-dom"; +import styles from "./about.module.styl"; const h = hyper.styled(styles); diff --git a/src/pages/map/map-interface/components/docs.ts b/src/pages/map/map-interface/components/docs.ts index 9fdc9528..8dc57f8c 100644 --- a/src/pages/map/map-interface/components/docs.ts +++ b/src/pages/map/map-interface/components/docs.ts @@ -1,11 +1,11 @@ -import hyper from "@macrostrat/hyper"; import { Alignment } from "@blueprintjs/core"; -import styles from "./docs.module.styl"; +import { routerBasename } from "@macrostrat-web/settings"; +import hyper from "@macrostrat/hyper"; +import classNames from "classnames"; import { useInView } from "react-intersection-observer"; import { HashLink } from "react-router-hash-link"; -import { routerBasename } from "~/settings"; -import classNames from "classnames"; import { joinURL } from "~/pages/map/map-interface/utils"; +import styles from "./docs.module.styl"; const h = hyper.styled(styles); diff --git a/src/pages/map/map-interface/components/elevation-chart/index.ts b/src/pages/map/map-interface/components/elevation-chart/index.ts index bc89121d..e5067302 100644 --- a/src/pages/map/map-interface/components/elevation-chart/index.ts +++ b/src/pages/map/map-interface/components/elevation-chart/index.ts @@ -13,7 +13,7 @@ import { useAppState, } from "~/pages/map/map-interface/app-state"; -import { apiV2Prefix } from "~/settings"; +import { apiV2Prefix } from "@macrostrat-web/settings"; import styles from "./main.module.styl"; const h = hyper.styled(styles); diff --git a/src/pages/map/map-interface/index.ts b/src/pages/map/map-interface/index.ts index 75e7f1f3..79d2b975 100644 --- a/src/pages/map/map-interface/index.ts +++ b/src/pages/map/map-interface/index.ts @@ -1,17 +1,17 @@ -import { Route, Routes } from "react-router-dom"; import { ReduxRouter } from "@lagunovsky/redux-react-router"; import h from "@macrostrat/hyper"; +import { Route, Routes } from "react-router-dom"; import "~/styles/global.styl"; import "./searchbar.styl"; import "./ui-components.styl"; -import { Provider } from "react-redux"; -import { createStore, compose, applyMiddleware } from "redux"; -import reducerStack, { Action, browserHistory, AppState } from "./app-state"; import { createRouterMiddleware } from "@lagunovsky/redux-react-router"; +import { mapPagePrefix } from "@macrostrat-web/settings"; +import { Provider } from "react-redux"; +import { applyMiddleware, compose, createStore } from "redux"; import { onDemand } from "~/_utils"; -import { mapPagePrefix } from "~/settings"; +import reducerStack, { Action, AppState, browserHistory } from "./app-state"; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; diff --git a/src/pages/map/map-interface/map-page/index.ts b/src/pages/map/map-interface/map-page/index.ts index f3ce0639..e22384e0 100644 --- a/src/pages/map/map-interface/map-page/index.ts +++ b/src/pages/map/map-interface/map-page/index.ts @@ -1,20 +1,24 @@ -import { Suspense, useEffect, useCallback, useRef } from "react"; +import { Suspense, useCallback, useEffect, useRef } from "react"; // Import other components -import hyper from "@macrostrat/hyper"; -import Searchbar from "../components/navbar"; import { Spinner } from "@blueprintjs/core"; -import { useSelector } from "react-redux"; import loadable from "@loadable/component"; -import { useAppState, useAppActions } from "../app-state"; -import styles from "./main.module.styl"; -import { useTransition } from "transition-hook"; -import { useContextPanelOpen, useContextClass } from "../app-state"; +import { mapPagePrefix } from "@macrostrat-web/settings"; +import hyper from "@macrostrat/hyper"; import { MapAreaContainer } from "@macrostrat/map-interface"; -import { Routes, Route, useParams } from "react-router-dom"; import classNames from "classnames"; -import { MenuPage } from "./menu"; -import { mapPagePrefix } from "~/settings"; +import { useSelector } from "react-redux"; +import { Route, Routes, useParams } from "react-router-dom"; +import { useTransition } from "transition-hook"; +import { + useAppActions, + useAppState, + useContextClass, + useContextPanelOpen, +} from "../app-state"; +import Searchbar from "../components/navbar"; +import styles from "./main.module.styl"; import MapContainer from "./map-view"; +import { MenuPage } from "./menu"; const ElevationChart = loadable(() => import("../components/elevation-chart")); const InfoDrawer = loadable(() => import("../components/info-drawer")); diff --git a/src/pages/map/map-interface/map-page/map-styles/map-sources.ts b/src/pages/map/map-interface/map-page/map-styles/map-sources.ts index 1690dd00..2537f59c 100644 --- a/src/pages/map/map-interface/map-page/map-styles/map-sources.ts +++ b/src/pages/map/map-interface/map-page/map-styles/map-sources.ts @@ -1,7 +1,7 @@ +import { apiV2Prefix } from "@macrostrat-web/settings"; import { useMapElement } from "@macrostrat/mapbox-react"; import { useAPIResult } from "@macrostrat/ui-components"; import { useEffect } from "react"; -import { apiV2Prefix } from "~/settings"; const sourceMapStyle = { version: 8, diff --git a/src/pages/map/map-interface/map-page/map-styles/overlay.ts b/src/pages/map/map-interface/map-page/map-styles/overlay.ts index 7c36805e..bec73eda 100644 --- a/src/pages/map/map-interface/map-page/map-styles/overlay.ts +++ b/src/pages/map/map-interface/map-page/map-styles/overlay.ts @@ -1,4 +1,4 @@ -import { apiV2Prefix } from "~/settings"; +import { apiV2Prefix } from "@macrostrat-web/settings"; export const overlayStyle = { version: 8, diff --git a/src/pages/map/map-interface/map-page/map-view/filter-helpers.ts b/src/pages/map/map-interface/map-page/map-view/filter-helpers.ts index ebda8cd2..a7b83442 100644 --- a/src/pages/map/map-interface/map-page/map-view/filter-helpers.ts +++ b/src/pages/map/map-interface/map-page/map-view/filter-helpers.ts @@ -1,9 +1,9 @@ +import { SETTINGS } from "@macrostrat-web/settings"; import { FeatureCollection, Point } from "geojson"; import { FilterData, IntervalFilterData, } from "~/pages/map/map-interface/app-state/handlers/filters"; -import { SETTINGS } from "~/settings"; export function getExpressionForFilters( filters: FilterData[] diff --git a/src/pages/map/map-interface/map-page/map-view/index.ts b/src/pages/map/map-interface/map-page/map-view/index.ts index 9223ac3b..b3b64fd2 100644 --- a/src/pages/map/map-interface/map-page/map-view/index.ts +++ b/src/pages/map/map-interface/map-page/map-view/index.ts @@ -1,19 +1,21 @@ +import { SETTINGS } from "@macrostrat-web/settings"; import hyper from "@macrostrat/hyper"; import { MapMarker, MapView } from "@macrostrat/map-interface"; import { - getFocusState, PositionFocusState, + getFocusState, useMapLabelVisibility, + useMapPosition, useMapRef, useMapStatus, - useMapPosition, } from "@macrostrat/mapbox-react"; -import { MacrostratLineSymbolManager } from "@macrostrat/mapbox-styles"; import { - getMapboxStyle, - mergeStyles, - setMapPosition, -} from "@macrostrat/mapbox-utils"; + MacrostratLineSymbolManager, + MapSourcesLayer, + applyAgeModelStyles, + buildMacrostratStyle, +} from "@macrostrat/mapbox-styles"; +import { getMapboxStyle, mergeStyles } from "@macrostrat/mapbox-utils"; import { useInDarkMode } from "@macrostrat/ui-components"; import mapboxgl from "mapbox-gl"; import { useCallback, useEffect, useMemo, useState } from "react"; @@ -23,18 +25,12 @@ import { useAppState, } from "~/pages/map/map-interface/app-state"; import styles from "../main.module.styl"; -import { applyAgeModelStyles } from "@macrostrat/mapbox-styles"; -import { - buildMacrostratStyle, - MapSourcesLayer, -} from "@macrostrat/mapbox-styles"; import { CrossSectionLine } from "./cross-section"; import { FlyToPlaceManager, HoveredFeatureManager, MacrostratLayerManager, } from "./map"; -import { SETTINGS } from "~/settings"; const h = hyper.styled(styles); diff --git a/src/pages/map/map-interface/map-page/map-view/utils.ts b/src/pages/map/map-interface/map-page/map-view/utils.ts index 2183e159..a514ccf1 100644 --- a/src/pages/map/map-interface/map-page/map-view/utils.ts +++ b/src/pages/map/map-interface/map-page/map-view/utils.ts @@ -1,25 +1,23 @@ -import { forwardRef, useRef, useState, useCallback } from "react"; -import { - useAppState, - MapLayer, - PositionFocusState, -} from "~/pages/map/map-interface/app-state"; -import { GeolocateControl } from "mapbox-gl"; +import { SETTINGS } from "@macrostrat-web/settings"; import hyper from "@macrostrat/hyper"; -import { useEffect } from "react"; -import styles from "../main.module.styl"; import { - useMapRef, CompassControl, GlobeControl, - ThreeDControl, MapControlWrapper, + ThreeDControl, + useMapRef, } from "@macrostrat/mapbox-react"; -import classNames from "classnames"; import { mapViewInfo } from "@macrostrat/mapbox-utils"; -import { SETTINGS } from "~/settings"; -import mapboxgl from "mapbox-gl"; +import classNames from "classnames"; +import mapboxgl, { GeolocateControl } from "mapbox-gl"; +import { useEffect, useRef } from "react"; +import { + MapLayer, + PositionFocusState, + useAppState, +} from "~/pages/map/map-interface/app-state"; import { LinkButton } from "~/pages/map/map-interface/components/buttons"; +import styles from "../main.module.styl"; const h = hyper.styled(styles); diff --git a/src/pages/map/map-interface/map-page/menu.ts b/src/pages/map/map-interface/map-page/menu.ts index bd03ec23..36448619 100644 --- a/src/pages/map/map-interface/map-page/menu.ts +++ b/src/pages/map/map-interface/map-page/menu.ts @@ -1,42 +1,43 @@ -import hyper from "@macrostrat/hyper"; -import ColumnIcon from "../components/icons/ColumnIcon"; -import LineIcon from "../components/icons/LineIcon"; -import ElevationIcon from "../components/icons/ElevationIcon"; -import FossilIcon from "../components/icons/FossilIcon"; -import BedrockIcon from "../components/icons/BedrockIcon"; import { + Alignment, Button, ButtonGroup, - Alignment, ButtonProps, + Card, NonIdealState, } from "@blueprintjs/core"; -import { CloseableCard } from "../components/closeable-card"; +import loadable from "@loadable/component"; +import { mapPagePrefix } from "@macrostrat-web/settings"; +import hyper from "@macrostrat/hyper"; +import classNames from "classnames"; +import { useEffect, useState } from "react"; +import { useLocation } from "react-router"; +import { useTransition } from "transition-hook"; +import useBreadcrumbs from "use-react-router-breadcrumbs"; +import Changelog from "../../changelog.mdx"; import { - useAppActions, - useSearchState, MapLayer, - useHashNavigate, MenuPage, + useAppActions, useAppState, + useHashNavigate, + useSearchState, } from "../app-state"; +import { + isDetailPanelRouteInternal, + useCurrentPage, +} from "../app-state/nav-hooks"; +import { LayerButton, LinkButton, ListButton } from "../components/buttons"; +import { CloseableCard } from "../components/closeable-card"; +import BedrockIcon from "../components/icons/BedrockIcon"; +import ColumnIcon from "../components/icons/ColumnIcon"; +import ElevationIcon from "../components/icons/ElevationIcon"; +import FossilIcon from "../components/icons/FossilIcon"; +import LineIcon from "../components/icons/LineIcon"; import { SearchResults } from "../components/navbar"; -import classNames from "classnames"; -import styles from "./main.module.styl"; -import loadable from "@loadable/component"; import UsageText from "../usage.mdx"; -import { Routes, Route } from "react-router-dom"; -import Changelog from "../../changelog.mdx"; -import { useMatch, useLocation } from "react-router"; -import { useTransition } from "transition-hook"; -import { useCurrentPage } from "../app-state/nav-hooks"; -import useBreadcrumbs from "use-react-router-breadcrumbs"; -import { isDetailPanelRouteInternal } from "../app-state/nav-hooks"; -import { SettingsPanel, ExperimentsPanel, ThemeButton } from "./settings-panel"; -import { useState, useEffect } from "react"; -import { LinkButton, LayerButton, ListButton } from "../components/buttons"; -import { routerBasename, mapPagePrefix } from "~/settings"; -import { Card } from "@blueprintjs/core"; +import styles from "./main.module.styl"; +import { ExperimentsPanel, SettingsPanel } from "./settings-panel"; function ChangelogPanel() { return h("div.bp4-text.text-panel", [h(Changelog)]); diff --git a/src/pages/maps/+onBeforeRender.ts b/src/pages/maps/+onBeforeRender.ts index 56191d4a..63107635 100644 --- a/src/pages/maps/+onBeforeRender.ts +++ b/src/pages/maps/+onBeforeRender.ts @@ -1,5 +1,5 @@ +import { apiV2Prefix } from "@macrostrat-web/settings"; import fetch from "node-fetch"; -import { apiV2Prefix } from "~/settings"; const apiAddress = apiV2Prefix + "/defs/sources"; diff --git a/src/pages/maps/@id/+onBeforeRender.ts b/src/pages/maps/@id/+onBeforeRender.ts index 73db4571..74941483 100644 --- a/src/pages/maps/@id/+onBeforeRender.ts +++ b/src/pages/maps/@id/+onBeforeRender.ts @@ -1,5 +1,5 @@ +import { apiV2Prefix } from "@macrostrat-web/settings"; import { PageContextBuiltInServer } from "vike/types"; -import { apiV2Prefix } from "~/settings"; const apiAddress = apiV2Prefix + "/defs/sources"; diff --git a/src/pages/maps/@id/edit/+Page.ts b/src/pages/maps/@id/edit/+Page.ts index 6a8d82da..4a1414ed 100644 --- a/src/pages/maps/@id/edit/+Page.ts +++ b/src/pages/maps/@id/edit/+Page.ts @@ -1,7 +1,7 @@ +import { apiV2Prefix } from "@macrostrat-web/settings"; import h from "@macrostrat/hyper"; import { PageContextBuiltInServer } from "vike/types"; import { ClientOnly } from "~/renderer/client-only"; -import { apiV2Prefix } from "~/settings"; const apiAddress = apiV2Prefix + "/defs/sources"; diff --git a/src/pages/maps/@id/edit/map-interface.ts b/src/pages/maps/@id/edit/map-interface.ts index d4ae0fc1..a8798ecb 100644 --- a/src/pages/maps/@id/edit/map-interface.ts +++ b/src/pages/maps/@id/edit/map-interface.ts @@ -1,4 +1,5 @@ import { Radio, RadioGroup, Spinner } from "@blueprintjs/core"; +import { SETTINGS } from "@macrostrat-web/settings"; import hyper from "@macrostrat/hyper"; import { MapAreaContainer, @@ -13,7 +14,6 @@ import boundingBox from "@turf/bbox"; import { LngLatBoundsLike } from "mapbox-gl"; import { useEffect, useMemo, useState } from "react"; import { MapNavbar } from "~/components/map-navbar"; -import { SETTINGS } from "~/settings"; import "~/styles/global.styl"; import { s3Address, tempImageIndex } from "../../raster-images"; import styles from "./main.module.sass"; diff --git a/src/pages/maps/@id/map-interface.ts b/src/pages/maps/@id/map-interface.ts index f371b96f..f4b0464c 100644 --- a/src/pages/maps/@id/map-interface.ts +++ b/src/pages/maps/@id/map-interface.ts @@ -5,6 +5,7 @@ import { RadioGroup, Spinner, } from "@blueprintjs/core"; +import { SETTINGS, apiV2Prefix } from "@macrostrat-web/settings"; import hyper from "@macrostrat/hyper"; import { DetailPanelStyle, @@ -26,7 +27,6 @@ import boundingBox from "@turf/bbox"; import { LngLatBoundsLike } from "mapbox-gl"; import { useEffect, useMemo, useState } from "react"; import { MapNavbar } from "~/components/map-navbar"; -import { SETTINGS, apiV2Prefix } from "~/settings"; import "~/styles/global.styl"; import { s3Address, tempImageIndex } from "../raster-images"; import styles from "./main.module.sass"; diff --git a/src/settings.ts b/src/settings.ts deleted file mode 100644 index 6967a145..00000000 --- a/src/settings.ts +++ /dev/null @@ -1,33 +0,0 @@ -export const SETTINGS = { - darkMapURL: - "mapbox://styles/jczaplewski/cl5uoqzzq003614o6url9ou9z?optimize=true", - baseMapURL: - "mapbox://styles/jczaplewski/clatdbkw4002q14lov8zx0bm0?optimize=true", - satelliteMapURL: - "mapbox://styles/jczaplewski/cl51esfdm000e14mq51erype3?optimize=true", - // TODO: make these configurable with environment variables - // burwellTileDomain: - // window.location.hostname === "localhost" - // ? "https://tiles.macrostrat.org" - // : window.location.hostname === "dev.macrostrat.org" - // ? "https://devtiles.macrostrat.org" - // : "https://tiles.macrostrat.org", - // apiDomain: - // window.location.hostname === "localhost" - // ? "https://dev.macrostrat.org" - // : `https://${window.location.hostname}`, - // burwellTileDomain: "https://devtiles.macrostrat.org", - // apiDomain: "https://dev.macrostrat.org", - burwellTileDomain: import.meta.env.VITE_MACROSTRAT_TILESERVER_DOMAIN, - apiDomain: import.meta.env.VITE_MACROSTRAT_API_DOMAIN, - gddDomain: "https://xdd.wisc.edu", - pbdbDomain: "https://paleobiodb.org", - mapboxAccessToken: import.meta.env.VITE_MAPBOX_API_TOKEN, -}; - -export const apiV2Prefix = - import.meta.env.VITE_MACROSTRAT_API_V2 ?? SETTINGS.apiDomain + "/api/v2"; - -export const mapPagePrefix = "/map"; - -export const routerBasename = import.meta.env.BASE_URL + "map"; diff --git a/src/weaver/index.ts b/src/weaver/index.ts index 87eb64da..9b1c65f8 100644 --- a/src/weaver/index.ts +++ b/src/weaver/index.ts @@ -6,8 +6,8 @@ import h from "@macrostrat/hyper"; import { Button, MenuItem, Spinner } from "@blueprintjs/core"; import { Select2 } from "@blueprintjs/select"; +import { SETTINGS } from "@macrostrat-web/settings"; import { - buildInspectorStyle, FeatureProperties, FloatingNavbar, LocationPanel, @@ -16,10 +16,11 @@ import { MapMarker, MapView, PanelCard, + buildInspectorStyle, } from "@macrostrat/map-interface"; -import { useMapRef, useMapStatus } from "@macrostrat/mapbox-react"; +import { useMapRef } from "@macrostrat/mapbox-react"; import { buildMacrostratStyle } from "@macrostrat/mapbox-styles"; -import { MapPosition, mergeStyles } from "@macrostrat/mapbox-utils"; +import { mergeStyles } from "@macrostrat/mapbox-utils"; import { DarkModeButton, Spacer, @@ -28,7 +29,6 @@ import { } from "@macrostrat/ui-components"; import mapboxgl from "mapbox-gl"; import { useCallback, useEffect, useState } from "react"; -import { SETTINGS } from "~/settings"; export function WeaverPage() { return h( diff --git a/tsconfig.json b/tsconfig.json index 5e2832b5..7fea62d8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,6 +12,7 @@ "typeRoots": ["node_modules/@types"], "skipLibCheck": true, "esModuleInterop": true, + "types": ["vite/client"], "paths": { "~/*": ["./src/*"], "@macrostrat/cesium-vector-provider": [ @@ -38,11 +39,11 @@ "@macrostrat/map-interface": [ "deps/web-components/packages/map-interface/src" ], - "@macrostrat/cesium-viewer": ["deps/cesium-viewer/src"] + "@macrostrat/cesium-viewer": ["deps/cesium-viewer/src"], + "@macrostrat-web/settings": ["deps/packages/settings"] } }, "include": ["src", "packages/globe-dev/globe", "packages/*/src"], - "types": ["vite/client"], "ts-node": { "transpileOnly": true, "esm": true diff --git a/yarn.lock b/yarn.lock index a8184d59..8135704d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3202,6 +3202,12 @@ __metadata: languageName: unknown linkType: soft +"@macrostrat-web/settings@workspace:*, @macrostrat-web/settings@workspace:packages/settings": + version: 0.0.0-use.local + resolution: "@macrostrat-web/settings@workspace:packages/settings" + languageName: unknown + linkType: soft + "@macrostrat/api-types@workspace:deps/web-components/packages/api-types": version: 0.0.0-use.local resolution: "@macrostrat/api-types@workspace:deps/web-components/packages/api-types" @@ -3550,6 +3556,7 @@ __metadata: d3-array: "npm:^3.2.4" d3-format: "npm:^3.1.0" mapbox-gl: "npm:^2.15.0" + query-string: "npm:^8.1.0" transition-hook: "npm:^1.5.2" underscore: "npm:^1.13.6" use-resize-observer: "npm:^9.1.0" @@ -3728,6 +3735,7 @@ __metadata: "@macrostrat-web/data-sheet-test": "workspace:*" "@macrostrat-web/globe": "workspace:*" "@macrostrat-web/security": "workspace:*" + "@macrostrat-web/settings": "workspace:*" "@macrostrat/api-utils": "workspace:*" "@macrostrat/api-views": "workspace:*" "@macrostrat/column-components": "workspace:*" @@ -11931,6 +11939,13 @@ __metadata: languageName: node linkType: hard +"decode-uri-component@npm:^0.4.1": + version: 0.4.1 + resolution: "decode-uri-component@npm:0.4.1" + checksum: 74eec26f7bec3767164e37d526ef19bc1214cb0bbeeeea1c4f0ceb79299e5c38d3ba734e7243d829842aa140f24e5d020f54cc25b17c7082461c8eead8a72ce3 + languageName: node + linkType: hard + "decompress-response@npm:^3.3.0": version: 3.3.0 resolution: "decompress-response@npm:3.3.0" @@ -13923,6 +13938,13 @@ __metadata: languageName: node linkType: hard +"filter-obj@npm:^5.1.0": + version: 5.1.0 + resolution: "filter-obj@npm:5.1.0" + checksum: 8f6dab6d8d8855f686e8cc6be289bbbd64a80be52c660124e36e982f78017cf5dae7de95f79ec167fbf62101d6aab93067a3105ae8f56251785a721e678d6b07 + languageName: node + linkType: hard + "finalhandler@npm:1.2.0": version: 1.2.0 resolution: "finalhandler@npm:1.2.0" @@ -24286,6 +24308,17 @@ __metadata: languageName: node linkType: hard +"query-string@npm:^8.1.0": + version: 8.1.0 + resolution: "query-string@npm:8.1.0" + dependencies: + decode-uri-component: "npm:^0.4.1" + filter-obj: "npm:^5.1.0" + split-on-first: "npm:^3.0.0" + checksum: f693d77bc3e8c5cb7bda9c928e9c625bf8adacb1ebd63fd97c9ffd3f65c7df0cfc86aebf92588b5caddccfcb379bc7f4d81fcc4e64c64e4e75eabaca823c2293 + languageName: node + linkType: hard + "querystringify@npm:^2.1.1": version: 2.2.0 resolution: "querystringify@npm:2.2.0" @@ -27189,6 +27222,13 @@ __metadata: languageName: node linkType: hard +"split-on-first@npm:^3.0.0": + version: 3.0.0 + resolution: "split-on-first@npm:3.0.0" + checksum: 75dc27ecbac65cfbeab9a3b90cf046307220192d3d7a30e46aa0f19571cc9b4802aac813f3de2cc9b16f2e46aae72f275659b5d2614bb5369c77724d739e5f73 + languageName: node + linkType: hard + "split-string@npm:^3.0.1, split-string@npm:^3.0.2": version: 3.1.0 resolution: "split-string@npm:3.1.0" From 1efc0865a6010f5dcbd06c55fe90595c90cab1c8 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Mon, 22 Jan 2024 00:37:17 -0600 Subject: [PATCH 4/8] Moved changelog into map interface package --- src/pages/map/{ => map-interface}/changelog.mdx | 2 +- src/pages/map/map-interface/map-page/menu.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/pages/map/{ => map-interface}/changelog.mdx (99%) diff --git a/src/pages/map/changelog.mdx b/src/pages/map/map-interface/changelog.mdx similarity index 99% rename from src/pages/map/changelog.mdx rename to src/pages/map/map-interface/changelog.mdx index 9bc1a4c9..c03cb57a 100644 --- a/src/pages/map/changelog.mdx +++ b/src/pages/map/map-interface/changelog.mdx @@ -3,7 +3,7 @@ import { InternalLink, DocsVideo, DocsMedia, -} from "./map-interface/components/docs"; +} from "./components/docs"; diff --git a/src/pages/map/map-interface/map-page/menu.ts b/src/pages/map/map-interface/map-page/menu.ts index 36448619..f2d9a218 100644 --- a/src/pages/map/map-interface/map-page/menu.ts +++ b/src/pages/map/map-interface/map-page/menu.ts @@ -14,7 +14,6 @@ import { useEffect, useState } from "react"; import { useLocation } from "react-router"; import { useTransition } from "transition-hook"; import useBreadcrumbs from "use-react-router-breadcrumbs"; -import Changelog from "../../changelog.mdx"; import { MapLayer, MenuPage, @@ -27,6 +26,7 @@ import { isDetailPanelRouteInternal, useCurrentPage, } from "../app-state/nav-hooks"; +import Changelog from "../changelog.mdx"; import { LayerButton, LinkButton, ListButton } from "../components/buttons"; import { CloseableCard } from "../components/closeable-card"; import BedrockIcon from "../components/icons/BedrockIcon"; From 8cd3240afb5fb22f1caa2f30e12b637dd2ddbe7a Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Mon, 22 Jan 2024 00:55:57 -0600 Subject: [PATCH 5/8] Removed unused dependencies --- package.json | 11 +---------- yarn.lock | 32 +++----------------------------- 2 files changed, 4 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index e58d2d68..2a281a6c 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "build": "vite build", "server": "node --env-file=.env ./server/index.js", "server:dev": "yarn run server", - "server:prod": "cross-env NODE_ENV=production npm run server" + "server:prod": "NODE_ENV=production npm run server" }, "workspaces": [ "deps/web-components/packages/*", @@ -66,9 +66,6 @@ "@macrostrat/style-system": "workspace:*", "@macrostrat/timescale": "workspace:*", "@macrostrat/ui-components": "workspace:*", - "@mapbox/point-geometry": "^0.1.0", - "@mapbox/tilebelt": "^1.0.2", - "@mapbox/vector-tile": "^1.3.1", "@turf/bbox": "^6.5.0", "@turf/boolean-contains": "^6.5.0", "@turf/buffer": "^6.5.0", @@ -89,7 +86,6 @@ "classnames": "^2.2.6", "compression": "^1.7.4", "cookie-parser": "^1.4.6", - "cross-env": "^7.0.3", "d3-array": "^3.1.1", "d3-axis": "^3.0.0", "d3-format": "^1.4.4", @@ -97,17 +93,13 @@ "d3-scale": "^4.0.2", "d3-selection": "^1.0.0", "d3-shape": "^3.2.0", - "esprima": "^4.0.1", "express": "^4.18.2", "history": "^5.3.0", "immutability-helper": "^3.1.1", "jose": "^5.1.2", "mapbox-gl": "^2.15.0", "new-github-issue-url": "^1.0.0", - "pbf": "^3.2.1", - "prop-types": "^15.6.0", "react": "^18.2.0", - "react-animate-height": "^0.10.9", "react-cookie": "^3.0.4", "react-dom": "^18.2.0", "react-intersection-observer": "^9.4.3", @@ -123,7 +115,6 @@ "supports-color": "^9.4.0", "topojson-client": "^3.0.0", "transition-hook": "^1.5.2", - "ts-node": "^10.9.1", "use-debounce": "^9.0.4", "use-react-router-breadcrumbs": "^3.2.1", "use-resize-observer": "^9.1.0", diff --git a/yarn.lock b/yarn.lock index 8135704d..e17de882 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3749,9 +3749,6 @@ __metadata: "@macrostrat/style-system": "workspace:*" "@macrostrat/timescale": "workspace:*" "@macrostrat/ui-components": "workspace:*" - "@mapbox/point-geometry": "npm:^0.1.0" - "@mapbox/tilebelt": "npm:^1.0.2" - "@mapbox/vector-tile": "npm:^1.3.1" "@mdx-js/rollup": "npm:^2.3.0" "@turf/bbox": "npm:^6.5.0" "@turf/boolean-contains": "npm:^6.5.0" @@ -3776,7 +3773,6 @@ __metadata: classnames: "npm:^2.2.6" compression: "npm:^1.7.4" cookie-parser: "npm:^1.4.6" - cross-env: "npm:^7.0.3" d3-array: "npm:^3.1.1" d3-axis: "npm:^3.0.0" d3-format: "npm:^1.4.4" @@ -3784,18 +3780,14 @@ __metadata: d3-scale: "npm:^4.0.2" d3-selection: "npm:^1.0.0" d3-shape: "npm:^3.2.0" - esprima: "npm:^4.0.1" express: "npm:^4.18.2" history: "npm:^5.3.0" immutability-helper: "npm:^3.1.1" jose: "npm:^5.1.2" mapbox-gl: "npm:^2.15.0" new-github-issue-url: "npm:^1.0.0" - pbf: "npm:^3.2.1" prettier: "npm:^2.7.1" - prop-types: "npm:^15.6.0" react: "npm:^18.2.0" - react-animate-height: "npm:^0.10.9" react-cookie: "npm:^3.0.4" react-dom: "npm:^18.2.0" react-intersection-observer: "npm:^9.4.3" @@ -3813,7 +3805,6 @@ __metadata: supports-color: "npm:^9.4.0" topojson-client: "npm:^3.0.0" transition-hook: "npm:^1.5.2" - ts-node: "npm:^10.9.1" typescript: "npm:^5.1.6" use-debounce: "npm:^9.0.4" use-react-router-breadcrumbs: "npm:^3.2.1" @@ -6979,7 +6970,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*, @types/react@npm:>=15, @types/react@npm:^18.2.20": +"@types/react@npm:*, @types/react@npm:^18.2.20": version: 18.2.22 resolution: "@types/react@npm:18.2.22" dependencies: @@ -10943,7 +10934,7 @@ __metadata: languageName: node linkType: hard -"cross-env@npm:^7.0.2, cross-env@npm:^7.0.3": +"cross-env@npm:^7.0.2": version: 7.0.3 resolution: "cross-env@npm:7.0.3" dependencies: @@ -24446,23 +24437,6 @@ __metadata: languageName: node linkType: hard -"react-animate-height@npm:^0.10.9": - version: 0.10.10 - resolution: "react-animate-height@npm:0.10.10" - dependencies: - "@types/react": "npm:>=15" - classnames: "npm:^2.2.5" - prop-types: "npm:^15.5.8" - peerDependencies: - react: ">=15.6.2" - react-dom: ">=15.6.2" - dependenciesMeta: - "@types/react": - optional: true - checksum: 18821eaef63af1ec01998468fc568ea75e6d14c187668196a9f521c65f872a2cb1487ce7c2b7e9b7b5d81bfa1f96f5f221165dda538a670dc251e296fe502e51 - languageName: node - linkType: hard - "react-base16-styling@npm:^0.8.2": version: 0.8.2 resolution: "react-base16-styling@npm:0.8.2" @@ -28574,7 +28548,7 @@ __metadata: languageName: node linkType: hard -"ts-node@npm:^10.7.0, ts-node@npm:^10.8.1, ts-node@npm:^10.9.1": +"ts-node@npm:^10.7.0, ts-node@npm:^10.8.1": version: 10.9.1 resolution: "ts-node@npm:10.9.1" dependencies: From 53c0bdc7a0395b071857e73ef48a36f9277373de Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Mon, 22 Jan 2024 01:21:08 -0600 Subject: [PATCH 6/8] Attempt to deduplicate styles --- .../edit/components/cell/editor-popover.ts | 12 +- .../components/cell/interval-selection.ts | 249 +++++++++------- src/pages/maps/@id/edit/table-menu.ts | 265 ++++++++++-------- src/renderer/page-shell.ts | 10 +- src/styles/blueprint-core.ts | 1 + src/styles/blueprint-select.ts | 2 + 6 files changed, 303 insertions(+), 236 deletions(-) create mode 100644 src/styles/blueprint-core.ts create mode 100644 src/styles/blueprint-select.ts diff --git a/src/pages/maps/@id/edit/components/cell/editor-popover.ts b/src/pages/maps/@id/edit/components/cell/editor-popover.ts index f91ef36b..d5b8bae2 100644 --- a/src/pages/maps/@id/edit/components/cell/editor-popover.ts +++ b/src/pages/maps/@id/edit/components/cell/editor-popover.ts @@ -1,19 +1,9 @@ -import {Button, MenuItem} from "@blueprintjs/core"; -import {Select2, ItemRenderer} from "@blueprintjs/select"; -import {EditableCell2Props} from "@blueprintjs/table"; -import React, {useEffect, useMemo} from "react"; - // @ts-ignore import hyper from "@macrostrat/hyper"; -import "@blueprintjs/core/lib/css/blueprint.css" import "@blueprintjs/select/lib/css/blueprint-select.css"; import styles from "../../edit-table.module.sass"; - const h = hyper.styled(styles); - -export const EditorPopover = () => { - -} +export const EditorPopover = () => {}; diff --git a/src/pages/maps/@id/edit/components/cell/interval-selection.ts b/src/pages/maps/@id/edit/components/cell/interval-selection.ts index accb061b..63f08488 100644 --- a/src/pages/maps/@id/edit/components/cell/interval-selection.ts +++ b/src/pages/maps/@id/edit/components/cell/interval-selection.ts @@ -1,122 +1,159 @@ -import {Button, MenuItem} from "@blueprintjs/core"; -import { Select2, ItemRenderer, ItemPredicate } from "@blueprintjs/select"; -import {EditableCell2Props, EditableCell2, Cell} from "@blueprintjs/table"; -import React, {useEffect, useMemo} from "react"; +import { Button, MenuItem } from "@blueprintjs/core"; +import { ItemPredicate, ItemRenderer, Select2 } from "@blueprintjs/select"; +import { Cell, EditableCell2Props } from "@blueprintjs/table"; +import React, { useMemo } from "react"; // @ts-ignore import hyper from "@macrostrat/hyper"; -import "@blueprintjs/core/lib/css/blueprint.css" -import "@blueprintjs/select/lib/css/blueprint-select.css"; +import "~/styles/blueprint-select"; import styles from "../../edit-table.module.sass"; - const h = hyper.styled(styles); interface Timescale { - timescale_id: number - name: string + timescale_id: number; + name: string; } export interface Interval { - int_id: number - name: string - abbrev: string - t_age: number - b_age: number - int_type: string - timescales: Timescale[] - color: string -} - -const IntervalOption: ItemRenderer = (interval: Interval, { handleClick, handleFocus, modifiers }) => { - - if (interval == null) { - return h(MenuItem, { - shouldDismissPopover: true, - active: modifiers.active, - disabled: modifiers.disabled, - key: "", - label: "", - onClick: handleClick, - onFocus: handleFocus, - text: "", - roleStructure:"listoption" - }, []) - } - - return h(MenuItem, { - style: {backgroundColor: interval.color}, - shouldDismissPopover: true, - active: modifiers.active, - disabled: modifiers.disabled, - key: interval.int_id, - label: interval.int_id.toString(), - onClick: handleClick, - onFocus: handleFocus, - text: interval.name, - roleStructure:"listoption" - }, []) -} - - -const IntervalSelection = ({value, onConfirm, intent, intervals, ...props} : EditableCell2Props & {intervals: Interval[]}) => { - - const [localValue, setLocalValue] = React.useState(value); - - const filterInterval: ItemPredicate = (query, interval) => { - - if(interval?.name == undefined){ - return false - } - return interval.name.toLowerCase().indexOf(query.toLowerCase()) >= 0; - } - - const interval = useMemo(() => { - - let interval = null - if(intervals.length != 0){ - interval = intervals.filter((interval) => interval.int_id == parseInt(value))[0] - } - - return interval - }, [value, localValue, intervals]) - - return h(Cell, { - ...props, - style: {...props.style, padding: 0}, - }, [ - h(Select2, { - fill: true, - items: intervals, - className: "update-input-group", - popoverProps: { - position: "bottom", - minimal: true - }, - popoverContentProps:{ - onWheelCapture: (event) => event.stopPropagation() - }, - itemPredicate: filterInterval, - itemRenderer: IntervalOption, - onItemSelect: (interval: Interval, e) => { - onConfirm(interval.int_id.toString()) - setLocalValue(interval.int_id.toString()) - }, - noResults: h(MenuItem, {disabled: true, text: "No results.", roleStructure: "listoption"}), - }, [ - h(Button, { - style: {backgroundColor: interval?.color ?? "white", fontSize: "12px", minHeight: "0px", padding: "1.7px 10px", boxShadow: "none"}, - fill: true, - alignText: "left", - text: h("span", {style: {overflow: "hidden", textOverflow: "ellipses"}}, interval?.name ?? "Select an Interval"), - rightIcon: "double-caret-vertical", - className: "update-input-group", - placeholder: "Select A Filter" - }, []) - ]), - ]) + int_id: number; + name: string; + abbrev: string; + t_age: number; + b_age: number; + int_type: string; + timescales: Timescale[]; + color: string; } +const IntervalOption: ItemRenderer = ( + interval: Interval, + { handleClick, handleFocus, modifiers } +) => { + if (interval == null) { + return h( + MenuItem, + { + shouldDismissPopover: true, + active: modifiers.active, + disabled: modifiers.disabled, + key: "", + label: "", + onClick: handleClick, + onFocus: handleFocus, + text: "", + roleStructure: "listoption", + }, + [] + ); + } + + return h( + MenuItem, + { + style: { backgroundColor: interval.color }, + shouldDismissPopover: true, + active: modifiers.active, + disabled: modifiers.disabled, + key: interval.int_id, + label: interval.int_id.toString(), + onClick: handleClick, + onFocus: handleFocus, + text: interval.name, + roleStructure: "listoption", + }, + [] + ); +}; + +const IntervalSelection = ({ + value, + onConfirm, + intent, + intervals, + ...props +}: EditableCell2Props & { intervals: Interval[] }) => { + const [localValue, setLocalValue] = React.useState(value); + + const filterInterval: ItemPredicate = (query, interval) => { + if (interval?.name == undefined) { + return false; + } + return interval.name.toLowerCase().indexOf(query.toLowerCase()) >= 0; + }; + + const interval = useMemo(() => { + let interval = null; + if (intervals.length != 0) { + interval = intervals.filter( + (interval) => interval.int_id == parseInt(value) + )[0]; + } + + return interval; + }, [value, localValue, intervals]); + + return h( + Cell, + { + ...props, + style: { ...props.style, padding: 0 }, + }, + [ + h( + Select2, + { + fill: true, + items: intervals, + className: "update-input-group", + popoverProps: { + position: "bottom", + minimal: true, + }, + popoverContentProps: { + onWheelCapture: (event) => event.stopPropagation(), + }, + itemPredicate: filterInterval, + itemRenderer: IntervalOption, + onItemSelect: (interval: Interval, e) => { + onConfirm(interval.int_id.toString()); + setLocalValue(interval.int_id.toString()); + }, + noResults: h(MenuItem, { + disabled: true, + text: "No results.", + roleStructure: "listoption", + }), + }, + [ + h( + Button, + { + style: { + backgroundColor: interval?.color ?? "white", + fontSize: "12px", + minHeight: "0px", + padding: "1.7px 10px", + boxShadow: "none", + }, + fill: true, + alignText: "left", + text: h( + "span", + { style: { overflow: "hidden", textOverflow: "ellipses" } }, + interval?.name ?? "Select an Interval" + ), + rightIcon: "double-caret-vertical", + className: "update-input-group", + placeholder: "Select A Filter", + }, + [] + ), + ] + ), + ] + ); +}; export default IntervalSelection; diff --git a/src/pages/maps/@id/edit/table-menu.ts b/src/pages/maps/@id/edit/table-menu.ts index aa06af27..fdc4420a 100644 --- a/src/pages/maps/@id/edit/table-menu.ts +++ b/src/pages/maps/@id/edit/table-menu.ts @@ -1,129 +1,166 @@ -import {Button, Menu, MenuItem, InputGroup} from "@blueprintjs/core"; -import {Select2, ItemRenderer} from "@blueprintjs/select"; +import { Button, InputGroup, Menu, MenuItem } from "@blueprintjs/core"; +import { ItemRenderer, Select2 } from "@blueprintjs/select"; import React from "react"; -import {useDebouncedCallback} from "use-debounce"; +import { useDebouncedCallback } from "use-debounce"; // @ts-ignore import hyper from "@macrostrat/hyper"; -import {OperatorQueryParameter, ColumnOperatorOption} from "./table"; +import { ColumnOperatorOption, OperatorQueryParameter } from "./table"; -import "@blueprintjs/core/lib/css/blueprint.css" -import "@blueprintjs/select/lib/css/blueprint-select.css"; +import "~/styles/blueprint-select"; import styles from "./edit-table.module.sass"; -import {Filter} from "./table-util"; - +import { Filter } from "./table-util"; const h = hyper.styled(styles); - const validExpressions: ColumnOperatorOption[] = [ - {key: "eq", value: "=", verbose: "Equals"}, - {key: "lt", value: "<", verbose: "Is less than"}, - {key: "le", value: "<=", verbose: "Is less than or equal to"}, - {key: "gt", value: ">", verbose: "Is greater than"}, - {key: "ge", value: ">=", verbose: "Is greater than or equal to"}, - {key: "ne", value: "<>", verbose: "Is not equal to"}, - {key: "like", value: "LIKE", verbose: "Like"}, - {key: "is", value: "IS", verbose: "Is", placeholder: "true | false | null"}, - {key: "in", value: "IN", verbose: "In", placeholder: "1,2,3"} -] - - - -const OperatorFilterOption: ItemRenderer = (column, { handleClick, handleFocus, modifiers }) => { - - return h(MenuItem, { - shouldDismissPopover: false, - active: modifiers.active, - disabled: modifiers.disabled, - key: column.key, - label: column.verbose, - onClick: handleClick, - onFocus: handleFocus, - text: column.value, - roleStructure:"listoption" - }, []) -} + { key: "eq", value: "=", verbose: "Equals" }, + { key: "lt", value: "<", verbose: "Is less than" }, + { key: "le", value: "<=", verbose: "Is less than or equal to" }, + { key: "gt", value: ">", verbose: "Is greater than" }, + { key: "ge", value: ">=", verbose: "Is greater than or equal to" }, + { key: "ne", value: "<>", verbose: "Is not equal to" }, + { key: "like", value: "LIKE", verbose: "Like" }, + { key: "is", value: "IS", verbose: "Is", placeholder: "true | false | null" }, + { key: "in", value: "IN", verbose: "In", placeholder: "1,2,3" }, +]; + +const OperatorFilterOption: ItemRenderer = ( + column, + { handleClick, handleFocus, modifiers } +) => { + return h( + MenuItem, + { + shouldDismissPopover: false, + active: modifiers.active, + disabled: modifiers.disabled, + key: column.key, + label: column.verbose, + onClick: handleClick, + onFocus: handleFocus, + text: column.value, + roleStructure: "listoption", + }, + [] + ); +}; interface TableMenuProps { - columnName: string; - onFilterChange: (query: OperatorQueryParameter) => void; - filter: Filter; - onGroupChange: (group: string | undefined) => void; - group: string | undefined; -} - -const TableMenu = ({columnName, onFilterChange, filter, onGroupChange, group} : TableMenuProps) => { - - const [menuOpen, setMenuOpen] = React.useState(false); - const [inputPlaceholder, setInputPlaceholder] = React.useState(""); - - // Create a debounced version of the text state - const [inputValue, setInputValue] = React.useState(filter.value); - const onInputChange = (e: React.ChangeEvent) => { - setMenuOpen(false); - onFilterChange({operator: filter.operator, value: e.target.value}) - } - const debouncedInputChange = useDebouncedCallback(onInputChange, 1000); - - // Set the expression current value from the parent filter - const selectedExpression = validExpressions.find((expression) => expression.key === filter.operator); - - // Set if this group is active - const groupActive: boolean = group === columnName; - - return h(Menu, {}, [ - h("div.filter-container", {}, [ - h("div.filter-header", {}, ["Filter"]), - h("div.filter-select", {}, [ - h(Select2, { - fill: true, - items: validExpressions, - className: "update-input-group", - filterable: false, - popoverProps: {isOpen: menuOpen}, - itemRenderer: OperatorFilterOption, - onItemSelect: (operator: ColumnOperatorOption) => { - setMenuOpen(false); - setInputPlaceholder(operator.placeholder || ""); - onFilterChange({operator: operator.key, value: filter.value}) - }, - noResults: h(MenuItem, {disabled: true, text: "No results.", roleStructure: "listoption"}, []), - }, [ - h(Button, { - fill: true, - onClick: () => setMenuOpen(!menuOpen), - alignText: "left", - text: selectedExpression?.verbose, - rightIcon: "double-caret-vertical", - className: "update-input-group", - placeholder: "Select A Filter" - }, []) - ]), - ]), - h("div.filter-input", {}, [ - h(InputGroup, { - "value": inputValue, - className: "update-input-group", - placeholder: inputPlaceholder, - onChange: (e: React.ChangeEvent) => {setInputValue(e.target.value); debouncedInputChange(e)} - }, []) - ]), - h("div.filter-header", {}, ["Group"]), - h("div.filter-select", {}, [ - h(Button, - { - rightIcon: groupActive ? "tick" : "disable", - alignText: "left", - intent: groupActive ? "success" : "warning", - text: groupActive ? "Active" : "Inactive", - fill: true, - onClick: () => onGroupChange(group == filter.column_name ? undefined : filter.column_name) - }, []) - ]), - ]) - ]) + columnName: string; + onFilterChange: (query: OperatorQueryParameter) => void; + filter: Filter; + onGroupChange: (group: string | undefined) => void; + group: string | undefined; } -export default TableMenu; \ No newline at end of file +const TableMenu = ({ + columnName, + onFilterChange, + filter, + onGroupChange, + group, +}: TableMenuProps) => { + const [menuOpen, setMenuOpen] = React.useState(false); + const [inputPlaceholder, setInputPlaceholder] = React.useState(""); + + // Create a debounced version of the text state + const [inputValue, setInputValue] = React.useState(filter.value); + const onInputChange = (e: React.ChangeEvent) => { + setMenuOpen(false); + onFilterChange({ operator: filter.operator, value: e.target.value }); + }; + const debouncedInputChange = useDebouncedCallback(onInputChange, 1000); + + // Set the expression current value from the parent filter + const selectedExpression = validExpressions.find( + (expression) => expression.key === filter.operator + ); + + // Set if this group is active + const groupActive: boolean = group === columnName; + + return h(Menu, {}, [ + h("div.filter-container", {}, [ + h("div.filter-header", {}, ["Filter"]), + h("div.filter-select", {}, [ + h( + Select2, + { + fill: true, + items: validExpressions, + className: "update-input-group", + filterable: false, + popoverProps: { isOpen: menuOpen }, + itemRenderer: OperatorFilterOption, + onItemSelect: (operator: ColumnOperatorOption) => { + setMenuOpen(false); + setInputPlaceholder(operator.placeholder || ""); + onFilterChange({ operator: operator.key, value: filter.value }); + }, + noResults: h( + MenuItem, + { + disabled: true, + text: "No results.", + roleStructure: "listoption", + }, + [] + ), + }, + [ + h( + Button, + { + fill: true, + onClick: () => setMenuOpen(!menuOpen), + alignText: "left", + text: selectedExpression?.verbose, + rightIcon: "double-caret-vertical", + className: "update-input-group", + placeholder: "Select A Filter", + }, + [] + ), + ] + ), + ]), + h("div.filter-input", {}, [ + h( + InputGroup, + { + value: inputValue, + className: "update-input-group", + placeholder: inputPlaceholder, + onChange: (e: React.ChangeEvent) => { + setInputValue(e.target.value); + debouncedInputChange(e); + }, + }, + [] + ), + ]), + h("div.filter-header", {}, ["Group"]), + h("div.filter-select", {}, [ + h( + Button, + { + rightIcon: groupActive ? "tick" : "disable", + alignText: "left", + intent: groupActive ? "success" : "warning", + text: groupActive ? "Active" : "Inactive", + fill: true, + onClick: () => + onGroupChange( + group == filter.column_name ? undefined : filter.column_name + ), + }, + [] + ), + ]), + ]), + ]); +}; + +export default TableMenu; diff --git a/src/renderer/page-shell.ts b/src/renderer/page-shell.ts index cec62e75..8340249b 100644 --- a/src/renderer/page-shell.ts +++ b/src/renderer/page-shell.ts @@ -1,12 +1,12 @@ +import h from "@macrostrat/hyper"; +import { DarkModeProvider } from "@macrostrat/ui-components"; import React from "react"; import { PageContextProvider } from "./page-context"; import { PageContext } from "./types"; -import h from "@macrostrat/hyper"; -import { DarkModeProvider } from "@macrostrat/ui-components"; -import "@blueprintjs/core/lib/css/blueprint.css"; -import "../styles/padding.css"; -import "../styles/core.sass"; +import "~/styles/blueprint-core"; +import "~/styles/core.sass"; +import "~/styles/padding.css"; export function PageShell({ children, diff --git a/src/styles/blueprint-core.ts b/src/styles/blueprint-core.ts new file mode 100644 index 00000000..cc04d68a --- /dev/null +++ b/src/styles/blueprint-core.ts @@ -0,0 +1 @@ +import "@blueprintjs/core/lib/css/blueprint.css"; diff --git a/src/styles/blueprint-select.ts b/src/styles/blueprint-select.ts new file mode 100644 index 00000000..d0438b5c --- /dev/null +++ b/src/styles/blueprint-select.ts @@ -0,0 +1,2 @@ +// Single file to deduplicate import of blueprint-select styles +import "@blueprintjs/select/lib/css/blueprint-select.css"; From b7b6d286dfb785fce5c96d34bfa606ef6e500710 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Mon, 22 Jan 2024 01:38:38 -0600 Subject: [PATCH 7/8] Updated config --- vite.config.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index 75c00d5b..314fa298 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,10 +1,9 @@ -import { UserConfig } from "vite"; -import path from "path"; +import revisionInfo from "@macrostrat/revision-info-webpack"; import mdx from "@mdx-js/rollup"; import react from "@vitejs/plugin-react"; +import path from "path"; import ssr from "vike/plugin"; -import revisionInfo from "@macrostrat/revision-info-webpack"; -import rewriteAll from "vite-plugin-rewrite-all"; +import { UserConfig } from "vite"; import cesium from "vite-plugin-cesium"; import pkg from "./package.json"; From 1200bc02b7d7826c4b712a30e60915b737584555 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Mon, 22 Jan 2024 01:46:47 -0600 Subject: [PATCH 8/8] Updated web components --- deps/web-components | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/deps/web-components b/deps/web-components index cd472385..c576b365 160000 --- a/deps/web-components +++ b/deps/web-components @@ -1 +1 @@ -Subproject commit cd472385b927980aa3555f0ea417279f95828fae +Subproject commit c576b3657e5782d62b3f83cd13bb4c73d776f07b