Merge pull request #216 from UW-Macrostrat/fix-column-routing

Fix error for routing to column page in map context

src/pages/map/map-interface/app-state/handlers/index.ts

@@ -51,13 +51,13 @@ async function actionRunner(
       );
 
       // If we are on the column route, the column layer must be enabled
-      const colMatch = matchPath(
-        mapPagePrefix + "/loc/:lng/:lat/column",
-        pathname
-      );
-      if (colMatch != null) {
-        coreState1.mapLayers.add(MapLayer.COLUMNS);
-      }
+      // const colMatch = matchPath(
+      //   mapPagePrefix + "/loc/:lng/:lat/column",
+      //   pathname
+      // );
+      // if (colMatch != null) {
+      //   coreState1.mapLayers.add(MapLayer.COLUMNS);
+      // }
 
       // Fill out the remainder with defaults
 

src/pages/map/map-interface/app-state/reducers/index.ts

@@ -10,6 +10,8 @@ import { contextPanelIsInitiallyOpen } from "../nav-hooks";
 import { CoreAction, coreReducer } from "./core";
 import { hashStringReducer } from "./hash-string";
 import { AppAction, AppState, MenuAction, MenuState } from "./types";
+import update from "immutability-helper";
+import { MapLayer } from "./map";
 export const browserHistory = createBrowserHistory();
 
 const routerReducer = createRouterReducer(browserHistory);
@@ -45,7 +47,7 @@ function mainReducer(
       const { pathname } = action.payload.location;
       const isOpen = contextPanelIsInitiallyOpen(pathname);
 
-      let s1 = setInfoMarkerPosition(state);
+      const s1 = setInfoMarkerPosition(state, pathname);
 
       const newRoute = action.payload.location;
       let newAction = action;
@@ -56,7 +58,7 @@ function mainReducer(
             ...action.payload,
             location: {
               ...action.payload.location,
-              hash: state.router.location.hash,
+              hash: s1.router.location.hash,
             },
           },
         };
@@ -65,7 +67,7 @@ function mainReducer(
       return {
         ...s1,
         core: { ...s1.core, menuOpen: isOpen, contextPanelOpen: isOpen },
-        router: routerReducer(state.router, newAction),
+        router: routerReducer(s1.router, newAction),
       };
     }
     case "set-menu-page":
@@ -92,18 +94,45 @@ const appReducer = (state: AppState, action: AppAction) => {
   return hashStringReducer(mainReducer(state, action), action);
 };
 
-export function setInfoMarkerPosition(state: AppState): AppState {
+export function setInfoMarkerPosition(
+  state: AppState,
+  pathname: string | null = null
+): AppState {
   // Check if we are viewing a specific location
   const loc = matchPath(
-    mapPagePrefix + "/loc/:lng/:lat",
-    state.router.location.pathname
+    mapPagePrefix + "/loc/:lng/:lat/*",
+    pathname ?? state.router.location.pathname
   );
+
+  let s1 = state;
+
+  // //If we are on the column route, the column layer must be enabled
+  // let s1 = state;
+  // const colMatch = matchPath(
+  //   mapPagePrefix + "/loc/:lng/:lat/column",
+  //   pathname ?? state.router.location.pathname
+  // );
+  // if (colMatch != null) {
+  //   s1 = update(s1, { core: { mapLayers: { $add: [MapLayer.COLUMNS] } } });
+  // }
+
+  // // If we are disabling the column route, we should remove the column layer
+  // const colMatch2 = matchPath(
+  //   mapPagePrefix + "/loc/:lng/:lat/column",
+  //   state.router.location.pathname
+  // );
+
+  // if (colMatch2 != null && colMatch == null) {
+  //   s1 = update(s1, { core: { mapLayers: { $remove: [MapLayer.COLUMNS] } } });
+  // }
+
+  // Set location
   if (loc != null) {
     const { lng, lat } = loc.params;
     return {
-      ...state,
+      ...s1,
       core: {
-        ...state.core,
+        ...s1.core,
         infoMarkerPosition: { lng: Number(lng), lat: Number(lat) },
         infoDrawerOpen: true,
       },
@@ -113,17 +142,17 @@ export function setInfoMarkerPosition(state: AppState): AppState {
   // Check if we're viewing a cross-section
   const crossSection = matchPath(
     mapPagePrefix + "/cross-section/:loc1/:loc2",
-    state.router.location.pathname
+    pathname ?? state.router.location.pathname
   );
   if (crossSection != null) {
     const { loc1, loc2 } = crossSection.params;
     const [lng1, lat1] = loc1.split(",").map(Number);
     const [lng2, lat2] = loc2.split(",").map(Number);
     if (lng1 != null && lat1 != null && lng2 != null && lat2 != null) {
       return {
-        ...state,
+        ...s1,
         core: {
-          ...state.core,
+          ...s1.core,
           crossSectionLine: {
             type: "LineString",
             coordinates: [

src/pages/map/map-interface/map-page/index.ts

@@ -19,6 +19,7 @@ import Searchbar from "../components/navbar";
 import styles from "./main.module.styl";
 import MapContainer from "./map-view";
 import { MenuPage } from "./menu";
+import { info } from "console";
 
 const ElevationChart = loadable(() => import("../components/elevation-chart"));
 const InfoDrawer = loadable(() => import("../components/info-drawer"));
@@ -118,38 +119,39 @@ function InfoDrawerHolder() {
     h(Routes, [
       h(Route, {
         path: mapPagePrefix + "/loc/:lng/:lat/*",
-        element: h(InfoDrawerLocationGrabber),
+        element: h.if(detailPanelTrans.shouldMount)(InfoDrawer, {
+          className: "detail-panel",
+        }),
       }),
     ]),
-    h.if(detailPanelTrans.shouldMount)(InfoDrawer, {
-      className: "detail-panel",
-    }),
+    h(InfoDrawerLocationGrabber),
   ]);
 }
 
 function InfoDrawerLocationGrabber() {
   // We could probably do this in the reducer...
-  const { lat, lng } = useParams();
   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 && lng) {
-      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,
-      });
-    }
+    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;
 }