add intervals and footer

Author: davidsklar99

pages/lex/timescales/+Page.client.ts

@@ -56,8 +56,6 @@ export function Page() {
     return matchesName && matchesAgeRange;
   });
 
-  const width = window.screen.width;
-  const timescaleWidth = width * 0.6 - 40;
   const handleClick = (timescale) => {
     const parent = timescale.target.parentElement;
     let selected;
@@ -99,7 +97,7 @@ export function Page() {
       h(
         "div.timescale",
         h(Timescale, {
-          length: timescaleWidth,
+          length: 970 - 40,
           levels: [1, 5],
           ageRange: [age[0], age[1]],
           absoluteAgeScale: true,

pages/lex/timescales/@id/+Page.client.ts

@@ -13,17 +13,18 @@ import { usePageContext } from "vike-react/usePageContext";
 import { Timescale } from "@macrostrat/timescale";
 import { titleCase } from "~/components/lex";
 import { useState, useEffect } from "react";
-import { Loading } from "~/components/general";
-
+import { Footer, Loading } from "~/components/general";
+import { asChromaColor } from "@macrostrat/color-utils";
+import { Popover } from "@blueprintjs/core";
 export function Page() {
   const pageContext = usePageContext();
   const id = parseInt(pageContext.urlParsed.pathname.split("/")[3]);
   const res = useAPIResult(SETTINGS.apiV2Prefix + "/defs/timescales?all")
     ?.success.data;
+  const intervals = useAPIResult(SETTINGS.apiV2Prefix + "/defs/intervals?timescale_id=" + id)
+    ?.success.data;
   const [clickedInterval, setClickedInterval] = useState(null);
 
-  console.log("clicked", clickedInterval);
-
   useEffect(() => {
     if (!clickedInterval) return;
 
@@ -46,10 +47,11 @@ export function Page() {
     fetchInterval();
   }, [clickedInterval]);
 
-  if (res == null) return h(Loading);
+  if (!res || !intervals) return h(Loading);
 
   // temporary till api is fixed
   const timeRes = res.find((d) => d.timescale_id === id);
+  const grouped = groupByIntType(intervals);
 
   if (timeRes == null) return h("div", "Timescale not found");
 
@@ -73,18 +75,86 @@ export function Page() {
     setClickedInterval(selected);
   };
 
-  return h(ContentPage, [
-    h(PageBreadcrumbs, { title: "#" + id }),
-    h("div.timescale-content", [
-      h("h1", titleCase(timescale)),
-      h("h3", max_age + " - " + min_age + " Ma"),
-      h(Timescale, {
-        levels: [0, 5],
-        ageRange: [min_age, max_age],
-        orientation: "vertical",
-        absoluteAgeScale: true,
-        onClick: handleClick,
-      }),
+  return h("div", [
+    h(ContentPage, [
+      h(PageBreadcrumbs, { title: "#" + id }),
+      h("div.timescale-content", [
+        h("h1", titleCase(timescale)),
+        h("h3", max_age + " - " + min_age + " Ma"),
+        h(Timescale, {
+          length: 970,
+          levels: [0, 5],
+          ageRange: [min_age, max_age],
+          orientation: "horizontal",
+          absoluteAgeScale: true,
+          onClick: handleClick,
+        }),
+        h(
+          "div.int-list",
+          Object.entries(grouped).map(([intType, group]) =>
+            h("div.int-group", [
+              h("h2", UpperCase(intType)),
+              h(
+                "div.int-items",
+                group.map((d) => h(EconItem, { data: d, key: d.environ_id }))
+              ),
+            ])
+          )
+        ),
+      ]),
     ]),
+    h(Footer)
   ]);
 }
+
+function groupByIntType(items) {
+  return items.reduce((acc, item) => {
+    const intType = item.int_type?.trim?.();
+    if (!intType) return acc; // Skip items with no int_type
+
+    if (!acc[intType]) {
+      acc[intType] = [];
+    }
+
+    acc[intType].push(item);
+    return acc;
+  }, {});
+}
+
+function UpperCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+function EconItem({ data }) {
+  const { name, color, abbrev, b_age, int_id, t_age, timescales } = data;
+  const chromaColor = color ? asChromaColor(color) : null;
+  const luminance = 0.9;
+  data.id = int_id;
+
+  // return IntervalTag({ showAgeRange: true, interval: data });
+
+  return h(
+    Popover,
+    {
+      className: "int-item-popover",
+      content: h("div.int-tooltip", [
+        h("div.int-tooltip-id", "ID: #" + int_id),
+        h("div.int-tooltip-ages", b_age + " - " + t_age + " Ma"),
+        abbrev ? h("div.int-tooltip-abbrev", "Abbreviation - " + abbrev) : null,
+        h(Link, { href: "/lex/intervals/" + int_id }, "View details"),
+      ]),
+    },
+    h("div.int-item", [
+      h(
+        "div.int-name",
+        {
+          style: {
+            backgroundColor: chromaColor?.luminance(1 - luminance).hex(),
+            color: chromaColor?.luminance(luminance).hex(),
+          },
+        },
+        name
+      ),
+    ])
+  );
+}

pages/lex/timescales/@id/main.module.scss

@@ -21,3 +21,26 @@ tspan {
 .visx-line {
   stroke: var(--text-color);
 }
+
+.int-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.3em;
+
+  h2 {
+    margin: 0.5em 0;
+  }
+
+  .int-items {
+    display: flex;
+    gap: 5px;
+    flex-wrap: wrap;
+    align-items: center;
+
+    .int-name {
+      padding: 2px 6px;
+      margin: 0.2em 0;
+      border-radius: 0.2em;
+    }
+  }
+}