@macrostrat/map-interface 1.3.2 → 1.4.1

package/src/map-panel/components/info-drawer/xdd-panel/Article.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { Collapse, Button } from "@blueprintjs/core";
+import { AuthorList } from "@macrostrat/ui-components";
+import h from "@macrostrat/hyper";
+
+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 (
+    <div className="article">
+      <div className="article-title">
+        <p className="article-author">
+          {authorList}, {year.length ? " " + year + ". " : ""}
+        </p>
+        <a href={data.URL} target="_blank" className="title-link">
+          <strong>{data.title}.</strong>
+        </a>
+
+        <span>
+          <Button
+            onClick={toggleExpand}
+            minimal={true}
+            rightIcon={iconName}
+            className="flat-btn"
+          ></Button>
+        </span>
+      </div>
+      <Collapse isOpen={expanded}>
+        <span className={expanded ? "" : "hidden"}>
+          <div className="quotes">
+            {data.highlight.map((snippet, si) => {
+              let text = snippet;
+
+              return (
+                <p
+                  className="gdd-snippet"
+                  key={si}
+                  dangerouslySetInnerHTML={{ __html: `...${snippet}...` }}
+                ></p>
+              );
+            })}
+          </div>
+        </span>
+      </Collapse>
+    </div>
+  );
+}
+
+export default Article;

package/src/map-panel/components/info-drawer/xdd-panel/Journal.tsx

@@ -0,0 +1,48 @@
+import Article from "./Article";
+import { Divider } from "@blueprintjs/core";
+import h from "@macrostrat/hyper";
+import { SubExpansionPanel } from "@macrostrat/map-interface";
+import { XDDSnippet } from "./index";
+
+function Journal(props) {
+  return h("div.journal", [
+    h("div.journal-title", [
+      h("h2.journal-title-text", [
+        props.data.name,
+        h("small.journal-source", [props.data]),
+      ]),
+    ]),
+    h(Divider),
+    props.data.articles.map((article, i) => {
+      return h(Article, { key: i, data: article });
+    }),
+  ]);
+}
+
+type JournalProps = {
+  articles: XDDSnippet[];
+  name: string;
+  publisher: string;
+};
+
+// Still up for review
+function Journal_(props: JournalProps) {
+  const { articles, name, publisher } = props;
+
+  const helpText = articles[0].pubname;
+
+  return h(
+    SubExpansionPanel,
+    {
+      title: name,
+      helpText: publisher,
+    },
+    [
+      articles.map((article, i) => {
+        return h(Article, { key: i, data: article });
+      }),
+    ],
+  );
+}
+
+export default Journal_;

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

@@ -0,0 +1,69 @@
+import { Spinner } from "@blueprintjs/core";
+import h from "@macrostrat/hyper";
+import Journal 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 }) {
+  return h(xDDPanelCore, {
+    className: "regional-panel",
+    data: xddInfo,
+    isFetching: xddInfo == undefined || xddInfo.length === 0,
+  });
+}
+
+export function xDDPanelCore({ isFetching, data: xddInfo, ...rest }) {
+  const groupedData = groupSnippetsByJournal(xddInfo);
+
+  return h(
+    ExpansionPanel,
+    {
+      className: "regional-panel",
+      title: "Primary literature",
+      helpText: "via xDD",
+      ...rest,
+    },
+    [
+      h.if(isFetching)(Spinner),
+      h.if(!isFetching && xddInfo.length > 0)([
+        Array.from(groupedData.entries())?.map(([journal, snippets]) => {
+          return h(Journal, {
+            name: journal,
+            articles: snippets,
+            publisher: snippets[0].publisher,
+            key: journal,
+          });
+        }),
+      ]),
+    ],
+  );
+}
+
+function groupSnippetsByJournal(
+  snippets: XDDSnippet[],
+): Map<string, XDDSnippet[]> {
+  const journals = new Map<string, XDDSnippet[]>();
+  if (!snippets || snippets.length === 0) {
+    return journals;
+  }
+  for (let snippet of snippets) {
+    const { pubname: journal } = snippet;
+    if (!journals.has(journal)) {
+      journals.set(journal, []);
+    }
+    journals.get(journal).push(snippet);
+  }
+  return journals;
+}

package/src/map-panel/components/transitions/index.ts

@@ -0,0 +1,24 @@
+import hyper from "@macrostrat/hyper";
+import styles from "./main.module.styl";
+import classNames from "classnames";
+import { Spinner } from "@blueprintjs/core";
+import { useTransition } from "transition-hook";
+
+const h = hyper.styled(styles);
+
+function LoadingArea(props) {
+  const { loaded, children = null, className } = props;
+  const trans = useTransition(loaded, 500);
+  const invTrans = useTransition(!loaded, 500);
+
+  return h(
+    "div.loading-area",
+    { className: classNames(className, trans.stage) },
+    [
+      h.if(invTrans.shouldMount)("div.spinner", null, h(Spinner)),
+      h.if(trans.shouldMount)("div.data", null, children),
+    ],
+  );
+}
+
+export { LoadingArea };

package/src/map-panel/components/transitions/main.module.styl

@@ -0,0 +1,55 @@
+transitionable()
+  &:global(.enter)
+    opacity: 0
+  &:global(.enter-active)
+    opacity: 1
+    transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out, max-height 0.5s ease-in-out
+  &:global(.exit)
+    opacity: 1
+  &:global(.exit-active)
+    opacity: 0
+    transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out, max-height 0.5s ease-in-out
+  transition: height 0.5s ease-in-out, max-height 0.5s ease-in-out
+
+.transition-item
+  transitionable()
+
+.loading-area
+  .spinner, .data
+    transition: height 0.5s ease-in, opacity 0.2s ease-in
+
+  .spinner
+    position absolute
+    top 0
+    left 0
+    width: 100%
+    height 100%
+    min-height: 90px
+    background-color: var(--panel-background-color)
+    padding: 15px
+
+  &.enter
+    .spinner
+      height: 0
+      opacity: 0
+
+    .data
+      opacity: 1
+
+  &.from
+    .spinner
+      height: 90px
+      opacity: 1
+
+    .data
+      opacity: 0
+
+  &.leave
+    .spinner
+      height: 90px
+      opacity: 1
+
+    .data
+      opacity: 0
+
+//.transition-item.infodrawer-info

package/src/map-panel/utils/formatting.ts

@@ -0,0 +1,14 @@
+import { format } from "d3-format";
+
+export const fmt4 = format(".4~f");
+export const fmt3 = format(".3~f");
+export const fmt2 = format(".2~f");
+export const fmt1 = format(".1~f");
+export const fmtInt = format(".0f");
+
+export const addCommas = (x) => {
+  x = parseInt(x);
+  var parts = x.toString().split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};

package/src/map-panel/utils/fossils.ts

@@ -0,0 +1,209 @@
+export function makeOccurrenceTree(data) {
+  let occurrenceTree = { phyla: [] };
+  let rankMap = {
+    25: "unranked",
+    23: "kingdom",
+    22: "subkingdom",
+    21: "superphylum",
+    20: "phylum",
+    19: "subphylum",
+    18: "superclass",
+    17: "class",
+    16: "subclass",
+    15: "infraclass",
+    14: "superorder",
+    13: "order",
+    12: "suborder",
+    11: "infraorder",
+    10: "superfamily",
+    9: "family",
+    8: "subfamily",
+    7: "tribe",
+    6: "subtribe",
+    5: "genus",
+    4: "subgenus",
+    3: "species",
+    2: "subspecies",
+  };
+
+  function getIndex(data, term, property) {
+    for (let i = 0, len = data.length; i < len; i++) {
+      if (data[i][property] === term) return i;
+    }
+    return -1;
+  }
+
+  data.forEach((d) => {
+    // Some preprocessing
+    d.rank = d.rnk ? rankMap[d.rnk] : d.idr ? rankMap[d.idr] : "Unknown";
+    d.italics = d.rnk < 6 ? "italics" : "";
+    if (typeof d.tna === "undefined") {
+      d.tna = d.idn;
+    }
+    d.old_name = d.tna.split(" ")[0] != d.idg ? d.tna : "";
+    d.url =
+      d.rank === "species"
+        ? d.idg + " " + d.ids
+        : d.tid
+          ? d.tid.split(":")[1] > 0
+            ? d.idg
+            : ""
+          : "";
+
+    // If it has a genus name...
+    if (d.idg) {
+      let genusRes = d.rsg ? d.rsg + " " : "";
+      let speciesRes = d.rss ? " " + d.rss + " " : " ";
+      d.genusRes = genusRes;
+      // If it's a species...
+      if (d.rank === "species") {
+        d.display_name1 = d.tna;
+        d.display_name2 = d.tna != d.idg + " " + d.ids ? "(" + d.tna + ")" : "";
+        d.display_name3 = "";
+      } else {
+        d.display_name1 = d.idg;
+        d.display_name2 = speciesRes;
+        d.display_name3 = d.ids;
+      }
+    } else {
+      d.display_name1 = d.tna;
+      d.display_name2 = "";
+    }
+
+    // Find unique phyla
+    let phyla = [];
+    for (let i = 0; i < occurrenceTree.phyla.length; i++) {
+      phyla.push(occurrenceTree.phyla[i].phylum);
+    }
+
+    if (phyla.indexOf(d.phl) < 0) {
+      let newPhylum = { phylum: d.phl, classes: [] };
+      occurrenceTree.phyla.push(newPhylum);
+    }
+
+    // Find unique phylum/class combinations
+    let phyla_classes = [];
+    for (let i = 0; i < occurrenceTree.phyla.length; i++) {
+      for (let j = 0; j < occurrenceTree.phyla[i].classes.length; j++) {
+        phyla_classes.push(
+          occurrenceTree.phyla[i].phylum +
+            "-" +
+            occurrenceTree.phyla[i].classes[j].nameClass,
+        );
+      }
+    }
+
+    if (phyla_classes.indexOf(d.phl + "-" + d.cll) < 0) {
+      let newClass = { nameClass: d.cll, families: [] };
+      let phylumIndex = getIndex(occurrenceTree.phyla, d.phl, "phylum");
+      occurrenceTree.phyla[phylumIndex]["classes"].push(newClass);
+    }
+
+    // Find unique phylum/class/family combinations
+    let phyla_class_family = [];
+    for (let i = 0; i < occurrenceTree.phyla.length; i++) {
+      for (let j = 0; j < occurrenceTree.phyla[i].classes.length; j++) {
+        for (
+          let k = 0;
+          k < occurrenceTree.phyla[i].classes[j].families.length;
+          k++
+        ) {
+          phyla_class_family.push(
+            occurrenceTree.phyla[i].phylum +
+              "-" +
+              occurrenceTree.phyla[i].classes[j].nameClass +
+              "-" +
+              occurrenceTree.phyla[i].classes[j].families[k].family,
+          );
+        }
+      }
+    }
+
+    if (phyla_class_family.indexOf(d.phl + "-" + d.cll + "-" + d.fml) < 0) {
+      let newFamily = { family: d.fml, genera: [] };
+      let phylumIndex = getIndex(occurrenceTree.phyla, d.phl, "phylum");
+      let classIndex = getIndex(
+        occurrenceTree.phyla[phylumIndex].classes,
+        d.cll,
+        "nameClass",
+      );
+      occurrenceTree.phyla[phylumIndex].classes[classIndex]["families"].push(
+        newFamily,
+      );
+    }
+
+    // Place genera into the right phylum/class/family
+    let phylumIndex = getIndex(occurrenceTree.phyla, d.phl, "phylum");
+    let classIndex = getIndex(
+      occurrenceTree.phyla[phylumIndex].classes,
+      d.cll,
+      "nameClass",
+    );
+    let familyIndex = getIndex(
+      occurrenceTree.phyla[phylumIndex].classes[classIndex].families,
+      d.fml,
+      "family",
+    );
+    occurrenceTree.phyla[phylumIndex].classes[classIndex].families[
+      familyIndex
+    ].genera.push(d);
+  });
+
+  for (let i = 0; i < occurrenceTree.phyla.length; i++) {
+    let undefinedClassIndex;
+    for (let j = 0; j < occurrenceTree.phyla[i].classes.length; j++) {
+      let undefinedFamilyIndex;
+      for (
+        let k = 0;
+        k < occurrenceTree.phyla[i].classes[j].families.length;
+        k++
+      ) {
+        if (
+          typeof occurrenceTree.phyla[i].classes[j].families[k].family ===
+          "undefined"
+        ) {
+          undefinedFamilyIndex = k;
+          occurrenceTree.phyla[i].classes[j].families[k].family =
+            "Miscellaneous " +
+            (typeof occurrenceTree.phyla[i].classes[j].nameClass ===
+              "undefined")
+              ? "Miscellaneous unranked taxa"
+              : occurrenceTree.phyla[i].classes[j].nameClass;
+          occurrenceTree.phyla[i].classes[j].families[k].noFamily = true;
+        }
+      }
+
+      if (typeof undefinedFamilyIndex != "undefined") {
+        occurrenceTree.phyla[i].classes[j].families.push(
+          occurrenceTree.phyla[i].classes[j].families.splice(
+            undefinedFamilyIndex,
+            1,
+          )[0],
+        );
+      }
+
+      if (typeof occurrenceTree.phyla[i].classes[j].nameClass === "undefined") {
+        undefinedFamilyIndex = j;
+        occurrenceTree.phyla[i].classes[j].nameClass =
+          "Miscellaneous " +
+          (typeof occurrenceTree.phyla[i].phylum === "undefined")
+            ? "Miscellaneous unranked taxa"
+            : occurrenceTree.phyla[i].phylum;
+        occurrenceTree.phyla[i].classes[j].noClass = true;
+      }
+    }
+
+    if (typeof undefinedClassIndex != "undefined") {
+      occurrenceTree.phyla[i].classes.push(
+        occurrenceTree.phyla[i].classes.splice(undefinedClassIndex, 1)[0],
+      );
+    }
+
+    if (typeof occurrenceTree.phyla[i].phylum === "undefined") {
+      occurrenceTree.phyla[i].phylum = "Unranked taxa";
+      occurrenceTree.phyla[i].unranked = true;
+    }
+  }
+
+  return occurrenceTree;
+}

package/src/map-panel/utils/index.ts

@@ -0,0 +1,157 @@
+export const addCommas = (x) => {
+  x = parseInt(x);
+  var parts = x.toString().split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+
+export const sum = (data, prop) => {
+  if (!data || !data.length) {
+    return [];
+  }
+  return data
+    .map((d) => {
+      return d[prop];
+    })
+    .reduce((a, b) => {
+      return a + b;
+    }, 0);
+};
+
+export const hexToRgb = (hex, opacity) => {
+  if (!hex) {
+    return "rgba(0,0,0,0.3)";
+  }
+  hex = hex.replace("#", "");
+  let bigint = parseInt(hex, 16);
+  let r = (bigint >> 16) & 255;
+  let g = (bigint >> 8) & 255;
+  let b = bigint & 255;
+  return `rgba(${r},${g},${b},${opacity || 0.8})`;
+};
+
+export type TimescaleDivision = {
+  name: string;
+  abbrev: string;
+  t_age: number;
+  b_age: number;
+  color: string;
+};
+
+export const timescale: TimescaleDivision[] = [
+  { name: "Quaternary", abbrev: "Q", t_age: 0, b_age: 2.588, color: "#F9F97F" },
+  {
+    name: "Neogene",
+    abbrev: "Ng",
+    t_age: 2.588,
+    b_age: 23.03,
+    color: "#FFE619",
+  },
+  {
+    name: "Paleogene",
+    abbrev: "Pg",
+    t_age: 23.03,
+    b_age: 66,
+    color: "#FD9A52",
+  },
+  { name: "Cretaceous", abbrev: "K", t_age: 66, b_age: 145, color: "#7FC64E" },
+  { name: "Jurassic", abbrev: "J", t_age: 145, b_age: 201.3, color: "#34B2C9" },
+  {
+    name: "Triassic",
+    abbrev: "Tr",
+    t_age: 201.3,
+    b_age: 252.17,
+    color: "#812B92",
+  },
+  {
+    name: "Permian",
+    abbrev: "P",
+    t_age: 252.17,
+    b_age: 298.9,
+    color: "#F04028",
+  },
+  {
+    name: "Carboniferous",
+    abbrev: "C",
+    t_age: 298.9,
+    b_age: 358.9,
+    color: "#67A599",
+  },
+  {
+    name: "Devonian",
+    abbrev: "D",
+    t_age: 358.9,
+    b_age: 419.2,
+    color: "#CB8C37",
+  },
+  {
+    name: "Silurian",
+    abbrev: "S",
+    t_age: 419.2,
+    b_age: 443.8,
+    color: "#B3E1B6",
+  },
+  {
+    name: "Ordovician",
+    abbrev: "O",
+    t_age: 443.8,
+    b_age: 485.4,
+    color: "#009270",
+  },
+  {
+    name: "Cambrian",
+    abbrev: "Cm",
+    t_age: 485.4,
+    b_age: 541,
+    color: "#7FA056",
+  },
+  { name: "Ediacaran", abbrev: "E", t_age: 541, b_age: 635, color: "#FFC3E1" },
+  {
+    name: "Cryogenian",
+    abbrev: "Cr",
+    t_age: 635,
+    b_age: 720,
+    color: "#FFAFD7",
+  },
+  { name: "Tonian", abbrev: "T", t_age: 720, b_age: 1000, color: "#FFA5D2" },
+  { name: "Stenian", abbrev: "St", t_age: 1000, b_age: 1200, color: "#FFA5D2" },
+  {
+    name: "Ectasian",
+    abbrev: "Ec",
+    t_age: 1200,
+    b_age: 1400,
+    color: "#FF98CC",
+  },
+  {
+    name: "Calymmian",
+    abbrev: "Ca",
+    t_age: 1400,
+    b_age: 1600,
+    color: "#FF8BC5",
+  },
+  {
+    name: "Statherian",
+    abbrev: "St",
+    t_age: 1600,
+    b_age: 1800,
+    color: "#EE93C1",
+  },
+  {
+    name: "Orosirian",
+    abbrev: "Or",
+    t_age: 1800,
+    b_age: 2050,
+    color: "#E874AF",
+  },
+  { name: "Rhyacian", abbrev: "R", t_age: 2050, b_age: 2300, color: "#EB84B8" },
+  {
+    name: "Siderian",
+    abbrev: "Sd",
+    t_age: 2300,
+    b_age: 2500,
+    color: "#E874AF",
+  },
+];
+
+export * from "./fossils";
+export * from "./formatting";