Merge pull request #212 from UW-Macrostrat/map-interface-fixes

Map interface fixes

Author: davenquinn

.vscode/settings.json

@@ -14,5 +14,12 @@
     "editor.codeActionsOnSave": {
       "source.organizeImports": "never"
     }
-  }
+  },
+  "cSpell.enableFiletypes": [
+    "!javascript",
+    "!javascriptreact",
+    "!json",
+    "!scss",
+    "!typescript"
+  ]
 }

.yarn/sdks/typescript/lib/tsserver.js

@@ -9,6 +9,13 @@ const relPnpApiPath = "../../../../.pnp.cjs";
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
 const absRequire = createRequire(absPnpApiPath);
 
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsserver.js
+    require(absPnpApiPath).setup();
+  }
+}
+
 const moduleWrapper = tsserver => {
   if (!process.versions.pnp) {
     return tsserver;
@@ -214,11 +221,11 @@ const moduleWrapper = tsserver => {
   return tsserver;
 };
 
-if (existsSync(absPnpApiPath)) {
-  if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/tsserver.js
-    require(absPnpApiPath).setup();
-  }
+const [major, minor] = absRequire(`typescript/package.json`).version.split(`.`, 2).map(value => parseInt(value, 10));
+// In TypeScript@>=5.5 the tsserver uses the public TypeScript API so that needs to be patched as well.
+// Ref https://github.com/microsoft/TypeScript/pull/55326
+if (major > 5 || (major === 5 && minor >= 5)) {
+  moduleWrapper(absRequire(`typescript`));
 }
 
 // Defer to the real typescript/lib/tsserver.js your application uses

.yarn/sdks/typescript/lib/tsserverlibrary.js

@@ -9,6 +9,13 @@ const relPnpApiPath = "../../../../.pnp.cjs";
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
 const absRequire = createRequire(absPnpApiPath);
 
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsserverlibrary.js
+    require(absPnpApiPath).setup();
+  }
+}
+
 const moduleWrapper = tsserver => {
   if (!process.versions.pnp) {
     return tsserver;
@@ -214,11 +221,11 @@ const moduleWrapper = tsserver => {
   return tsserver;
 };
 
-if (existsSync(absPnpApiPath)) {
-  if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/tsserverlibrary.js
-    require(absPnpApiPath).setup();
-  }
+const [major, minor] = absRequire(`typescript/package.json`).version.split(`.`, 2).map(value => parseInt(value, 10));
+// In TypeScript@>=5.5 the tsserver uses the public TypeScript API so that needs to be patched as well.
+// Ref https://github.com/microsoft/TypeScript/pull/55326
+if (major > 5 || (major === 5 && minor >= 5)) {
+  moduleWrapper(absRequire(`typescript`));
 }
 
 // Defer to the real typescript/lib/tsserverlibrary.js your application uses

deps/web-components

@@ -120,10 +120,7 @@
     "react-router-hash-link": "^2.4.3",
     "reduce-reducers": "^1.0.4",
     "redux": "^4.0.5",
-    "regl": "^1.5.0",
-    "resium": "^1.13.1",
     "sirv": "^2.0.3",
-    "supports-color": "^9.4.0",
     "swagger-ui-react": "^5.12.3",
     "topojson-client": "^3.0.0",
     "transition-hook": "^1.5.2",

package.json

@@ -4,18 +4,15 @@ import { tileserverDomain, mapboxAccessToken } from "@macrostrat-web/settings";
 import hyper from "@macrostrat/hyper";
 import { DevMapPage } from "@macrostrat/map-interface";
 import { buildMacrostratStyle } from "@macrostrat/mapbox-styles";
-import { useStoredState } from "@macrostrat/ui-components";
-import { Select, Omnibar } from "@blueprintjs/select";
+import { Select } from "@blueprintjs/select";
 import mapboxgl from "mapbox-gl";
-import { useMemo, useState, useEffect } from "react";
+import { useMemo, useState } from "react";
 import styles from "./main.module.styl";
 import {
   replaceSourcesForTileset,
   LineSymbolManager,
 } from "~/_utils/map-layers.client";
-import {
-  LithologyMultiSelect
-} from "./lithology-selector";
+import { LithologyMultiSelect } from "./lithology-selector";
 
 export const h = hyper.styled(styles);
 
@@ -27,7 +24,7 @@ enum Compilation {
 export function VectorMapInspectorPage({
   overlayStyle = _macrostratStyle,
   title = null,
-  headerElement = null
+  headerElement = null,
 }: {
   headerElement?: React.ReactElement;
   title?: string;
@@ -39,7 +36,9 @@ export function VectorMapInspectorPage({
   const { showLineSymbols } = state;
 
   const _overlayStyle = useMemo(() => {
-    return replaceSourcesForTileset(overlayStyle, state.compilation, {lithology: state.lithologies});
+    return replaceSourcesForTileset(overlayStyle, state.compilation, {
+      lithology: state.lithologies,
+    });
   }, [overlayStyle, state.lithologies, state.compilation]) as mapboxgl.Style;
 
   const controls = h([
@@ -55,14 +54,14 @@ export function VectorMapInspectorPage({
       compilation: state.compilation,
       setCompilation: (compilation) => {
         setState({ ...state, compilation });
-      }
+      },
     }),
     h(LithologyMultiSelect, {
       selectedLithologyNames: state.lithologies,
       onChange: (lithologies) => {
         setState({ ...state, lithologies });
-      }
-    })
+      },
+    }),
   ]);
 
   return h(
@@ -78,23 +77,31 @@ export function VectorMapInspectorPage({
 }
 
 const CompilationSelector = ({ compilation, setCompilation }) => {
-  return h(Select, {
-    items: Object.values(Compilation),
-    itemRenderer: (item: any, { handleClick }) => {
-      return h(MenuItem, { onClick: handleClick, text: item });
-    },
-    onItemSelect: (item) => {
-      setCompilation(item);
+  return h(
+    Select,
+    {
+      items: Object.values(Compilation),
+      itemRenderer: (item: any, { handleClick }) => {
+        return h(MenuItem, { onClick: handleClick, text: item });
+      },
+      onItemSelect: (item) => {
+        setCompilation(item);
+      },
+      filterable: false,
+      activeItem: compilation,
     },
-    filterable: false,
-    activeItem: compilation,
-  }, [
-    h(Button, {text: compilation, rightIcon: "double-caret-vertical", placeholder: "Select a film" })
-  ]);
-}
+    [
+      h(Button, {
+        text: compilation,
+        rightIcon: "double-caret-vertical",
+        placeholder: "Select a film",
+      }),
+    ]
+  );
+};
 
 const _macrostratStyle = buildMacrostratStyle({
-  tileserverDomain
+  tileserverDomain,
 }) as mapboxgl.Style;
 
 function isStateValid(state) {
@@ -121,5 +128,5 @@ function isStateValid(state) {
 const defaultState = {
   showLineSymbols: false,
   compilation: "v2/carto",
-  lithologies: []
+  lithologies: [],
 };

src/pages/dev/filtering/interface.ts

@@ -71,7 +71,7 @@ export async function fetchFilteredColumns(
   // TODO: report errors
   return {
     type: "update-column-filters",
-    columns: res.data,
+    columns: res.data.features,
   };
 }
 

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

@@ -43,7 +43,6 @@ async function actionRunner(
       let coreState = s1.core;
 
       const activePage = currentPageForPathName(pathname);
-      console.log(pathname, "activePage", activePage);
 
       // Harvest as much information as possible from the hash string
       let [coreState1, filters] = getInitialStateFromHash(

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

@@ -3,7 +3,6 @@ import actionRunner from "./handlers";
 import { useStore, useSelector, useDispatch } from "react-redux";
 import { AppState } from ".";
 import React from "react";
-import { useEffect } from "react";
 
 function useActionDispatch() {
   return useDispatch<React.Dispatch<AppAction>>();
@@ -20,55 +19,8 @@ function useAppActions(): (action: AppAction) => Promise<void> {
   };
 }
 
-function useFilterState() {
-  const { filters, filtersOpen } = useSelector((state) => state.core);
-  return { filters, filtersOpen };
-}
-
-function useSearchState() {
-  return useSelector((state) => {
-    const { searchResults, isSearching, term, inputFocus, infoDrawerOpen } =
-      state.core;
-    return { searchResults, isSearching, term, inputFocus, infoDrawerOpen };
-  });
-}
-
-function useMenuState() {
-  const { menuOpen, infoDrawerOpen } = useSelector((state) => state.core);
-  const menu = useSelector((state) => state.menu);
-  return { menuOpen, infoDrawerOpen, ...menu };
-}
-
 function useAppState<T>(selectorFn: (state: AppState) => T): T {
   return useSelector<AppState>(selectorFn) as T;
 }
 
-interface OutsideClickI {
-  ref: React.RefObject<HTMLElement>;
-  fn: (event: Event) => void;
-}
-
-function useOutsideClick(props: OutsideClickI) {
-  const { ref, fn } = props;
-
-  useEffect(() => {
-    function handleOutsideClick(event) {
-      if (ref.current && !ref.current?.contains(event.target)) {
-        return fn(event);
-      }
-    }
-    document.addEventListener("mousedown", handleOutsideClick);
-    return () => {
-      document.removeEventListener("mousedown", handleOutsideClick);
-    };
-  }, [ref]);
-}
-
-export {
-  useAppActions,
-  useFilterState,
-  useSearchState,
-  useMenuState,
-  useAppState,
-  useOutsideClick,
-};
+export { useAppActions, useAppState };

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

@@ -41,7 +41,10 @@ type CLOSE_INFODRAWER = { type: "close-infodrawer" };
 
 type TOGGLE_FILTERS = { type: "toggle-filters" };
 type REMOVE_FILTER = { type: "remove-filter"; filter: any };
-type UPDATE_COLUMN_FILTERS = { type: "update-column-filters"; columns: any };
+type UPDATE_COLUMN_FILTERS = {
+  type: "update-column-filters";
+  columns: ColumnGeoJSONRecord[];
+};
 type CLEAR_FILTERS = { type: "clear-filters" };
 
 type START_MAP_QUERY = {
@@ -263,7 +266,7 @@ export interface CoreState extends MapState, AsyncRequestState {
   mapUse3D: boolean;
   filtersOpen: boolean;
   filters: FilterData[];
-  filteredColumns: object;
+  filteredColumns: ColumnGeoJSONRecord[] | null;
   showExperimentsPanel: boolean;
   allColumns: ColumnGeoJSONRecord[] | null;
   data: [];

src/pages/map/map-interface/app-state/reducers/core/types.ts

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import hyper from "@macrostrat/hyper";
 import { Tag, Card, Button, Collapse, Switch } from "@blueprintjs/core";
 import {
-  useFilterState,
   useAppActions,
+  useAppState,
 } from "~/pages/map/map-interface/app-state";
 import { useAdmoinshments } from "./admonishments";
 import styles from "./filters.module.styl";
@@ -54,7 +54,7 @@ function Filter({ filter }) {
 }
 
 function Filters() {
-  const { filters } = useFilterState();
+  const { filters } = useAppState((state) => state.core.filters);
   const shouldFiltersBeOpen = filters.length > 0;
   return h("div.filter-container", [
     h.if(!shouldFiltersBeOpen)("div", [
@@ -94,7 +94,7 @@ function makeFilterString(filters) {
 
 function FilterPanel() {
   const [open, setOpen] = useState(false);
-  const { filters } = useFilterState();
+  const filters = useAppState((s) => s.core.filters);
   const runAction = useAppActions();
   const admonishments = useAdmoinshments();
 

src/pages/map/map-interface/components/filter-panel/index.ts

@@ -56,8 +56,6 @@ function InfoDrawer(props) {
 
 function InfoDrawerInterior(props) {
   const columnInfo = useAppState((state) => state.core.columnInfo);
-  console.log("Column info", columnInfo);
-
   return h(Routes, [
     h(Route, { path: "/column", element: h(StratColumn, { columnInfo }) }),
     h(Route, { path: "*", element: h(InfoDrawerMainPanel) }),

src/pages/map/map-interface/components/info-drawer/index.ts

@@ -3,7 +3,6 @@ import { Navbar, Button, InputGroup, Spinner, Card } from "@blueprintjs/core";
 import hyper from "@macrostrat/hyper";
 import {
   useAppActions,
-  useSearchState,
   useAppState,
   useContextPanelOpen,
 } from "../../app-state";
@@ -71,7 +70,6 @@ function ResultList({ searchResults }) {
                 {
                   key,
                   onClick() {
-                    console.log("Clicked", item);
                     onSelectResult(item);
                   },
                 },
@@ -85,7 +83,7 @@ function ResultList({ searchResults }) {
 }
 
 function SearchResults({ className }) {
-  const { searchResults } = useSearchState();
+  const searchResults = useAppState((s) => s.core.searchResults);
   className = classNames(className, "search-results-card");
 
   return h(Card, { className }, h(ResultList, { searchResults }));