@macrostrat/map-interface 1.3.2 → 1.4.1

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;
+}

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,
+  ]);
+}