Add lith editing interface

src/_utils/map-layers.client.ts

@@ -23,11 +23,35 @@ export enum MacrostratRasterTileset {
 
 export function replaceSourcesForTileset(
   style: mapboxgl.Style,
-  tileset: MacrostratVectorTileset | string
+  tileset: MacrostratVectorTileset | string,
+  parameters: Record<string, string | string[]>
 ) {
-  let tilesetURL = tileset;
-  if (!tilesetURL.startsWith("http")) {
-    tilesetURL = burwellTileDomain + `/${tileset}/{z}/{x}/{y}`;
+
+  let tilesetURL;
+  if (!tileset.startsWith("http")) {
+    tilesetURL = burwellTileDomain + `/${tileset}/{z}/{x}/{y}`
+  } else {
+    tilesetURL = tileset;
+  }
+
+  if(parameters != null){
+    let urlParams = new URLSearchParams();
+    // For each parameter that isn't empty add it to the URL
+    for (const [key, value] of Object.entries(parameters)) {
+      if(value != null && value != ""){
+
+        // If the value is a list of strings append each one
+        if(Array.isArray(value)){
+          for (const v of value) {
+            urlParams.append(key, v);
+          }
+        } else {
+          urlParams.append(key, value);
+        }
+      }
+    }
+
+    tilesetURL += urlParams.toString() ? `?${urlParams.toString()}` : "";
   }
 
   return {

src/pages/dev/filtering/interface.ts

@@ -41,8 +41,8 @@ export function VectorMapInspectorPage({
   const { showLineSymbols } = state;
 
   const _overlayStyle = useMemo(() => {
-    return replaceSourcesForTileset(overlayStyle, tileset);
-  }, [tileset, overlayStyle]) as mapboxgl.Style;
+    return replaceSourcesForTileset(overlayStyle, tileset, {lithology: state.lithologies});
+  }, [tileset, overlayStyle, state.lithologies]) as mapboxgl.Style;
 
   const controls = h([
     h(Switch, {
@@ -54,7 +54,7 @@ export function VectorMapInspectorPage({
     }),
     h(LineSymbolManager, { showLineSymbols }),
     h(LithologyMultiSelect, {
-      selectedLithologyIds: state.lithologies,
+      selectedLithologyNames: state.lithologies,
       onChange: (lithologies) => {
         setState({ ...state, lithologies });
       }
@@ -73,7 +73,6 @@ export function VectorMapInspectorPage({
   );
 }
 
-
 function CompilationSelector({ compilation, setCompilation }) {
   return h(Select, {
     items: Object.values(Compilation),
@@ -89,7 +88,7 @@ function CompilationSelector({ compilation, setCompilation }) {
 }
 
 const _macrostratStyle = buildMacrostratStyle({
-  tileserverDomain,
+  tileserverDomain
 }) as mapboxgl.Style;
 
 function isStateValid(state) {

src/pages/dev/filtering/lithology-selector.ts

@@ -12,30 +12,30 @@ export const h = hyper.styled(styles);
 
 function LithologyMultiSelect({
   onChange,
-  selectedLithologyIds
+  selectedLithologyNames
 } : {
-  onChange: (lith: number[]) => void,
-  selectedLithologyIds: number[]
+  onChange: (lith: string[]) => void,
+  selectedLithologyNames: string[]
 }) {
 
   const [lithologies, setLithologies] = useState([]);
 
   useEffect(() => {
     (async () => {
       const liths = await getLithologies();
-      setLithologies(liths?.success?.data);
+      setLithologies(liths);
     })()
   }, []);
 
   const selectedLithologies = useMemo(() => {
-    return lithologies.filter(l => selectedLithologyIds.includes(l.lith_id));
-  }, [selectedLithologyIds, lithologies]);
+    return lithologies.filter(l => selectedLithologyNames.includes(l.name));
+  }, [selectedLithologyNames, lithologies]);
 
   const _onChange = (lith: Lithology) => {
-    if (selectedLithologyIds.includes(lith.lith_id)) {
-      onChange(lithologies.filter(l => l !== lith.lith_id));
+    if (selectedLithologyNames.includes(lith.name)) {
+      onChange(selectedLithologyNames.filter(l => l !== lith.name));
     } else {
-      onChange([...selectedLithologyIds, lith.lith_id]);
+      onChange([...selectedLithologyNames, lith.name]);
     }
   }
 
@@ -53,7 +53,7 @@ function LithologyMultiSelect({
       return h("div.lithology-item",
         {
           style: {
-            backgroundColor: item.color
+            borderColor: item.color
           },
           onClick: handleClick
         },
@@ -82,23 +82,38 @@ function LithologyMultiSelect({
   })
 }
 
-async function getLithologies() : Promise<{success: { data: Lithology[]}}> {
+async function getLithologies() : Promise<Lithology[]> {
   const response = await fetch(`${apiV2Prefix}/defs/lithologies?all`);
   if (response.ok) {
-    return response.json();
+    let data : Lithology[] = (await response.json()).success.data;
+
+    // Enumerate the lithology tree
+    let enumeratedLithologyTree = {}
+    for (const lith of data) {
+      enumeratedLithologyTree = { ...enumeratedLithologyTree, ...ascendLithologyTree(lith) }
+    }
+
+    return Object.values(enumeratedLithologyTree)
   }
   throw new Error("Failed to get lithologies");
 }
 
+function ascendLithologyTree(lith: Lithology): Record<string, Partial<Lithology>> {
+
+  return {
+    [lith.name]: lith,
+    [lith.class]: {name: lith.class},
+    [lith.group]: {name: lith.group, class: lith.class},
+    [lith.type]: {name: lith.type, group: lith.group, class: lith.class}
+  }
+}
+
 interface Lithology {
-  lith_id: number;
   name: string
   type: string
   group: string
   class: string
   color: string
-  fill: number
-  t_units: number
 }
 
 export { LithologyMultiSelect };

src/pages/dev/filtering/main.module.styl

@@ -64,6 +64,9 @@
 
 .lithology-item
   padding: .2em .4em
+  border-radius: .5em
+  border: #ebebeb solid 3px
+  margin-bottom: .2em
 
 .lithology-title
   font-weight: bold