@macrostrat/map-interface 1.4.0 → 1.4.1

package/src/map-panel/components/docs.module.styl

@@ -0,0 +1,93 @@
+.documentation-figure
+  position relative
+  display: flex
+  flex-direction: column
+  clear: both
+  margin: 0.5em auto 1em
+  &.right
+    max-width: 50%
+    float: right
+    margin 0.5em 0em 1em 1em
+
+  &.left
+    max-width: 50%
+    float: left
+    margin 0.5em 1em 1em 0
+
+  &>img, &>video
+    float: none
+    width: 100%
+    margin: 0
+    max-width: 100%
+  figcaption
+    text-align center
+    font-size 0.8em
+    margin-top: 0.25em
+    font-style italic
+    color var(--secondary-text-color)
+
+.documentation-video-standalone
+  max-width: 50%
+  float: left
+  margin 0.5em 1em 1em 0
+
+.dev-tag
+  font-size 0.8em
+  font-weight 400
+  padding: 0.25em 0.5em
+  margin 0.2em 0.5em 0
+  border-radius: 4px
+  font-style italic
+  float right
+  background-color: var(--accent-secondary-color)
+  color: var(--text-subtle-color)
+
+:global
+
+  .text-panel
+    p, ul, ol
+      hyphens: auto
+    img, video
+      border-radius: 6px
+      box-shadow: 0 0 6px var(--card-shadow-color)
+    code
+      font-size: 0.9em
+
+  .text-panel
+    margin 0em 0.5em
+    h2, h3, h4
+      // Make sure headings clear floats (for videos)
+      clear: both
+      display: inline-block
+      width: 100%
+      margin 1em 0 0.5em
+    ul
+      margin-top 0.2em
+
+.new-swatch
+  font-size 0.8em
+  font-weight 400
+  display inline-block
+  padding: 0.25em 0.5em
+  margin 0 0.5em
+  border-radius: 4px
+  font-style italic
+  float right
+  background-color: var(--ui-color-accent)
+  color: var(--ui-color-accent-text)
+
+h2.version .version-name
+  background-color: var(--ui-color-accent)
+  border-radius: 4px
+
+.version
+  .version-name
+    display inline-block
+    padding: 0.25em 0.5em
+    margin-right 0.5em
+    color: var(--ui-color-accent-text)
+    code
+      font-size 0.9em
+      font-weight: 400
+  .date
+    font-style italic

package/src/map-panel/components/docs.ts

@@ -0,0 +1,92 @@
+import { Alignment } from "@blueprintjs/core";
+import { routerBasename } from "@macrostrat-web/settings";
+import hyper from "@macrostrat/hyper";
+import classNames from "classnames";
+import { useInView } from "react-intersection-observer";
+import { HashLink } from "react-router-hash-link";
+import { joinURL } from "@macrostrat/ui-components";
+import styles from "./docs.module.styl";
+
+const h = hyper.styled(styles);
+
+const urlBase = "https://macrostrat-media.s3.amazonaws.com/maps/docs/";
+
+function DocsMediaFile({ href, lazy = true, className }) {
+  const { ref, inView } = useInView({ triggerOnce: true });
+  let src = null;
+  if (inView || !lazy) {
+    src = joinURL(urlBase, href);
+  }
+  if (href.endsWith(".mp4")) {
+    return h("video", {
+      ref,
+      autoPlay: true,
+      loop: true,
+      playsInline: true,
+      muted: true,
+      type: "video/mp4",
+      src,
+      className,
+    });
+  }
+  return h("img", {
+    ref,
+    src,
+    className,
+  });
+}
+
+export function DocsMedia({
+  children,
+  width,
+  align = Alignment.RIGHT,
+  ...rest
+}) {
+  const className = classNames(align, {
+    captioned: children != null,
+  });
+  return h("figure.documentation-figure", { style: { width }, className }, [
+    h(DocsMediaFile, rest),
+    h.if(children != null)("figcaption.caption", children),
+  ]);
+}
+
+export function DocsVideo({ slug, lazy = true, className }) {
+  // For legacy reasons, the alignment is set to left
+  return h(DocsMedia, {
+    href: slug + ".mp4",
+    lazy,
+    className,
+    align: Alignment.LEFT,
+  });
+}
+
+export function InternalLink({ to, children }) {
+  // We'd use a link component, but it doesn't properly navigate to the hash state
+  return h(
+    "a.internal-link",
+    {
+      href: joinURL(routerBasename, to),
+    },
+    children,
+  );
+}
+
+export function NewSwatch({ children, version = 0 }) {
+  return h(
+    HashLink,
+    {
+      to: routerBasename + `changelog#version-${version}`,
+      className: "new-swatch",
+    },
+    children,
+  );
+}
+
+export function Version({ spec, date, major = true, dev = false }) {
+  return h(`h${major ? 2 : 3}.version`, { id: `version-${spec}` }, [
+    h("span.version-name", ["Version ", h("code", spec)]),
+    h("span.date", date),
+    h.if(dev)("span.dev-tag", "dev"),
+  ]);
+}

package/src/map-panel/components/info-blocks.module.styl

@@ -0,0 +1,39 @@
+.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(.bp5-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/map-panel/components/info-blocks.ts

@@ -0,0 +1,88 @@
+import hyper from "@macrostrat/hyper";
+import { hexToRgb } from "../utils";
+import styles from "./info-blocks.module.styl";
+import { useDarkMode } from "@macrostrat/ui-components";
+import chroma from "chroma-js";
+
+const h = hyper.styled(styles);
+
+function getColor(color, darkenAmount) {
+  try {
+    return chroma(color).darken(darkenAmount).hex();
+  } catch (err) {
+    return color;
+  }
+}
+
+function IntervalChip(props) {
+  const { interval, className } = props;
+  const darkMode = useDarkMode();
+  const darkenAmount = darkMode.isEnabled ? 2 : 0;
+
+  return h(
+    "a.chip-link",
+    {
+      href: `/lex/intervals/${interval.int_id}`,
+    },
+    h(
+      "div.chip.age-chip",
+      {
+        className,
+        style: {
+          backgroundColor: getColor(interval.color, darkenAmount),
+        },
+      },
+      [
+        h("div.age-chip-interval", interval.int_name),
+        h("div.age-chip-age", [
+          h(Age, { age: interval.b_age }),
+          " - ",
+          h(Age, { age: interval.t_age }),
+        ]),
+      ],
+    ),
+  );
+}
+
+function Age({ age }) {
+  return h("span.age", [age, h("span.age-chip-ma", ["Ma"])]);
+}
+
+function AgeChip(props) {
+  const { t_int, b_int } = props;
+  return h("div.age-chip-container", [
+    h(IntervalChip, { interval: b_int }),
+    h.if(b_int.int_id != props.t_int.int_id)(IntervalChip, {
+      interval: t_int,
+      className: "age-chip-t-int",
+    }),
+  ]);
+}
+
+function AttrChip(props) {
+  const {
+    fill = null,
+    color,
+    name,
+    className,
+    emphasized = true,
+    style,
+  } = props;
+
+  // Deactivated for now
+  // if (fill) {
+  //   styles["backgroundImage"] = `url('dist/img/geologic-patterns/${fill}.png')`;
+  // }
+  return h("div.lith-chip", { style, className }, [
+    h(
+      "div.lith-chip-inner.chip",
+      {
+        style: { backgroundColor: hexToRgb(color, 0.6) },
+        className: emphasized ? "emphasized" : null,
+      },
+      [name],
+    ),
+  ]);
+}
+
+export { AgeChip, AttrChip, IntervalChip };

package/src/map-panel/components/info-drawer/fossil-collections/collections.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import { Tabs, Tab } from "@blueprintjs/core";
+import { makeOccurrenceTree } from "../../../utils";
+import hyper from "@macrostrat/hyper";
+import styles from "./main.module.sass";
+const h = hyper.styled(styles);
+
+export default function PBDBCollections({ data }) {
+  if (data == null) return null;
+  return h(
+    "div.collections",
+    data.map((col, ix) => h(FossilCollection, { key: ix, col })),
+  );
+}
+
+function FossilCollection({ col }) {
+  let occurrenceTree = makeOccurrenceTree(col.occurrences);
+  return h(
+    "div.fossil-collection",
+    <>
+      <Header col={col} />
+      <Tabs>
+        <Tab title="Info" panel={<InfoPanel col={col} />} id="info" />
+        <Tab
+          id="occ"
+          title={`Occurrences (${col.occurrences.length})`}
+          disabled={col.occurrences.length == 0}
+          panel={<OccurencesPanel occurrenceTree={occurrenceTree} />}
+        />
+      </Tabs>
+    </>,
+  );
+}
+
+function CollectionNumber({ col }) {
+  const num = col.oid.replace("col:", "");
+  return h("div.collection-number", [
+    h("span.collection-number-prefix", "#"),
+    h(
+      "a",
+      {
+        href: `https://paleobiodb.org/classic/basicCollectionSearch?collection_no=${num}`,
+        target: "_blank",
+      },
+      num,
+    ),
+  ]);
+}
+
+function Header({ col }) {
+  return h("div.pbdb-panel-header", [
+    h.if(col.nam)("h4", {}, col.nam),
+    h.if(col.oid)(CollectionNumber, { col }),
+  ]);
+}
+
+function InfoPanel(props) {
+  const { col } = props;
+
+  return (
+    <div>
+      {col.oei && (
+        <div className="map-source-attr">
+          <span className="attr">Age: </span> {col.oei} ({col.lag} - {col.lag}
+          <span className="age-chip-ma">Ma</span>)
+        </div>
+      )}
+      {col.sgr && (
+        <div className="map-source-attr">
+          <span className="attr">Group: </span> {col.sgr}
+        </div>
+      )}
+      {col.sfm && (
+        <div className="map-source-attr">
+          <span className="attr">Formation: </span> {col.sfm}
+        </div>
+      )}
+      {col.lt1 && (
+        <div className="map-source-attr">
+          <span className="attr">Lithology: </span> {col.la1 ? col.la1 : ""}{" "}
+          {col.lf1 ? col.lf1 : ""} {col.lt1.replace('"', "")}{" "}
+          {col.lt2 ? ", " : ""}
+          {col.la2 ? col.la2 : ""} {col.lf2 ? col.lf2 : ""} {col.lt2}
+        </div>
+      )}
+      {col.env && (
+        <div className="map-source-attr">
+          <span className="attr">Environment: </span> {col.env}
+        </div>
+      )}
+      {col.ref && (
+        <div className="reference map-source-attr">
+          <span className="attr">Reference: </span>{" "}
+          <span dangerouslySetInnerHTML={{ __html: col.ref }}></span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function OccurencesPanel(props) {
+  const { occurrenceTree } = props;
+
+  return (
+    <div>
+      <ul className="taxon-list phylum-list">
+        {occurrenceTree.phyla.map((phylum, pidx) => {
+          return (
+            <div key={pidx} className="phyla">
+              <li>{phylum.phylum}</li>
+              <ul className="taxon-list">
+                {phylum.classes.map((cls, clsidx) => {
+                  return (
+                    <div key={clsidx} className="classes">
+                      <li>{cls.nameClass}</li>
+                      <ul className="taxon-list">
+                        {cls.families.map((family, familyidx) => {
+                          return (
+                            <div key={familyidx} className="families">
+                              <li>{family.family}</li>
+                              <ul className="taxon-list genera">
+                                {family.genera.map((genus, genusidx) => {
+                                  return (
+                                    <li key={genusidx}>
+                                      {genus.old_name
+                                        ? '"' + genus.old_name + '" - '
+                                        : ""}
+                                      {genus.genusRes ? genus.genusRes : " "}
+                                      {genus.display_name1}
+                                      <i>
+                                        {genus.display_name2
+                                          ? genus.display_name2
+                                          : ""}
+                                        {genus.display_name3
+                                          ? genus.display_name3
+                                          : ""}
+                                      </i>
+                                    </li>
+                                  );
+                                })}
+                              </ul>
+                            </div>
+                          );
+                        })}
+                      </ul>
+                    </div>
+                  );
+                })}
+              </ul>
+            </div>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/src/map-panel/components/info-drawer/fossil-collections/index.ts

@@ -0,0 +1,21 @@
+import h from "@macrostrat/hyper";
+import { ExpansionPanel } from "@macrostrat/map-interface";
+import PBDBCollections from "./collections";
+
+export function FossilCollections(props) {
+  const { data, expanded } = props;
+
+  if (!data || data.length <= 0) {
+    return null;
+  }
+  return h(
+    ExpansionPanel,
+    {
+      className: "regional-panel",
+      title: "Fossil collections",
+      helpText: "via PBDB",
+      expanded,
+    },
+    [h(PBDBCollections, { data })],
+  );
+}

package/src/map-panel/components/info-drawer/fossil-collections/main.module.sass

@@ -0,0 +1,16 @@
+
+div.pbdb-panel-header
+  background-color: var(--accent-secondary-color)
+  display: flex
+  flex-direction: row
+  justify-content: space-between
+  align-items: baseline
+  margin: 0 -10px
+  padding: 5px 10px
+  h4
+    margin: 0
+
+.fossil-collection
+  margin-bottom: 1em
+  :global(.bp5-tab-panel)
+    margin-top: 0px

package/src/map-panel/components/info-drawer/index.ts

@@ -0,0 +1,117 @@
+import hyper from "@macrostrat/hyper";
+import { LocationPanel } from "@macrostrat/map-interface";
+import { MacrostratLinkedData } from "./macrostrat-linked";
+import { Physiography } from "./physiography";
+import styles from "./main.module.styl";
+import { LoadingArea } from "../transitions";
+import { RegionalStratigraphy } from "./reg-strat";
+import { XddExpansion } from "./xdd-panel";
+import { useAPIResult } from "@macrostrat/ui-components";
+// import { apiV2Prefix, gddDomain } from "@macrostrat-web/settings";
+const apiV2Prefix = `https://dev.macrostrat.org/api/v2`;
+const gddDomain = `https://xdd.wisc.edu`;
+
+const h = hyper.styled(styles);
+
+function InfoDrawer(props) {
+  const {
+    className,
+    position,
+    zoom,
+    setSelectedLocation,
+    children = null,
+  } = props;
+
+  const { lat, lng } = position;
+
+  const mapInfo = fetchMapInfo(lng, lat, zoom);
+  const columnInfo = fetchColumnInfo(lng, lat);
+  const xddInfo = fetchXddInfo(mapInfo?.mapData?.[0]?.macrostrat?.strat_names);
+
+  const fetchingMapInfo = mapInfo == null;
+
+  return h(
+    LocationPanel,
+    {
+      className,
+      position,
+      elevation: mapInfo?.elevation,
+      zoom,
+      onClose: () => setSelectedLocation(null),
+      loading: mapInfo == null,
+      showCopyPositionButton: true,
+      contentContainer: "div.infodrawer-content-holder",
+    },
+    [
+      h(
+        LoadingArea,
+        { loaded: !fetchingMapInfo, className: "infodrawer-content" },
+        h.if(!fetchingMapInfo)(InfoDrawerMainPanel, {
+          mapInfo,
+          columnInfo,
+          xddInfo,
+        }),
+      ),
+      children,
+    ],
+  );
+}
+
+function InfoDrawerMainPanel({ mapInfo, columnInfo, xddInfo }) {
+  if (!mapInfo || !mapInfo.mapData) {
+    return null;
+  }
+
+  let source =
+    mapInfo && mapInfo.mapData && mapInfo.mapData.length
+      ? mapInfo.mapData[0]
+      : {
+          name: null,
+          descrip: null,
+          comments: null,
+          liths: [],
+          b_int: {},
+          t_int: {},
+          ref: {},
+        };
+
+  return h([
+    h(RegionalStratigraphy, {
+      mapInfo,
+      columnInfo,
+    }),
+    // h(FossilCollections, { data: pbdbData, expanded: true }),
+    h(MacrostratLinkedData, {
+      mapInfo,
+      bedrockMatchExpanded: true,
+      source,
+    }),
+    h.if(xddInfo)(XddExpansion, { xddInfo }),
+    h(Physiography, { mapInfo }),
+  ]);
+}
+
+export default InfoDrawer;
+
+function fetchMapInfo(lng, lat, z) {
+  return useAPIResult(`${apiV2Prefix}/mobile/map_query_v2`, {
+    lng,
+    lat,
+    z,
+  })?.success?.data;
+}
+
+function fetchColumnInfo(lng, lat) {
+  return useAPIResult(`${apiV2Prefix}/columns`, {
+    lat,
+    lng,
+    response: "long",
+  })?.success?.data?.[0];
+}
+
+function fetchXddInfo(stratNames) {
+  return useAPIResult(`${gddDomain}/api/v1/snippets`, {
+    article_limit: 20,
+    term: stratNames?.map((d) => d.rank_name).join(","),
+  })?.success?.data;
+}