New web-components

package.json

@@ -66,10 +66,10 @@
     "@macrostrat/api-types": "^1.1.0",
     "@macrostrat/color-utils": "^1.1.0",
     "@macrostrat/column-components": "^1.1.0",
-    "@macrostrat/column-views": "^2.0.1",
-    "@macrostrat/data-components": "^0.1.0",
+    "@macrostrat/column-views": "^2.1.1",
+    "@macrostrat/data-components": "^0.2.0",
     "@macrostrat/data-sheet": "^2.0.2",
-    "@macrostrat/feedback-components": "^1.0.1",
+    "@macrostrat/feedback-components": "^1.1.0",
     "@macrostrat/form-components": "^0.2.1",
     "@macrostrat/hyper": "^3.0.6",
     "@macrostrat/map-interface": "^1.3.0",
@@ -78,8 +78,8 @@
     "@macrostrat/mapbox-utils": "^1.5.0",
     "@macrostrat/style-system": "^0.2.1",
     "@macrostrat/svg-map-components": "^1.0.4",
-    "@macrostrat/timescale": "^2.1.1",
-    "@macrostrat/ui-components": "^4.1.2",
+    "@macrostrat/timescale": "^2.2.0",
+    "@macrostrat/ui-components": "^4.3.0",
     "@react-hook/size": "^2.1.2",
     "@supabase/postgrest-js": "^1.18.1",
     "@turf/bbox": "^6.5.0",

pages/columns/@column/column-inspector/modal-panel.ts

@@ -56,8 +56,24 @@ export function ModalUnitPanel(props) {
     onSelectUnit,
     columnUnits: unitData,
     features,
-    onClickItem: (unit) => {
-      console.log("Clicked unit:", unit);
+    onClickItem: (e, unit) => {
+      if(unit?.lith_id) {
+        window.open('/lex/lithology/' + unit.lith_id, '_blank');
+      }
+
+      if(unit?.environ_id) {
+        window.open('/lex/environments/' + unit.environ_id, '_blank');
+      }
+
+      if(e?.data?.int_id) { // fix when new we components release is out
+        window.open('/lex/intervals/' + e.data.int_id, '_blank');
+      }
+
+      /* // implement when new web components release is out
+      if(unit?.strat_name_id) {
+        window.open('/lex/strat-names/' + unit.strat_name_id, '_blank');
+      }
+      */
     },
   });
 }

pages/columns/map.client.ts

@@ -5,7 +5,6 @@ import {
 import h from "@macrostrat/hyper";
 import { mapboxAccessToken } from "@macrostrat-web/settings";
 import { ErrorBoundary } from "@macrostrat/ui-components";
-import { ColumnsMap } from "~/columns-map/index.client";
 
 export function ColumnsMapContainer(props) {
   /* TODO: integrate this with shared web components */
@@ -14,39 +13,25 @@ export function ColumnsMapContainer(props) {
 
 function ColumnsMapInner({ columnIDs = null, projectID = null, className }) {
   const columnData = useMacrostratColumns(projectID, projectID != null);
+  console.log("columnData", columnData);
 
-  let columns = columnData;
-
-  // Filter columns on the client side
-  if (columnIDs != null) {
-    columns = columns.filter((feature) =>
-      columnIDs.includes(feature.properties.col_id)
-    );
+  if(!columnData) {
+    return h("div", { className }, "Loading map...");
   }
 
   return h(
     "div",
     { className },
-    h(ColumnsMap, { columns: { type: "FeatureCollection", features: columns } })
-  );
-}
-
-export function ColumnsMapOld({
-  projectID,
-  inProcess,
-  className,
-  selectedColumn,
-  onSelectColumn,
-}) {
-  return h(
-    ErrorBoundary,
-    h(ColumnNavigationMap, {
-      className,
-      inProcess,
-      projectID,
+    h(ColumnNavigationMap, { 
+      style: { height: "100%" },
       accessToken: mapboxAccessToken,
-      selectedColumn,
-      onSelectColumn,
-    })
+      columns: columnData,
+      columnIDs,
+      onSelectColumn: (col) => {
+        if (col) {
+          window.open(`/columns/${col}`, "_blank");
+        }
+      }
+    }),
   );
-}
+}

pages/dev/test/+Page.client.ts

@@ -0,0 +1,20 @@
+import h from "@macrostrat/hyper";
+import { IntervalTag } from "@macrostrat/column-views";
+import { mapboxAccessToken } from "@macrostrat-web/settings";
+import { useAPIResult } from "@macrostrat/ui-components";
+import { LithologyTag } from "@macrostrat/data-components";
+import { data } from "#/+data";
+
+export function Page() {
+    return h(LithologyTag, {
+        data: {
+            id: 1,
+            name: "Sandstone",
+            lith_id: 1,
+            color: "#d2b48c",   // Example color        
+        },
+        onClick: (e, d) => {
+            console.log("Clicked item", d);
+        }
+    })
+}

pages/lex/economics/+Page.ts

@@ -59,33 +59,21 @@ function EconItem({ data }) {
   const luminance = 0.9;
   const chromaColor = asChromaColor(color);
 
-  return h(
-    Popover,
-    {
-      className: "econ-item-popover",
-      content: h("div.econ-tooltip", [
-        h("div.econ-tooltip-id", "ID - #" + econ_id),
-        h("div.econ-tooltip-t-unit", "Time Units - " + t_units),
-        h(
-          "a",
-          { href: `/lex/economics/${econ_id}`, className: "econ-tooltip-link" },
-          "View details"
-        ),
-      ]),
-    },
-    h("div.econ-item", [
+  return h("div.econ-item", [
       h(
         "div.econ-name",
         {
           style: {
             color: chromaColor?.luminance(luminance).hex(),
             backgroundColor: chromaColor?.luminance(1 - luminance).hex(),
           },
+          onClick: (e) => {
+            window.open(`/lex/economics/${econ_id}`, "_blank");
+          },
         },
         name
       ),
     ])
-  );
 }
 
 function groupByClassThenType(items) {

pages/lex/economics/main.module.scss

@@ -28,6 +28,7 @@ h2 {
           padding: 2px 6px;
           margin: 0.2em 0;
           border-radius: 0.2em;
+          cursor: pointer;
         }
       }
     }

pages/lex/environments/+Page.ts

@@ -6,6 +6,7 @@ import { ContentPage } from "~/layouts";
 import { asChromaColor } from "@macrostrat/color-utils";
 import { useData } from "vike-react/useData";
 import { SearchBar } from "~/components/general";
+import { LithologyTag } from "@macrostrat/data-components";
 
 export function Page() {
   const [input, setInput] = useState("");
@@ -63,29 +64,21 @@ function EnvironmentItem({ data }) {
 
   const luminance = 0.9;
 
-  return h(
-    Popover,
-    {
-      className: "environ-item-popover",
-      content: h("div.environ-tooltip", [
-        h("div.environ-tooltip-id", "ID - #" + environ_id),
-        h("div.environ-tooltip-t-unit", "Time Units - " + t_units),
-        h("a", { href: `/lex/environments/${environ_id}` }, "View details"),
-      ]),
-    },
-    h("div.environ-item", [
+  return h("div.environ-item", [
       h(
         "div.environ-name",
         {
           style: {
             backgroundColor: chromaColor?.luminance(1 - luminance).hex(),
             color: chromaColor?.luminance(luminance).hex(),
           },
+          onClick: (e) => {
+            window.open(`/lex/environments/${environ_id}`, "_blank");
+          },
         },
         name
       ),
-    ])
-  );
+    ]);
 }
 
 function groupByClassThenType(items) {

pages/lex/environments/main.module.scss

@@ -34,6 +34,7 @@ h2 {
           padding: 2px 6px;
           margin: 0.2em 0;
           border-radius: 0.2em;
+          cursor: pointer;
         }
       }
     }