Merge pull request #274 from UW-Macrostrat/lexicon-updates

Site Updates

Author: davenquinn

.gitmodules

@@ -134,6 +134,7 @@
     "react-router-dom": "^6.8.2",
     "react-router-hash-link": "^2.4.3",
     "react-spring": "^9.7.3",
+    "recharts": "^2.13.0",
     "reduce-reducers": "^1.0.4",
     "redux": "^4.0.5",
     "sirv": "^2.0.3",

package.json

@@ -27,6 +27,8 @@ export default function MacrostratLithologyHierarchy({ width, height }) {
   }
   const liths: Lith[] = res.success.data;
 
+  console.log("Liths", liths);
+
   return h("div.flex.row", [
     h("div.example-container", [
       h(Hierarchy, { width, height, data: nestLiths(liths) }),

packages/lithology-hierarchy/src/index.ts

@@ -13,6 +13,7 @@ export const burwellTileDomain = getRuntimeConfig(
 );
 export const apiDomain = getRuntimeConfig("MACROSTRAT_API_DOMAIN");
 export const tileserverDomain = burwellTileDomain;
+export const isDev = getRuntimeConfig("MACROSTRAT_INSTANCE") === "Development";
 
 export const gddDomain = "https://xdd.wisc.edu";
 export const pbdbDomain = "https://paleobiodb.org";
@@ -67,4 +68,5 @@ export const SETTINGS = {
   apiV2Prefix,
   mapPagePrefix,
   routerBasename,
+  isDev,
 };

packages/settings/index.ts

@@ -352,6 +352,7 @@ class _Attributes extends React.Component {
     }
 
     if (this.state.liths.length) {
+      console.log("liths", this.state.liths)
       totalCharts += 1;
       lithChart = (
         <div>

packages/sift/src/js/components/Attributes.tsx

@@ -363,6 +363,8 @@ class _StratName extends React.Component {
       stratHierarchy = <StratNameHierarchy stratNameID={this.state.id} />;
     }
 
+    console.log(this.state.strat_names)
+
     return (
       <div className="page-content">
         <Loading loading={this.state.loading} />

packages/sift/src/js/components/StratName.tsx

@@ -0,0 +1,128 @@
+import { Image, Navbar, Footer, useMacrostratAPI } from "./index";
+import h from "./main.module.sass";
+import { PanelCard } from "@macrostrat/map-interface";
+import { LinkCard } from "~/components/cards";
+import { useState } from 'react';
+import { SETTINGS } from "@macrostrat-web/settings";
+import { Loading } from "./index"
+
+export function Page() {
+    const result = useMacrostratAPI('/stats?all')?.success.data;
+
+    if(!result) {
+      return h(Loading)
+    }
+
+    let columns = 0;
+    let units = 0;
+    let polygons = 0;
+
+    result.forEach(project => {
+      columns += project.columns;
+      units += project.units;
+      polygons += project.t_polys;
+    });
+
+    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: '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: 'Geologic Lexicon', href: '/lex'}, [
+            h('p', 'Geologic units and data dictionaries')
+          ]),
+          h(LinkCard, { title: 'Projects', href: '/projects'}, [
+            h('p', 'Projects for specific regions or geological problems')
+          ]),
+          h(LinkCard, { title: h('div.rockd-button-container', [
+                  h(Image, { className: "rockd-png", src: 'rockd.png', width: '22px' }),
+                  h('p', 'Rockd')
+              ]), href: 'https://rockd.org'}, [
+                h('p', 'Go mobile!')
+          ]),
+          h.if(SETTINGS.isDev)(LinkCard, { title: 'Dev Apps', href: '/dev'},
+            h('p', 'Layers and testbed apps that aren\'t ready for prime time'),
+          ),
+          h.if(SETTINGS.isDev)(LinkCard, { title: 'Documentation', href: '/docs'}, 
+            h('p', "Macrostrat documentation") 
+          ),
+      ]),
+        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, ",");
+  } 

pages/+Page.client.ts

@@ -1,11 +1,16 @@
-import h from "@macrostrat/hyper";
+import h from "./main.module.styl";
 import { CenteredContentPage } from "~/layouts";
 import { PageHeader } from "~/components";
 import { usePageContext } from "vike-react/usePageContext";
 import { ClientOnly } from "vike-react/ClientOnly";
-import { Spinner, Button } from "@blueprintjs/core";
+import { Spinner, Button, Card } from "@blueprintjs/core";
+import { BlankImage } from "../index";
+import { LinkCard } from "~/components";
 
 export function Page() {
+  const ctx = usePageContext();
+  const is404 = ctx.is404;
+
   return h(CenteredContentPage, [h(PageHeader), h(PageContent)]);
 }
 
@@ -17,9 +22,16 @@ function PageContent() {
   const reason = ctx.abortReason;
 
   if (is404) {
-    return h([
-      h("h1", [h("code.bp5-code", "404"), " Page Not Found"]),
-      h("p", ["Could not find a page at path ", h("code.bp5-code", path), "."]),
+    return h('div.error404', [
+      h(BlankImage, { src: "https://storage.macrostrat.org/assets/web/earth-crust.jpg", className: "error-image", width: "100%", height: "100%" }),
+      h('div.error-text', [
+        h('h1', "404"),
+        h('h2', "The rock you are looking for doesn't exist. Keep digging."),
+        h('div.buttons', [
+          h('button', { className: "btn", onClick: () => history.back() }, "Go back"),
+          h('a', { className: "btn", href: "/" }, "Go home")
+        ]),
+      ])  
     ]);
   } else if (statusCode == 401) {
     return h([

pages/+Page.mdx

@@ -0,0 +1,47 @@
+.error404
+    background: black
+    height: 100vh
+    text-align: center
+    color: black
+
+    h1 
+        margin-top 0
+        font-size 100px
+
+.error-text
+    position absolute
+    z-index 2
+    top 30%
+    left 50%
+    transform translate(-50%, -50%)
+    color white
+
+.error-image
+    position absolute
+    z-index 1
+    top 0
+    left 0
+    opacity .5
+
+.buttons
+    display flex      
+    gap 100px
+    justify-content center
+    margin-top 50px
+
+    a 
+        text-decoration none
+
+
+button:hover
+    background-color var(--secondary-background-color)
+    color: var(text-emphasized-color) !important
+
+.btn
+    background-color var(--background-color)
+    color: var(text-emphasized-color) !important
+    cursor: pointer
+    margin 14px 0
+
+a
+    color: var(--text-emphasized-color) !important