Styling and Getting Production Ready

.env.example

@@ -2,6 +2,7 @@
 VITE_MAPBOX_API_TOKEN='<your-api-key>'
 VITE_MACROSTRAT_TILESERVER_DOMAIN='https://tileserver.staging.svc.macrostrat.org'
 VITE_MACROSTRAT_API_DOMAIN='https://macrostrat.org'
+ROCKD_API_URL = 'https://dev.rockd.org/api/v2/'
 
 # Needed for map ingestion system
 # VITE_MACROSTRAT_INGEST_API=https://dev.macrostrat.org/api/ingest

pages/checkin/index.ts

@@ -2,7 +2,7 @@ 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 { BlankImage, imageExists, Footer, getProfilePicUrl, useRockdAPI, getImageUrl } from "../index";
 import { Icon } from "@blueprintjs/core";
 import styles from "../main.module.sass";
 import { SETTINGS } from "@macrostrat-web/settings";
@@ -43,7 +43,7 @@ export function Checkins({checkinID}) {
         lng: checkin.lng
     }
 
-    let profile_pic = h(BlankImage, {src: apiURL + "protected/gravatar/" + checkin.person_id, className: "profile-picture"});
+    let profile_pic = h(BlankImage, {src: getProfilePicUrl(checkin.person_id), className: "profile-picture"});
 
     // format rating
     let ratingArr = [];
@@ -58,7 +58,7 @@ export function Checkins({checkinID}) {
     let observations = [];
 
     // add checkin photo and notes
-    const imageSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo;
+    const imageSrc = getImageUrl(checkin.person_id, checkin.photo);
     const headerImgUrl = checkin.photo && imageExists(imageSrc) ? imageSrc : null;
     const headerBody = h('h4', {className: 'observation-header'}, checkin.notes);
 
@@ -75,7 +75,7 @@ export function Checkins({checkinID}) {
     checkin.observations.forEach(observation => {
         if(Object.keys(observation.rocks).length != 0) {
             // if photo exists
-            const imageSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo;
+            const imageSrc = getImageUrl(checkin.person_id, observation.photo);
             const observationURL = observation.photo && imageExists(imageSrc) ? imageSrc : null;
             let observationBody = observationFooter(observation);
 
@@ -102,7 +102,7 @@ export function Checkins({checkinID}) {
     // overlay
     let overlay = h('div', {className: 'overlay'}, [
         h('div.overlay-header', [
-            h(Icon, {className: "left-arrow back-arrow", icon: "arrow-left", iconSize: "5vh", style: {color: 'black'}, 
+            h(Icon, {className: "back-arrow", icon: "arrow-left", iconSize: "5vh", style: {color: 'black'}, 
                 onClick: () => {
                     setOverlayOpen(!overlayOpen);
                 }
@@ -264,7 +264,7 @@ function Map({center, showMap, setShowMap}) {
             ]
           ),
         h('div', {className: 'banner'}, [
-            h(Icon, {className: "left-arrow banner-arrow", icon: "arrow-left", iconSize: "4vh", style: {color: 'black'}, onClick: () => {
+            h(Icon, {className: "banner-arrow", icon: "arrow-left", iconSize: "4vh", style: {color: 'black'}, onClick: () => {
                 setShowMap(!showMap);
               }}),
             h(PanelCard, {className: "banner-button", onClick: () => {

pages/explore/+Page.client.ts

@@ -20,6 +20,8 @@ import { createCheckins, useRockdAPI, Image } from "../index";
 import "./main.sass";
 import "@macrostrat/style-system";
 import { MapPosition } from "@macrostrat/mapbox-utils";
+import { configDefinitionsBuiltInGlobal } from "vike/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/configDefinitionsBuiltIn";
+import { CONTEXTMENU_WARN_DECORATOR_NEEDS_REACT_ELEMENT } from "@blueprintjs/core/lib/esm/legacy/contextMenuTargetLegacy";
 
 const h = hyper.styled(styles);
 
@@ -106,7 +108,9 @@ function weaverStyle(type: object) {
         filter: ['has', 'n'],
         layout: {
             'text-field': ['get', 'n'],
-            'text-size': 10
+            'text-size': 10,
+            'text-allow-overlap': true,
+            'text-ignore-placement': false,
         },
         paint: {
           "text-color": "#fff"
@@ -145,6 +149,7 @@ function WeaverMap({
   const [showFilter, setFilter] = useState(false);
   const [filteredCheckins, setFilteredCheckins] = useState(false);
   const [filteredData, setFilteredData] = useState(null);
+  const [autocompleteOpen, setAutocompleteOpen] = useState(false);
 
   // overlay
   const [inspectPosition, setInspectPosition] = useState<mapboxgl.LngLat | null>(null);
@@ -176,7 +181,7 @@ function WeaverMap({
 
   const toolbar = h(Toolbar, {showSettings, setSettings, showFilter, setFilter});
   const contextPanel = h(ContextPanel, {showSettings, showSatelite, setSatelite, showOverlay, setOverlay});
-  const autoComplete = h(AutoComplete, {showFilter, setFilteredCheckins, setFilteredData});
+  const autoComplete = h(AutoComplete, {showFilter, setFilteredCheckins, setFilteredData, autocompleteOpen, setAutocompleteOpen});
 
   const filteredCheckinsComplete = h(createFilteredCheckins, {filteredData, setInspectPosition});
 
@@ -205,7 +210,7 @@ function WeaverMap({
       h("div.overlay-div", [
         h('div.autocomplete-container', [
           autoComplete,
-          filteredData ? h("div.filtered-checkins",filteredCheckinsComplete) : null,
+          filteredData && !autocompleteOpen ? h("div.filtered-checkins",filteredCheckinsComplete) : null,
         ])
       ]),
     ])
@@ -376,7 +381,7 @@ function FeatureDetails({setInspectPosition}) {
     }
   }, [bounds]);
 
-  if (result == null) return h(Spinner);
+  if (result == null) return h(Spinner, { className: "loading-spinner" });
   result = result.success.data;  
 
   checkins = createCheckins(result, mapRef, setInspectPosition);
@@ -494,15 +499,14 @@ function createFilteredCheckins(filteredData, setInspectPosition) {
   return createCheckins(filteredData?.filteredData, mapRef, setInspectPosition);
 }
 
-function AutoComplete({showFilter, setFilteredCheckins, setFilteredData}) {
+function AutoComplete({showFilter, setFilteredCheckins, setFilteredData, autocompleteOpen, setAutocompleteOpen}) {
   const mapRef = useMapRef();
   const map = mapRef.current;
   const [filters, setFilters] = useState([]);
-  const [autocompleteOpen, setAutocompleteOpen] = useState(true);
   const [input, setInput] = useState('');
   const [close, setClose] = useState(false);  
 
-  const person_data = getPersonCheckins(filters.length > 0 ? filters[0].id : 0)?.success.data;
+  const person_data = getPersonCheckins(filters.length > 0 ? filters.map(item => item.id).join(',') : 0)?.success.data;
   const foundData = person_data && person_data.length > 0;
 
   console.log("person_data", person_data);
@@ -602,7 +606,7 @@ function AutoComplete({showFilter, setFilteredCheckins, setFilteredData}) {
     h('ul', filters.map((item) => {
       return h("div.filter-item", [
         h('li', item.name),
-        h(Icon, { icon: "cross", style: {color: "red"}, onClick: () => {
+        h(Icon, { className: 'red-cross', icon: "cross", style: {color: "red"}, onClick: () => {
             setFilters(filters.filter((filter) => filter != item));
             if(filters.length == 1) {
               setClose(true);

pages/explore/main.sass

@@ -316,15 +316,12 @@ body
     &:hover
       background-color: var(--panel-background-color)
 
-  .red-bar
-    width: 15%
-    height: 7px
-    border-radius: 15px
-    margin: auto
-    background-color: red
-    margin-right: 10px
+  .red-cross
     cursor: pointer
 
+.loading-spinner
+  margin-top: 50px
+
 
 .autocomplete-wrapper
   background-color: var(--panel-background-color)

pages/index.ts

@@ -89,7 +89,7 @@ export function createCheckins(result, mapRef, setInspectPosition) {
         }
 
         let image;
-        const imgSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo;
+        const imgSrc = getImageUrl(checkin.person_id, checkin.photo);
         const showImage = checkin.photo
 
         if (showImage) {
@@ -139,7 +139,7 @@ export function createCheckins(result, mapRef, setInspectPosition) {
             }, [
             h('h1', {className: 'stop-name'}, stop_name),
             h('div', {className: 'checkin-header'}, [
-                !stop_name ? h('h3', {className: 'profile-pic'}, h(BlankImage, {src: apiURL + "protected/gravatar/" + checkin.person_id, className: "profile-pic"})) : null,
+                !stop_name ? h('h3', {className: 'profile-pic'}, h(BlankImage, {src: getProfilePicUrl(checkin.person_id), className: "profile-pic"})) : null,
                 h('div', {className: 'checkin-info'}, [
                     !stop_name ? h('h3', {className: 'name'}, checkin.first_name + " " + checkin.last_name) : null,
                     h('h4', {className: 'edited'}, checkin.created),
@@ -179,7 +179,7 @@ export function createCheckins(result, mapRef, setInspectPosition) {
     return checkins;
 }
 export const apiURLOld = "https://rockd.org/api/v2/"; // old route
-export const apiURL = "https://rockd.dev.svc.macrostrat.org/api/v2/"; // new route
+const apiURL = import.meta.env.ROCKD_API_URL; // new route
 
 export function useRockdAPI(src) {
     console.log("API CALLED")
@@ -195,4 +195,12 @@ export function imageExists(url) {
         return true;
     }
     return false
+}
+
+export function getImageUrl(person_id, photo_id) {
+    return apiURL + "protected/image/" + person_id + "/thumb_large/" + photo_id;
+}
+
+export function getProfilePicUrl(person_id) {
+    return apiURL + "protected/gravatar/" + person_id;
 }

pages/main.module.sass

@@ -230,34 +230,28 @@ body
   display: flex
   justify-content: center
 
+  svg
+    filter: var(--anti-img-color)
+
   .likes-container
     display: grid
     grid-template-columns: 50% 50%
     width: 25%
     justify-content: end
     place-items: center
 
-    .likes-image
-      width: 40px
-
   .comments-container
     display: grid
     grid-template-columns: 50% 50%
     width: 25%
     place-items: center
 
-    .comments-image
-      width: 40px
-
   .observations-container
     display: grid
     grid-template-columns: 50% 50%
     width: 25%
     place-items: center
 
-    .observations-image
-      width: 40px
-
 .marker
   height: 7vh
   display: grid

pages/photo/@id/+Page.client.ts

@@ -1,8 +1,6 @@
 import h from "@macrostrat/hyper";
 import { usePageContext } from 'vike-react/usePageContext';
 import { Photos } from "../index"; 
-import { BlankImage, imageExists, Footer, apiURL, apiURLOld, useRockdAPI } from "../../index";
-
 
 export function Page() {
     const pageContext = usePageContext();

pages/photo/index.ts

@@ -2,7 +2,7 @@ import hyper from "@macrostrat/hyper";
 import { LngLatCoords } from "@macrostrat/map-interface";
 import { useState, useEffect } from 'react';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import { BlankImage, imageExists, Image, apiURL, useRockdAPI } from "../index";
+import { BlankImage, imageExists, Image, getImageUrl, useRockdAPI } from "../index";
 import { Icon } from "@blueprintjs/core";
 import styles from "../main.module.sass";
 import "./main.sass";
@@ -47,7 +47,7 @@ export function Photos({photoID}) {
     let observations = [];
 
     // add checkin photo and notes
-    const imageSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo;
+    const imageSrc = getImageUrl(checkin.person_id, checkin.photo);
     const headerImgUrl = checkin.photo && imageExists(imageSrc) ? imageSrc : null;
     const headerBody = h('div', {className: 'observation-body-container'}, [
         h(Icon, {className: "close-body", icon: "ban-circle", onClick: () => {
@@ -71,7 +71,7 @@ export function Photos({photoID}) {
         if(Object.keys(observation.rocks).length != 0) {
             photoIDArr.push(observation.photo);
             // if photo exists
-            const imageSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo;
+            const imageSrc = getImageUrl(checkin.person_id, observation.photo);
             const observationURL = observation.photo && imageExists(imageSrc) ? imageSrc : null;
             let observationBody = h(observationFooter, {observation, setBody});
 

pages/test/@id/+Page.client.ts

@@ -1,7 +1,6 @@
 import h from "@macrostrat/hyper";
 import { usePageContext } from 'vike-react/usePageContext';
 import { Photos } from "../index"; 
-import { BlankImage, imageExists, Footer, apiURL, apiURLOld, useRockdAPI } from "../../index";
 
 
 export function Page() {

pages/trip/index.ts

@@ -2,7 +2,7 @@ import hyper from "@macrostrat/hyper";
 import { useEffect, useState, useRef } from 'react';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import { BlankImage, createCheckins, apiURL, useRockdAPI, Image } from "../index";
+import { BlankImage, createCheckins, getProfilePicUrl, useRockdAPI, Image } from "../index";
 import styles from "../main.module.sass";
 import "@macrostrat/style-system";
 import { SETTINGS } from "@macrostrat-web/settings";
@@ -16,8 +16,6 @@ import {
   PanelCard,
 } from "@macrostrat/map-interface";
 import { useMapRef } from "@macrostrat/mapbox-react";
-import { set } from "react-datepicker/dist/date_utils";
-import { s } from "vite/dist/node/types.d-aGj9QkWt";
 
 const h = hyper.styled(styles);
 
@@ -127,7 +125,7 @@ function useMapStyle({showSatelite}) {
 function SideBar({data}) {
     const mapRef = useMapRef();
     const map = mapRef.current;
-    const profile_pic = h(BlankImage, {src: apiURL + "protected/gravatar/" + data.person_id, className: "profile-pic-header"});
+    const profile_pic = h(BlankImage, {src: getProfilePicUrl(data.person_id), className: "profile-pic-header"});
     const stops = data.stops;
 
     if(!map) return h("div", {className: "stop-container loading2"}, [
@@ -195,7 +193,7 @@ function SideBar({data}) {
                     h('h4', {className: 'edited'}, "Edited " + data.updated),
                 ]),
                 h('div', {className: 'download-button'}, [
-                    h('a', {className: 'kmz', href: apiURL + "/trips/" + data.trip_id + "?format=kmz"}, "DOWNLOAD KMZ"),
+                    h('a', {className: 'kmz', href: import.meta.env.ROCKD_API_URL + "/trips/" + data.trip_id + "?format=kmz"}, "DOWNLOAD KMZ"),
                 ]),
             ]),
             h("div.details", [