@figtreejs/core 0.0.1-alpha.0

package/src/components/baubles/clades/highlight.tsx

@@ -0,0 +1,96 @@
+import { layoutClass } from "../../../layouts";
+import { arc as arcgen } from "d3-shape";
+import type { Clade } from "../../hoc/with-clades";
+import { withClades } from "../../hoc/with-clades";
+
+import { BasePath, BaseRectangle } from "../shapes";
+import type { PolarVertex, simplePolarVertex } from "../../../layouts/types";
+import { notNull } from "../../../utils";
+import { ScaleContext } from "../../../context/scale-context";
+import { layoutContext } from "../../../context/layout-context";
+import { animatedContext } from "../../../context/aminated-context";
+import { useContext } from "react";
+
+const arc = arcgen();
+//TODO add padding
+// const padding = 10;
+/**
+ * A highlight around a clade of interest.
+ * For Polar layouts this will be a shaded arc.
+ * In a rectangular figure this will be a rectangle around the clade
+ */
+
+type BaseHighlightAttrs = {
+  d?: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  transform?: string;
+  stroke?: string;
+  stokeWidth?: number;
+  fill?: string;
+  animated: boolean;
+};
+
+type Injected = {
+  d?: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  transform?: string;
+  animated: boolean;
+};
+type HighlightAttrs = Omit<BaseHighlightAttrs, keyof Injected>;
+
+function Highlight(props: HighlightAttrs & { clade: Clade }) {
+  const { clade, ...rest } = props;
+  const scale = useContext(ScaleContext);
+  const layout = useContext(layoutContext);
+  const animated = useContext(animatedContext);
+
+  const { root, leftMost, rightMost, mostDiverged } = clade;
+  const v = scale(layout(root));
+  const lmv = scale(layout(leftMost)); // left most child v (top of highlight)
+  const rmv = scale(layout(rightMost)); // right most child v (top of highlight)
+  const mdv = scale(layout(mostDiverged)); // right most child v (top of highlight)
+  const { layoutClass: layoutType } = layout(root);
+  if (layoutType === layoutClass.Rectangular) {
+    const width = mdv.x - v.x;
+    const height = Math.abs(lmv.y - rmv.y);
+    return (
+      <BaseRectangle
+        width={width}
+        height={height}
+        x={v.x}
+        y={Math.min(lmv.y, rmv.y)}
+        {...rest}
+        animated={animated}
+      />
+    );
+  } else if (layoutType === layoutClass.Polar) {
+    // if we are here then scale returned a polar vertex
+    const origin = scale({ x: 0, y: 0 }) as simplePolarVertex;
+    const transform = `translate(${origin.x},${origin.y})`;
+    const minR = (v as PolarVertex).r; //padding?
+    const maxR = (mdv as PolarVertex).r;
+    const maxTheta = (lmv as PolarVertex).theta;
+    const minTheta = (rmv as PolarVertex).theta;
+    const shape = arc({
+      innerRadius: minR,
+      outerRadius: maxR + 5,
+      startAngle: minTheta + Math.PI / 2,
+      endAngle: maxTheta + Math.PI / 2,
+    });
+    notNull(shape, `Error making arc shape for Clade Highlight`);
+
+    return (
+      <BasePath d={shape} transform={transform} {...rest} animated={animated} />
+    ); //transform={transform}
+  } else {
+    return null;
+  }
+}
+
+export const Highlights = withClades(Highlight);

package/src/components/baubles/clades/index.ts

@@ -0,0 +1 @@
+// exporting for public use

package/src/components/baubles/clades.tsx

@@ -0,0 +1,45 @@
+import type { BaubleTarget } from "./bauble";
+import { CladeShapes } from "./bauble";
+
+import type { InternalInteractionType } from "./types";
+import type { NodeRef } from "../../evo";
+import { Cartoons } from "./clades/cartoon";
+import { Highlights } from "./clades/highlight";
+import type { Clade } from "../hoc/with-clades";
+import type { PathAttrs, RectAttrs } from "./shapes";
+
+// Accessor for Node Shapes
+
+export function Clades(props: CladeProps) {
+  switch (props.shape) {
+    case CladeShapes.Cartoon:
+      return <Cartoons {...props} />;
+    case CladeShapes.Highlight:
+      return <Highlights {...props} />;
+  }
+}
+
+type CartoonCladeProps = {
+  shape: CladeShapes.Cartoon;
+  clades: Clade[];
+  attrs: { [key: string]: PathAttrs };
+  interactions?: { [key: string]: InternalInteractionType }; // keyed by node id // check type
+  // shape:NodeShapes,
+  keyBy?: (n: NodeRef) => string;
+};
+type HighlighCladeProps = {
+  shape: CladeShapes.Highlight;
+  clades: Clade[];
+  attrs: { [key: string]: Omit<RectAttrs, "width" | "height"> };
+  interactions?: { [key: string]: InternalInteractionType }; // keyed by node id // check type
+  // shape:NodeShapes,
+  keyBy?: (n: NodeRef) => string;
+};
+
+export type HighlightRectAttrs = Omit<RectAttrs, "width" | "height">; //width and height provided by figtree
+export type CladeProps = CartoonCladeProps | HighlighCladeProps;
+
+export type CladeSpec = CladeProps & {
+  target: BaubleTarget.Clade;
+  id?: string;
+};

package/src/components/baubles/helpers.tsx

@@ -0,0 +1,62 @@
+import type { NodeRef } from "../../evo";
+import type { AttrAndInteractionApplier, Attrs, Fn, LiftToUser } from "./types";
+
+export function isFn(x: unknown): x is Fn {
+  return typeof x === "function";
+}
+
+function mapAttrsToProps<A extends Attrs>(
+  attrs: LiftToUser<A>,
+): (n: NodeRef) => A {
+  return function (node: NodeRef) {
+    const props = {} as Record<keyof A, number | string>;
+    for (const key in attrs) {
+      const k = key as keyof A;
+      const v = attrs[k];
+      props[k] = isFn(v) ? (v as Fn)(node) : (v as number | string); // eslint-disable-line @typescript-eslint/no-unnecessary-type-assertion
+    }
+    return props as A;
+  };
+}
+
+function applyInteractions(
+  interactions: Record<string, (n: NodeRef) => void>,
+): (n: NodeRef) => Record<string, () => void> {
+  return function (node: NodeRef) {
+    const props: Record<string, () => void> = {};
+    for (const [key, value] of Object.entries(interactions)) {
+      props[key] = () => {
+        value(node);
+      }; // wraps base interaction
+    }
+    return props;
+  };
+}
+
+/** A function that takes user provided attrs and interactions and returns a function
+ * that takes a node and returns the interaction and Attrs in the form expected by baubles
+ */
+export function useAttributeMappers<A extends Attrs>(
+  attrs: LiftToUser<A>,
+  interactions?: Record<string, (n: NodeRef) => void>,
+): AttrAndInteractionApplier<A> {
+  // const { attrs, interactions} = props;
+
+  //This memorizes the functions so they are not made each time - maybe overkill.
+  // const baseAttrMapper = useCallback(mapAttrsToProps((attrs?attrs:{})), [attrs]);
+  // const baseInteractionMapper = useCallback(applyInteractions((interactions?interactions:{})), [interactions]);
+  // const tooltipMapper = useCallback(mapAttrsToProps((tooltip?tooltip:{})),[tooltip]);
+
+  const baseAttrMapper = mapAttrsToProps(attrs);
+
+  const baseInteractionMapper = interactions
+    ? applyInteractions(interactions)
+    : () => undefined;
+
+  return function shapeProps(node: NodeRef) {
+    return {
+      attrs: baseAttrMapper(node),
+      interactions: baseInteractionMapper(node),
+    };
+  };
+}

package/src/components/baubles/index.ts

@@ -0,0 +1,16 @@
+// public exports
+//TODO only expose <baubles />
+
+// pass on lower imports
+export * from "./clades";
+export * from "./shapes";
+
+// exports from this directory
+export { Branches } from "./branches";
+export type { BranchSpec } from "./branches";
+
+export { Nodes } from "./nodes";
+export type { NodeSpec } from "./nodes";
+
+export { NodeLabels, BranchLabels } from "./labels"; // Todo unify to Label
+export type { LabelSpec } from "./labels";

package/src/components/baubles/labels.tsx

@@ -0,0 +1,38 @@
+import type { NodeRef } from "../../evo";
+import { withBranches } from "../hoc/with-branches";
+import { withNodeLabel } from "../hoc/with-node";
+import { withNodes } from "../hoc/with-nodes";
+import type { BaubleTarget } from "./bauble";
+import { BaseLabel } from "./shapes";
+import type { TextAttrs } from "./shapes/label";
+import type { AttrsRecord } from "./types";
+
+export const BranchLabels = withBranches<TextAttrs>(
+  withNodeLabel<TextAttrs>(BaseLabel),
+);
+export const NodeLabels = withNodes<TextAttrs>(
+  withNodeLabel<TextAttrs>(BaseLabel),
+);
+
+export type NodeLabelProps = {
+  id?: string;
+  nodes: NodeRef[];
+  attrs: AttrsRecord<TextAttrs>;
+  aligned: boolean;
+};
+export type NodeLabelSpec = NodeLabelProps & {
+  target: BaubleTarget.NodeLabel;
+  id?: string;
+};
+
+export type BranchLabelProps = {
+  id?: string;
+  branches: { node: NodeRef; parent: NodeRef }[];
+  attrs: AttrsRecord<TextAttrs>;
+};
+export type BranchLabelSpec = BranchLabelProps & {
+  target: BaubleTarget.BranchLabel;
+  id?: string;
+};
+
+export type LabelSpec = BranchLabelSpec | NodeLabelSpec;

package/src/components/baubles/nodes.tsx

@@ -0,0 +1,51 @@
+import type { CircleAttrs, RectAttrs } from "./shapes";
+import { BaseCircle, CenteredRectangle } from "./shapes";
+
+import { withNode } from "../hoc";
+import type { BaubleTarget } from "./bauble";
+import { NodeShapes } from "./bauble";
+import { withNodes } from "../hoc/with-nodes";
+import type { InternalInteractionType } from "./types";
+import type { NodeRef } from "../../evo";
+
+/**
+ * Add a Circle node Bauble to the figure.
+ */
+const CircleNodes = withNodes(withNode(BaseCircle));
+/**
+ *
+ * Add a Rectangular node Bauble to the figure.
+ */
+const RectangleNodes = withNodes(withNode(CenteredRectangle));
+
+// Accessor for Node Shapes
+
+export function Nodes(props: NodeProps) {
+  switch (props.shape) {
+    case NodeShapes.Circle:
+      return <CircleNodes {...props} />;
+    case NodeShapes.Rectangle:
+      return <RectangleNodes {...props} />;
+  }
+}
+
+type CircleNodeProps = {
+  shape: NodeShapes.Circle;
+  nodes: NodeRef[];
+  attrs: { [key: string]: CircleAttrs };
+  interactions?: { [key: string]: InternalInteractionType }; // keyed by node id // check type
+  // shape:NodeShapes,
+  keyBy?: (n: NodeRef) => string;
+};
+type RectangleNodeProps = {
+  shape: NodeShapes.Rectangle;
+  nodes: NodeRef[];
+  attrs: { [key: string]: RectAttrs };
+  interactions?: { [key: string]: InternalInteractionType }; // keyed by node id // check type
+  // shape:NodeShapes,
+  keyBy?: (n: NodeRef) => string;
+};
+
+type NodeProps = CircleNodeProps | RectangleNodeProps;
+
+export type NodeSpec = NodeProps & { target: BaubleTarget.Node; id?: string };

package/src/components/baubles/shapes/branch.tsx

@@ -0,0 +1,53 @@
+import type { AnimatedProps } from "@react-spring/web";
+import { animated, useSpring } from "@react-spring/web";
+
+// update ref to work with animated expectations no old refs
+export type BasePathDOMProps = Omit<React.ComponentProps<"path">, "ref"> & {
+  ref?: React.Ref<SVGPathElement>;
+};
+export type PathAttrs = Omit<BasePathDOMProps, "d">; // d will be calculated
+
+export type PathProps = PathAttrs & { d: string; animated: boolean };
+
+/** React component that renders a path.
+ * The fill is defaulted to 'none' but is overwritten by anything in attrs
+ */
+
+export const animatableBranchKeys = ["d", "stroke", "strokeWidth"] as const;
+
+type AnimKey = (typeof animatableBranchKeys)[number];
+
+// attribute get spread here interactions come in
+function pickAnimatable(
+  props: Record<string, unknown>,
+): Partial<Record<AnimKey, number | string>> {
+  const out: Partial<Record<AnimKey, number | string>> = {};
+  for (const k of animatableBranchKeys) {
+    const v = props[k];
+    // Keep 0; only exclude null/undefined
+    if (v != null && (typeof v === "number" || typeof v === "string")) {
+      out[k] = v;
+    }
+  }
+  return out;
+}
+
+export function BasePath(props: PathProps) {
+  const { animated: a, ...rest } = props;
+  const aAttrs = pickAnimatable(rest);
+  // Keep hooks count constant
+  const animatedValues = useSpring({
+    ...aAttrs,
+    config: { duration: 500 },
+  });
+  if (!a) {
+    return <animated.path {...rest} />;
+  } else {
+    return (
+      <animated.path
+        {...rest}
+        {...(animatedValues as AnimatedProps<BasePathDOMProps>)}
+      />
+    );
+  }
+}

package/src/components/baubles/shapes/circle.tsx

@@ -0,0 +1,64 @@
+import type { AnimatedProps } from "@react-spring/web";
+import { animated, useSpring } from "@react-spring/web";
+
+// update ref to work with animated expectations no old refs
+type BaseCircleDOMProps = Omit<React.ComponentProps<"circle">, "ref"> & {
+  ref?: React.Ref<SVGCircleElement>;
+};
+export type CircleAttrs = Omit<BaseCircleDOMProps, "cx" | "cy"> & { r: number };
+export type CircleProps = CircleAttrs & {
+  x: number;
+  y: number;
+  animated: boolean;
+};
+export const animatableCircleKeys = [
+  "cx",
+  "cy",
+  "r",
+  "stroke",
+  "strokeWidth",
+  "fill",
+] as const;
+
+type AnimKey = (typeof animatableCircleKeys)[number];
+
+// attribute get spread here interactions come in
+function pickAnimatable(
+  props: Record<string, unknown>,
+): Partial<Record<AnimKey, number | string>> {
+  const out: Partial<Record<AnimKey, number | string>> = {};
+  for (const k of animatableCircleKeys) {
+    const v = props[k];
+    // Keep 0; only exclude null/undefined
+    if (v != null && (typeof v === "number" || typeof v === "string")) {
+      out[k] = v;
+    }
+  }
+  return out;
+}
+
+/** React component that renders a circle */
+export const BaseCircle = function (props: CircleProps) {
+  const { animated: a, x, y, ...attrs } = props;
+  // maybe could put animation logic in an HOC but that's causing type issues
+  const mappedProps = { ...attrs, cx: x, cy: y };
+  const aAttrs = pickAnimatable(mappedProps);
+  // Keep hooks count constant
+  const animatedValues = useSpring({
+    ...aAttrs,
+    config: { duration: 500 },
+  });
+  if (!a) {
+    return <animated.circle className={"node-shape"} {...mappedProps} />;
+  } else {
+    return (
+      <animated.circle
+        className={"node-shape"}
+        {...mappedProps}
+        {...(animatedValues as AnimatedProps<BaseCircleDOMProps>)}
+      />
+    );
+  }
+};
+
+// export const AnimatedCircle = withAnimation(BaseCircle)

package/src/components/baubles/shapes/index.ts

@@ -0,0 +1,9 @@
+// Package exports
+export type { CircleAttrs } from "./circle";
+export { BaseCircle } from "./circle";
+export type { PathAttrs } from "./branch";
+export { BasePath } from "./branch";
+export type { RectAttrs } from "./rectangle";
+export { BaseRectangle, CenteredRectangle } from "./rectangle";
+export type { TextAttrs } from "./label";
+export { BaseLabel } from "./label";

package/src/components/baubles/shapes/label.tsx

@@ -0,0 +1,104 @@
+import type { SpringValue, Interpolation } from "@react-spring/web";
+import { to, animated, useSpring } from "@react-spring/web";
+import type { numerical } from "../types";
+import { isSpringNumber } from "../types";
+import type { LabelInjection } from "../../hoc/with-node";
+
+/**
+ * Label attributes for styling and rendering labels.
+ * These will be stripped and trickle up to the user
+ */
+
+type BaseTextDOMProps = Omit<React.ComponentProps<"text">, "ref"> & {
+  ref?: React.Ref<SVGTextElement>;
+};
+export type TextAttrs = BaseTextDOMProps & { text: string };
+type LabelProps = TextAttrs & LabelInjection; // need these to match injected exactly for type inference
+
+/** The props needed for rendering a label in the svg*/
+
+// transform={to([animatedProperties.x, animatedProperties.y, animatedProperties.rotation], (x, y, rotation) => `translate(${x},${y}) rotate(${rotation})`)}
+function getTransform(
+  x: numerical,
+  y: numerical,
+  rotation: numerical,
+): string | SpringValue<string> | Interpolation<string> {
+  if (isSpringNumber(x) || isSpringNumber(y) || isSpringNumber(rotation)) {
+    return to(
+      [x, y, rotation],
+      (x, y, rotation) => `translate(${x},${y}) rotate(${rotation})`,
+    );
+  }
+  return `translate(${x},${y}) rotate(${rotation})`;
+}
+
+export function BaseLabel(props: LabelProps) {
+  const {
+    alignmentBaseline,
+    textAnchor,
+    rotation,
+    x,
+    y,
+    text,
+    d,
+    animated: a,
+    ...other
+  } = props;
+
+  const animatedValues = useSpring({
+    x,
+    y,
+    rotation,
+    config: { duration: 500 },
+  });
+
+  if (!a) {
+    const transform = getTransform(x, y, rotation);
+    return (
+      <g>
+        <animated.text
+          alignmentBaseline={alignmentBaseline}
+          textAnchor={textAnchor}
+          transform={transform}
+          {...other}
+        >
+          {text}
+        </animated.text>
+        {d ? (
+          <animated.path
+            strokeWidth={1}
+            stroke="grey"
+            strokeDasharray="2"
+            d={d}
+          />
+        ) : null}
+      </g>
+    );
+  } else {
+    const animatedTransform = getTransform(
+      animatedValues.x,
+      animatedValues.y,
+      animatedValues.rotation,
+    );
+    return (
+      <g>
+        <animated.text
+          alignmentBaseline={alignmentBaseline}
+          textAnchor={textAnchor}
+          transform={animatedTransform}
+          {...other}
+        >
+          {text}
+        </animated.text>
+        {d ? (
+          <animated.path
+            strokeWidth={1}
+            stroke="grey"
+            strokeDasharray="2"
+            d={d}
+          />
+        ) : null}
+      </g>
+    );
+  }
+}

package/src/components/baubles/shapes/rectangle.tsx

@@ -0,0 +1,83 @@
+import type { AnimatedProps } from "@react-spring/web";
+import { animated, useSpring } from "@react-spring/web";
+
+/** Find where to put a position so the center is the provided location
+ * used below for centered rectangles. Nodes provide the x,y of the center.
+ */
+function centerNumber(pos: number, size: number): number {
+  // plain numbers
+  return pos - size / 2;
+}
+
+/**
+ * Rectangle attributes for styling and rendering a rectangle.
+ * These will be stripped and trickle up to the user
+ */
+// update ref to work with animated expectations no old refs
+type BaseRectangleDOMProps = Omit<React.ComponentProps<"rect">, "ref"> & {
+  ref?: React.Ref<SVGRectElement>;
+};
+export type RectAttrs = BaseRectangleDOMProps & {
+  width: number;
+  height: number;
+};
+export type RectProps = RectAttrs & { animated: boolean; x: number; y: number }; // need these to match injected exactly for type inference
+export const animatableRectKeys = [
+  "rx",
+  "ry",
+  "x",
+  "y",
+  "width",
+  "height",
+  "stroke",
+  "strokeWidth",
+] as const;
+
+type AnimKey = (typeof animatableRectKeys)[number];
+
+// attribute get spread here interactions come in
+//TODO make this a generalized function
+function pickAnimatable(
+  props: Record<string, unknown>,
+): Partial<Record<AnimKey, number | string>> {
+  const out: Partial<Record<AnimKey, number | string>> = {};
+  for (const k of animatableRectKeys) {
+    const v = props[k];
+    // Keep 0; only exclude null/undefined
+    if (v != null && (typeof v === "number" || typeof v === "string")) {
+      out[k] = v;
+    }
+  }
+  return out;
+}
+
+/** A Rectangle centered on the provided x,y */
+export const CenteredRectangle = function (props: RectProps) {
+  const { x, y, width, height, ...rest } = props;
+  const xCentered = centerNumber(x, width);
+  const yCentered = centerNumber(y, height);
+  const newAttrs = { ...rest, x: xCentered, y: yCentered, width, height };
+  return <BaseRectangle {...newAttrs} />;
+};
+/**
+ * A rectangle rendered as expected in an svg
+ */
+export const BaseRectangle = function (props: RectProps) {
+  const { animated: a, ...attrs } = props;
+  const aAttrs = pickAnimatable(attrs);
+  // Keep hooks count constant
+  const animatedValues = useSpring({
+    ...aAttrs,
+    config: { duration: 500 },
+  });
+  if (!a) {
+    return <animated.rect className={"node-shape"} {...attrs} />;
+  }
+  return (
+    <animated.rect
+      className={"node-shape"}
+      {...attrs}
+      {...(animatedValues as AnimatedProps<BaseRectangleDOMProps>)}
+    />
+  );
+};