@macrostrat/map-interface 1.4.0 → 1.4.2

package/src/map-panel/components/info-drawer/macrostrat-linked.ts

@@ -0,0 +1,399 @@
+import hyper from "@macrostrat/hyper";
+import { AgeChip, AttrChip } from "../info-blocks";
+import {
+  ExpansionPanel,
+  ExpandableDetailsPanel,
+  ExpansionBody,
+} from "@macrostrat/map-interface";
+import styles from "./main.module.styl";
+import { scaleLinear } from "@visx/scale";
+import { AxisBottom } from "@visx/axis";
+import chroma from "chroma-js";
+import { LithologyList } from "@macrostrat/data-components";
+
+const h = hyper.styled(styles);
+
+function MacrostratLinkedData(props) {
+  const { mapInfo, bedrockMatchExpanded, source } = props;
+
+  if (!mapInfo.mapData[0]) return h("div");
+
+  return h(
+    ExpansionPanel,
+    {
+      className: "regional-panel",
+      title: "Macrostrat-linked data",
+      helpText: "via Macrostrat",
+      expanded: bedrockMatchExpanded,
+    },
+    [
+      h("div", { classes: expansionPanelDetailClasses }, [
+        h(MatchBasis, { source }),
+        h(AgeInformation, { mapInfo, source }),
+        h(Thickness, { source }),
+        h(MinorFossilCollections, { source }),
+        h(FossilOccs, { source }),
+        h(LithsAndClasses, { source }),
+        h(Environments, { source }),
+        h(Economy, { source }),
+      ]),
+    ],
+  );
+}
+
+const expansionPanelDetailClasses = {
+  root: "expansion-panel-detail",
+};
+
+function AgeInformation(props) {
+  const { source, mapInfo } = props;
+  const { macrostrat } = source;
+
+  if (!macrostrat?.b_age) return h(MapAgeRenderer, { mapInfo });
+
+  return h(MacrostratAgeInfo, { macrostrat, mapInfo });
+}
+
+function MapAgeRenderer(props) {
+  const { mapInfo, ...rest } = props;
+  return h(
+    DescribedAgeInfo,
+    {
+      ageElement: h(AgeChip, {
+        b_int: mapInfo.mapData[0].b_int,
+        t_int: mapInfo.mapData[0].t_int,
+      }),
+    },
+    "Based on geologic map description.",
+  );
+}
+
+function DescribedAgeInfo(props) {
+  const { ageElement, children, className } = props;
+
+  return h("div.described-age.macrostrast-detail", [
+    h("div.expansion-summary-title", "Age"),
+    h("div.age-chips", null, ageElement),
+    h("div.description", children),
+  ]);
+}
+
+function AgeRefinementBar({ scale, data, color, label = null }) {
+  const { b_int, t_int } = data;
+  const b_age = data.b_age ?? b_int.b_age;
+  const t_age = data.t_age ?? t_int.t_age;
+  const backgroundColor = color ?? b_int.color;
+  const accentColor = chroma(backgroundColor).darken(0.5).hex();
+  const labelColor = chroma(backgroundColor).darken(2).hex();
+
+  const left = scale(b_age);
+  const width = scale(t_age) - scale(b_age);
+
+  let labelTranslate = 5;
+  let textAlign = "start";
+
+  // Adjust label placement
+
+  if (width < 100) {
+    if (left < 100) {
+      labelTranslate = width + 5;
+    } else {
+      labelTranslate = -305;
+      textAlign = "end";
+    }
+  }
+
+  return h(
+    "div.age-refinement-bar",
+    {
+      style: {
+        marginLeft: `${left}px`,
+        width: `${width}px`,
+        height: "18px",
+        backgroundColor,
+        border: `2px solid ${accentColor}`,
+        position: "relative",
+      },
+    },
+    h(
+      "div.age-refinement-bar-label",
+      {
+        style: {
+          transform: `translateX(${labelTranslate}px)`,
+          color: labelColor,
+          fontSize: "10px",
+          width: 300,
+          textAlign,
+        },
+      },
+      label,
+    ),
+  );
+}
+
+function AgeRefinementPlot({ macrostrat, mapInfo }) {
+  // Plot the amount by which the age was refined
+
+  const mapData = mapInfo.mapData[0];
+  const b_age = Math.max(mapData.b_int.b_age, macrostrat.b_age);
+  const t_age = Math.min(mapData.t_int.t_age, macrostrat.t_age);
+
+  const scale = scaleLinear({
+    domain: [1.02 * b_age, t_age * 0.98],
+    range: [20, 360],
+  });
+
+  // use visx to plot the age refinement
+  return h("div.age-refinement-plot", [
+    h(AgeRefinementBar, {
+      scale,
+      data: macrostrat,
+      label: "Macrostrat age model",
+    }),
+    h(AgeRefinementBar, {
+      scale,
+      data: mapData,
+      label: "Map legend",
+    }),
+    // Age axis
+    h("svg", { width: "100%", height: "40px" }, [
+      h(AxisBottom, {
+        scale,
+        numTicks: 5,
+        top: 1,
+        left: 0,
+        label: "Age (Ma)",
+      }),
+    ]),
+  ]);
+}
+
+function MacrostratAgeInfoCore({ macrostrat }) {
+  const { b_age, t_age, b_int, t_int } = macrostrat;
+
+  if (!b_age) return null;
+
+  let age = b_int.int_name;
+  if (b_int.int_id !== t_int.int_id) {
+    age += ` - ${t_int.int_name}`;
+  }
+  return h(
+    DescribedAgeInfo,
+    {
+      ageElement: h(AgeChip, {
+        b_int: { ...b_int, int_name: age, b_age, t_age },
+        t_int: { ...b_int, int_name: age, b_age, t_age },
+      }),
+    },
+    "Refined using the Macrostrat age model.",
+  );
+}
+
+function MacrostratAgeInfo(props) {
+  return h(
+    ExpandableDetailsPanel,
+    { headerElement: h(MacrostratAgeInfoCore, props) },
+    h(ExpansionBody, { title: "Age refinement" }, h(AgeRefinementPlot, props)),
+  );
+}
+
+function MatchBasis(props) {
+  const { source } = props;
+  if (!source.macrostrat?.strat_names) return null;
+
+  return h(
+    ExpandableDetailsPanel,
+    {
+      className: "macrostrat-unit",
+      headerElement: h([
+        h("h3", source.macrostrat.strat_names[0].rank_name),
+        h("div.description", "Matched stratigraphic unit"),
+      ]),
+    },
+    h(ExpansionBody, { title: "All matched names" }, [
+      source.macrostrat.strat_names.map((name, i) => {
+        let lastElement: boolean =
+          i == source.macrostrat.strat_names.length - 1;
+        return h("span", { key: i }, [
+          h(
+            "a.externalLink",
+            {
+              href: "/lex/strat-names/" + name.strat_name_id,
+              key: i,
+            },
+            [name.rank_name],
+          ),
+          h.if(!lastElement)([", "]),
+        ]);
+      }),
+    ]),
+  );
+}
+
+function Thickness(props) {
+  const { source } = props;
+  if (!source.macrostrat.max_thick) return h("div");
+
+  return h.if(source.macrostrat && source.macrostrat.max_thick)(
+    "div.macrostrat-detail",
+    [
+      h("div.expansion-summary-title", "Thickness"),
+      h("div", [
+        source.macrostrat.min_min_thick,
+        " - ",
+        source.macrostrat.max_thick,
+        "m",
+      ]),
+    ],
+  );
+}
+
+function MinorFossilCollections(props) {
+  const { source } = props;
+  const { macrostrat } = source;
+  if (!macrostrat.pbdb_collections) return h("div");
+
+  return h.if(macrostrat && macrostrat.pbdb_collections)(
+    "div.macrostrat-detail",
+    [
+      h("div.expansion-summary-title", "Fossil collections"),
+      h("div", [macrostrat.pbdb_collections]),
+    ],
+  );
+}
+
+function FossilOccs(props) {
+  const { source } = props;
+  const { macrostrat } = source;
+
+  if (!macrostrat?.pbdb_occs) return null;
+
+  return h("div.macrostrat-detail", [
+    h("div.expansion-summary-title", "Fossil occurrences"),
+    h("div", [macrostrat.pbdb_occs]),
+  ]);
+}
+
+function LithTypes(props) {
+  const { lith_types } = props;
+
+  return h.if(lith_types && lith_types.length > 0)(
+    "div.lithologies.lithology-types",
+    [
+      h(LithologyList, {
+        lithologies: lith_types,
+      }),
+    ],
+  );
+}
+
+function LithsAndClasses(props) {
+  const { source } = props;
+  const { macrostrat } = source;
+  const { liths = null, lith_types = null } = macrostrat;
+
+  if (!liths || liths.length == 0) return null;
+
+  const lithologies = liths.map((lith) => {
+    return {
+      ...lith,
+      name: lith.lith,
+      color: lith.color || "#000000",
+    };
+  });
+
+  return h(
+    ExpandableDetailsPanel,
+    {
+      title: "Lithology",
+      value: h(LithTypes, { lith_types }),
+    },
+    h(ExpansionBody, { title: "Matched lithologies" }, [
+      h(LithologyList, {
+        lithologies,
+        onClickItem: (e, lith) => {
+          window.open("/lex/lithology/" + lith.lith_id, "_self");
+        },
+      }),
+    ]),
+  );
+}
+
+function EnvironTypes(props) {
+  const { environ_types } = props;
+  return h.if(environ_types && environ_types.length > 0)(LithologyList, {
+    lithologies: environ_types?.filter((e) => e.name != ""),
+  });
+}
+
+function Environments(props) {
+  const { source } = props;
+  const { macrostrat } = source;
+  const { environs = null, environ_types = null } = macrostrat;
+
+  if (!environs || environs.length == 0) return null;
+
+  const lithologies = environs.map((environ) => {
+    return {
+      ...environ,
+      name: environ.environ,
+      color: environ.color || "#000000",
+    };
+  });
+
+  return h(
+    ExpandableDetailsPanel,
+    {
+      title: "Environment",
+      value: h(EnvironTypes, { environ_types }),
+    },
+    h(ExpansionBody, { title: "Matched environments" }, [
+      h(LithologyList, {
+        lithologies,
+        onClickItem: (e, environ) => {
+          window.open("/lex/environments/" + environ.environ_id, "_self");
+        },
+      }),
+    ]),
+  );
+}
+
+function EconType(props) {
+  const { econ_types } = props;
+
+  return h.if(econ_types && econ_types.length > 0)("div", [
+    econ_types.map((econClass, i) => {
+      return h(AttrChip, {
+        key: i,
+        name: econClass.name,
+        color: econClass.color,
+      });
+    }),
+  ]);
+}
+
+function Economy(props) {
+  const { source } = props;
+  const { macrostrat } = source;
+  const { econs = null, econ_types = null } = macrostrat;
+  if (!econs) return h("div");
+
+  return h.if(econs && econs.length > 0)(
+    ExpandableDetailsPanel,
+    {
+      title: "Economy ",
+      value: h(EconType, { econ_types }),
+    },
+    h(ExpansionBody, { title: "Matched economic attributes" }, [
+      econs.map((econ, i) => {
+        return h(AttrChip, {
+          key: i,
+          name: econ.econ,
+          color: econ.color,
+        });
+      }),
+    ]),
+  );
+}
+
+export { MacrostratLinkedData };

package/src/map-panel/components/info-drawer/main.module.styl

@@ -0,0 +1,67 @@
+.spacer
+  flex-grow 1
+  pointer-events none
+
+.infodrawer-content
+  margin: 0;
+
+.macrostrat-detail
+  display: flex;
+  align-items: center;
+  margin 0.2em 0 0.4em;
+
+  .expansion-summary-title
+    margin-right: 0.8em;
+
+    &:after
+      content: ":";
+
+.described-age, .macrostrat-detail
+  display: flex;
+  align-items: center;
+
+  .expansion-summary-title
+    margin-right: 0.8em;
+
+    &:after
+      content: ":";
+
+  .description
+    font-style italic
+    font-size 0.7em
+    max-width: 100px
+    text-align: right
+
+  .age-chips
+    flex-grow 1
+
+
+// &.loading
+//   max-height: 200px
+// max-height: calc(100vh - 60px)
+// transition: max-height 0.5s ease-in-out 0.25s
+
+
+.spacer
+  flex-grow 1
+  pointer-events none
+
+.macrostrat-unit
+  h3
+    margin: 0.5em 0 0.5em;
+    flex-grow: 1;
+
+  .description
+    margin-right: 1em
+
+.description
+  font-style italic
+
+.age-refinement-plot
+  position relative
+
+  .age-refinement-bar
+    border-radius: 3px
+    margin-bottom: 1px
+
+

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

@@ -0,0 +1,29 @@
+import h from "@macrostrat/hyper";
+import { ExpansionPanel } from "@macrostrat/map-interface";
+
+function Physiography(props) {
+  const { mapInfo } = props;
+  const { regions } = mapInfo;
+
+  if (!mapInfo || !regions) return h("div");
+
+  return h.if(regions.length > 0)(
+    ExpansionPanel,
+    {
+      classes: { root: "regional-panel" },
+      title: "Physiography",
+      expanded: true,
+    },
+    [
+      regions.map((region, i) => {
+        return h("div.region", { key: i }, [
+          h("h3", [region.name]),
+          h("p.region-group", [region.boundary_group]),
+          h("p.region-description", [region.descrip]),
+        ]);
+      }),
+    ],
+  );
+}
+
+export { Physiography };

package/src/map-panel/components/info-drawer/reg-strat.ts

@@ -0,0 +1,74 @@
+import h from "@macrostrat/hyper";
+import { ExpansionPanel } from "@macrostrat/map-interface";
+import { addCommas } from "../../utils";
+
+export function RegionalStratigraphy(props) {
+  const { mapInfo, columnInfo } = props;
+  if (mapInfo?.mapData == null || !columnInfo) return null;
+
+  return h(
+    ExpansionPanel,
+    {
+      classes: { root: "regional-panel" },
+      title: "Regional stratigraphy",
+      expanded: true,
+    },
+    [h.if(columnInfo != null)(ColumnData, { columnInfo })],
+  );
+}
+
+function ColumnData({ columnInfo }) {
+  return h("div.column-data", [
+    h("a", { href: "/columns/" + columnInfo.col_id }, "View column page"),
+    h(MapAttribute, {
+      label: "Name: ",
+      content: [columnInfo.col_name],
+    }),
+    h(MapAttribute, {
+      label: "Column ID: ",
+      content: [columnInfo.col_id],
+    }),
+    h(MapAttribute, {
+      label: "Group: ",
+      content: [columnInfo.col_group],
+    }),
+    h(MapAttribute, {
+      label: "Group ID: ",
+      content: [columnInfo.col_group_id],
+    }),
+    h.if(columnInfo.min_min_thick || columnInfo.max_thick)(MapAttribute, {
+      label: "Thickness: ",
+      content: [
+        addCommas(parseInt(columnInfo.min_min_thick)),
+        " - ",
+        addCommas(parseInt(columnInfo.max_thick)),
+        h("span.age-ma", ["m"]),
+      ],
+    }),
+    h(MapAttribute, {
+      label: "Age: ",
+      content: [
+        columnInfo.b_age,
+        " - ",
+        columnInfo.t_age,
+        " ",
+        h("span.age-ma", ["Ma"]),
+      ],
+    }),
+    h(MapAttribute, {
+      label: "Area: ",
+      content: [addCommas(columnInfo.col_area), " ", h("span.age-ma", ["km2"])],
+    }),
+    h(MapAttribute, {
+      label: "Fossil collections: ",
+      content: [addCommas(columnInfo.pbdb_collections)],
+    }),
+  ]);
+}
+
+function MapAttribute(props) {
+  return h("div.map-source-attr", [
+    h("span.attr", [props.label]),
+    ...props.content,
+  ]);
+}

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_;