@macrostrat/map-interface 1.5.7 → 2.0.0

package/package.json

@@ -1,69 +1,72 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "1.5.7",
+  "version": "2.0.0",
   "description": "Map interface for Macrostrat",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/UW-Macrostrat/web-components.git",
+    "directory": "packages/map-interface"
+  },
+  "license": "MIT",
+  "type": "module",
   "source": "src/index.ts",
-  "types": "dist/esm/index.d.ts",
-  "node": "dist/node/index.js",
+  "main": "dist/index.js",
+  "node": "dist/index.cjs",
+  "types": "dist/index.d.ts",
+  "style": "dist/map-interface.css",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts",
+      "style": "./dist/map-interface.css"
+    },
+    "./package.json": "./package.json",
+    "./style.css": "./dist/map-interface.css",
+    "./dist/map-interface.css": "./dist/map-interface.css"
+  },
+  "scripts": {
+    "build": "bundle-library ."
+  },
+  "peerDependencies": {
+    "react": "^18.0.0||^19.0.0",
+    "react-dom": "^18.0.0||^19.0.0"
+  },
   "dependencies": {
-    "@blueprintjs/core": "^5.0.0",
-    "@macrostrat/color-utils": "^1.1.1",
-    "@macrostrat/data-components": "^0.2.0",
+    "@blueprintjs/core": "^6.6.1",
+    "@macrostrat/color-utils": "^1.2.0",
+    "@macrostrat/data-components": "^1.0.0",
     "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/map-interface": "1.5.7",
-    "@macrostrat/mapbox-react": "^2.6.3",
-    "@macrostrat/mapbox-utils": "^1.6.0",
-    "@macrostrat/ui-components": "^4.4.6",
+    "@macrostrat/map-interface": "2.0.0",
+    "@macrostrat/mapbox-react": "^3.0.0",
+    "@macrostrat/mapbox-utils": "^1.7.0",
+    "@macrostrat/ui-components": "^5.0.0",
     "@mapbox/tilebelt": "^2.0.0",
     "@visx/axis": "^3.12.0",
     "@visx/scale": "^3.12.0",
-    "chroma-js": "^3.1.2",
+    "chroma-js": "^3.2.0",
     "classnames": "^2.5.1",
     "d3-array": "^3.2.4",
-    "d3-format": "^3.1.0",
+    "d3-format": "^3.1.2",
     "mapbox-gl": "^2.15.0||^3.0.0",
     "query-string": "^9.0.0",
     "transition-hook": "^1.5.2",
-    "underscore": "^1.13.6",
+    "underscore": "^1.13.7",
     "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
-    "parcel": "^2.15.4",
+    "@macrostrat/web-components-bundler": "1.0.0",
     "ui-box": "^5.4.1"
   },
-  "peerDependencies": {
-    "react": "^16.8.6||^17.0.0||^18.0.0||^19.0.0",
-    "react-dom": "^16.8.6||^17.0.0||^18.0.0||^19.0.0"
-  },
-  "scripts": {
-    "dev": "parcel watch",
-    "build": "rm -rf dist && parcel build"
-  },
-  "exports": {
-    ".": {
-      "source": "./src/index.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/esm/index.d.ts",
-      "node": "./dist/node/index.js"
-    }
-  },
-  "targets": {
-    "node": {
-      "engines": {
-        "node": ">=14"
-      }
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/UW-Macrostrat/web-components.git",
-    "directory": "packages/map-interface"
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/context-panel/main.module.sass

@@ -18,18 +18,18 @@
     align-items: center
     gap: 5px
 
-    :global(.bp5-input-group)
+    :global(.bp6-input-group)
       flex-grow: 1
       cursor: text
 
 .navbar
   min-height: 50px
 
-:global(.bp5-navbar) > .loading-button
+:global(.bp6-navbar) > .loading-button
   width: 40px
   height: 40px
 
-.status-tongue:global(.bp5-card)
+.status-tongue:global(.bp6-card)
   background-color: var(--panel-background-color)
   margin: 5px
   margin-bottom: 0

package/src/dev/main.module.sass

@@ -57,7 +57,7 @@
   margin: 0 1em 0.5em
 
   :global
-    .bp5-slider-handle .bp5-slider-label
+    .bp6-slider-handle .bp6-slider-label
       background-color: var(--secondary-color)
       color: var(--text-color)
 

package/src/expansion-panel/main.module.sass

@@ -24,7 +24,7 @@
   .expansion-panel-icon
     margin-right: -0.35em
 
-// :global(.bp5-dark) .panel-subhead
+// :global(.bp6-dark) .panel-subhead
 //   margin 0 1px
 
 .info-panel-section
@@ -64,14 +64,14 @@
 
 .expansion-summary-title-help
   margin-left: 5px
-  :global(.bp5-icon)
+  :global(.bp6-icon)
     margin-left: 5px
 
 .expansion-panel-header
   cursor: pointer
   &:hover
     background-color: var(--accent-hover-color)
-  :global(.bp5-icon)
+  :global(.bp6-icon)
     transform: translate(0,3px)
 
 .expansion-children
@@ -121,7 +121,7 @@
   position: relative
 
 .expandable-details-toggle
-  :global(.bp5-button)
+  :global(.bp6-button)
     font-size: 10px
 
 .expandable-details

package/src/{location-info/hash-string.ts → hash-string.ts}

@@ -4,7 +4,6 @@ import {
   formatCoordForZoomLevel,
 } from "@macrostrat/mapbox-utils";
 import { ParsedQuery } from "query-string";
-import { fmt1, fmt2, fmtInt } from "./utils";
 
 interface LocationHashParams {
   x?: string;
@@ -14,6 +13,10 @@ interface LocationHashParams {
   e?: string;
 }
 
+const fmt1 = (x: number) => x.toFixed(1);
+const fmt2 = (x: number) => x.toFixed(2);
+const fmtInt = (x: number) => Math.round(x).toString();
+
 export function applyMapPositionToHash(
   args: LocationHashParams,
   mapPosition: MapPosition | null,

package/src/helpers.ts

@@ -2,7 +2,6 @@ import {
   useMapRef,
   useMapEaseTo,
   useMapDispatch,
-  useMapStatus,
   useMapInitialized,
 } from "@macrostrat/mapbox-react";
 import { useMemo, useRef } from "react";
@@ -10,7 +9,6 @@ import { debounce } from "underscore";
 import useResizeObserver from "use-resize-observer";
 
 import { getMapPosition } from "@macrostrat/mapbox-utils";
-import mapboxgl from "mapbox-gl";
 import { useCallback, useEffect, useState } from "react";
 import { getMapPadding, useMapMarker } from "./utils";
 import { useInDarkMode } from "@macrostrat/ui-components";

package/src/index.ts

@@ -6,6 +6,6 @@ export * from "./map-view";
 export * from "./controls";
 export * from "./helpers";
 export * from "./utils";
-export * from "./location-info";
 export * from "./expansion-panel";
 export * from "./location-details";
+export * from "./hash-string";

package/src/location-details/fossil-collections/main.module.sass

@@ -12,5 +12,5 @@ div.pbdb-panel-header
 
 .fossil-collection
   margin-bottom: 1em
-  :global(.bp5-tab-panel)
+  :global(.bp6-tab-panel)
     margin-top: 0px

package/src/location-details/info-blocks.module.sass

@@ -0,0 +1,35 @@
+.chip
+  padding: 3px 6px
+  margin: 2px 6px 2px 0
+  border-radius: 5px
+  text-align: center
+  &.emphasized
+    font-weight: 600
+
+.age-chip-container
+  font-family: 'Montserrat', sans-serif
+  font-weight: 700
+  display: inline-block
+
+.age-chip
+  display: inline-block
+
+:global(.bp6-dark) .age-chip
+  color: #fff
+
+.age-chip-age
+  font-size: 75%
+
+.age-chip-ma
+  font-size: 70%
+  font-weight: 400
+
+.age-ma
+  font-style: italic
+
+.lith-chip
+  display: inline-block
+  font-size: 12px
+  background-repeat: repeat
+  background-size: cover
+  //background-color: rgba(255,255,255,0.5);

package/src/location-details/info-blocks.ts

@@ -1,6 +1,6 @@
 import hyper from "@macrostrat/hyper";
 import { hexToRgb } from "./utils";
-import styles from "./info-blocks.module.styl";
+import styles from "./info-blocks.module.sass";
 import { useDarkMode } from "@macrostrat/ui-components";
 import chroma from "chroma-js";
 

package/src/location-details/macrostrat-linked.ts

@@ -4,7 +4,7 @@ import {
   ExpandableDetailsPanel,
   ExpansionBody,
 } from "@macrostrat/map-interface";
-import styles from "./main.module.styl";
+import styles from "./main.module.sass";
 import { scaleLinear } from "@visx/scale";
 import { AxisBottom } from "@visx/axis";
 import chroma from "chroma-js";

package/src/location-details/{main.module.styl → main.module.sass}

@@ -1,39 +1,39 @@
 .spacer
-  flex-grow 1
-  pointer-events none
+  flex-grow: 1
+  pointer-events: none
 
 .infodrawer-content
-  margin: 0;
+  margin: 0
 
 .macrostrat-detail
-  display: flex;
-  align-items: center;
-  margin 0.2em 0 0.4em;
+  display: flex
+  align-items: center
+  margin: 0.2em 0 0.4em
 
   .expansion-summary-title
-    margin-right: 0.8em;
+    margin-right: 0.8em
 
     &:after
-      content: ":";
+      content: ":"
 
 .described-age, .macrostrat-detail
-  display: flex;
-  align-items: center;
+  display: flex
+  align-items: center
 
   .expansion-summary-title
-    margin-right: 0.8em;
+    margin-right: 0.8em
 
     &:after
-      content: ":";
+      content: ":"
 
   .description
-    font-style italic
-    font-size 0.7em
+    font-style: italic
+    font-size: 0.7em
     max-width: 100px
     text-align: right
 
   .age-chips
-    flex-grow 1
+    flex-grow: 1
 
 
 // &.loading
@@ -43,22 +43,22 @@
 
 
 .spacer
-  flex-grow 1
-  pointer-events none
+  flex-grow: 1
+  pointer-events: none
 
 .macrostrat-unit
   h3
-    margin: 0.5em 0 0.5em;
-    flex-grow: 1;
+    margin: 0.5em 0 0.5em
+    flex-grow: 1
 
   .description
     margin-right: 1em
 
 .description
-  font-style italic
+  font-style: italic
 
 .age-refinement-plot
-  position relative
+  position: relative
 
   .age-refinement-bar
     border-radius: 3px

package/src/location-details/xdd-panel/article.ts

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { Collapse, Button } from "@blueprintjs/core";
+import { AuthorList } from "@macrostrat/ui-components";
+import h from "@macrostrat/hyper";
+
+export function Article(props) {
+  const [expanded, setExpanded] = useState(false);
+  const { data } = props;
+
+  const toggleExpand = () => {
+    setExpanded(!expanded);
+  };
+
+  // Attempt to pull out only the year and not the whole date
+  let year;
+  try {
+    year = data.coverDate ? data.coverDate.match(/\d{4}/)[0] : "";
+  } catch (e) {
+    year = "";
+  }
+
+  const authors = data?.authors?.split("; ") ?? [];
+
+  const authorList =
+    authors.length > 0 ? h(AuthorList, { names: authors }) : "Unknown";
+
+  const iconName = expanded ? "chevron-up" : "chevron-down";
+
+  return h("div.article", [
+    h("div.article-title", [
+      h("p.article-author", [authorList, year.length ? ` ${year}. ` : ""]),
+      h(
+        "a.title-link",
+        { href: data.URL, target: "_blank" },
+        h("strong", [data.title + "."]),
+      ),
+      h(
+        "span",
+        {},
+        h(Button, {
+          onClick: toggleExpand,
+          minimal: true,
+          rightIcon: iconName,
+          className: "flat-btn",
+        }),
+      ),
+    ]),
+    h(
+      Collapse,
+      { isOpen: expanded },
+      h(
+        "span",
+        { className: expanded ? "" : "hidden" },
+        h(
+          "div.quotes",
+          {},
+          data.highlight.map((snippet, si) =>
+            h("p.gdd-snippet", {
+              key: si,
+              dangerouslySetInnerHTML: { __html: `...${snippet}...` },
+            }),
+          ),
+        ),
+      ),
+    ),
+  ]);
+}

package/src/location-details/xdd-panel/index.ts

@@ -1,21 +1,8 @@
 import { Spinner } from "@blueprintjs/core";
 import h from "@macrostrat/hyper";
-import Journal from "./Journal";
+import { XDDSnippet, JournalLegacy } from "./journal";
 import { ExpansionPanel } from "@macrostrat/map-interface";
 
-export interface XDDSnippet {
-  pubname: string;
-  publisher: string;
-  _gddid: string;
-  title: string;
-  doi: string;
-  coverDate: string;
-  URL: string;
-  authors: string;
-  hits: number;
-  highlight: string[];
-}
-
 export function XddExpansion({
   xddInfo,
   expanded = false,
@@ -39,8 +26,6 @@ export function xDDPanelCore({
 }) {
   const groupedData = groupSnippetsByJournal(xddInfo);
 
-  console.log("expanded", expanded);
-
   return h(
     ExpansionPanel,
     {
@@ -54,7 +39,7 @@ export function xDDPanelCore({
       h.if(isFetching)(Spinner),
       h.if(!isFetching && xddInfo.length > 0)([
         Array.from(groupedData.entries())?.map(([journal, snippets]) => {
-          return h(Journal, {
+          return h(JournalLegacy, {
             nestedExpanded,
             name: journal,
             articles: snippets,

package/src/location-details/xdd-panel/{Journal.tsx → journal.ts}

@@ -1,8 +1,20 @@
-import Article from "./Article";
+import { Article } from "./article";
 import { Divider } from "@blueprintjs/core";
 import h from "@macrostrat/hyper";
 import { SubExpansionPanel } from "@macrostrat/map-interface";
-import { XDDSnippet } from "./index";
+
+export interface XDDSnippet {
+  pubname: string;
+  publisher: string;
+  _gddid: string;
+  title: string;
+  doi: string;
+  coverDate: string;
+  URL: string;
+  authors: string;
+  hits: number;
+  highlight: string[];
+}
 
 function Journal(props) {
   return h("div.journal", [
@@ -27,7 +39,7 @@ type JournalProps = {
 };
 
 // Still up for review
-function Journal_(props: JournalProps) {
+export function JournalLegacy(props: JournalProps) {
   const { articles, name, publisher, nestedExpanded } = props;
 
   const helpText = articles[0].pubname;
@@ -46,5 +58,3 @@ function Journal_(props: JournalProps) {
     ],
   );
 }
-
-export default Journal_;

package/src/location-panel/header.ts

@@ -2,7 +2,7 @@ import { Icon, Button } from "@blueprintjs/core";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
 import { useToaster } from "@macrostrat/ui-components";
-import { LngLatCoords, Elevation } from "../location-info";
+import { LngLatCoords, Elevation } from "@macrostrat/data-components";
 import { LocationFocusButton, useFocusState } from "@macrostrat/mapbox-react";
 import classNames from "classnames";
 import type { ReactNode } from "react";

package/src/location-panel/main.module.sass

@@ -1,4 +1,4 @@
-.copy-link-button:global(.bp5-minimal.bp5-button)
+.copy-link-button:global(.bp6-minimal.bp6-button)
   color: var(--text-subtle-color)
 
   svg
@@ -23,7 +23,7 @@
   .left-icon
     padding: 7px
 
-  .position-controls :global(.bp5-button)
+  .position-controls :global(.bp6-button)
     font-size: 12px !important
 
   // Text elements should
@@ -53,7 +53,7 @@
   background-color: var(--panel-background-color)
   --panel-padding: 0
 
-  &:global(.bp5-card)
+  &:global(.bp6-card)
     padding: 0
     background-color: var(--panel-background-color)
 

package/src/main.module.sass

@@ -113,11 +113,11 @@
     top: 0
 
 
-.context-panel-holder > :global(.bp5-card)
+.context-panel-holder > :global(.bp6-card)
   padding: 10px
   background-color: var(--panel-background-color)
 
-.panel-card, .panel-card:global(.bp5-card)
+.panel-card, .panel-card:global(.bp6-card)
   padding: var(--panel-padding, 10px)
   background-color: var(--panel-background-color)
   overflow: hidden
@@ -126,7 +126,7 @@
   & > :last-child
     margin-bottom: 0
 
-:global(.bp5-dark) .panel-card
+:global(.bp6-dark) .panel-card
   background-color: var(--panel-background-color)
 
 .context-stack
@@ -178,29 +178,29 @@
   overflow: hidden
   text-align: right
 
-  & :global(.bp5-button-text)
+  & :global(.bp6-button-text)
     transition: all 0.2s
     transition-delay: 0.1s
 
-  .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp5-active) ~ & :global(.bp5-button-text)
+  .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp6-active) ~ & :global(.bp6-button-text)
     width: 0
     opacity: 0
     margin-left: -7px
 
-  .context-panel-leave .menu-card .panel-header & :global(.bp5-button-text)
+  .context-panel-leave .menu-card .panel-header & :global(.bp6-button-text)
     opacity: 0
     width: 0
 
 .narrow-card.narrow-enter .panel-header .buttons
   margin-right: -500px
 
-.panel-header.minimal .tab-button:not(:hover):not(:global(.bp5-active))
+.panel-header.minimal .tab-button:not(:hover):not(:global(.bp6-active))
   padding-left: 0
   padding-right: 0
   min-width: 30px
   width: 30px
 
-.panel-header.minimal .tab-button:not(:hover) :global(.bp5-button-text)
+.panel-header.minimal .tab-button:not(:hover) :global(.bp6-button-text)
   width: 0
   opacity: 0
   margin-left: -7px
@@ -209,7 +209,7 @@
   margin-bottom: 0.5em
   margin-top: 0.2em
 
-.menu-card :global .bp5-text ul,
+.menu-card :global .bp6-text ul,
 .menu-card :global .text-panel ul
   padding-left: 1em
 
@@ -218,7 +218,7 @@
   flex-direction: column
   margin-bottom: -8px
 
-  & .bp5-button-group
+  & .bp6-button-group
     margin-bottom: 4px
 
   & hr
@@ -261,7 +261,7 @@
   .mapboxgl-ctrl-logo
     transform: scale(0.9) translate(-8px, 2px)
 
-  .bp5-dark
+  .bp6-dark
     .mapboxgl-ctrl-group
       background-color: var(--panel-background-color)
 
@@ -271,10 +271,10 @@
   .mapboxgl-ctrl-group button + button
     border-top: 1px solid var(--panel-rule-color) !important
 
-  .bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon
+  .bp6-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon
     filter: invert(40%)
 
-  .bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover
+  .bp6-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover
     filter: invert(50%)
 
   .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon
@@ -305,7 +305,7 @@
   gap: 0.5em
 
   :global(.map-control)
-    & > :global(.bp5-button)
+    & > :global(.bp6-button)
       padding: 0
       transform: translate(-3.5px, -3.5px)
       width: 22px !important
@@ -414,7 +414,7 @@
       max-width: var(--map-context-stack-max-width, none)
       transition: width 300ms ease
 
-    :global(.bp5-navbar)
+    :global(.bp6-navbar)
       //height: unset
       //padding: 5px
       h1, h2, h3