Main Page and Lexicon Updates

pages/columns/+Page.ts

@@ -1,56 +1,106 @@
-import h from "@macrostrat/hyper";
 import { ContentPage } from "~/layouts";
 import { PageHeader, Link, AssistantLinks, DevLinkButton } from "~/components";
-import { AnchorButton, Tag } from "@blueprintjs/core";
+import { Divider, AnchorButton, Tag, Card, Collapse, Icon } from "@blueprintjs/core";
 import { useData } from "vike-react/useData";
+import { useState } from "react";
+import h from "./main.module.scss";
+import { log } from "console";
 
 export function Page(props) {
   return h(ColumnListPage, props);
 }
 
 function ColumnListPage({ title = "Columns", linkPrefix = "/" }) {
   const { columnGroups } = useData();
-  return h(ContentPage, [
+
+  console.log("columnGroups", columnGroups);
+
+  const [columnInput, setColumnInput] = useState("");
+  const filteredGroups = columnGroups.filter((group) => {
+    const name = group.name.toLowerCase();
+    const columns = group.columns.map((col) => col.col_name.toLowerCase());
+    const input = columnInput.toLowerCase();
+    return name.includes(input) || columns.some((col) => col.includes(input));
+  });
+
+  const handleInputChange = (event) => {
+    setColumnInput(event.target.value.toLowerCase());
+  }
+
+  return h('div.column-list-page', [
     h(AssistantLinks, [
       h(AnchorButton, { href: "/projects", minimal: true }, "Projects"),
+      h(Card, [
+        h('div.search-bar', [
+          h(Icon, { icon: "search" }),
+          h('input', {
+            type: "text",
+            placeholder: "Search columns",
+            onChange: handleInputChange 
+          }),
+        ])
+      ]),      
       h(DevLinkButton, { href: "/columns/correlation" }, "Correlation chart"),
     ]),
-    h(PageHeader, { title }),
-    columnGroups.map((d) => h(ColumnGroup, { data: d, key: d.id, linkPrefix })),
+    h(ContentPage, [
+      h(PageHeader, { title }),
+      h('div.column-groups', 
+        filteredGroups.map((d) => h(ColumnGroup, { data: d, key: d.id, linkPrefix, columnInput }) ),
+      )
+    ])
   ]);
 }
 
-function ColumnGroup({ data, linkPrefix }) {
+function ColumnGroup({ data, linkPrefix, columnInput }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const filteredColumns = data.columns.filter((col) => {
+    const name = col.col_name.toLowerCase();
+    const input = columnInput.toLowerCase();
+    return name.includes(input);
+  });
+
+  if (filteredColumns?.length === 0) return null;
+
   const { id, name, columns } = data;
-  return h("div.column-group", [
-    h("h2.column-group", name),
-    h(
-      "ul",
-      columns.map((data) =>
-        h(ColumnItem, { data, key: data.col_id, linkPrefix })
-      )
+  return h(Card, { className: 'column-group', onClick : () => setIsOpen(!isOpen) }, [
+    h('div.column-group-header', [
+      h("h2.column-group-name", name),
+      h(Icon, { 
+        icon: isOpen ? "chevron-up" : "chevron-down",
+      }),
+    ]),
+    h(Collapse, { isOpen }, 
+      h(
+        "div.column-list", [
+          h(Divider),
+          h('div.column-table', [
+            h("div.column-row.column-header", [
+              h("span.col-id", "Id"),
+              h("span.col-name", "Name"),
+              h("span.col-status", "Status"),
+              h("span.col-status", "Group"),
+            ]),
+            h(Divider),
+            filteredColumns.map((data) =>
+              h(ColumnItem, { data, key: data.col_id, linkPrefix })
+            )
+          ]),
+      ])
     ),
   ]);
 }
 
 function ColumnItem({ data, linkPrefix = "/" }) {
-  const { col_id, col_name } = data;
+  const { col_id, col_name, status, col_group_id } = data;
   const href = linkPrefix + `columns/${col_id}`;
-  return h("li", [
-    h("span.col-id", {}, col_id),
-    " ",
-    h(Link, { href }, [col_name]),
-    h.if(data.status == "in process")([
-      " ",
-      h(Tag, { minimal: true }, "in process"),
-    ]),
-    h.if(data.status == "obsolete")([
-      " ",
-      h(Tag, { minimal: true, intent: "danger" }, "obsolete"),
-    ]),
-    h.if(data?.t_units == 0)([
-      " ",
-      h(Tag, { minimal: true, intent: "warning" }, "empty"),
-    ]),
+  return h("div.column-row", [
+    h("span.col-id", "#" + col_id),
+    h(Link, { className: 'col-link', href }, [col_name]),
+    h("span", { className: status === "active" ? 'active' : 'inprocess'},  UpperCase(status)),
+    h("span.col-group", "#" + col_group_id),
   ]);
 }
+
+function UpperCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

pages/columns/main.module.scss

@@ -0,0 +1,67 @@
+.column-group-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+h2 {
+    margin: 0;
+}
+
+.column-group {
+    cursor: pointer;
+}
+
+.column-groups {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.search-bar {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+
+  input {
+    width: 100%;
+    padding: 0.5em;
+    border-radius: 0.2em;
+    border: none;
+    background-color: var(--background-color);
+    color: var(--text-emphasized-color);
+    font-size: 1em;
+    margin: 3px;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0.2em var(--text-emphasized-color);
+    }
+  }
+}
+
+.column-row {
+    display: grid;
+    grid-template-columns: 10% 60% 20% 10%
+}
+
+.active {
+    background-color: green;
+    color: white;
+    place-self: end start;
+    padding: 0.5em;
+    margin: .2em 0;
+    border-radius: 0.2em;  
+    font-weight: bold;
+}
+
+.inprocess {
+    background-color: yellow;
+    color: black;
+}
+
+.col-id, .col-group, .col-link {
+    margin: auto;
+    margin-left: 0;
+}

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

@@ -0,0 +1,150 @@
+import { Image, Navbar, Footer, useMacrostratAPI } from "./index";
+import "./main.sass";
+import "./main.styl";
+import h from "@macrostrat/hyper";
+import { PanelCard } from "@macrostrat/map-interface";
+import { LinkCard } from "~/components/cards";
+import { useState } from 'react';
+
+export function Page() {
+    const result = useMacrostratAPI('/stats?all')?.success.data
+
+    if(!result) {
+      return h('div.loading')
+    }
+
+    let columns = 0;
+    let units = 0;
+    let polygons = 0;
+
+    result.forEach(project => {
+      columns += project.columns;
+      units += project.units;
+      polygons += project.t_polys;
+    });
+
+    const NorthAmerica = result.filter(project => project.project === 'North America')[0];
+    const Caribbean = result.filter(project => project.project === 'Caribbean')[0];
+    const NewZealand = result.filter(project => project.project === 'New Zealand')[0];
+    const DeepSea = result.filter(project => project.project === 'Deep Sea')[0];
+
+    return h('div.total', [
+        h(Navbar),
+
+        h('div.start', [
+            h(Image, { className: "back-img cover-image", src: 'cover_large.jpg' }),
+            h('div.text', [
+              h('div.header', {}, [
+                  h('h1.main-title','Macrostrat'),
+                  h('h2.version','v2')
+              ]),
+              h('div.stats', {}, [
+                  h('div.stat', {}, [
+                    h('span.top-stat#n_columns', {}, formatNumber(columns)),
+                    h('span.top-stat-label', {}, 'Regional Rock Columns')
+                  ]),
+                  h('div.stat', {}, [
+                    h('span.top-stat#n_units', {}, formatNumber(units)),
+                    h('span.top-stat-label', {}, 'Rock Units')
+                  ]),
+                  h('div.stat', {}, [
+                    h('span.top-stat#n_polys', {}, formatNumber(polygons)),
+                    h('span.top-stat-label', {}, 'Geologic Map Polygons')
+                  ]),
+                  h('div.stat', {}, [
+                    h('span.top-stat#n_names', {}, formatNumber(result.length)),
+                    h('span.top-stat-label', {}, 'Projects')
+                  ])
+              ]),
+              h('p.big-text', {}, 'A platform for geological data exploration, integration, and analysis'),
+              h('div.buttons', {}, [
+                  h(LinkCard, { title: 'Search', href: '/sift/#/' }),
+                  h(LinkCard, { title: "Geologic Map", href: '/map/#3/40.78/-94.13' }, [
+                    /*h('p', { className: 'long'}, [
+                      h('div.temp', {}, [
+                          'With over 225 maps from data providers around the world across every scale, Macrostrat is the world\'s largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into ',
+                          h('a', { href: 'https://xdd.wisc.edu', target: '_blank' }, 'xDD'),
+                          ' (formly GeoDeepDive).'
+                      ]),
+                      h('div.temp', {}, [
+                          'Are you affiliated with a state or national geologic survey? ',
+                          h('a', { href: 'mailto:[email protected]?Subject=Geologic%20Map%20Collaboration' }, 'Get in touch'),
+                          ' with us - we\'d love to collaborate and help publicize your maps!'
+                      ]),
+                      h('div.temp', {}, [
+                          'Get started by ',
+                          h('a', { href: '/map' }, 'exploring the map'),
+                          ' or ',
+                          h('a', { href: '/map/sources' }, 'taking a look at'),
+                          ' which maps are currently a part of Macrostrat.'
+                      ])
+                    ]),*/
+                  ]),
+                  h(LinkCard, { title: 'Projects', href: '/projects'}, [
+                    // h('p', 'Projects for specific regions or geological problems')
+                  ]),
+                  h(LinkCard, { title: 'Geologic Lexicon', href: '/lex'}, [
+                    // h('p', 'Geologic units and data dictionaries')
+                  ]),
+                  h(LinkCard, { title: 'Maps', href: '/maps'}, [
+                    // h('p', "The spatial footprint of rocks on the Earth\'s surface")
+                  ]),
+                  h(LinkCard, { title: 'Columns', href: '/columns'}, [
+                    // h('p', 'Stratigraphic and geological columns showing the organization of rocks in time')
+                  ]),
+                  h(LinkCard, { title: h('div.rockd-button-container', {}, [
+                          h(Image, { className: "rockd-png", src: 'rockd.jpg', width: '22px' }),
+                          h('a', { href: 'https://rockd.org', target: '_blank' }, 'Go mobile')
+                      ]), href: 'https://rockd.org'}, [
+                  ]),
+              ])
+            ])
+        ]),
+
+        h('div.locations', [
+            h(Image, { className: "location-img", src: 'north_america_med.jpg' }),
+            h('div.location-text', {}, [
+                h('h1', {}, 'North America'),
+                h('div.caption', {}, formatNumber(NorthAmerica.packages) + ' packages. ' + formatNumber(NorthAmerica.units) + ' units. ' + formatNumber(NorthAmerica.pbdb_collections) + ' collections.')
+            ]),
+            h(Image, { className: "location-img", src: 'caribbean_new_medium.jpg' }),
+            h('div.location-text', {}, [
+                h('h1', {}, 'Caribbean'),
+                h('div.caption', {}, formatNumber(Caribbean.packages) + ' packages. ' + formatNumber(Caribbean.units) + ' units. ' + formatNumber(Caribbean.pbdb_collections) + ' collections.')
+            ]),
+            h('div.location-text', {}, [
+                h('h1', {}, 'New Zealand'),
+                h('div.caption', {}, formatNumber(NewZealand.packages) + ' packages. ' + formatNumber(NewZealand.units) + ' units. ' + formatNumber(NewZealand.pbdb_collections) + ' collections.')            ]),
+            h(Image, { className: "location-img", src: 'new_zealand_new_medium.jpg' }),
+            h('div.location-text', {}, [
+                h('h1', {}, 'Deep Sea'),
+                h('div.caption', {}, formatNumber(DeepSea.packages) + ' packages. ' + formatNumber(DeepSea.units) + ' units. ' + formatNumber(DeepSea.pbdb_collections) + ' collections.')
+            ]),
+            h(Image, { className: "location-img", src: 'deep_sea_new_medium.jpg' }),
+
+        ]),
+
+        Donate,
+        h(Footer),
+    ])
+}
+
+const Donate = 
+  h('div.donate-container', {}, [
+    h(Image, { className: "back-img donate-img", src: 'donate_medium.jpg' }),
+    h('div.text-donate', [
+      h('a', { href: 'https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D', target: '_blank' }, [
+        h('h1.title.donate-title', 'Donate Now'),
+      ]),
+      h('div.donate-info', {}, [
+        'Grant funding, principally from the ',
+        h('a', { href: 'http://www.nsf.gov', target: '_blank' }, 'U.S. National Science Foundation'),
+        ', got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!'
+      ])
+    ])
+  ]);
+
+
+  function formatNumber(num) {
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  }