Merge pull request #42 from UW-Macrostrat/modules

Modules

Author: davidsklar99

pages/+Page.client.ts

@@ -1,6 +1,6 @@
 import { Image, Footer } from "./index";
 import styles from "./main.module.sass";
-import "./main-page.styl";
+import "./main-page.sass";
 import "@macrostrat/style-system";
 import hyper from "@macrostrat/hyper";
 import "@macrostrat/style-system";

pages/checkin/index.ts

@@ -63,7 +63,7 @@ export function Checkins({checkinID}) {
 
     observations.push(
         h('div', {className: 'observation'}, [
-            headerImgUrl ? h(BlankImage, { className: 'observation-img', src: headerImgUrl, onClick: () => {
+            headerImgUrl ? h(BlankImage, { className: 'observation-image', src: headerImgUrl, onClick: () => {
                 setOverlayBody(h('div.observation-body',headerBody));
                 setOverlayImage(headerImgUrl);
                 setOverlayOpen(!overlayOpen);
@@ -84,7 +84,7 @@ export function Checkins({checkinID}) {
 
             observations.push(
                 h('div', {className: 'observation'}, [
-                    observationURL ? h(BlankImage, { className: 'observation-img', src: observationURL, onClick: () => {
+                    observationURL ? h(BlankImage, { className: 'observation-image', src: observationURL, onClick: () => {
                         setOverlayImage(imageSrc);
                         setOverlayBody(observationBody);
                         setOverlayOpen(!overlayOpen);
@@ -114,7 +114,7 @@ export function Checkins({checkinID}) {
             }),
         ]),
         h('div.overlay-body', [
-            h(BlankImage, { className: 'observation-img', src: overlayImage }),
+            h(BlankImage, { className: 'observation-image', src: overlayImage }),
             overlayBody,
         ])
     ]);

pages/checkin/main.sass

@@ -142,7 +142,7 @@ h4
     border-radius: 2%
     box-shadow: 0 0 0 1px var(--card-shadow-color)
 
-    .observation-img
+    .observation-image
       width: 100%
       border-radius: 2% 2% 0 0
       cursor: pointer

pages/explore/+Page.client.ts

@@ -22,6 +22,7 @@ import "@macrostrat/style-system";
 import { LngLatCoords } from "@macrostrat/map-interface";
 import { set } from "react-datepicker/dist/date_utils";
 import { configDefinitionsBuiltInGlobal } from "vike/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/configDefinitionsBuiltIn";
+import chroma from "chroma-js";
 
 const h = hyper.styled(styles);
 
@@ -58,6 +59,33 @@ function weaverStyle(type: object) {
 
   const clusterThreshold = 1;
 
+  const baseColor = "#868aa2";
+  const endColor = "#212435";
+  const scale = chroma.scale([baseColor, endColor]).mode("hsl");
+
+  const _circleColor = (step) => {
+    return scale(step / _steps.length);
+  };
+
+  const circleColor = (step) => _circleColor(step).hex();
+  const _steps = [1, 20, 100, 200, 500];
+
+  function steps(fn: (step: number) => any) {
+  let res: any[] = ["step", ["coalesce", ["get", "point_count"], 0]];
+
+  let ix = 0;
+  for (const step of _steps) {
+      res.push(fn(ix), step);
+      ix++;
+    }
+    res.push(fn(ix));
+    return res;
+  }
+
+  const textColor = (step) => {
+    return chroma(baseColor).brighten(2).hex();
+  };
+
   return {
     sources: {
       weaver: {
@@ -73,27 +101,14 @@ function weaverStyle(type: object) {
         "source-layer": "default",
         filter: ['>', ['get', 'n'], clusterThreshold],
         paint: {
-          "circle-radius": [
-            "step",
-            ["get", "n"],
-            15,
-            100,
-            20,
-            750,
-            30
-          ],
-          'circle-color': [
-              'step',
-              ['get', 'n'],
-              colors.a,
-              100,
-              colors.b,
-              750,
-              colors.c
-          ],
-          "circle-opacity": .8,
-          "circle-stroke-width": 0.5,
-          "circle-stroke-color": "#000",
+          "circle-radius": steps((step) => 8 + step * 2),
+          "circle-color": steps(circleColor),
+          "circle-stroke-width": 3,
+          "circle-stroke-color": steps((step) => {
+            const c = _circleColor(step);
+            return c.brighten(0.5).hex();
+          }),
+          "circle-stroke-opacity": 1,
         },
       },
       {
@@ -104,8 +119,11 @@ function weaverStyle(type: object) {
         filter: ['has', 'n'],
         layout: {
             'text-field': ['get', 'n'],
-            'text-size': 12
-        }
+            'text-size': 10
+        },
+        paint: {
+          "text-color": "#000"
+        },
       },
       {
         id: 'unclustered-point',
@@ -114,7 +132,7 @@ function weaverStyle(type: object) {
         "source-layer": "default",
         filter: ['<=', ['get', 'n'], clusterThreshold],
         paint: {
-            'circle-color': colors.a,
+            'circle-color': baseColor,
             'circle-radius': 4,
             'circle-stroke-width': 1,
             'circle-stroke-color': '#fff'

pages/index.ts

@@ -4,6 +4,7 @@ import { useAPIResult } from "@macrostrat/ui-components";
 import { Icon } from "@blueprintjs/core";
 import mapboxgl from "mapbox-gl";
 import styles from "./main.module.sass";
+import { useNavigate } from 'react-router-dom';
 
 const h = hyper.styled(styles);
 
@@ -18,18 +19,17 @@ export function BlankImage({ src, className, width, height, onClick, onError, al
 }
 
 const handleClick = (e) => {
-    e.preventDefault();
     // Custom logic to navigate or do something without style transfer
 };
 
 export function Footer() {
     return h("div", {className: "footer"}, [
         h("div", {className: "titles"}, [
-            h("h3", {className: "footer-text a"}, [
+            h("h3", {className: "footer-text upper"}, [
                 "Produced by the ",
                 h("a", {href: "https://macrostrat.org"} , "UW Macrostrat Lab")
             ]),
-            h("h3", {className: "footer-text b"}, [
+            h("h3", {className: "footer-text lower"}, [
                 "Funded by ",
                 h("a", {href: "https://nsf.gov"}, "NSF"),
                 " and ",