Merge pull request #304 from UW-Macrostrat/search

Add lexicon search

Author: davenquinn

pages/+Page.module.sass

@@ -35,6 +35,9 @@
 
   .hero-content
     text-align: center
+    display: flex
+    flex-direction: column
+    gap: 1em
 
 
 .cover-image
@@ -391,4 +394,4 @@
 .rock-info
   display: flex
   align-items: center
-  gap: .5em
+  gap: .5em

pages/+Page.ts

@@ -1,4 +1,4 @@
-import { Image, Navbar, Footer, SiteTitle } from "~/components/general";
+import { Image, Navbar, Footer, SiteTitle, SearchBar } from "~/components/general";
 import h from "./+Page.module.sass";
 import { LinkCard } from "~/components/cards";
 import { useData } from "vike-react/useData";
@@ -152,4 +152,4 @@ function MacrostratStats() {
       h("span.top-stat-label", {}, "Projects"),
     ]),
   ]);
-}
+}

pages/lex/+Page.module.sass

@@ -11,4 +11,35 @@
 
     .stat:first-child
         border-left: 1px solid var(--text-color)
-        
+        
+
+.search-container
+
+  .search-results
+    background-color: var(--panel-background-color)
+
+    .category
+      text-align: left
+      background-color: var(--accent-secondary-color)
+      padding: 5px 10px
+      margin: 0
+      border-top: solid var(--panel-background-color) 2px
+
+    .items
+        display: flex
+        flex-direction: column
+
+        .item
+            text-align: left
+            padding: 2px 20px
+            cursor: pointer
+            width: 100%
+            text-decoration: none
+
+            &:hover
+                background-color: var(--accent-secondary-hover-color)
+
+.content-page
+    display: flex
+    flex-direction: column
+    gap: 1em

pages/lex/+Page.ts

@@ -4,10 +4,13 @@ import { apiV2Prefix } from "@macrostrat-web/settings";
 import { useAPIResult } from "@macrostrat/ui-components";
 import h from "./+Page.module.sass";
 import { useData } from "vike-react/useData";
-import { Loading, Footer } from "~/components/general";
+import { Footer } from "~/components/general";
+import { SearchBar } from "~/components/general";
+import { useState } from "react";
 
 export function Page() {
   const { res } = useData();
+  const [ showBody, setShowBody ] = useState(true);
 
   const seen = new Set();
   const stats = res.filter((project) => {
@@ -29,9 +32,8 @@ export function Page() {
   });
 
   return h("div", [
-    h(ContentPage, [
+    h(ContentPage, { className: "content-page" }, [
       h(PageHeader, { title: "Lexicon" }),
-
       h("p", [
         "This is the homepage of Macrostrat's geological lexicons, which are assembled from many data sources including Canada's ",
         h(
@@ -50,42 +52,46 @@ export function Page() {
         h("p.stat", `${formatNumber(measurements)} measurements`),
       ]),
 
-      h("h2", "Dictionaries"),
-      h(
-        LinkCard,
-        { href: "/lex/strat-names", title: "Stratigraphic names" },
-        "Names of rock units, organized hierarchically and concepts that capture relationships between differently-named rock units"
-      ),
-
-      h(
-        LinkCard,
-        { href: "/lex/intervals", title: "Intervals" },
-        "Time intervals"
-      ),
-      h(
-        LinkCard,
-        { href: "/lex/timescales", title: "Timescales" },
-        "Continuous representations of relative geologic time"
-      ),
-      h(
-        LinkCard,
-        { href: "/lex/lithology", title: "Lithologies" },
-        "Names of geologic materials"
-      ),
-      h(
-        LinkCard,
-        { href: "/lex/environments", title: "Environments" },
-        "Depositional environments and formation mechanisms"
-      ),
-      h(
-        LinkCard,
-        { href: "/lex/economics", title: "Economics" },
-        "Economic uses of geologic materials"
-      ),
+      h(SearchContainer, { setShowBody}),
+      
+      h.if(showBody)('div.body-content', [
+        h("h2", "Dictionaries"),
+        h(
+          LinkCard,
+          { href: "/lex/strat-names", title: "Stratigraphic names" },
+          "Names of rock units, organized hierarchically and concepts that capture relationships between differently-named rock units"
+        ),
 
-      h("p", [
-        h("strong", h("a", { href: "/sift" }, "Sift")),
-        ", Macrostrat's legacy lexicon app, is still available for use as it is gradually brought into this new framework.",
+        h(
+          LinkCard,
+          { href: "/lex/intervals", title: "Intervals" },
+          "Time intervals"
+        ),
+        h(
+          LinkCard,
+          { href: "/lex/timescales", title: "Timescales" },
+          "Continuous representations of relative geologic time"
+        ),
+        h(
+          LinkCard,
+          { href: "/lex/lithology", title: "Lithologies" },
+          "Names of geologic materials"
+        ),
+        h(
+          LinkCard,
+          { href: "/lex/environments", title: "Environments" },
+          "Depositional environments and formation mechanisms"
+        ),
+        h(
+          LinkCard,
+          { href: "/lex/economics", title: "Economics" },
+          "Economic uses of geologic materials"
+        ),
+
+        h("p", [
+          h("strong", h("a", { href: "/sift" }, "Sift")),
+          ", Macrostrat's legacy lexicon app, is still available for use as it is gradually brought into this new framework.",
+        ]),
       ]),
     ]),
     h(Footer),
@@ -95,3 +101,72 @@ export function Page() {
 function formatNumber(num) {
   return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
+
+function SearchContainer({setShowBody}) {
+  const [input, setInput] = useState("");
+  const url = apiV2Prefix + "/defs/autocomplete?query=" + input;
+  const data = useAPIResult(url)?.success?.data || [];
+
+
+  if(data && input.length > 0) {
+    setShowBody(false);
+  } else {
+    setShowBody(true);
+  }
+  
+
+  return h("div.search-container", [
+    h(SearchBar, {
+      placeholder: "Search the geologic lexicon...",
+      onChange: (e) => setInput(e),
+    }),
+    h(SearchResults, { data }),
+  ]);
+}
+
+function SearchResults({ data }) {
+
+  const categories = [
+    "columns",
+    "econs",
+    // "econ_types",
+    // "econ_classes",
+    "environments",
+    // "environment_types",
+    // "environment_classes",
+    "groups",
+    "intervals",
+    "lithologies",
+    // "lithology_types",
+    // "lithology_classes",
+    // "lithology_attributes",
+    "projects",
+    "strat_name_concepts",
+    // "strat_name_orphans",
+    // "structures",
+    // "minerals",
+  ];
+
+  return h.if(Object.keys(data).length > 0)("div.search-results", [
+      categories?.map((category) => {
+        const items = data?.[category];
+        if (!items || items?.length === 0) return;
+
+        const link = category === "econs" ?
+          "economics" : 
+          category === "lithologies" ?
+          "lithology" : 
+          category === "strat_name_concepts" ?
+          "strat-name-concepts" : category 
+
+        return h("div.search-category", [
+          h("h3.category", (category.charAt(0).toUpperCase() + category.slice(1)).replace(/_/g, " ")),
+          h('div.items', items?.map((item) => {
+            const { name } = item;
+            return h("a.item", { href: `/lex/${link}/${item.id}` }, name.charAt(0).toUpperCase() + name.slice(1));
+          })),
+        ]);
+      }),
+    ])
+
+}