Merge pull request #305 from UW-Macrostrat/search

Lex expansion

Author: davenquinn

pages/lex/+Page.ts

@@ -77,6 +77,11 @@ export function Page() {
           { href: "/lex/lithology", title: "Lithologies" },
           "Names of geologic materials"
         ),
+        h(
+          LinkCard,
+          { href: "/lex/lith-atts", title: "Lithology attributes" },
+          "Names and descriptions of lithology attributes"
+        ),
         h(
           LinkCard,
           { href: "/lex/environments", title: "Environments" },
@@ -87,6 +92,16 @@ export function Page() {
           { href: "/lex/economics", title: "Economics" },
           "Economic uses of geologic materials"
         ),
+        h(
+          LinkCard,
+          { href: "/lex/minerals", title: "Minerals" },
+          "Mineral names and formulas"
+        ),
+        h(
+          LinkCard,
+          { href: "/lex/structures", title: "Structures" },
+          "Names and descriptions of geologic structures"
+        ),
 
         h("p", [
           h("strong", h("a", { href: "/sift" }, "Sift")),
@@ -139,12 +154,12 @@ function SearchResults({ data }) {
     "lithologies",
     // "lithology_types",
     // "lithology_classes",
-    // "lithology_attributes",
+    "lithology_attributes",
     "projects",
     "strat_name_concepts",
     // "strat_name_orphans",
-    // "structures",
-    // "minerals",
+    "structures",
+    "minerals",
   ];
 
   return h.if(Object.keys(data).length > 0)("div.search-results", [
@@ -157,7 +172,10 @@ function SearchResults({ data }) {
           category === "lithologies" ?
           "lithology" : 
           category === "strat_name_concepts" ?
-          "strat-name-concepts" : category 
+          "strat-name-concepts" : 
+          category === "lithology_attributes" ?
+          "lith-atts" :
+          category
 
         return h("div.search-category", [
           h("h3.category", (category.charAt(0).toUpperCase() + category.slice(1)).replace(/_/g, " ")),

pages/lex/economics/@id/+Page.ts

@@ -6,10 +6,12 @@ import {
   Charts,
   PrevalentTaxa,
   Timescales,
+  Units,
+  Fossils,
 } from "~/components/lex";
 
 export function Page() {
-  const { resData, colData, taxaData, refs } = useData();
+  const { resData, colData, taxaData, refs, unitsData, fossilsData } = useData();
 
   const id = resData.econ_id;
   const features = colData?.features || [];
@@ -23,6 +25,8 @@ export function Page() {
     h(Charts, { features }),
     h(PrevalentTaxa, { taxaData }),
     h(Timescales, { timescales }),
+    h(Units, { unitsData }),
+    h(Fossils, { fossilsData }),
   ];
 
   return LexItemPage({ children, id, refs, resData, siftLink: "economic" });

pages/lex/economics/@id/+data.ts

@@ -5,9 +5,11 @@ export async function data(pageContext) {
   const econ_id = parseInt(pageContext.urlParsed.pathname.split("/")[3]);
 
   // Await all API calls
-  const [resData, colData, refs1, refs2] = await Promise.all([
+  const [resData, colData, unitsData, fossilsData, refs1, refs2] = await Promise.all([
     fetchAPIData("/defs/econs", { econ_id }),
     fetchAPIData("/columns", { econ_id, response: "long", format: "geojson" }),
+    fetchAPIData("/units", { econ_id }),
+    fetchAPIData("/fossils", { econ_id }),
     fetchAPIRefs("/fossils", { econ_id }),
     fetchAPIRefs("/columns", { econ_id }),
   ]);
@@ -28,5 +30,5 @@ export async function data(pageContext) {
     taxaData = await response.json();
   }
 
-  return { resData: resData[0], colData, taxaData, refs };
+  return { resData: resData[0], colData, taxaData, refs, unitsData, fossilsData };
 }

pages/lex/environments/@id/+Page.ts

@@ -6,10 +6,12 @@ import {
   Charts,
   PrevalentTaxa,
   Timescales,
+  Units,
+  Fossils
 } from "~/components/lex";
 
 export function Page() {
-  const { resData, colData, taxaData, refs } = useData();
+  const { resData, colData, taxaData, refs, unitsData, fossilsData } = useData();
 
   const id = resData.environ_id;
   const features = colData?.features || [];
@@ -23,6 +25,8 @@ export function Page() {
     h(Charts, { features }),
     h(PrevalentTaxa, { taxaData }),
     h(Timescales, { timescales }),
+    h(Units, { unitsData }),
+    h(Fossils, { fossilsData })
   ];
 
   return LexItemPage({ children, id, refs, resData, siftLink: "environment" });

pages/lex/environments/@id/+data.ts

@@ -5,13 +5,15 @@ export async function data(pageContext) {
   const environ_id = parseInt(pageContext.urlParsed.pathname.split("/")[3]);
 
   // Await all API calls
-  const [resData, colData, refs1, refs2] = await Promise.all([
+  const [resData, colData, unitsData, fossilsData, refs1, refs2] = await Promise.all([
     fetchAPIData("/defs/environments", { environ_id }),
     fetchAPIData("/columns", {
       environ_id,
       response: "long",
       format: "geojson",
     }),
+    fetchAPIData("/units", { environ_id }),
+    fetchAPIData("/fossils", { environ_id }),
     fetchAPIRefs("/fossils", { environ_id }),
     fetchAPIRefs("/columns", { environ_id }),
   ]);
@@ -32,5 +34,5 @@ export async function data(pageContext) {
     taxaData = await response.json();
   }
 
-  return { resData: resData[0], colData, taxaData, refs };
+  return { resData: resData[0], colData, taxaData, refs, unitsData, fossilsData };
 }

pages/lex/intervals/@id/+Page.ts

@@ -7,10 +7,12 @@ import {
   Charts,
   PrevalentTaxa,
   Timescales,
+  Units,
+  Fossils,
 } from "~/components/lex";
 
 export function Page() {
-  const { resData, colData, taxaData, refs } = useData();
+  const { resData, colData, taxaData, refs, unitsData, fossilsData } = useData();
 
   const id = resData.int_id;
   const features = colData?.features || [];
@@ -25,6 +27,8 @@ export function Page() {
     h(Charts, { features }),
     h(PrevalentTaxa, { taxaData }),
     h(Timescales, { timescales }),
+    h(Units, { unitsData }),
+    h(Fossils, { fossilsData }),
   ];
 
   return LexItemPage({ children, id, refs, resData, siftLink: "interval" });

pages/lex/intervals/@id/+data.ts

@@ -5,9 +5,11 @@ export async function data(pageContext) {
   const int_id = parseInt(pageContext.urlParsed.pathname.split("/")[3]);
 
   // Await all API calls
-  const [resData, colData, refs1, refs2] = await Promise.all([
+  const [resData, colData, unitsData, fossilsData, refs1, refs2] = await Promise.all([
     fetchAPIData("/defs/intervals", { int_id }),
     fetchAPIData("/columns", { int_id, response: "long", format: "geojson" }),
+    fetchAPIData("/units", { int_id }),
+    fetchAPIData("/fossils", { int_id }),
     fetchAPIRefs("/fossils", { int_id }),
     fetchAPIRefs("/columns", { int_id }),
   ]);
@@ -28,5 +30,5 @@ export async function data(pageContext) {
     taxaData = await response.json();
   }
 
-  return { resData: resData[0], colData, taxaData, refs };
+  return { resData: resData[0], colData, taxaData, refs, unitsData, fossilsData };
 }

pages/lex/lith-atts/+Page.client.ts

@@ -0,0 +1,62 @@
+import h from "@macrostrat/hyper";
+import { LinkCard, PageBreadcrumbs, StickyHeader } from "~/components";
+import { useState } from "react";
+import { ContentPage } from "~/layouts";
+import { useData } from "vike-react/useData";
+import { SearchBar } from "~/components/general";
+
+export function Page() {
+  const [input, setInput] = useState("");
+  const { res } = useData();
+
+  const handleChange = (event) => {
+    setInput(event.toLowerCase());
+  };
+
+  const filtered = res.filter((d) => {
+    const name = d.name.toLowerCase();
+    const type = d.type ? d.type.toLowerCase() : "";
+    return (
+      name.includes(input) || type.includes(input)
+    );
+  });
+
+  const grouped = groupByType(filtered);
+
+  return h(ContentPage, { className: "econ-list-page" }, [
+    h(StickyHeader, [
+      h(PageBreadcrumbs, { title: "Lithology Attributes" }),
+      h(SearchBar, {
+        placeHolder: "Search lithology attributes...",
+        onChange: handleChange,
+      }),
+    ]),
+    h(
+      "div.econ-list",
+      Object.entries(grouped).map(([className, types]) => 
+        h("div.econ-class-group", [
+          h("h2", UpperCase(className)),
+          h(
+            "div.econ-items",
+            types?.map((d) => h(LinkCard, { href: `/lex/lith-atts/${d.lith_att_id}` }, UpperCase(d.name)))
+          ),
+        ])
+      )
+    ),
+  ])
+}
+
+function groupByType(items) {
+  return items.reduce((acc, item) => {
+    const type = item.type.toLowerCase();
+    if (!acc[type]) {
+      acc[type] = [];
+    }
+    acc[type].push(item);
+    return acc;
+  }, {});
+}
+
+function UpperCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

pages/lex/lith-atts/+data.ts

@@ -0,0 +1,7 @@
+import { fetchAPIData } from "~/_utils";
+
+export async function data() {
+  const res = await fetchAPIData(`/defs/lithology_attributes`, { all: true });
+
+  return { res };
+}

pages/lex/lith-atts/@id/+Page.client.ts

@@ -0,0 +1,27 @@
+import { useData } from "vike-react/useData";
+import h from "@macrostrat/hyper";
+import { LexItemPage, Units } from "~/components/lex";
+
+export function Page() {
+  const { resData, unitsData } = useData();
+
+  console.log("Lithology Attribute Page", unitsData);
+
+  const id = resData.lith_att_id;
+
+  const children = [
+    h(LithologyAttributeDetails, { resData }),
+    h(Units, { unitsData }),
+  ];
+
+  return LexItemPage({ children, id, refs: [], resData, siftLink: "" });
+}
+
+function LithologyAttributeDetails({ resData }) {
+  const { type, t_units } = resData;
+
+  return h("div", { class: "lith-att-details" }, [
+    h("p", `Type: ${type}`),
+    h("p", `Type Units: ${t_units}`),
+  ]);
+}