Merge branch 'main' into lith-tag-update

Author: davenquinn

README.md

@@ -47,13 +47,25 @@ this by creating a `.env` file in the root of the repository.
 
 ### Developing components
 
-#### Using Storybook as a component workbench
+#### The Storybook component workbench
 
 We use [Storybook](https://storybook.js.org/) for developing components in an
 isolated environment. To start the storybook, run `yarn run dev` in the root
 directory. The storybook will start at port `6006`. You can then create new
-'stories' referencing components to create standalone views. This is the main
-approach for component development preferred by the Macrostrat team.
+'stories' referencing components to create standalone views.
+
+When you make a change to a component, it is crucial to make sure that the
+examples in the Storybook continue to work. If you have to update existing
+stories, it is likely you will need to update API documentation and Changelog to
+reflect the breaking change.
+
+#### Changelog
+
+If you make a change to a component, you should update the changelog for the
+containing package (the `CHANGELOG.md` file in the package directory).
+Unreleased changes can be described in an `Unreleased` section at the top of the
+changelog. Upon publishing the package, the full changelog will be compiled from
+the `Unreleased` section and any prerelease changes.
 
 #### Developing components in a consuming application
 

packages/column-components/src/context/layout.ts

@@ -178,12 +178,19 @@ function GrainsizeLayoutProvider({
   );
 }
 
-const useColumnLayout = () => useContext(ColumnLayoutContext);
+export function useColumnLayout() {
+  const ctx = useContext(ColumnLayoutContext);
+  if (ctx == null) {
+    throw new Error(
+      "useColumnLayout must be used within a ColumnLayoutProvider"
+    );
+  }
+  return ctx;
+}
 
 export {
   ColumnLayoutContext,
   ColumnLayoutProvider,
   CrossAxisLayoutProvider,
   GrainsizeLayoutProvider,
-  useColumnLayout,
 };

packages/column-components/src/main.module.scss

@@ -30,8 +30,8 @@
 .col-note-label {
   padding-left: 0.3em;
   border-left: 1px solid var(--note-color);
+  margin: 1px 0;
   font-style: italic;
-  margin: 0;
   z-index: 15;
 }
 g.height-range line {

packages/column-components/src/notes/connector.ts

@@ -8,13 +8,14 @@ interface NotePositionerProps {
   offsetY: number;
   noteHeight: number;
   children?: ReactNode;
+  onClick?: (event: React.MouseEvent) => void;
 }
 
 const NotePositioner = forwardRef(function (
   props: NotePositionerProps,
   ref: any
 ) {
-  let { offsetY, noteHeight, children } = props;
+  let { offsetY, noteHeight, onClick, children } = props;
   const { width, paddingLeft } = useContext(NoteLayoutContext);
   if (noteHeight == null) {
     noteHeight = 0;
@@ -23,12 +24,6 @@ const NotePositioner = forwardRef(function (
 
   let y = offsetY - noteHeight / 2 - outerPad;
 
-  // HACK: override y position for Safari
-  // (foreign objects don't work too well)
-  if (navigator.userAgent.includes("Safari")) {
-    y += 5;
-  }
-
   return h(
     ForeignObject,
     {
@@ -43,6 +38,7 @@ const NotePositioner = forwardRef(function (
         "div.note-inner",
         {
           ref,
+          onClick,
           style: { margin: outerPad },
         },
         children
@@ -56,8 +52,18 @@ const findIndex = function (note) {
   return notes.indexOf(note);
 };
 
-const NoteConnector = function (props) {
-  let { note, node, index } = props;
+export interface NodeConnectorOptions {
+  deltaConnectorAttachment?: number; // Delta for connector attachment
+}
+
+type NodeConnectorProps = NodeConnectorOptions & {
+  note: any; // Note data type
+  node?: any; // Node data type
+  index?: number; // Index of the note in the layout
+};
+
+const NoteConnector = function (props: NodeConnectorProps) {
+  let { note, node, deltaConnectorAttachment, index } = props;
   // Try to avoid scanning for index if we can
   if (index == null) {
     index = findIndex(note);
@@ -68,6 +74,11 @@ const NoteConnector = function (props) {
   if (node == null) {
     node = nodes[note.id];
   }
+
+  if (node != null && deltaConnectorAttachment != null) {
+    node.currentPos += deltaConnectorAttachment;
+  }
+
   const offsetX = (columnIndex[index] || 0) * 5;
 
   return h([

packages/column-components/src/notes/height-range.ts

@@ -17,7 +17,7 @@ function HeightRangeAnnotation(props: HeightRangeAnnotationProps) {
     top_height,
     offsetX = 0,
     color,
-    lineInset = 2.5,
+    lineInset = 1,
     ...rest
   } = props;
 

packages/column-components/src/notes/index.ts

@@ -12,7 +12,9 @@ import {
   NoteEditorProvider,
 } from "./editor";
 import { NewNotePositioner } from "./new";
+import { NodeConnectorOptions } from "./connector";
 export * from "./types";
+import type { ReactNode } from "react";
 
 interface NoteComponentProps {
   visibility: string;
@@ -73,6 +75,7 @@ function EditableNotesColumn(props: EditableNotesColumnProps) {
     noteEditor = NoteTextEditor,
     allowPositionEditing = false,
     forceOptions,
+    onClickNote,
   } = props;
 
   const innerWidth = width - paddingLeft;
@@ -103,6 +106,7 @@ function EditableNotesColumn(props: EditableNotesColumnProps) {
             h(NotesList, {
               editHandler: inEditMode ? onUpdateNote : null,
               inEditMode,
+              onClickNote,
             }),
             h(NewNotePositioner),
             h(NoteEditor, { allowPositionEditing }),
@@ -113,21 +117,27 @@ function EditableNotesColumn(props: EditableNotesColumnProps) {
   );
 }
 
-interface NotesColumnBaseProps {
+interface NotesColumnBaseProps extends NodeConnectorOptions {
   width?: number;
   paddingLeft?: number;
   transform?: string;
   notes?: NoteData[];
   noteComponent?: ComponentType<any>;
+  onClickNote?: (note: NoteData) => void;
+  children?: ReactNode;
 }
 
 function StaticNotesColumn(props: NotesColumnBaseProps) {
+  /** A non-editable notes column. */
   const {
     width,
     paddingLeft = 60,
     transform,
     notes,
     noteComponent = NoteComponent,
+    deltaConnectorAttachment,
+    onClickNote,
+    children,
   } = props;
 
   const innerWidth = width - paddingLeft;
@@ -143,7 +153,12 @@ function StaticNotesColumn(props: NotesColumnBaseProps) {
     [
       h("g.section-log", { transform }, [
         h(NoteDefs),
-        h(NotesList, { inEditMode: false }),
+        h(NotesList, {
+          inEditMode: false,
+          deltaConnectorAttachment,
+          onClickNote,
+        }),
+        children,
       ]),
     ]
   );

packages/column-components/src/notes/layout.ts

@@ -3,13 +3,17 @@ import { StatefulComponent } from "@macrostrat/ui-components";
 import h from "@macrostrat/hyper";
 
 import { hasSpan } from "./utils";
-import { FlexibleNode, Node, Renderer, Force } from "./label-primitives";
+import { FlexibleNode, Force, Node, Renderer } from "./label-primitives";
 import {
-  ColumnLayoutProvider,
   ColumnContext,
   ColumnCtx,
   ColumnDivision,
+  ColumnLayoutProvider,
 } from "../context";
+import {
+  AgeRangeRelationship,
+  compareAgeRanges,
+} from "@macrostrat/stratigraphy-utils";
 
 const NoteLayoutContext = createContext(null);
 
@@ -42,19 +46,16 @@ const buildColumnIndex = function () {
   };
 };
 
-const withinDomain = (scale) =>
-  function (d) {
-    const [start, end] = scale.domain();
-    // end height greater than beginning
-    const end_height = d.top_height || d.height;
-    if (start < end) {
-      // Normal scale (e.g. height)
-      return end_height >= start && d.height <= end;
-    } else {
-      // Inverted scale (e.g. time)
-      return end_height <= start && d.height >= end;
-    }
+function withinDomain(scale) {
+  const scaleDomain = scale.domain();
+  return (d) => {
+    const noteRange: [number, number] = [d.height, d.top_height ?? d.height];
+
+    const rel = compareAgeRanges(scaleDomain, noteRange);
+
+    return rel !== AgeRangeRelationship.Disjoint;
   };
+}
 
 interface NoteLayoutProviderProps {
   notes: any[];
@@ -70,6 +71,7 @@ interface NoteLayoutState {
   elementHeights?: object;
   columnIndex?: object;
   nodes?: object;
+  updateHeight?: Function;
   generatePath: Function;
   createNodeForNote?: Function;
   noteComponent?: any;
@@ -81,7 +83,7 @@ export interface NoteLayoutCtx {
   paddingLeft: number;
   scale: Function;
   width: number;
-  registerHeight: Function;
+  updateHeight: Function;
   generatePath: Function;
   columnIndex?: any;
   nodes?: any;
@@ -110,7 +112,7 @@ class NoteLayoutProvider extends StatefulComponent<
     this.generatePath = this.generatePath.bind(this);
     this.createNodeForNote = this.createNodeForNote.bind(this);
     this.computeForceLayout = this.computeForceLayout.bind(this);
-    this.registerHeight = this.registerHeight.bind(this);
+    this.updateHeight = this.updateHeight.bind(this);
     this.updateNotes = this.updateNotes.bind(this);
     this.componentDidMount = this.componentDidMount.bind(this);
     this.componentDidUpdate = this.componentDidUpdate.bind(this);
@@ -148,8 +150,6 @@ class NoteLayoutProvider extends StatefulComponent<
       paddingLeft,
       scale,
       width,
-      registerHeight: this.registerHeight,
-      generatePath: this.generatePath,
     };
 
     // Compute force layout
@@ -161,6 +161,8 @@ class NoteLayoutProvider extends StatefulComponent<
 
     return this.setState({
       renderer,
+      updateHeight: this.updateHeight,
+      generatePath: this.generatePath,
       ...forwardedValues,
     });
   }
@@ -195,18 +197,19 @@ class NoteLayoutProvider extends StatefulComponent<
     const { id: noteID } = note;
     const pixelHeight = elementHeights[noteID] || 10;
     const padding = 5;
-    const lowerHeight = scale(note.height);
+    let noteHeight = scale(note.height);
     if (hasSpan(note)) {
       const upperHeight = scale(note.top_height);
       const harr: [number, number] = [
-        lowerHeight - padding,
+        noteHeight - padding,
         upperHeight + padding,
       ];
       if (harr[0] - harr[1] > 0) {
         return new FlexibleNode(harr, pixelHeight);
       }
+      noteHeight = (harr[0] + harr[1]) / 2;
     }
-    return new Node(lowerHeight, pixelHeight);
+    return new Node(noteHeight, pixelHeight);
   }
 
   computeForceLayout(prevProps, prevState) {
@@ -250,7 +253,7 @@ class NoteLayoutProvider extends StatefulComponent<
     return this.updateState({ nodes: { $set: nodesObj } });
   }
 
-  registerHeight(id, height) {
+  updateHeight(id, height) {
     if (height == null) {
       return;
     }
@@ -332,4 +335,12 @@ const NoteUnderlay = function ({ fill, ...rest }) {
   });
 };
 
+export function useNoteLayout() {
+  const ctx = useContext(NoteLayoutContext);
+  if (ctx == null) {
+    throw new Error("useNoteLayout must be used within a NoteLayoutProvider");
+  }
+  return ctx;
+}
+
 export { NoteLayoutContext, NoteLayoutProvider, NoteRect, NoteUnderlay };

packages/column-components/src/notes/note.scss

@@ -31,7 +31,6 @@
   padding-left: 0.3em;
   border-left: 1px solid var(--note-color);
   font-style: italic;
-  margin: 0;
   z-index: 15;
 }
 g.height-range line {
@@ -65,3 +64,4 @@ g.note-editor .link {
 #new_arrow_end {
   fill: #1e90ff;
 }
+