Made path management more straightforward

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,

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) {

src/pages/map/map-interface/app-state/hooks.ts

@@ -13,9 +13,13 @@ function useAppActions(): (action: AppAction) => Promise<void> {
   const store = useStore<AppState, AppAction>();
   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);
+    }
   };
 }
 

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;

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,
   };
 }
 

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: {

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]);

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;