Litholgies, strat names, and intervals clickable

Author: davidsklar99

package.json

@@ -54,7 +54,7 @@
     "@macrostrat-web/utility-functions": "workspace:*",
     "@macrostrat/color-utils": "^1.0.0",
     "@macrostrat/corelle": "^2.0.1",
-    "@macrostrat/data-components": "latest",
+    "@macrostrat/data-components": "^0.2.0",
     "@macrostrat/form-components": "^0.1.2",
     "@macrostrat/hyper": "^3.0.6",
     "@macrostrat/map-interface": "^1.2.2",

packages/settings/index.ts

@@ -2,6 +2,7 @@
 import { getRuntimeConfig } from "./utils";
 
 export const rockdApiURL = getRuntimeConfig("ROCKD_API_URL");
+export const macrostratApiURL = getRuntimeConfig("MACROSTRAT_API_DOMAIN");
 export const rockdApiOldURL = "https://rockd.org/api/v2/";
 
 export const darkMapURL =

pages/checkin/index.ts

@@ -4,11 +4,12 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 import { BlankImage, Footer, getProfilePicUrl, getImageUrl, Comments } from "~/components/general";
 import { Icon, Divider, H2 } from "@blueprintjs/core";
 import h from "./main.module.sass";
-import { SETTINGS } from "@macrostrat-web/settings";
+import { rockdApiOldURL, SETTINGS } from "@macrostrat-web/settings";
 import "@macrostrat/style-system";
 import { Overlay2 } from "@blueprintjs/core";
 import { LithologyList } from "@macrostrat/data-components";
 import { ClientOnly } from "vike-react/ClientOnly";
+import { macrostratApiURL } from "@macrostrat-web/settings";
 
 function Map(props) {
   return h(
@@ -172,22 +173,30 @@ function observationFooter(observation) {
         return `#${red}${green}${blue}`;
     }
 
-    let obsAge = observation.age_est ? observation.age_est.name + " (" + observation.age_est.b_age + " - " + observation?.age_est?.t_age + ")" : null;
-
     let lithologies = [];
     rocks.liths?.forEach(lith => {
         if(!lith.color.includes("#")) {
             lithologies.push({
-                name: lith.name,
-                color: rgbaStringToHex(lith.color)});
+                ...lith,
+                color: rgbaStringToHex(lith.color),
+            });
         } else {
             lithologies.push(lith);
         }
     });
 
+    if(rocks.interval?.name) {
+        lithologies.push({
+            name: rocks.interval.name,
+            int_id: rocks.interval.int_id,
+            color: `rgba(${rocks.interval.color})`,
+        })
+    }
+
     if (rocks.strat_name?.strat_name_long) {
         lithologies.push({
             name: rocks.strat_name?.strat_name_long,
+            strat_id: rocks.strat_name?.strat_name_id
         })
     }
 
@@ -197,16 +206,6 @@ function observationFooter(observation) {
         })
     }
 
-    if(obsAge) {
-        lithologies.push({
-            name: obsAge
-        })
-    }
-    if(rocks.interval?.name) {
-        lithologies.push({
-            name: rocks.interval.name
-        })
-    }
     if(observation.orientation.feature?.name) {
         lithologies.push({
             name: observation.orientation.feature?.name
@@ -215,14 +214,26 @@ function observationFooter(observation) {
 
     const show = lithologies.length > 0 || rocks?.notes?.length > 0 && observation.lat && rocks.strat_name?.strat_name_long;
 
+    const handleClick = (e, data) => {
+        if (data.int_id) {
+            window.open(macrostratApiURL + `/lex/intervals/${data.int_id}`, '_blank');
+        }
+        if (data.strat_id) {
+            window.open(macrostratApiURL + `/lex/strat-names/${data.strat_id}`, '_blank');
+        }
+        if (data.lith_id) {
+            window.open(macrostratApiURL + `/lex/lithology/${data.lith_id}`, '_blank');
+        }
+    };
+
     // observation body
     return h.if(show)("div", {className: 'observation-body'}, [
         observation.lat && rocks.strat_name?.strat_name_long ? h('h4', {className: 'observation-header'}, [
             rocks.strat_name?.strat_name_long,
             observation.lat ? LngLatCoords(LngLatProps) : null,
         ]) : null,
         h('div', {className: 'observation-details'}, [
-            h(LithologyList, { lithologies }),
+            h(LithologyList, { lithologies, onClickItem: handleClick }),
             h('p', {className: "notes"}, rocks.notes),
         ]),
     ]);