@macrostrat/map-interface 1.5.1 → 1.5.3

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

@@ -1,56 +0,0 @@
-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

@@ -1,43 +0,0 @@
-.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

@@ -1,64 +0,0 @@
-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

@@ -1,93 +0,0 @@
-.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

@@ -1,92 +0,0 @@
-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-drawer/index.ts

@@ -1,115 +0,0 @@
-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);
-
-export 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 }),
-  ]);
-}
-
-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/transitions/index.ts

@@ -1,24 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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/index.ts

@@ -1 +0,0 @@
-export * from "./components/info-drawer";