Merge pull request #41 from UW-Macrostrat/styling

Clustering

Author: davidsklar99

pages/+Page.client.ts

@@ -1,10 +1,12 @@
 import { Image, Footer } from "./index";
-import "./main.sass";
+import styles from "./main.module.sass";
 import "./main-page.styl";
 import "@macrostrat/style-system";
-import h from "@macrostrat/hyper";
+import hyper from "@macrostrat/hyper";
 import "@macrostrat/style-system";
 
+const h = hyper.styled(styles);
+
 
 export function Page()  {
     return h("div", { className: "main-page" }, [

pages/checkin/index.ts

@@ -1,10 +1,10 @@
-import h from "@macrostrat/hyper";
+import hyper from "@macrostrat/hyper";
 import { LngLatCoords } from "@macrostrat/map-interface";
 import { useEffect, useState, useRef } from 'react';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { BlankImage, imageExists, Footer, apiURL, apiURLOld, useRockdAPI } from "../index";
 import { Icon } from "@blueprintjs/core";
-import "../main.sass";
+import styles from "../main.module.sass";
 import { SETTINGS } from "@macrostrat-web/settings";
 import { DarkModeButton } from "@macrostrat/ui-components";
 import "./main.sass";
@@ -14,6 +14,8 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 import { MapPosition } from "@macrostrat/mapbox-utils";
 import { PanelCard } from "@macrostrat/map-interface";
 
+const h = hyper.styled(styles);
+
 export function Checkins({checkinID}) {
     const checkinData = useRockdAPI("protected/checkins?checkin_id=" + checkinID);
     const [overlayOpen, setOverlayOpen] = useState(false);
@@ -40,7 +42,7 @@ export function Checkins({checkinID}) {
         lng: checkin.lng
     }
 
-    let profile_pic = h(BlankImage, {src: apiURL + "protected/gravatar/" + checkin.person_id, className: "profile-pic"});
+    let profile_pic = h(BlankImage, {src: apiURL + "protected/gravatar/" + checkin.person_id, className: "profile-picture"});
 
     // format rating
     let ratingArr = [];
@@ -121,7 +123,7 @@ export function Checkins({checkinID}) {
 
     let main = h('div', { className: "container" }, [
         h('div', { className: showMap ? 'hide' : 'main'}, [
-            h('div', { className: "checkin-header" }, [
+            h('div', { className: "checkin-head" }, [
                 h('h1', checkin.notes),
                 h(DarkModeButton, { className: 'dark-mode-button', showText: true }),
             ]),

pages/checkin/main.sass

@@ -84,12 +84,13 @@ h1, p
   align-items: center
   cursor: pointer
 
-.profile-pic
+.profile-picture
   height: 100px
   width: 100px
   display: grid
   margin: auto
   margin-left: 50px
+  border-radius: 50%
 
 .stop-main-info
   text-align: left
@@ -111,7 +112,7 @@ h4
   padding: 0
   margin: 0
 
-.checkin-header
+.checkin-head
   padding: 30px 0
   width: 100%
   display: grid

pages/explore/+Page.client.ts

@@ -1,4 +1,4 @@
-import h from "@macrostrat/hyper";
+import hyper from "@macrostrat/hyper";
 
 import { useMapRef } from "@macrostrat/mapbox-react";
 import { Spinner, Icon, Divider } from "@blueprintjs/core";
@@ -15,11 +15,15 @@ import { mergeStyles } from "@macrostrat/mapbox-utils";
 import { useDarkMode, DarkModeButton } from "@macrostrat/ui-components";
 import mapboxgl from "mapbox-gl";
 import { useCallback, useEffect, useState } from "react";
-import "../main.sass";
+import styles from "../main.module.sass";
 import { createCheckins, useRockdAPI, Image } from "../index";
 import "./main.sass";
 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";
+
+const h = hyper.styled(styles);
 
 let count = 0;
 
@@ -46,7 +50,14 @@ const type =
   };
 
 function weaverStyle(type: object) {
-  const color = type?.color ?? "dodgerblue";
+  const colors = {
+    a: "#51bbd6",
+    b: "#f1f075",
+    c: "#f28cb1",
+  };
+
+  const clusterThreshold = 1;
+
   return {
     sources: {
       weaver: {
@@ -56,34 +67,59 @@ function weaverStyle(type: object) {
     },
     layers: [
       {
-        id: "weaver",
+        id: "clusters",
         type: "circle",
         source: "weaver",
         "source-layer": "default",
+        filter: ['>', ['get', 'n'], clusterThreshold],
         paint: {
           "circle-radius": [
             "step",
             ["get", "n"],
-            2,
-            1,
-            2,
-            5,
-            4,
-            10,
-            8,
-            50,
-            12,
+            15,
             100,
-            16,
-            200,
             20,
+            750,
+            30
+          ],
+          'circle-color': [
+              'step',
+              ['get', 'n'],
+              colors.a,
+              100,
+              colors.b,
+              750,
+              colors.c
           ],
-          "circle-color": color,
           "circle-opacity": .8,
           "circle-stroke-width": 0.5,
-          "circle-stroke-color": color,
+          "circle-stroke-color": "#000",
         },
       },
+      {
+        id: 'cluster-count',
+        type: 'symbol',
+        source: 'weaver',
+        "source-layer": "default",
+        filter: ['has', 'n'],
+        layout: {
+            'text-field': ['get', 'n'],
+            'text-size': 12
+        }
+      },
+      {
+        id: 'unclustered-point',
+        type: 'circle',
+        source: 'weaver',
+        "source-layer": "default",
+        filter: ['<=', ['get', 'n'], clusterThreshold],
+        paint: {
+            'circle-color': colors.a,
+            'circle-radius': 4,
+            'circle-stroke-width': 1,
+            'circle-stroke-color': '#fff'
+        }
+      },
     ],
   };
 }
@@ -98,10 +134,11 @@ function WeaverMap({
 }) {
   const [showSatelite, setSatelite] = useState(false);
   const style = useMapStyle(type, mapboxToken, showSatelite);
+  const [selectedCheckin, setSelectedCheckin] = useState(null);  
+  const [selectedCheckinPoint, setSelectedCheckinPoint] = useState(null);  
 
   // overlay
-  const [inspectPosition, setInspectPosition] =
-    useState<mapboxgl.LngLat | null>(null);
+  const [inspectPosition, setInspectPosition] = useState<mapboxgl.LngLat | null>(null);
 
   const onSelectPosition = useCallback((position: mapboxgl.LngLat) => {
     setInspectPosition(position);
@@ -111,9 +148,7 @@ function WeaverMap({
     });
   }, []);
 
-  const selectedResult = getSelectedCheckins(inspectPosition?.lat - .05, inspectPosition?.lat + .05, inspectPosition?.lng - .05, inspectPosition?.lng + .05)?.success.data;
   const featuredCheckin = h(FeatureDetails, {setInspectPosition});
-  const selectedCheckin = h(SelectedCheckins, {selectedResult, inspectPosition, setInspectPosition});
   let overlay;
 
   const LngLatProps = {
@@ -125,34 +160,39 @@ function WeaverMap({
     zoom: 10
   };
 
-  if (inspectPosition && selectedResult.length > 0) {
+  // handle selected checkins
+  const checkinData = useRockdAPI(
+    selectedCheckin ? `protected/checkins?checkin_id=${selectedCheckin}` : null
+  );
+
+  if(selectedCheckin && checkinData) {
+    const clickedCheckins = h(createSelectedCheckins, {data: checkinData?.success.data, setInspectPosition});
+
     overlay = h("div.sidebox", [
       h('div.title', [
         h('div', { className: "selected-center" }, [
           h("h1", "Selected Checkins"),
           h('h3', { className: "coordinates" }, LngLatCoords(LngLatProps))
         ]),
-        // h(DarkModeButton, { className: "dark-btn", showText: true } )
       ]),
       h("button", {
         className: "close-btn",
         onClick: () => {
-          setInspectPosition(null);
+          setSelectedCheckin(null);
 
           let previousSelected = document.querySelectorAll('.selected_pin');
           previousSelected.forEach((marker) => {
             marker.remove();
           });
         }
       }, "X"),
-      h("div.overlay-div", selectedCheckin),
+      h("div.overlay-div", clickedCheckins),
     ]);
   } else {
     overlay = h("div.sidebox", [
       h('div.sidebox-header', [
         h('div.title', [
           h("h1", "Featured Checkins"),
-          // h(DarkModeButton, { className: "dark-btn", showText: true } )
         ]),
       ]),
       h("div.overlay-div", featuredCheckin),
@@ -181,6 +221,7 @@ function WeaverMap({
 
           // The Overlay Div
           overlay,
+          h(ClickedCheckins, {setSelectedCheckin}),
         ]
       ),
     ]
@@ -261,9 +302,7 @@ function SelectedCheckins({selectedResult, inspectPosition, setInspectPosition})
         selectedCords.push([checkin.lng, checkin.lat]);
       });
 
-      let selectedStop = 0;
       selectedCords.forEach((coord) => {
-        selectedStop++;
         // marker
         const el = document.createElement('div');
         el.className = 'selected_pin';
@@ -280,7 +319,6 @@ function SelectedCheckins({selectedResult, inspectPosition, setInspectPosition})
 }
 
 function FeatureDetails({setInspectPosition}) {
-  // return null;
   const mapRef = useMapRef();
   const map = mapRef.current;
   const [bounds, setBounds] = useState(map?.getBounds());
@@ -352,4 +390,71 @@ function Toolbar({showSatelite, setSatelite}) {
               ]),
           ])
     ]);
+}
+
+function handleClusterClick() {
+  const mapRef = useMapRef();
+  const map = mapRef.current;
+  // handle cluster click
+  map?.on('click', 'clusters', (e) => {
+    console.log("cluster click");
+    const features = map.queryRenderedFeatures(e.point, {
+      layers: ['clusters']
+    });
+
+    console.log("features", features[0].properties.expansion_zoom);
+  });
+
+  return null;
+}
+
+function ClickedCheckins({setSelectedCheckin}) {
+  const mapRef = useMapRef();
+  const map = mapRef.current;
+
+  useEffect(() => {
+    if (!map) return;
+
+    const handleClick = (e) => {
+      const features = map.queryRenderedFeatures(e.point, {
+        layers: ['unclustered-point']
+      });
+
+      if (features.length > 0) {
+        const checkinId = features[0].properties.id;
+
+        // add marker
+        const coord = features[0].geometry.coordinates.slice();
+        console.log("coordinates", coord);
+
+        const el = document.createElement('div');
+        el.className = 'selected_pin';
+
+        new mapboxgl.Marker(el)
+          .setLngLat(coord)
+          .addTo(map);
+
+        console.log("data", features[0]);
+        setSelectedCheckin(checkinId);
+      } else {
+        setSelectedCheckin(null); 
+      }
+    };
+
+    map.on('click', handleClick);
+
+    return () => {
+      map.off('click', handleClick);
+    };
+  }, [map]);
+
+  return null;
+}
+
+function createSelectedCheckins(result, setInspectPosition) {
+  const mapRef = useMapRef();
+
+  console.log("data", result);
+
+  return createCheckins(result.data, mapRef, setInspectPosition);
 }