diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 435d72bf..ac62bf5b 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -6,8 +6,13 @@ - - + + + + + + + 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 260c1ce5..e14e4f9e 100644 --- a/src/pages/map/map-interface/app-state/handlers/index.ts +++ b/src/pages/map/map-interface/app-state/handlers/index.ts @@ -59,22 +59,40 @@ async function actionRunner( // Fill out the remainder with defaults // We always get all columns on initial load, which might be - // a bit unnecessary + // a bit unnecessary and slow. let allColumns: ColumnGeoJSONRecord[] | null = await fetchAllColumns(); + const newState = { + ...state, + core: { + ...coreState1, + allColumns, + initialLoadComplete: true, + }, + menu: { activePage }, + }; + dispatch({ type: "replace-state", - state: { - ...state, - core: { - ...coreState1, - allColumns, - initialLoadComplete: true, - }, - menu: { activePage }, - }, + state: newState, }); + // Set info marker position if it is defined + if (newState.core.infoMarkerPosition != null) { + const nextAction = await actionRunner( + newState, + { + type: "map-query", + z: state.core.mapPosition.target?.zoom ?? 7, + ...state.core.infoMarkerPosition, + map_id: null, + columns: null, + }, + dispatch + ); + dispatch(nextAction); + } + // Apply all filters in parallel const newFilters = await Promise.all( filters.map((f) => { @@ -176,27 +194,7 @@ async function actionRunner( return { type: "add-filter", filter: await runFilter(action.filter) }; case "get-filtered-columns": return await fetchFilteredColumns(coreState.filters); - case "map-query": { - const { lng, lat, z } = action; - // Check if matches column detail route - const { pathname } = state.router.location; - - let newPath = buildLocationPath(lng, lat, Number(z)); - if ( - pathname.startsWith(mapPagePrefix + "/loc") && - pathname.endsWith("/column") - ) { - // If so, we want to append columns to the end of the URL - newPath += "/column"; - } - - return push({ - pathname: newPath, - hash: location.hash, - }); - //return { ...action, type: "run-map-query" }; - } - case "run-map-query": + case "map-query": const { lng, lat, z, map_id } = action; // Get column data from the map action if it is provided. // This saves us from having to filter the columns more inefficiently @@ -213,6 +211,8 @@ async function actionRunner( lat, cancelToken: sourceMapQuery, }); + + // Run a bunch of async queries in ~parallel let mapData = await runMapQuery( lng, lat, diff --git a/src/pages/map/map-interface/app-state/handlers/pathname.ts b/src/pages/map/map-interface/app-state/handlers/pathname.ts index 6914a39e..192de812 100644 --- a/src/pages/map/map-interface/app-state/handlers/pathname.ts +++ b/src/pages/map/map-interface/app-state/handlers/pathname.ts @@ -19,13 +19,15 @@ export function pathNameAction( * 3. If an active page is selected, show that page */ - // TODO: specialize based on whether column detail page is selected - const pos = state.core.infoMarkerPosition; let nextPathname: string = state.router.location.pathname; if (pos != null) { const z = state.core.mapPosition.target?.zoom ?? 7; nextPathname = buildLocationPath(pos.lng, pos.lat, z); + // TODO: we could probably assign column page based on a flag in the state + if (state.router.location.pathname.endsWith("/column")) { + nextPathname += "/column"; + } } else if (state.core.crossSectionLine != null) { nextPathname = buildCrossSectionPath(state.core.crossSectionLine); } else if (state.menu.activePage != null) { diff --git a/src/pages/map/map-interface/app-state/hooks.ts b/src/pages/map/map-interface/app-state/hooks.ts index 86656376..639b53ae 100644 --- a/src/pages/map/map-interface/app-state/hooks.ts +++ b/src/pages/map/map-interface/app-state/hooks.ts @@ -13,9 +13,13 @@ function useAppActions(): (action: AppAction) => Promise { const store = useStore(); return async (action) => { const appState = store.getState(); - const newAction = await actionRunner(appState, action, dispatch); - if (newAction == undefined || newAction == null) return; - dispatch(newAction as AppAction); + try { + const newAction = await actionRunner(appState, action, dispatch); + if (newAction == undefined || newAction == null) return; + dispatch(newAction as AppAction); + } catch (err) { + console.error(err); + } }; } diff --git a/src/pages/map/map-interface/app-state/reducers/core/types.ts b/src/pages/map/map-interface/app-state/reducers/core/types.ts index 5fa7375c..d74a6dc7 100644 --- a/src/pages/map/map-interface/app-state/reducers/core/types.ts +++ b/src/pages/map/map-interface/app-state/reducers/core/types.ts @@ -22,7 +22,7 @@ type ASYNC_ADD_FILTER = { type: "async-add-filter"; filter: any }; type GET_FILTERED_COLUMNS = { type: "get-filtered-columns" }; type FETCH_XDD = { type: "fetch-xdd" }; type MAP_QUERY = { - type: "map-query" | "run-map-query"; + type: "map-query"; z: string | number; map_id: any; columns: ColumnProperties[] | null | undefined; 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 70b840c8..f22305a5 100644 --- a/src/pages/map/map-interface/app-state/reducers/index.ts +++ b/src/pages/map/map-interface/app-state/reducers/index.ts @@ -103,16 +103,28 @@ function mainReducer( export default function appReducer(state: AppState, action: AppAction) { // This might not be the right way to do hash management, but it // centralizes the logic in one place. - return applyNextPath(hashStringReducer(mainReducer(state, action), action)); + return applyNextPath( + hashStringReducer(mainReducer(state, action), action), + action + ); } -function applyNextPath(state: AppState): AppState { - const action = pathNameAction(state); - if (action == null) return state; - console.log("Applying next path", action); +const pathChangingActions: AppAction["type"][] = [ + "set-menu-page", + "update-cross-section", + "update-state", + "start-map-query", + "close-infodrawer", +]; + +function applyNextPath(state: AppState, action: AppAction): AppState { + if (!pathChangingActions.includes(action.type)) return state; + + const nextRouterAction = pathNameAction(state); + if (nextRouterAction == null) return state; return { ...state, - nextRouterAction: action, + nextRouterAction, }; } diff --git a/src/pages/map/map-interface/components/info-drawer/macrostrat-linked.ts b/src/pages/map/map-interface/components/info-drawer/macrostrat-linked.ts index 21b46048..f7cd676f 100644 --- a/src/pages/map/map-interface/components/info-drawer/macrostrat-linked.ts +++ b/src/pages/map/map-interface/components/info-drawer/macrostrat-linked.ts @@ -280,7 +280,6 @@ function LithTypes(props) { "div.lithologies.lithology-types", [ lith_types.map((lithClass, i) => { - console.log(lithClass); return h(LithologyTag, { key: lithClass.name, data: { diff --git a/src/pages/map/map-interface/index.ts b/src/pages/map/map-interface/index.ts index 77f3681f..6a4d510e 100644 --- a/src/pages/map/map-interface/index.ts +++ b/src/pages/map/map-interface/index.ts @@ -53,7 +53,6 @@ function RouterSync() { const runAction = useAppActions(); useEffect(() => { if (nextRouterAction != null) { - console.log("Dispatching next router action", nextRouterAction); runAction(nextRouterAction); } }, [nextRouterAction]); diff --git a/src/pages/map/map-interface/map-page/index.ts b/src/pages/map/map-interface/map-page/index.ts index 3f31cab6..0355a409 100644 --- a/src/pages/map/map-interface/map-page/index.ts +++ b/src/pages/map/map-interface/map-page/index.ts @@ -3,11 +3,10 @@ import { Suspense, useCallback, useEffect, useRef } from "react"; import { Spinner } from "@blueprintjs/core"; import loadable from "@loadable/component"; import { mapPagePrefix } from "@macrostrat-web/settings"; -import hyper from "@macrostrat/hyper"; import { MapAreaContainer } from "@macrostrat/map-interface"; import classNames from "classnames"; import { useSelector } from "react-redux"; -import { Route, Routes, useParams } from "react-router-dom"; +import { Route, Routes } from "react-router-dom"; import { useTransition } from "transition-hook"; import { useAppActions, @@ -18,14 +17,12 @@ import { import Searchbar from "../components/navbar"; import MapContainer from "./map-view"; import { MenuPage } from "./menu"; -import { info } from "console"; +import h from "./main.module.styl"; const ElevationChart = loadable(() => import("../components/elevation-chart")); const InfoDrawer = loadable(() => import("../components/info-drawer")); const Menu = loadable(() => import("./menu")); -import h from "./main.module.styl"; - function MapView(props) { return h( Suspense, @@ -123,36 +120,8 @@ function InfoDrawerHolder() { }), }), ]), - h(InfoDrawerLocationGrabber), + //h(InfoDrawerLocationGrabber), ]); } -function InfoDrawerLocationGrabber() { - // We could probably do this in the reducer... - const z = Math.round( - useAppState((s) => s.core.mapPosition.target?.zoom) ?? 7 - ); - const infoMarkerPosition = useAppState((s) => s.core.infoMarkerPosition); - const runAction = useAppActions(); - - const { lat, lng } = infoMarkerPosition ?? {}; - - // Todo: this is a pretty janky way to do state management - useEffect(() => { - if (lat == null || lng == null) return; - runAction({ - type: "run-map-query", - lat: Number(lat), - lng: Number(lng), - z, - // Focused column or map unit from active layers. - // This is a bit anachronistic, since we want to be - // able to show columns that aren't necessarily shown on the map - columns: [], - map_id: null, - }); - }, [lat, lng]); - return null; -} - export default MapPageRoutes;