From 386bb2f273d600065031a8a16a36fd382d05073a Mon Sep 17 00:00:00 2001 From: davidsklar99 Date: Mon, 9 Jun 2025 16:53:44 -0500 Subject: [PATCH 1/6] econs indv page works --- pages/lex/economics/@id/+Page.ts | 25 ++- src/components/lex/index.ts | 373 +++++++++++++++++-------------- src/types/lex.ts | 5 +- 3 files changed, 220 insertions(+), 183 deletions(-) diff --git a/pages/lex/economics/@id/+Page.ts b/pages/lex/economics/@id/+Page.ts index 8f8c132b7..bba2104bd 100644 --- a/pages/lex/economics/@id/+Page.ts +++ b/pages/lex/economics/@id/+Page.ts @@ -1,15 +1,24 @@ import { useData } from "vike-react/useData"; import { LexItemPage } from "~/components/lex"; +import h from "@macrostrat/hyper" +import { ColumnsTable, Charts, PrevalentTaxa, Timescales } from "~/components/lex"; export function Page() { const { resData, colData, taxaData, refs } = useData(); - return LexItemPage({ - id: resData.econ_id, - header: "econs", - resData, - colData, - taxaData, - refs - }); + const id = resData.econ_id; + const features = colData?.features || []; + const timescales = resData?.timescales || []; + + const children = [ + h(ColumnsTable, { + resData, + colData, + }), + h(Charts, { features }), + h(PrevalentTaxa, { taxaData }), + h(Timescales, { timescales }), + ] + + return LexItemPage({children, id, refs, resData, siftLink: "economic"}); } diff --git a/src/components/lex/index.ts b/src/components/lex/index.ts index 26a51fee6..90577aa92 100644 --- a/src/components/lex/index.ts +++ b/src/components/lex/index.ts @@ -1,23 +1,19 @@ import h from "./main.module.sass"; import { useAPIResult } from "@macrostrat/ui-components"; import { apiV2Prefix, pbdbDomain } from "@macrostrat-web/settings"; -import { PageHeader, Link, PageBreadcrumbs } from "~/components"; -import { Card, Icon, Popover, Divider, RangeSlider } from "@blueprintjs/core"; +import { Link, PageBreadcrumbs } from "~/components"; +import { Card, Divider } from "@blueprintjs/core"; import { ContentPage } from "~/layouts"; import { BlankImage, Footer, Loading } from "~/components/general"; -import { useState, useCallback, act } from "react"; +import { useState } from "react"; import { asChromaColor } from "@macrostrat/color-utils"; import { DarkModeButton } from "@macrostrat/ui-components"; import { PieChart, Pie, Cell, ResponsiveContainer, Label } from "recharts"; -import { Parenthetical, Hierarchy } from "@macrostrat/data-components"; -import { Duration } from "@macrostrat/column-views"; import { useDarkMode } from "@macrostrat/ui-components"; import { StratNameHierarchy } from "./StratNameHierarchy"; import { LinkCard } from "~/components/cards"; -import { ColumnsMap } from "~/columns-map/index.client"; import { Timescale } from "@macrostrat/timescale"; import { LexItemPageProps } from "~/types"; -import { fetchAPIData, fetchAPIRefs } from "~/_utils"; import { ClientOnly } from "vike-react/ClientOnly"; export function titleCase(str) { @@ -42,9 +38,8 @@ function ColumnMapContainer(props) { } export function LexItemPage(props: LexItemPageProps) { - const { id, header, resData, colData, taxaData, refs } = props; - const [activeIndex, setActiveIndex] = useState(null); - + const { children, siftLink, id, resData, refs } = props; + /* const siftLink = header === "intervals" ? "interval" @@ -59,26 +54,35 @@ export function LexItemPage(props: LexItemPageProps) { : header === "strat_name_concepts" ? "strat_name_concept" : "strat_name"; + */ - // data for charts - const features = colData?.features || []; + const { + name, + strat_name, + } = resData; - const liths = summarizeAttributes({ - data: features, - type: "lith", - }); - const environs = summarizeAttributes({ - data: features, - type: "environ", - }); - const econs = summarizeAttributes({ - data: features, - type: "econ", - }); - const summary = summarize(features); - const chromaColor = resData?.color ? asChromaColor(resData.color) : null; - const luminance = 0.9; + return h("div", [ + h(ContentPage, { className: "int-page" }, [ + h("div.page-header", [ + h(PageBreadcrumbs, { title: "#" + id }), + h(DarkModeButton, { className: "dark-mode-button", showText: true }), + ]), + h(LexItemHeader, { resData, name: strat_name ? strat_name : name, siftLink, id }), + children, + h(References, { refs }), + ]), + h(Footer), + ]); +} + +export function ColumnsTable({ resData, colData }) { + const summary = summarize(colData.features || []); + + const { + b_age, + t_age, + } = resData; const { t_units, @@ -90,158 +94,164 @@ export function LexItemPage(props: LexItemPageProps) { col_area, } = summary; + const area = parseInt(col_area.toString().split(".")[0]); + + const t_id = getIntID({ name: t_int_name }); const b_id = getIntID({ name: b_int_name }); - const { - name, - abbrev, - b_age, - t_age, - timescales, - strat_name, - concept_id, - } = resData; + return h("div.table", [ + h("div.table-content", [ + h("div.packages", t_sections.toLocaleString() + " packages"), + h(Divider, { className: "divider" }), + h("div.units", t_units.toLocaleString() + " units"), + h(Divider, { className: "divider" }), + h("div.interval", [ + h( + Link, + { href: "/lex/intervals/" + b_id }, + b_int_name.toLocaleString() + ), + " - ", + h( + Link, + { href: "/lex/intervals/" + t_id }, + t_int_name.toLocaleString() + ), + ]), + h.if(b_age && t_age)(Divider, { className: "divider" }), + h.if(b_age && t_age)("div.age-range", [ + h("div.int-age", b_age + " - " + t_age + " Ma"), + // h(Parenthetical, { className: "range"}, h(Duration, { value: b_age - t_age })), + ]), + h(Divider, { className: "divider" }), + h("div.area", [h("p", area.toLocaleString() + " km"), h("sup", "2")]), + h(Divider, { className: "divider" }), + h("div.thickness", "≤ " + max_thick.toLocaleString() + "m thick"), + h(Divider, { className: "divider" }), + h( + "div.collections", + pbdb_collections.toLocaleString() + " collections" + ), + ]), + h(ColumnMapContainer, { + columns: colData, + className: "column-map-container", + }), + ]); +} - const area = parseInt(col_area.toString().split(".")[0]); +export function Intervals({ resData }) { + const { b_age, t_age } = resData; + return h( + "div.timescale", + h(Timescale, { + length: 970, + levels: [1, 5], + ageRange: [b_age, t_age], + absoluteAgeScale: true, + }) + ); +} - return h("div", [ - h(ContentPage, { className: "int-page" }, [ - h("div.page-header", [ - h(PageBreadcrumbs, { title: "#" + id }), - h(DarkModeButton, { className: "dark-mode-button", showText: true }), - ]), - h("div.int-header", [ - h("div.int-names", [ - h( - "div.int-name", +function LexItemHeader({ resData, name, siftLink, id }) { + const chromaColor = resData?.color ? asChromaColor(resData.color) : null; + const luminance = 0.9; + const abbrev = resData?.abbrev && resData?.abbrev !== name; + + return h("div.int-header", [ + h("div.int-names", [ + h( + "div.int-name", + { + style: { + backgroundColor: chromaColor?.luminance(1 - luminance).hex(), + color: chromaColor?.luminance(luminance).hex(), + }, + }, + [ + UpperCase(name), + h.if(abbrev)(IntAbbrev, { - style: { - backgroundColor: chromaColor?.luminance(1 - luminance).hex(), - color: chromaColor?.luminance(luminance).hex(), - }, - }, - UpperCase(strat_name ? strat_name : name) + abbrev, + chromaColor, + luminance, + } ), - abbrev - ? h("div.int-abbrev", [ - h("p", " aka "), - h( - "div.int-abbrev-item", - { - style: { - backgroundColor: chromaColor - ?.luminance(1 - luminance) - .hex(), - color: chromaColor?.luminance(luminance).hex(), - }, - }, - abbrev - ), - ]) - : null, - ]), - h("div.sift-link", [ - h("p", "This page is is in development."), - h( - "a", - { href: "/sift/" + siftLink + "/" + id, target: "_blank" }, - "View in Sift" - ), - ]), - ]), - h.if(concept_id)(conceptInfo, { concept_id, header }), - h.if(header === "intervals")( - "div.timescale", - h(Timescale, { - length: 970, - levels: [1, 5], - ageRange: [b_age, t_age], - absoluteAgeScale: true, - }) + ] ), - h.if(features.length)("div.table", [ - h("div.table-content", [ - h("div.packages", t_sections.toLocaleString() + " packages"), - h(Divider, { className: "divider" }), - h("div.units", t_units.toLocaleString() + " units"), - h(Divider, { className: "divider" }), - h("div.interval", [ - h( - Link, - { href: "/lex/intervals/" + b_id }, - b_int_name.toLocaleString() - ), - " - ", - h( - Link, - { href: "/lex/intervals/" + t_id }, - t_int_name.toLocaleString() - ), - ]), - h.if(b_age && t_age)(Divider, { className: "divider" }), - h.if(b_age && t_age)("div.age-range", [ - h("div.int-age", b_age + " - " + t_age + " Ma"), - // h(Parenthetical, { className: "range"}, h(Duration, { value: b_age - t_age })), - ]), - h(Divider, { className: "divider" }), - h("div.area", [h("p", area.toLocaleString() + " km"), h("sup", "2")]), - h(Divider, { className: "divider" }), - h("div.thickness", "≤ " + max_thick.toLocaleString() + "m thick"), - h(Divider, { className: "divider" }), - h( - "div.collections", - pbdb_collections.toLocaleString() + " collections" - ), - ]), - h(ColumnMapContainer, { - columns: colData, - className: "column-map-container", - }), - ]), - h("div.charts", [ - h.if(liths?.length)( - "div.chart", - Chart(liths, "Lithologies", "lithology", activeIndex, setActiveIndex) - ), - h.if(environs?.length)( - "div.chart", - Chart( - environs, - "Environments", - "environments", - activeIndex, - setActiveIndex - ) - ), - h.if(econs?.length)( - "div.chart", - Chart(econs, "Economics", "economics", activeIndex, setActiveIndex) - ), - ]), - - h.if(taxaData)(PrevalentTaxa, { data: taxaData }), - h.if(header === "strat_names")(StratNameHierarchy, { id }), - // h.if(header === "strat_name_concepts")(ConceptHierarchy, { id}), - h.if(timescales?.[0]?.name)("div.int-timescales", [ - h("h3", "Timescales"), - h( - "ul", - timescales?.map((t) => - h( - "li", - h( - Link, - { href: "/lex/timescales/" + t.timescale_id }, - titleCase(t.name) - ) - ) - ) - ), - ]), - h(References, { refs }), ]), - h(Footer), + SiftLink({ + id, + siftLink, + }), + ]); +} + +function IntAbbrev({ abbrev, chromaColor, luminance }) { + return h("div.int-abbrev", [ + h("p", " aka "), + h( + "div.int-abbrev-item", + { + style: { + backgroundColor: chromaColor + ?.luminance(1 - luminance) + .hex(), + color: chromaColor?.luminance(luminance).hex(), + }, + }, + abbrev + ), + ]); +} + +function SiftLink({ id, siftLink }) { + return h("div.sift-link", [ + h("p", "This page is is in development."), + h( + "a", + { href: "/sift/" + siftLink + "/" + id, target: "_blank" }, + "View in Sift" + ), + ]); +} + +export function Charts({ features }) { + const [activeIndex, setActiveIndex] = useState(null); + + const liths = summarizeAttributes({ + data: features, + type: "lith", + }); + const environs = summarizeAttributes({ + data: features, + type: "environ", + }); + const econs = summarizeAttributes({ + data: features, + type: "econ", + }); + + return h("div.charts", [ + h.if(liths?.length)( + "div.chart", + Chart(liths, "Lithologies", "lithology", activeIndex, setActiveIndex) + ), + h.if(environs?.length)( + "div.chart", + Chart( + environs, + "Environments", + "environments", + activeIndex, + setActiveIndex + ) + ), + h.if(econs?.length)( + "div.chart", + Chart(econs, "Economics", "economics", activeIndex, setActiveIndex) + ), ]); } @@ -249,6 +259,25 @@ function UpperCase(str) { return str.charAt(0).toUpperCase() + str.slice(1); } +export function Timescales({ timescales }) { + return h.if(timescales?.length)("div.int-timescales", [ + h("h3", "Timescales"), + h( + "ul", + timescales?.map((t) => + h( + "li", + h( + Link, + { href: "/lex/timescales/" + t.timescale_id }, + titleCase(t.name) + ) + ) + ) + ), + ]); +} + function References({ refs }) { return h.if(refs?.length != 0)("div.int-references", [ h("h3", "Primary Sources"), @@ -260,8 +289,8 @@ function References({ refs }) { ]); } -function PrevalentTaxa({ data }) { - const records = data?.records; +export function PrevalentTaxa({ taxaData }) { + const records = taxaData?.records; return h(Card, { className: "prevalent-taxa-container" }, [ h("div.taxa-header", [ diff --git a/src/types/lex.ts b/src/types/lex.ts index 0ea2a5f57..3e047a04d 100644 --- a/src/types/lex.ts +++ b/src/types/lex.ts @@ -62,11 +62,10 @@ export interface ColData { } export interface LexItemPageProps { + children: any[], + siftLink: string; id: number; - header: string; resData: ResData; - colData: ColData; - taxaData: any[]; refs: string[]; } From 2a5c77bf04d85a7d7767e3f73482dd910801c674 Mon Sep 17 00:00:00 2001 From: davidsklar99 Date: Mon, 9 Jun 2025 16:59:07 -0500 Subject: [PATCH 2/6] indv pages work --- pages/lex/economics/@id/+Page.ts | 3 +-- pages/lex/environments/@id/+Page.ts | 26 +++++++++++++++++--------- pages/lex/intervals/@id/+Page.ts | 27 ++++++++++++++++++--------- pages/lex/lithology/@id/+Page.ts | 26 +++++++++++++++++--------- 4 files changed, 53 insertions(+), 29 deletions(-) diff --git a/pages/lex/economics/@id/+Page.ts b/pages/lex/economics/@id/+Page.ts index bba2104bd..5e992d57d 100644 --- a/pages/lex/economics/@id/+Page.ts +++ b/pages/lex/economics/@id/+Page.ts @@ -1,7 +1,6 @@ import { useData } from "vike-react/useData"; -import { LexItemPage } from "~/components/lex"; import h from "@macrostrat/hyper" -import { ColumnsTable, Charts, PrevalentTaxa, Timescales } from "~/components/lex"; +import { LexItemPage, ColumnsTable, Charts, PrevalentTaxa, Timescales } from "~/components/lex"; export function Page() { const { resData, colData, taxaData, refs } = useData(); diff --git a/pages/lex/environments/@id/+Page.ts b/pages/lex/environments/@id/+Page.ts index d26f7d94c..a998a9056 100644 --- a/pages/lex/environments/@id/+Page.ts +++ b/pages/lex/environments/@id/+Page.ts @@ -1,15 +1,23 @@ import { useData } from "vike-react/useData"; -import { LexItemPage } from "~/components/lex"; +import h from "@macrostrat/hyper" +import { LexItemPage, ColumnsTable, Charts, PrevalentTaxa, Timescales } from "~/components/lex"; export function Page() { const { resData, colData, taxaData, refs } = useData(); - return LexItemPage({ - id: resData.environ_id, - header: "environments", - resData, - colData, - taxaData, - refs - }); + const id = resData.environ_id; + const features = colData?.features || []; + const timescales = resData?.timescales || []; + + const children = [ + h(ColumnsTable, { + resData, + colData, + }), + h(Charts, { features }), + h(PrevalentTaxa, { taxaData }), + h(Timescales, { timescales }), + ] + + return LexItemPage({children, id, refs, resData, siftLink: "environment"}); } diff --git a/pages/lex/intervals/@id/+Page.ts b/pages/lex/intervals/@id/+Page.ts index 047564ee0..16e0bad99 100644 --- a/pages/lex/intervals/@id/+Page.ts +++ b/pages/lex/intervals/@id/+Page.ts @@ -1,15 +1,24 @@ import { useData } from "vike-react/useData"; -import { LexItemPage } from "~/components/lex"; +import h from "@macrostrat/hyper" +import { Intervals, LexItemPage, ColumnsTable, Charts, PrevalentTaxa, Timescales } from "~/components/lex"; export function Page() { const { resData, colData, taxaData, refs } = useData(); - return LexItemPage({ - id: resData.int_id, - header: "intervals", - resData, - colData, - taxaData, - refs - }); + const id = resData.int_id; + const features = colData?.features || []; + const timescales = resData?.timescales || []; + + const children = [ + h(Intervals, { resData }), + h(ColumnsTable, { + resData, + colData, + }), + h(Charts, { features }), + h(PrevalentTaxa, { taxaData }), + h(Timescales, { timescales }), + ] + + return LexItemPage({children, id, refs, resData, siftLink: "interval"}); } diff --git a/pages/lex/lithology/@id/+Page.ts b/pages/lex/lithology/@id/+Page.ts index 3bd89837e..8a0e80457 100644 --- a/pages/lex/lithology/@id/+Page.ts +++ b/pages/lex/lithology/@id/+Page.ts @@ -1,15 +1,23 @@ import { useData } from "vike-react/useData"; -import { LexItemPage } from "~/components/lex"; +import h from "@macrostrat/hyper" +import { LexItemPage, ColumnsTable, Charts, PrevalentTaxa, Timescales } from "~/components/lex"; export function Page() { const { resData, colData, taxaData, refs } = useData(); - return LexItemPage({ - id: resData.lith_id, - header: "lithologies", - resData, - colData, - taxaData, - refs - }); + const id = resData.lith_id; + const features = colData?.features || []; + const timescales = resData?.timescales || []; + + const children = [ + h(ColumnsTable, { + resData, + colData, + }), + h(Charts, { features }), + h(PrevalentTaxa, { taxaData }), + h(Timescales, { timescales }), + ] + + return LexItemPage({children, id, refs, resData, siftLink: "lithology"}); } From d26c9120cd82b5095262029cffd01e18c119c508 Mon Sep 17 00:00:00 2001 From: davidsklar99 Date: Mon, 9 Jun 2025 17:09:18 -0500 Subject: [PATCH 3/6] individual pages work --- pages/lex/strat-name-concepts/@id/+Page.ts | 22 ++++++++-------- pages/lex/strat-name-concepts/@id/+data.ts | 18 ++------------ pages/lex/strat-names/@id/+Page.ts | 29 +++++++++++++++------- src/components/lex/index.ts | 8 +++--- 4 files changed, 37 insertions(+), 40 deletions(-) diff --git a/pages/lex/strat-name-concepts/@id/+Page.ts b/pages/lex/strat-name-concepts/@id/+Page.ts index 4036b630d..10948002b 100644 --- a/pages/lex/strat-name-concepts/@id/+Page.ts +++ b/pages/lex/strat-name-concepts/@id/+Page.ts @@ -1,15 +1,15 @@ import { useData } from "vike-react/useData"; -import { LexItemPage } from "~/components/lex"; +import h from "@macrostrat/hyper" +import { LexItemPage, ConceptInfo } from "~/components/lex"; export function Page() { - const { resData, colData, taxaData, refs } = useData(); - - return LexItemPage({ - id: resData.concept_id, - header: "strat_name_concepts", - resData, - colData, - taxaData, - refs - }); + const { resData, refs } = useData(); + + const id = resData.concept_id; + + const children = [ + h(ConceptInfo, { concept_id: id, showHeader: false }), + ] + + return LexItemPage({children, id, refs, resData, siftLink: "strat_name_concept"}); } diff --git a/pages/lex/strat-name-concepts/@id/+data.ts b/pages/lex/strat-name-concepts/@id/+data.ts index bf4f2474f..d80a3d9aa 100644 --- a/pages/lex/strat-name-concepts/@id/+data.ts +++ b/pages/lex/strat-name-concepts/@id/+data.ts @@ -1,13 +1,11 @@ -import { pbdbDomain } from "@macrostrat-web/settings"; import { fetchAPIData, fetchAPIRefs } from "~/_utils"; export async function data(pageContext) { const concept_id = parseInt(pageContext.urlParsed.pathname.split("/")[3]); // Await all API calls - const [resData, colData, refs1, refs2] = await Promise.all([ + const [resData, refs1, refs2] = await Promise.all([ fetchAPIData("/defs/strat_name_concepts", { concept_id }), - fetchAPIData("/columns", { concept_id, response: "long", format: "geojson" }), fetchAPIRefs("/fossils", { concept_id }), fetchAPIRefs("/columns", { concept_id }), ]); @@ -16,17 +14,5 @@ export async function data(pageContext) { const refValues2 = refs2 ? Object.values(refs2) : []; const refs = [...refValues1, ...refValues2]; - const cols = colData?.features - ?.map((feature) => feature.properties.col_id) - ?.join(","); - - let taxaData = null; - if (cols) { - const response = await fetch( - `${pbdbDomain}/data1.2/occs/prevalence.json?limit=5&coll_id=${cols}` - ); - taxaData = await response.json(); - } - - return { resData: resData[0], colData, taxaData, refs }; + return { resData: resData[0], refs }; } diff --git a/pages/lex/strat-names/@id/+Page.ts b/pages/lex/strat-names/@id/+Page.ts index 8e4a8ed96..41299c9d6 100644 --- a/pages/lex/strat-names/@id/+Page.ts +++ b/pages/lex/strat-names/@id/+Page.ts @@ -1,15 +1,26 @@ import { useData } from "vike-react/useData"; -import { LexItemPage } from "~/components/lex"; +import h from "@macrostrat/hyper" +import { LexItemPage, ColumnsTable, Charts, PrevalentTaxa, Timescales, ConceptInfo } from "~/components/lex"; +import { StratNameHierarchy } from "~/components/lex/StratNameHierarchy"; export function Page() { const { resData, colData, taxaData, refs } = useData(); - return LexItemPage({ - id: resData.strat_name_id, - header: "strat_names", - resData, - colData, - taxaData, - refs - }); + const id = resData.strat_name_id; + const features = colData?.features || []; + const timescales = resData?.timescales || []; + + const children = [ + h(ConceptInfo, { concept_id: resData?.concept_id, showHeader: true }), + h(ColumnsTable, { + resData, + colData, + }), + h(Charts, { features }), + h(PrevalentTaxa, { taxaData }), + h(StratNameHierarchy, { id }), + h(Timescales, { timescales }), + ] + + return LexItemPage({children, id, refs, resData, siftLink: "strat-name"}); } diff --git a/src/components/lex/index.ts b/src/components/lex/index.ts index 90577aa92..f06e62440 100644 --- a/src/components/lex/index.ts +++ b/src/components/lex/index.ts @@ -355,7 +355,7 @@ function getIntID({ name }) { return id; } -function conceptInfo({ concept_id, header }) { +export function ConceptInfo({ concept_id, showHeader }) { const url = apiV2Prefix + "/defs/strat_name_concepts?strat_name_concept_id=" + @@ -367,8 +367,8 @@ function conceptInfo({ concept_id, header }) { const { author, name, province, geologic_age, other, usage_notes } = data; return h("div.concept-info", [ - h.if(header != "strat_name_concepts")("h3", "Stratigraphic Concept"), - h.if(header != "strat_name_concepts")("div.concept-name", [ + h.if(showHeader)("h3", "Stratigraphic Concept"), + h.if(showHeader)("div.concept-name", [ h( "a.title", { href: "/lex/strat-name-concepts/" + concept_id, target: "_blank" }, @@ -376,7 +376,7 @@ function conceptInfo({ concept_id, header }) { ), h("a.concept-ref", { href: url, target: "_blank" }, "via " + author), ]), - h.if(header === "strat_name_concepts")("div.author", [ + h.if(showHeader)("div.author", [ h("span.title", "Author: "), h("span.author-text", h(Link, { href: url, target: "_blank" }, author)), ]), From 208655a095b4b36d8b884a96728da05c74adadfc Mon Sep 17 00:00:00 2001 From: davidsklar99 Date: Mon, 9 Jun 2025 17:12:49 -0500 Subject: [PATCH 4/6] styling --- packages/column-builder/src/types.ts | 2 +- pages/columns/groups/@group/+Page.client.ts | 2 +- pages/columns/groups/@group/+data.ts | 12 +++-- pages/lex/economics/@id/+Page.ts | 14 ++++-- pages/lex/economics/@id/+data.ts | 8 ++-- pages/lex/environments/@id/+Page.ts | 14 ++++-- pages/lex/environments/@id/+data.ts | 12 +++-- pages/lex/intervals/@id/+Page.ts | 15 ++++-- pages/lex/intervals/@id/+data.ts | 8 ++-- pages/lex/lithology/@id/+Page.ts | 14 ++++-- pages/lex/lithology/@id/+data.ts | 6 +-- pages/lex/strat-name-concepts/@id/+Page.ts | 14 ++++-- pages/lex/strat-names/@id/+Page.ts | 15 ++++-- pages/lex/strat-names/@id/+data.ts | 12 +++-- src/_utils/fetch-helpers.ts | 2 +- src/components/lex/index.ts | 42 +++++++---------- src/components/lex/map.client.ts | 11 ++++- src/types/index.ts | 1 - src/types/lex.ts | 52 ++++++++++----------- 19 files changed, 150 insertions(+), 106 deletions(-) diff --git a/packages/column-builder/src/types.ts b/packages/column-builder/src/types.ts index 49405b7f9..4f072832d 100644 --- a/packages/column-builder/src/types.ts +++ b/packages/column-builder/src/types.ts @@ -178,4 +178,4 @@ export interface ColSectionI { unit_count: number; top: string; bottom: string; -} \ No newline at end of file +} diff --git a/pages/columns/groups/@group/+Page.client.ts b/pages/columns/groups/@group/+Page.client.ts index dfcdb822e..f94b246b4 100644 --- a/pages/columns/groups/@group/+Page.client.ts +++ b/pages/columns/groups/@group/+Page.client.ts @@ -10,6 +10,6 @@ export function Page() { resData, colData, taxaData, - refs + refs, }); } diff --git a/pages/columns/groups/@group/+data.ts b/pages/columns/groups/@group/+data.ts index 4754ee485..8c6131157 100644 --- a/pages/columns/groups/@group/+data.ts +++ b/pages/columns/groups/@group/+data.ts @@ -7,14 +7,18 @@ export async function data(pageContext) { // Await all API calls const [resData, colData, refs1, refs2] = await Promise.all([ fetchAPIData("/defs/groups", { col_group_id }), - fetchAPIData("/columns", { col_group_id, response: "long", format: "geojson" }), + fetchAPIData("/columns", { + col_group_id, + response: "long", + format: "geojson", + }), fetchAPIRefs("/fossils", { col_group_id }), fetchAPIRefs("/columns", { col_group_id }), ]); - const refValues1 = Object.values(refs1) - const refValues2 = Object.values(refs2) - const refs = [...refValues1, ...refValues2] + const refValues1 = Object.values(refs1); + const refValues2 = Object.values(refs2); + const refs = [...refValues1, ...refValues2]; const cols = colData?.features ?.map((feature) => feature.properties.col_id) diff --git a/pages/lex/economics/@id/+Page.ts b/pages/lex/economics/@id/+Page.ts index 5e992d57d..6fe2ab942 100644 --- a/pages/lex/economics/@id/+Page.ts +++ b/pages/lex/economics/@id/+Page.ts @@ -1,6 +1,12 @@ import { useData } from "vike-react/useData"; -import h from "@macrostrat/hyper" -import { LexItemPage, ColumnsTable, Charts, PrevalentTaxa, Timescales } from "~/components/lex"; +import h from "@macrostrat/hyper"; +import { + LexItemPage, + ColumnsTable, + Charts, + PrevalentTaxa, + Timescales, +} from "~/components/lex"; export function Page() { const { resData, colData, taxaData, refs } = useData(); @@ -17,7 +23,7 @@ export function Page() { h(Charts, { features }), h(PrevalentTaxa, { taxaData }), h(Timescales, { timescales }), - ] + ]; - return LexItemPage({children, id, refs, resData, siftLink: "economic"}); + return LexItemPage({ children, id, refs, resData, siftLink: "economic" }); } diff --git a/pages/lex/economics/@id/+data.ts b/pages/lex/economics/@id/+data.ts index 971b39f55..9a8db5a00 100644 --- a/pages/lex/economics/@id/+data.ts +++ b/pages/lex/economics/@id/+data.ts @@ -12,9 +12,9 @@ export async function data(pageContext) { fetchAPIRefs("/columns", { econ_id }), ]); - const refValues1 = Object.values(refs1) - const refValues2 = Object.values(refs2) - const refs = [...refValues1, ...refValues2] + const refValues1 = Object.values(refs1); + const refValues2 = Object.values(refs2); + const refs = [...refValues1, ...refValues2]; const cols = colData.features ?.map((feature) => feature.properties.col_id) @@ -29,4 +29,4 @@ export async function data(pageContext) { } return { resData: resData[0], colData, taxaData, refs }; -} \ No newline at end of file +} diff --git a/pages/lex/environments/@id/+Page.ts b/pages/lex/environments/@id/+Page.ts index a998a9056..89dd0b762 100644 --- a/pages/lex/environments/@id/+Page.ts +++ b/pages/lex/environments/@id/+Page.ts @@ -1,6 +1,12 @@ import { useData } from "vike-react/useData"; -import h from "@macrostrat/hyper" -import { LexItemPage, ColumnsTable, Charts, PrevalentTaxa, Timescales } from "~/components/lex"; +import h from "@macrostrat/hyper"; +import { + LexItemPage, + ColumnsTable, + Charts, + PrevalentTaxa, + Timescales, +} from "~/components/lex"; export function Page() { const { resData, colData, taxaData, refs } = useData(); @@ -17,7 +23,7 @@ export function Page() { h(Charts, { features }), h(PrevalentTaxa, { taxaData }), h(Timescales, { timescales }), - ] + ]; - return LexItemPage({children, id, refs, resData, siftLink: "environment"}); + return LexItemPage({ children, id, refs, resData, siftLink: "environment" }); } diff --git a/pages/lex/environments/@id/+data.ts b/pages/lex/environments/@id/+data.ts index 3485bfad5..7bbd9a3e1 100644 --- a/pages/lex/environments/@id/+data.ts +++ b/pages/lex/environments/@id/+data.ts @@ -7,14 +7,18 @@ export async function data(pageContext) { // Await all API calls const [resData, colData, refs1, refs2] = await Promise.all([ fetchAPIData("/defs/environments", { environ_id }), - fetchAPIData("/columns", { environ_id, response: "long", format: "geojson" }), + fetchAPIData("/columns", { + environ_id, + response: "long", + format: "geojson", + }), fetchAPIRefs("/fossils", { environ_id }), fetchAPIRefs("/columns", { environ_id }), ]); - const refValues1 = Object.values(refs1) - const refValues2 = Object.values(refs2) - const refs = [...refValues1, ...refValues2] + const refValues1 = Object.values(refs1); + const refValues2 = Object.values(refs2); + const refs = [...refValues1, ...refValues2]; const cols = colData.features ?.map((feature) => feature.properties.col_id) diff --git a/pages/lex/intervals/@id/+Page.ts b/pages/lex/intervals/@id/+Page.ts index 16e0bad99..8b2a5dbd8 100644 --- a/pages/lex/intervals/@id/+Page.ts +++ b/pages/lex/intervals/@id/+Page.ts @@ -1,6 +1,13 @@ import { useData } from "vike-react/useData"; -import h from "@macrostrat/hyper" -import { Intervals, LexItemPage, ColumnsTable, Charts, PrevalentTaxa, Timescales } from "~/components/lex"; +import h from "@macrostrat/hyper"; +import { + Intervals, + LexItemPage, + ColumnsTable, + Charts, + PrevalentTaxa, + Timescales, +} from "~/components/lex"; export function Page() { const { resData, colData, taxaData, refs } = useData(); @@ -18,7 +25,7 @@ export function Page() { h(Charts, { features }), h(PrevalentTaxa, { taxaData }), h(Timescales, { timescales }), - ] + ]; - return LexItemPage({children, id, refs, resData, siftLink: "interval"}); + return LexItemPage({ children, id, refs, resData, siftLink: "interval" }); } diff --git a/pages/lex/intervals/@id/+data.ts b/pages/lex/intervals/@id/+data.ts index 686169df2..0423ddd2a 100644 --- a/pages/lex/intervals/@id/+data.ts +++ b/pages/lex/intervals/@id/+data.ts @@ -12,9 +12,9 @@ export async function data(pageContext) { fetchAPIRefs("/columns", { int_id }), ]); - const refValues1 = Object.values(refs1) - const refValues2 = Object.values(refs2) - const refs = [...refValues1, ...refValues2] + const refValues1 = Object.values(refs1); + const refValues2 = Object.values(refs2); + const refs = [...refValues1, ...refValues2]; const cols = colData.features ?.map((feature) => feature.properties.col_id) @@ -29,4 +29,4 @@ export async function data(pageContext) { } return { resData: resData[0], colData, taxaData, refs }; -} \ No newline at end of file +} diff --git a/pages/lex/lithology/@id/+Page.ts b/pages/lex/lithology/@id/+Page.ts index 8a0e80457..bd0197f9c 100644 --- a/pages/lex/lithology/@id/+Page.ts +++ b/pages/lex/lithology/@id/+Page.ts @@ -1,6 +1,12 @@ import { useData } from "vike-react/useData"; -import h from "@macrostrat/hyper" -import { LexItemPage, ColumnsTable, Charts, PrevalentTaxa, Timescales } from "~/components/lex"; +import h from "@macrostrat/hyper"; +import { + LexItemPage, + ColumnsTable, + Charts, + PrevalentTaxa, + Timescales, +} from "~/components/lex"; export function Page() { const { resData, colData, taxaData, refs } = useData(); @@ -17,7 +23,7 @@ export function Page() { h(Charts, { features }), h(PrevalentTaxa, { taxaData }), h(Timescales, { timescales }), - ] + ]; - return LexItemPage({children, id, refs, resData, siftLink: "lithology"}); + return LexItemPage({ children, id, refs, resData, siftLink: "lithology" }); } diff --git a/pages/lex/lithology/@id/+data.ts b/pages/lex/lithology/@id/+data.ts index 00bdb9ea1..9382465a9 100644 --- a/pages/lex/lithology/@id/+data.ts +++ b/pages/lex/lithology/@id/+data.ts @@ -12,9 +12,9 @@ export async function data(pageContext) { fetchAPIRefs("/columns", { lith_id }), ]); - const refValues1 = Object.values(refs1) - const refValues2 = Object.values(refs2) - const refs = [...refValues1, ...refValues2] + const refValues1 = Object.values(refs1); + const refValues2 = Object.values(refs2); + const refs = [...refValues1, ...refValues2]; const cols = colData.features ?.map((feature) => feature.properties.col_id) diff --git a/pages/lex/strat-name-concepts/@id/+Page.ts b/pages/lex/strat-name-concepts/@id/+Page.ts index 10948002b..82fdb279f 100644 --- a/pages/lex/strat-name-concepts/@id/+Page.ts +++ b/pages/lex/strat-name-concepts/@id/+Page.ts @@ -1,5 +1,5 @@ import { useData } from "vike-react/useData"; -import h from "@macrostrat/hyper" +import h from "@macrostrat/hyper"; import { LexItemPage, ConceptInfo } from "~/components/lex"; export function Page() { @@ -7,9 +7,13 @@ export function Page() { const id = resData.concept_id; - const children = [ - h(ConceptInfo, { concept_id: id, showHeader: false }), - ] + const children = [h(ConceptInfo, { concept_id: id, showHeader: false })]; - return LexItemPage({children, id, refs, resData, siftLink: "strat_name_concept"}); + return LexItemPage({ + children, + id, + refs, + resData, + siftLink: "strat_name_concept", + }); } diff --git a/pages/lex/strat-names/@id/+Page.ts b/pages/lex/strat-names/@id/+Page.ts index 41299c9d6..baed6c6b0 100644 --- a/pages/lex/strat-names/@id/+Page.ts +++ b/pages/lex/strat-names/@id/+Page.ts @@ -1,6 +1,13 @@ import { useData } from "vike-react/useData"; -import h from "@macrostrat/hyper" -import { LexItemPage, ColumnsTable, Charts, PrevalentTaxa, Timescales, ConceptInfo } from "~/components/lex"; +import h from "@macrostrat/hyper"; +import { + LexItemPage, + ColumnsTable, + Charts, + PrevalentTaxa, + Timescales, + ConceptInfo, +} from "~/components/lex"; import { StratNameHierarchy } from "~/components/lex/StratNameHierarchy"; export function Page() { @@ -20,7 +27,7 @@ export function Page() { h(PrevalentTaxa, { taxaData }), h(StratNameHierarchy, { id }), h(Timescales, { timescales }), - ] + ]; - return LexItemPage({children, id, refs, resData, siftLink: "strat-name"}); + return LexItemPage({ children, id, refs, resData, siftLink: "strat-name" }); } diff --git a/pages/lex/strat-names/@id/+data.ts b/pages/lex/strat-names/@id/+data.ts index cbde87de7..1425a7cae 100644 --- a/pages/lex/strat-names/@id/+data.ts +++ b/pages/lex/strat-names/@id/+data.ts @@ -7,14 +7,18 @@ export async function data(pageContext) { // Await all API calls const [resData, colData, refs1, refs2] = await Promise.all([ fetchAPIData("/defs/strat_names", { strat_name_id }), - fetchAPIData("/columns", { strat_name_id, response: "long", format: "geojson" }), + fetchAPIData("/columns", { + strat_name_id, + response: "long", + format: "geojson", + }), fetchAPIRefs("/fossils", { strat_name_id }), fetchAPIRefs("/columns", { strat_name_id }), ]); - const refValues1 = Object.values(refs1) - const refValues2 = Object.values(refs2) - const refs = [...refValues1, ...refValues2] + const refValues1 = Object.values(refs1); + const refValues2 = Object.values(refs2); + const refs = [...refValues1, ...refValues2]; const cols = colData?.features ?.map((feature) => feature.properties.col_id) diff --git a/src/_utils/fetch-helpers.ts b/src/_utils/fetch-helpers.ts index 191ca18b8..395b2a180 100644 --- a/src/_utils/fetch-helpers.ts +++ b/src/_utils/fetch-helpers.ts @@ -19,4 +19,4 @@ export async function fetchAPIRefs(apiURL: string, params: any) { const res = await fetch(url.toString()); const res1 = await res.json(); return res1?.success?.refs; -} \ No newline at end of file +} diff --git a/src/components/lex/index.ts b/src/components/lex/index.ts index f06e62440..2467ac091 100644 --- a/src/components/lex/index.ts +++ b/src/components/lex/index.ts @@ -56,11 +56,7 @@ export function LexItemPage(props: LexItemPageProps) { : "strat_name"; */ - const { - name, - strat_name, - } = resData; - + const { name, strat_name } = resData; return h("div", [ h(ContentPage, { className: "int-page" }, [ @@ -68,7 +64,12 @@ export function LexItemPage(props: LexItemPageProps) { h(PageBreadcrumbs, { title: "#" + id }), h(DarkModeButton, { className: "dark-mode-button", showText: true }), ]), - h(LexItemHeader, { resData, name: strat_name ? strat_name : name, siftLink, id }), + h(LexItemHeader, { + resData, + name: strat_name ? strat_name : name, + siftLink, + id, + }), children, h(References, { refs }), ]), @@ -79,10 +80,7 @@ export function LexItemPage(props: LexItemPageProps) { export function ColumnsTable({ resData, colData }) { const summary = summarize(colData.features || []); - const { - b_age, - t_age, - } = resData; + const { b_age, t_age } = resData; const { t_units, @@ -96,7 +94,6 @@ export function ColumnsTable({ resData, colData }) { const area = parseInt(col_area.toString().split(".")[0]); - const t_id = getIntID({ name: t_int_name }); const b_id = getIntID({ name: b_int_name }); @@ -129,10 +126,7 @@ export function ColumnsTable({ resData, colData }) { h(Divider, { className: "divider" }), h("div.thickness", "≤ " + max_thick.toLocaleString() + "m thick"), h(Divider, { className: "divider" }), - h( - "div.collections", - pbdb_collections.toLocaleString() + " collections" - ), + h("div.collections", pbdb_collections.toLocaleString() + " collections"), ]), h(ColumnMapContainer, { columns: colData, @@ -168,16 +162,14 @@ function LexItemHeader({ resData, name, siftLink, id }) { backgroundColor: chromaColor?.luminance(1 - luminance).hex(), color: chromaColor?.luminance(luminance).hex(), }, - }, + }, [ UpperCase(name), - h.if(abbrev)(IntAbbrev, - { - abbrev, - chromaColor, - luminance, - } - ), + h.if(abbrev)(IntAbbrev, { + abbrev, + chromaColor, + luminance, + }), ] ), ]), @@ -195,9 +187,7 @@ function IntAbbrev({ abbrev, chromaColor, luminance }) { "div.int-abbrev-item", { style: { - backgroundColor: chromaColor - ?.luminance(1 - luminance) - .hex(), + backgroundColor: chromaColor?.luminance(1 - luminance).hex(), color: chromaColor?.luminance(luminance).hex(), }, }, diff --git a/src/components/lex/map.client.ts b/src/components/lex/map.client.ts index 6387f4997..033db62ca 100644 --- a/src/components/lex/map.client.ts +++ b/src/components/lex/map.client.ts @@ -12,7 +12,12 @@ export function ColumnsMapContainer(props) { return h(ErrorBoundary, h(ColumnsMapInner, props)); } -function ColumnsMapInner({ columnIDs = null, projectID = null, className, columns = null}) { +function ColumnsMapInner({ + columnIDs = null, + projectID = null, + className, + columns = null, +}) { const columnData = useMacrostratColumns(projectID, projectID != null); let _columns = columns?.features ?? columnData; @@ -27,7 +32,9 @@ function ColumnsMapInner({ columnIDs = null, projectID = null, className, column return h( "div", { className }, - h(ColumnsMap, { columns: { type: "FeatureCollection", features: _columns } }) + h(ColumnsMap, { + columns: { type: "FeatureCollection", features: _columns }, + }) ); } diff --git a/src/types/index.ts b/src/types/index.ts index 6d6e499f6..fb42b494b 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,3 +1,2 @@ export * from "./xdd"; export * from "./lex"; - diff --git a/src/types/lex.ts b/src/types/lex.ts index 3e047a04d..5cfd28874 100644 --- a/src/types/lex.ts +++ b/src/types/lex.ts @@ -25,30 +25,30 @@ export interface EconProps { export interface GeoJSONFeature { type: string; properties: { - col_id: number, - col_name: string, - col_group: string, - col_group_id: number, - group_col_id: string, - lat: string, - lng: string, - col_area: string, - project_id: number, - col_type: string, - refs: number[], - max_thick: number, - max_min_thick: number, - min_min_thick: number, - b_age: number, - t_age: number, - b_int_name: string, - t_int_name: string, - pbdb_collections: number, - lith: LithProps[], - environ: EnvironProps[], - econ: EconProps[], - t_units: number, - t_sections: number + col_id: number; + col_name: string; + col_group: string; + col_group_id: number; + group_col_id: string; + lat: string; + lng: string; + col_area: string; + project_id: number; + col_type: string; + refs: number[]; + max_thick: number; + max_min_thick: number; + min_min_thick: number; + b_age: number; + t_age: number; + b_int_name: string; + t_int_name: string; + pbdb_collections: number; + lith: LithProps[]; + environ: EnvironProps[]; + econ: EconProps[]; + t_units: number; + t_sections: number; }; geometry: { type: string; @@ -62,7 +62,7 @@ export interface ColData { } export interface LexItemPageProps { - children: any[], + children: any[]; siftLink: string; id: number; resData: ResData; @@ -83,4 +83,4 @@ export interface ResData { export interface Timescale { timescale_id: number; name: string; -} \ No newline at end of file +} From 371ee9b3aa9ad25ebc57e6cb536bab033a5ee9f6 Mon Sep 17 00:00:00 2001 From: davidsklar99 Date: Mon, 9 Jun 2025 17:12:59 -0500 Subject: [PATCH 5/6] groups page works --- pages/columns/groups/@group/+Page.client.ts | 32 +++++++++++++++------ 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/pages/columns/groups/@group/+Page.client.ts b/pages/columns/groups/@group/+Page.client.ts index f94b246b4..89dd0b762 100644 --- a/pages/columns/groups/@group/+Page.client.ts +++ b/pages/columns/groups/@group/+Page.client.ts @@ -1,15 +1,29 @@ import { useData } from "vike-react/useData"; -import { LexItemPage } from "~/components/lex"; +import h from "@macrostrat/hyper"; +import { + LexItemPage, + ColumnsTable, + Charts, + PrevalentTaxa, + Timescales, +} from "~/components/lex"; export function Page() { const { resData, colData, taxaData, refs } = useData(); - return LexItemPage({ - id: resData.col_group_id, - header: "groups", - resData, - colData, - taxaData, - refs, - }); + const id = resData.environ_id; + const features = colData?.features || []; + const timescales = resData?.timescales || []; + + const children = [ + h(ColumnsTable, { + resData, + colData, + }), + h(Charts, { features }), + h(PrevalentTaxa, { taxaData }), + h(Timescales, { timescales }), + ]; + + return LexItemPage({ children, id, refs, resData, siftLink: "environment" }); } From 4b1d35e3fbed1008f463f58ebf2a7485a717f9a9 Mon Sep 17 00:00:00 2001 From: davidsklar99 Date: Tue, 10 Jun 2025 13:01:50 -0500 Subject: [PATCH 6/6] better error handling if data isnt there --- src/components/lex/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/lex/index.ts b/src/components/lex/index.ts index 2467ac091..d090167cc 100644 --- a/src/components/lex/index.ts +++ b/src/components/lex/index.ts @@ -78,6 +78,7 @@ export function LexItemPage(props: LexItemPageProps) { } export function ColumnsTable({ resData, colData }) { + if (!colData || !colData.features || colData.features.length === 0) return const summary = summarize(colData.features || []); const { b_age, t_age } = resData; @@ -97,6 +98,7 @@ export function ColumnsTable({ resData, colData }) { const t_id = getIntID({ name: t_int_name }); const b_id = getIntID({ name: b_int_name }); + return h("div.table", [ h("div.table-content", [ h("div.packages", t_sections.toLocaleString() + " packages"), @@ -282,6 +284,8 @@ function References({ refs }) { export function PrevalentTaxa({ taxaData }) { const records = taxaData?.records; + if (!records || records.length === 0) return; + return h(Card, { className: "prevalent-taxa-container" }, [ h("div.taxa-header", [ h("h3", "Prevalent Taxa"),