Merge pull request #135 from UW-Macrostrat/map-panel

Enhanced details panel

Author: davidsklar99

packages/map-interface/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.1] - 2025-07-14
+
+Added map-panel component
+
+Need to
+
+- integrate fossils
+
 ## [1.4.0] - 2025-07-02
 
 - Allow `DevMapPage` to set more options for the map, inherited from Mapbox GL

packages/map-interface/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Map interface for Macrostrat",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/map-interface/src/map-panel/components/buttons.module.styl

@@ -0,0 +1,5 @@
+.list-button
+  display: flex
+  margin-bottom: 3px
+  padding: 0px 8px !important
+

packages/map-interface/src/map-panel/components/buttons.ts

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

packages/map-interface/src/map-panel/components/card.module.styl

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

packages/map-interface/src/map-panel/components/closeable-card.ts

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

packages/map-interface/src/map-panel/components/docs.module.styl

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

packages/map-interface/src/map-panel/components/docs.ts

@@ -0,0 +1,92 @@
+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"),
+  ]);
+}