@macrostrat/map-interface 2.0.1 → 2.1.0

package/src/expansion-panel/main.module.sass

@@ -1,157 +0,0 @@
-
-.panel-subhead
-  padding: 0 1rem
-  border: 1px solid var(--panel-rule-color)
-  border-bottom: 1px solid var(--panel-rule-color)
-  background-color: var(--accent-color)
-  display: flex
-  flex-direction: row
-  align-items: center
-  z-index: 1
-  gap: var(--panel-header-gap, 0.5rem)
-  top: -1px
-  position: sticky
-  min-height: var(--panel-header-height, 40px)
-  h1, h2, h3, h4
-    font-family: Montserrat,sans-serif
-    font-weight: 700
-    margin: 0
-  h4
-    font-weight: 600
-  .title
-    flex-grow: 1
-
-  .expansion-panel-icon
-    margin-right: -0.35em
-
-// :global(.bp6-dark) .panel-subhead
-//   margin 0 1px
-
-.info-panel-section
-  &>.panel-subhead
-    margin: -1px calc(var(--panel-padding-h) * -1) 0
-
-.expansion-panel
-  padding: 0
-  flex-wrap: wrap
-  margin-top: -1px
-  // &.collapsed
-  //   .expansion-panel-header
-  //     border-bottom-width: 0;
-
-.sub-expansion-panel
-  margin: -1px calc(var(--panel-padding-h) * -0.5) 0
-  overflow: hidden
-  &:first-child
-    .expansion-panel-header
-      border-top-width: 0
-  .panel-subhead
-    border-top: none
-    border-bottom: none
-
-  .expansion-panel-header
-    background-color: var(--accent-secondary-color)
-    cursor: pointer
-    padding: 0 1rem
-
-    &:hover
-      background-color: var(--accent-secondary-hover-color)
-    h2, h3, h4
-      font-weight: 500
-      border-bottom: 1px solid var(--tertiary-border-color)
-      border-top: 1px solid var(--tertiary-border-color)
-      align-items: center
-
-.expansion-summary-title-help
-  margin-left: 5px
-  :global(.bp6-icon)
-    margin-left: 5px
-
-.expansion-panel-header
-  cursor: pointer
-  &:hover
-    background-color: var(--accent-hover-color)
-  :global(.bp6-icon)
-    transform: translate(0,3px)
-
-.expansion-children
-  padding: 0 1rem
-  .expansion-panel
-    margin-left: -1rem
-    margin-right: -1rem
-    &:first-child
-      margin-top: 0
-  &>:first-child
-    margin-top: 1rem
-  &>:last-child
-    margin-bottom: 1rem
-
-
-
-.expansion-panel-subtext
-  font-size: 85%
-  font-weight: 400
-
-:global
-  .expansion-panel-root
-    padding-left: 15px !important
-
-  .expansion-panel-detail
-    display: block !important
-    padding: 0 !important
-
-  .expansion-panel-detail-sub
-    display: block !important
-
-// New expandable panel for details
-.expandable-details-main
-  display: flex
-  flex-direction: row
-  align-items: center
-  justify-content: space-between
-  margin: 3px 0
-
-.expandable-details-header
-  display: inline-flex
-  flex-direction: row
-  align-items: baseline
-  flex-grow: 1
-
-.expandable-details-children
-  position: relative
-
-.expandable-details-toggle
-  :global(.bp6-button)
-    font-size: 10px
-
-.expandable-details
-  &.macrostrat-unit
-    .title:after
-      content: none
-  .title
-    margin-right: 1em
-    &:after
-      content: ":"
-
-.expansion-body
-  display: inline-block
-  //flex-direction row
-  align-items: baseline
-  background-color: var(--tertiary-background)
-  padding: 2px 6px
-  border-radius: 4px
-  width: 100%
-  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2)
-  margin-bottom: 6px
-
-.expansion-panel-detail-header
-  font-size: 90%
-  font-style: italic
-  margin-right: 1em
-  display: inline
-  color: var(--secondary-color)
-  &:after
-    content: ":"
-
-.expansion-panel-detail-body
-  display: inline

package/src/location-details/fetch.ts

@@ -1,57 +0,0 @@
-import { useAPIResult } from "@macrostrat/ui-components";
-
-const apiV2Prefix = `https://dev.macrostrat.org/api/v2`;
-const gddDomain = `https://xdd.wisc.edu`;
-const paleobioDomain = `https://paleobiodb.org`;
-
-export function fetchMapInfo(lng, lat, z) {
-  return useAPIResult(`${apiV2Prefix}/mobile/map_query_v2`, {
-    lng,
-    lat,
-    z,
-  })?.success?.data;
-}
-
-export function fetchColumnInfo(lng, lat) {
-  return useAPIResult(`${apiV2Prefix}/columns`, {
-    lat,
-    lng,
-    response: "long",
-  })?.success?.data?.[0];
-}
-
-export function fetchXddInfo(stratNames) {
-  return useAPIResult(`${gddDomain}/api/v1/snippets`, {
-    article_limit: 20,
-    term: stratNames?.map((d) => d.rank_name).join(","),
-  })?.success?.data;
-}
-
-export function fetchFossilInfo(lng, lat) {
-  const collectionResponse = useAPIResult(
-    `${paleobioDomain}/data1.2/colls/list.json?lngmin=${lng - 0.1}&lngmax=${lng + 0.1}&latmin=${lat - 0.1}&latmax=${lat + 0.1}`,
-  )?.records;
-
-  const occurrences = useAPIResult(
-    `${paleobioDomain}/data1.2/occs/list.json?lngmin=${lng - 0.1}&lngmax=${lng + 0.1}&latmin=${lat - 0.1}&latmax=${lat + 0.1}`,
-  )?.records;
-
-  if (!collectionResponse || !occurrences) {
-    return null;
-  }
-
-  try {
-    return collectionResponse.map((col) => {
-      col.occurrences = [];
-      occurrences.forEach((occ) => {
-        if (occ.cid === col.oid) {
-          col.occurrences.push(occ);
-        }
-      });
-      return col;
-    });
-  } catch (error) {
-    console.log(error);
-    return [];
-  }
-}

package/src/location-details/location-details.stories.ts

@@ -1,88 +0,0 @@
-import { ComponentMeta } from "@storybook/react-vite";
-import h from "@macrostrat/hyper";
-import { RegionalStratigraphy } from "./reg-strat";
-import { Physiography } from "./physiography";
-import { MacrostratLinkedData } from "./macrostrat-linked";
-import { XddExpansion } from "./xdd-panel";
-import {
-  fetchMapInfo,
-  fetchColumnInfo,
-  fetchXddInfo,
-  fetchFossilInfo,
-} from "./fetch";
-import { FossilCollections } from "./fossil-collections";
-
-export default {
-  title: "Map interface/Location panel details",
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  args: {},
-} as ComponentMeta<any>;
-
-const lat = 44.60085563149249;
-const lng = -96.16783150353609;
-const zoom = 3.9392171056922325;
-
-export function RegionalStratigraphyExample() {
-  const mapInfo = fetchMapInfo(lng, lat, zoom);
-  const columnInfo = fetchColumnInfo(lng, lat);
-
-  return h(RegionalStratigraphy, {
-    mapInfo,
-    columnInfo,
-    columnURL: "https://dev.macrostrat.org/columns/",
-    expanded: true,
-  });
-}
-
-export function PhysiographyExample() {
-  const mapInfo = fetchMapInfo(lng, lat, zoom);
-
-  return h(Physiography, {
-    mapInfo,
-    expanded: true,
-  });
-}
-
-export function MacrostratLinkedDataExample() {
-  const mapInfo = fetchMapInfo(lng, lat, zoom);
-
-  const source =
-    mapInfo && mapInfo?.mapData && mapInfo?.mapData.length
-      ? mapInfo?.mapData[0]
-      : {
-          name: null,
-          descrip: null,
-          comments: null,
-          liths: [],
-          b_int: {},
-          t_int: {},
-          ref: {},
-        };
-
-  return h(MacrostratLinkedData, {
-    mapInfo,
-    source,
-    stratNameURL: "https://dev.macrostrat.org/lex/strat-names",
-    environmentURL: "https://dev.macrostrat.org/lex/environments",
-    intervalURL: "https://dev.macrostrat.org/lex/intervals",
-    lithologyURL: "https://dev.macrostrat.org/lex/lithologies",
-    expanded: true,
-  });
-}
-
-export function xddInfoExample() {
-  const mapInfo = fetchMapInfo(lng, lat, zoom);
-  const xddInfo = fetchXddInfo(mapInfo?.mapData?.[0]?.macrostrat?.strat_names);
-
-  if (!xddInfo) {
-    return null;
-  }
-
-  return h(XddExpansion, { xddInfo, expanded: true, nestedExpanded: true });
-}
-
-export function FossilsExample() {
-  const fossilInfo = fetchFossilInfo(-89.3938453, 43.0735407);
-
-  return h(FossilCollections, { data: fossilInfo, expanded: true });
-}

package/src/location-details/xdd-panel/article.ts

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

package/src/location-details/xdd-panel/index.ts

@@ -1,70 +0,0 @@
-import { Spinner } from "@blueprintjs/core";
-import h from "@macrostrat/hyper";
-import { XDDSnippet, JournalLegacy } from "./journal";
-import { ExpansionPanel } from "@macrostrat/map-interface";
-
-export function XddExpansion({
-  xddInfo,
-  expanded = false,
-  nestedExpanded = true,
-}) {
-  return h(xDDPanelCore, {
-    className: "regional-panel",
-    data: xddInfo,
-    isFetching: xddInfo == undefined || xddInfo.length === 0,
-    expanded,
-    nestedExpanded,
-  });
-}
-
-export function xDDPanelCore({
-  isFetching,
-  data: xddInfo,
-  expanded,
-  nestedExpanded,
-  ...rest
-}) {
-  const groupedData = groupSnippetsByJournal(xddInfo);
-
-  return h(
-    ExpansionPanel,
-    {
-      className: "regional-panel",
-      title: "Primary literature",
-      helpText: "via xDD",
-      ...rest,
-      expanded,
-    },
-    [
-      h.if(isFetching)(Spinner),
-      h.if(!isFetching && xddInfo.length > 0)([
-        Array.from(groupedData.entries())?.map(([journal, snippets]) => {
-          return h(JournalLegacy, {
-            nestedExpanded,
-            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/location-details/xdd-panel/journal.ts

@@ -1,60 +0,0 @@
-import { Article } from "./article";
-import { Divider } from "@blueprintjs/core";
-import h from "@macrostrat/hyper";
-import { SubExpansionPanel } 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[];
-}
-
-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;
-  nestedExpanded?: boolean;
-};
-
-// Still up for review
-export function JournalLegacy(props: JournalProps) {
-  const { articles, name, publisher, nestedExpanded } = props;
-
-  const helpText = articles[0].pubname;
-
-  return h(
-    SubExpansionPanel,
-    {
-      title: name,
-      helpText: publisher,
-      expanded: nestedExpanded,
-    },
-    [
-      articles.map((article, i) => {
-        return h(Article, { key: i, data: article });
-      }),
-    ],
-  );
-}