@macrostrat/map-interface 1.3.2 → 1.4.1

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

@@ -0,0 +1,56 @@
+import { hyperStyled } from "@macrostrat/hyper";
+import { Button, ButtonProps, IconName } from "@blueprintjs/core";
+import styles from "./buttons.module.styl";
+
+const h = hyperStyled(styles);
+
+export const LinkButton = (props: ButtonProps & { to: string }) => {
+  const { to, ...rest } = props;
+  // Check if in react-router context
+  let onClick = () => {};
+  try {
+    onClick = useHashNavigate(to);
+  } catch (err) {
+    console.warn("LinkButton used outside of react-router context");
+  }
+
+  return h(Button, {
+    ...rest,
+    onClick,
+  });
+};
+
+type ListButtonProps = ButtonProps & {
+  icon: React.ComponentType | IconName | React.ReactNode;
+};
+
+function isIconName(x: ListButtonProps["icon"]): x is IconName {
+  return typeof x == "string";
+}
+
+export const ListButton = (props: ListButtonProps) => {
+  let { icon, ...rest } = props;
+  if (!isIconName(props.icon)) {
+    icon = h(props.icon, { size: 20 });
+  }
+  return h(Button, { ...rest, className: "list-button", icon });
+};
+
+type LayerButtonProps = ListButtonProps & {
+  layer: MapLayer;
+  name: string;
+  buttonComponent?: React.ComponentType<ListButtonProps>;
+};
+
+export function LayerButton(props: LayerButtonProps) {
+  const { buttonComponent = ListButton, layer, name, ...rest } = props;
+  const active = useAppState((state) => state.core.mapLayers.has(layer));
+  const runAction = useAppActions();
+  const onClick = () => runAction({ type: "toggle-map-layer", layer });
+  return h(buttonComponent, {
+    active,
+    onClick,
+    text: name,
+    ...rest,
+  });
+}

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

@@ -0,0 +1,43 @@
+.card-header-left button
+  margin-right 5px
+
+.card-content
+  h2:first-child
+    margin-top 0
+  overflow-y scroll
+  padding 10px
+  min-height 0
+
+
+.spacer
+  flex-grow 1
+  pointer-events none
+
+.closeable-card
+  padding 0
+  min-height 40px
+  flex-shrink 1
+  display flex
+  flex-direction: column
+  .card-header, .card-header-left
+    display: flex
+    align-items: center
+    .spacer
+      flex-grow 0.01
+  .card-header-left
+    justify-content: flex-start
+    flex 1
+    min-width: 0
+    overflow-x: hidden
+  .card-header
+    justify-content space-between
+    padding 5px
+    border-bottom 1px solid var(--panel-rule-color)
+    height 40px
+
+
+@media screen and (max-width: 768px) {
+  .closeable-card {
+    border-radius: 0px;
+  }
+}

package/src/map-panel/components/closeable-card.ts

@@ -0,0 +1,64 @@
+import { Card, Button } from "@blueprintjs/core";
+import hyper from "@macrostrat/hyper";
+import classNames from "classnames";
+import styles from "./card.module.styl";
+
+const h = hyper.styled(styles);
+
+const CloseableCardHeader = (props) => h("div.card-header-left", props);
+
+const CloseableCard = (props) => {
+  let {
+    isOpen = true,
+    onClose,
+    title,
+    transitionDuration,
+    showHeader = true,
+    insetContent = true,
+    renderHeader,
+    children,
+    className,
+    ...rest
+  } = props;
+  if (!isOpen) {
+    return null;
+  }
+  rest.className = classNames("closeable-card", className);
+
+  // Set header from "CloseableCardHeader" unless  not set,
+  // otherwise use "title"
+  let header = null;
+  if (renderHeader != null) {
+    header = renderHeader();
+  }
+
+  if (header == null && title != null) {
+    if (title != null) {
+      title = h("h4", title);
+    }
+    header = h([title]);
+  }
+
+  return h(Card, rest, [
+    h.if(showHeader)("div.card-header", [
+      header,
+      //h("div.spacer"),
+      h(Button, {
+        icon: "small-cross",
+        className: "card-close-button",
+        minimal: true,
+        "aria-label": "Close",
+        onClick: onClose,
+      }),
+    ]),
+    h(
+      "div.card-content",
+      { className: classNames({ inset: insetContent }) },
+      children,
+    ),
+  ]);
+};
+
+CloseableCard.Header = CloseableCardHeader;
+
+export { CloseableCard };

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