@figtreejs/core 0.0.1-alpha.0

package/src/components/decorations/axis/rectangular-axis.tsx

@@ -0,0 +1,151 @@
+import { useContext } from "react";
+import { line } from "d3-shape";
+import { mean } from "d3-array";
+import type { ScaleContinuousNumeric } from "d3-scale";
+import type {
+  AxisOrientation,
+  AxisProps,
+  WorkingTipOptions,
+} from "./axis-types";
+import { defaultAxisProps } from "./axis-types";
+import { makeAxisScale } from "./polar-axis";
+import { unNullify } from "../../../utils";
+import { DimensionContext } from "../../../context/dimension-context";
+import { ScaleContext } from "../../../context/scale-context";
+import RectangleAxisBars from "./rectangular-axis-bars";
+
+export default function Axis(props: AxisProps) {
+  // add bar options to props
+  const dimensions = useContext(DimensionContext);
+  // const  {layoutClass} = dimensions
+
+  const figureScale = useContext(ScaleContext);
+
+  const {
+    // direction = defaultAxisProps.direction,
+    gap = defaultAxisProps.gap,
+    bars,
+  } = props;
+
+  const attrs = { ...defaultAxisProps.attrs, ...props.attrs };
+  const ticks: WorkingTipOptions = props.ticks
+    ? { ...defaultAxisProps.ticks, ...props.ticks }
+    : defaultAxisProps.ticks;
+  const title = props.title
+    ? { ...defaultAxisProps.title, ...props.title }
+    : defaultAxisProps.title;
+
+  // todo options to provide tick values so can specify breaks
+
+  const scale = makeAxisScale(props, dimensions);
+
+  // scaleSequentialQuantile doesn’t implement tickValues or tickFormat.
+  let tickValues: number[];
+  if (ticks.values !== undefined) {
+    tickValues = ticks.values;
+  } else {
+    // if (!scale.ticks) {
+    //   const tickNum = unNullify(ticks.number,`No values provided for ticks, and scale does not provide ticks function. Please specify the target number of ticks`)
+    //   tickValues = range(tickNum).map((i) =>
+    //     quantile(scale.domain(), i / (tickNum - 1)),
+    //   ) as number[]
+    // } else {
+    tickValues = scale.ticks(ticks.number);
+    // }
+  }
+
+  const axisY = dimensions.domainY[1] + dimensions.domainY[1] * 0.01;
+  const start = figureScale({ x: dimensions.domainX[0], y: axisY });
+  const end = figureScale({ x: dimensions.domainX[1], y: axisY });
+  const axisPath = `M${start.x},${start.y + gap} L${end.x},${end.y + gap}`;
+
+  //TODO break this into parts HOC with logic horizontal/ vertical axis ect.
+  const xPos = unNullify(
+    mean(scale.range()),
+    `Error calculating x position for title`,
+  );
+  const titlePos = figureScale({ x: xPos, y: axisY });
+  return (
+    <g className={"axis"}>
+      {/*This is for Bars*/}
+
+      {bars ? (
+        <RectangleAxisBars
+          {...bars}
+          tickValues={tickValues}
+          scale={scale}
+          axisY={axisY}
+        />
+      ) : null}
+
+      <path d={axisPath} stroke={"black"} {...attrs} />
+      <g>
+        {tickValues.map((t, i) => {
+          const point = figureScale({ x: scale(t), y: axisY });
+          return (
+            <g
+              key={`tick-${i}`}
+              transform={`translate(${point.x},${point.y + gap})`}
+            >
+              <line
+                x1={0}
+                y1={0}
+                x2={0}
+                y2={ticks.length}
+                stroke={"black"}
+                {...attrs}
+              />
+              <text
+                transform={`translate(0,${ticks.padding})`}
+                textAnchor={"middle"}
+                dominantBaseline={"central"}
+                {...ticks.style}
+              >
+                {ticks.format(t)}
+              </text>
+            </g>
+          );
+        })}
+        {/*TODO sometimes scale doesn't have a range*/}
+        <g transform={`translate(${titlePos.x},${titlePos.y + gap}) `}>
+          <text
+            textAnchor={"middle"}
+            transform={`translate(0,${title.padding})`}
+            {...title.style}
+          >
+            {title.text}
+          </text>
+        </g>
+      </g>
+    </g>
+  );
+}
+//TODO merge these in instead of overwriting;
+
+export function getPath(
+  scale: ScaleContinuousNumeric<number, number>,
+  direction: AxisOrientation,
+): string {
+  const f = line()
+    .x((d) => d[0])
+    .y((d) => d[1]);
+
+  let range;
+  switch (direction) {
+    case "vertical":
+      range = scale.range().map<[number, number]>((d) => [0, d]);
+      break;
+    default:
+      range = scale.range().map<[number, number]>((d) => [d, 0]);
+  }
+  const rangeLine = unNullify(f(range), `Error in makeing axis line`);
+
+  return rangeLine;
+}
+
+export function getTickLine(length: number, direction: AxisOrientation) {
+  if (direction === "horizontal" || direction === "polar") {
+    return { x1: 0, y1: 0, y2: length, x2: 0 };
+  }
+  return { x1: 0, y1: 0, y2: 0, x2: -1 * length };
+}

package/src/components/decorations/index.ts

@@ -0,0 +1,2 @@
+export * from "./axis";
+export * from "./legend";

package/src/components/decorations/legend/discrete-legend.tsx

@@ -0,0 +1,93 @@
+import type { ScaleOrdinal } from "d3-scale";
+
+/**
+ * ContinuousLegend
+ *
+ * A color legend that accept continuous and sequential color scales. It is modeled after the color legends
+ * at https://observablehq.com/@d3/color-legend
+ *
+ * @param props
+ * @param scale
+ * @param pos
+ * @param width
+ * @param height
+ * @param title
+ * @return {(number|*)[]|*}
+ * @constructor
+ */
+
+interface DiscreteLegendProps {
+  scale: ScaleOrdinal<string, string>;
+  pos: { x: number; y: number };
+  width: number;
+  height: number;
+  swatchSize: number;
+  format: (s: string) => string;
+  fontSize: number;
+  columns: number;
+  title: string;
+}
+
+export function DiscreteLegend(props: DiscreteLegendProps) {
+  // const dispatch = useInteractionsDispatch();
+  // const onHover=useCallback((value)=>()=>dispatch({type:"hover",payload:{dataType:DataType.DISCRETE,key:annotation,value:value}}))
+  // const onUnHover = useCallback(()=>dispatch({type:"unhover",payload:{}}));
+  // TODO safari doesn't like the legend with two columns maybe move out of svg but need to scale and position so behaves the same
+  const { scale, pos, width, height, swatchSize, format, columns, fontSize } =
+    props;
+
+  const numEntries = scale.domain().length;
+  const maxEntriesPerColumn = Math.ceil(numEntries / columns);
+  const columnStarts = [];
+  const xGap = width / columns;
+  const yGap = height / maxEntriesPerColumn;
+  for (let i = 0; i < columns; i++) {
+    columnStarts.push(i * xGap);
+  }
+  const rowStarts = [];
+  for (let i = 0; i < maxEntriesPerColumn; i++) {
+    rowStarts.push(i * yGap);
+  }
+  const swatchPositions = [];
+  for (let i = 0; i < numEntries; i++) {
+    swatchPositions.push({
+      x: columnStarts[i % columns],
+      y: rowStarts[i % maxEntriesPerColumn],
+      text: scale.domain()[i],
+      color: scale(scale.domain()[i]),
+    });
+  }
+
+  // add a font size option with title being bigger than swatch text
+  // add swatch size option too.
+
+  return (
+    <g transform={`translate(${pos.x},${pos.y})`}>
+      <text
+        textAnchor="start"
+        x={0}
+        y={0}
+        className="legend-title"
+        fontSize={`${fontSize + 4}px`}
+      >
+        {props.title}
+      </text>
+      <g transform={`translate(0,20)`}>
+        {swatchPositions.map((d, i) => (
+          <g key={i} transform={`translate(${d.x},${d.y})`}>
+            <rect width={swatchSize} height={swatchSize} fill={d.color} />
+            <text
+              textAnchor="start"
+              dominantBaseline={"middle"}
+              x={swatchSize + 5}
+              dy={swatchSize / 2}
+              fontSize={`${fontSize}px`}
+            >
+              {format(d.text)}
+            </text>
+          </g>
+        ))}
+      </g>
+    </g>
+  );
+}

package/src/components/decorations/legend/index.ts

@@ -0,0 +1 @@
+export { DiscreteLegend } from "./discrete-legend";

package/src/components/decorations/legend/legend.tsx

@@ -0,0 +1 @@
+//This will decide what kind of legend to render based on the provided color scale.

package/src/components/figtree/figtree-types.ts

@@ -0,0 +1,69 @@
+import type { InternalBaubleOptions } from "../../bauble-makers/set-up-baubles";
+import type { ImmutableTree, NodeRef, Tree } from "../../evo/tree";
+import type { FunctionalVertex, layoutClass } from "../../layouts/types";
+import type { layoutType, scaleType } from "../../store/store";
+import type { AxisProps } from "../decorations";
+
+export interface Margins {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+export type fishEyeOptions = { x: number; y: number; scale: number };
+
+export interface dimensionType extends layoutOptions {
+  canvasWidth: number;
+  canvasHeight: number;
+  domainX: [number, number];
+  domainY: [number, number];
+  layoutClass: layoutClass;
+  invert: boolean;
+  pollard: number;
+  minRadius: number;
+  fishEye: fishEyeOptions;
+  rootAngle: number;
+  angleRange: number;
+}
+
+export interface layoutOptions {
+  rootLength?: number;
+  rootAngle?: number;
+  angleRange?: number;
+  showRoot?: boolean;
+  spread?: number;
+  fishEye?: fishEyeOptions;
+  pollard: number;
+  invert?: boolean;
+  minRadius?: number;
+  padding?: number;
+}
+
+type layoutFunction = (
+  tree: ImmutableTree,
+  options?: layoutOptions,
+) => (node: NodeRef) => FunctionalVertex;
+
+//TODO sort this out with dimensions
+export type BaubleTypes = {
+  tree: Tree;
+  scale: scaleType;
+  layout: layoutType;
+  dimensions: dimensionType;
+  animated?: boolean;
+};
+// type Bauble= React.FC<BaubleTypes>
+
+export interface FigtreeProps {
+  width: number;
+  height: number;
+  layout: layoutFunction;
+  tree: ImmutableTree;
+  margins?: Margins;
+  baubles?: InternalBaubleOptions[];
+  opts?: layoutOptions;
+  animated?: boolean;
+  x?: number;
+  y?: number;
+  axis?: AxisProps;
+}

package/src/components/figtree/figtree.tsx

@@ -0,0 +1,136 @@
+import type { FigtreeProps } from "./figtree-types";
+import { defaultInternalLayoutOptions, rectangularLayout } from "../../layouts";
+
+import { ImmutableTree } from "../../evo/tree";
+import { getScale } from "../../store/store";
+import { extent } from "d3-array";
+import { unNullify } from "../../utils";
+import { Bauble } from "../baubles/bauble";
+
+import { ScaleContext } from "../../context/scale-context";
+import { layoutContext } from "../../context/layout-context";
+import { animatedContext } from "../../context/aminated-context";
+import { setupBaubles } from "../../bauble-makers/set-up-baubles";
+import { Branches } from "../../bauble-makers/makers";
+import { DimensionContext } from "../../context/dimension-context";
+import { Axis } from "../decorations";
+/**
+ * The FigTree component
+ * This takes a tree and layout options. It calls the layout and handles state for this figure.
+ * It also passes it's scales to it's children props as well as the edges to the branches and the nodes to the nodes.
+ */
+//TODO extract these from state to props?
+//TODO this is different than defualt
+const defaultTree = ImmutableTree.fromNewick("((A:1,B:1):1,C:2);"); //TODO don't expose the need to pass a tree in here.
+
+export const defaultOpts = {
+  opts: defaultInternalLayoutOptions,
+  width: 100,
+  height: 100,
+  layout: rectangularLayout,
+  margins: { top: 10, right: 10, bottom: 10, left: 10 },
+  tree: defaultTree,
+  baubles: [
+    Branches({
+      filter: () => true,
+      attrs: { stroke: "black", strokeWidth: 1 },
+    }),
+  ],
+  animated: false,
+};
+
+//TODO animated not provided to user for each bauble
+
+function FigTree(props: FigtreeProps) {
+  const {
+    width = defaultOpts.width,
+    height = defaultOpts.width,
+    margins = defaultOpts.margins,
+    tree = defaultOpts.tree,
+    layout = defaultOpts.layout,
+    animated = defaultOpts.animated,
+    baubles = defaultOpts.baubles,
+    // margins = defaultOpts.margins
+    axis,
+  } = props;
+
+  const opts = props.opts ? props.opts : defaultOpts.opts;
+
+  const {
+    rootAngle = defaultOpts.opts.rootAngle,
+    angleRange = defaultOpts.opts.angleRange,
+    fishEye = defaultOpts.opts.fishEye,
+    pollard = defaultOpts.opts.pollard,
+    minRadius = defaultOpts.opts.minRadius,
+    invert = defaultOpts.opts.invert,
+  } = opts;
+  //todo this requires opts to not be undefined even though all the values are optional.
+  let canvasWidth;
+  let canvasHeight;
+  let { x, y } = props;
+
+  if (x !== undefined && y !== undefined) {
+    // if x and y are provide then these give the top left corner and width and height represent the whole area.
+    canvasWidth = width;
+    canvasHeight = height;
+  } else {
+    canvasWidth = width - margins.left - margins.right;
+    canvasHeight = height - margins.top - margins.bottom;
+    x = margins.left;
+    y = margins.top;
+  }
+
+  const layoutMap = layout(tree, opts);
+  const { layoutClass } = layoutMap(tree.getRoot());
+  const domainX = extent(tree.getNodes().map((n) => layoutMap(n).x)).map((d) =>
+    unNullify(d, `Error finding x extent from layout`),
+  ) as [number, number];
+  const domainY = extent(tree.getNodes().map((n) => layoutMap(n).y)).map((d) =>
+    unNullify(d, `Error finding y extent from layout`),
+  ) as [number, number];
+
+  const dimensions = {
+    canvasWidth,
+    canvasHeight,
+    domainX,
+    domainY,
+    layoutClass,
+    invert,
+    pollard,
+    minRadius,
+    fishEye,
+    rootAngle,
+    angleRange,
+  };
+  const scale = getScale(dimensions);
+
+  const baubleSpecs = baubles.map((d) => setupBaubles(d, tree));
+
+  return (
+    <g>
+      {/* <defs>
+                        <clipPath id="clip">
+                            <rect x={-margins.left} y={-margins.top} width={width} height={height} /> 
+                        </clipPath>
+                    </defs>                      */}
+      {/*<rect x="0" y="0" width="100%" height="100%" fill="none" pointerEvents={"visible"} onClick={()=>nodeDispatch({type:"clearSelection"})}/>*/}
+      {/* <g transform={`translate(${margins.left},${margins.top})`} clipPath={'url(#clip)'} > */}
+      <g transform={`translate(${x},${y})`}>
+        <ScaleContext.Provider value={scale}>
+          <DimensionContext.Provider value={dimensions}>
+            <layoutContext.Provider value={layoutMap}>
+              <animatedContext.Provider value={animated}>
+                {axis ? <Axis {...axis} /> : null}
+                {baubleSpecs.map((specs, i) => (
+                  <Bauble key={specs.id ?? i} {...specs} />
+                ))}
+              </animatedContext.Provider>
+            </layoutContext.Provider>
+          </DimensionContext.Provider>
+        </ScaleContext.Provider>
+      </g>
+    </g>
+  );
+}
+
+export default FigTree;

package/src/components/figtree/index.ts

@@ -0,0 +1,3 @@
+export { default as FigTree } from "./figtree";
+export type { FigtreeProps } from "./figtree-types";
+export type { BaubleTypes } from "./figtree-types";

package/src/components/hoc/index.ts

@@ -0,0 +1,7 @@
+//Internal exports
+
+export { withNode } from "./with-node";
+export { withNodes } from "./with-nodes";
+export { withBranch } from "./with-branch";
+export { withBranches } from "./with-branches";
+export { withClades } from "./with-clades";

package/src/components/hoc/with-branch.tsx

@@ -0,0 +1,148 @@
+import React, { useContext } from "react";
+import type { NodeRef } from "../../evo";
+
+import { layoutClass } from "../../layouts";
+import { normalizePath } from "../../path.helpers";
+import type { PolarVertex, simpleVertex } from "../../layouts/types";
+import { ScaleContext } from "../../context/scale-context";
+import { layoutContext } from "../../context/layout-context";
+import { animatedContext } from "../../context/aminated-context";
+import type { PathAttrs } from "../baubles/shapes/branch";
+
+//The goal here is now to take a shape components that accepts Attrs: number | string , x/y
+// and return a component that takes a node / layout/ scale and attrs:number|string | function
+
+type Injected = {
+  d: string;
+  animated: boolean;
+};
+
+/**
+ *  This HOC takes a shape (possibly animated) that requires d values and calculated attributes and
+ * calculates those values from a node and its parent.
+ *
+ */
+
+export function withBranch(WrappedComponent: React.FC<PathAttrs & Injected>) {
+  type ExposedProps = PathAttrs & {
+    node: NodeRef;
+    parent?: NodeRef;
+    curvature?: number;
+  };
+  // we will now calculate the x,y, attrs, and interactions
+  const BranchedComponent = (props: ExposedProps) => {
+    const scale = useContext(ScaleContext);
+    const layout = useContext(layoutContext);
+    const animated = useContext(animatedContext);
+
+    const { node, parent, curvature = 0, ...rest } = props;
+
+    const v = layout(node);
+    const { layoutClass } = v;
+    const p = parent ? layout(parent) : { x: v.x, y: v.y }; // straight line
+    const step = { x: p.x, y: v.y };
+    const points = [p, v, step].map((vertex) => scale(vertex));
+    const d = normalizePath(pathGenerator(points, curvature, layoutClass));
+
+    return <WrappedComponent d={d} animated={animated} {...rest} />;
+  };
+  BranchedComponent.displayName = `withBranchArray(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
+  return BranchedComponent;
+}
+
+function pathGenerator(
+  points: simpleVertex[] | PolarVertex[],
+  curvature: number,
+  layout: layoutClass,
+): string {
+  switch (layout) {
+    case layoutClass.Rectangular: {
+      return rectangularBranchPath(points, curvature);
+    }
+    case layoutClass.Polar: {
+      return polarBranchPath(points as PolarVertex[]);
+    }
+    case layoutClass.Radial: {
+      return radialBranchPath(points);
+    }
+    default: {
+      throw new Error(
+        `path generator not implemented for the ${layout as string} of points`,
+      );
+    }
+  }
+}
+
+//TODO remove switch statement on number of positions that was for cartooned nodes that will be handled elsewhere
+function rectangularBranchPath(
+  points: simpleVertex[],
+  curvature: number,
+): string {
+  const positions = points.length;
+
+  switch (positions) {
+    case 0: {
+      return "";
+    }
+    case 3: {
+      const [parent, child] = points; //parent is parent and gets pushed to end of array
+      if (curvature === 0) {
+        // no curve
+        const x1 = parent.x + 0.001; // tiny adjustment for faded line (can't have y or x dimension not change at all
+        return `M${x1},${parent.y}L${parent.x},${child.y}L${child.x},${child.y + 0.001}`;
+      } else if (curvature < 1) {
+        // curve
+        return `M${parent.x},${parent.y}C${parent.x},${child.y}, ${parent.x + Math.abs(curvature * (parent.x - child.x))},${child.y} ${child.x},${child.y}`;
+      } else {
+        //(curvature == 1)
+        return `M${parent.x},${parent.y}L${(parent.x + child.x) / 2},${(parent.y + child.y) / 2}L${child.x},${child.y}`;
+      }
+    }
+    default: {
+      throw new Error(
+        `path rectangular generator not implemented for this ${positions} of points`,
+      );
+    }
+  }
+}
+
+function polarBranchPath(points: PolarVertex[]): string {
+  const positions = points.length;
+  switch (positions) {
+    case 3: {
+      const [parent, child, step] = points;
+      const arcBit =
+        parent.theta === child.theta || parent.r === 0
+          ? ""
+          : `A${parent.r},${parent.r} 0 0 ${parent.theta < child.theta ? 1 : 0} ${step.x},${step.y}`;
+      return `M${parent.x},${parent.y} ${arcBit} L${child.x},${child.y}`;
+    }
+    case 0: {
+      return "";
+    }
+    default: {
+      throw new Error(
+        `Error in polar path generator. not expecting ${positions} points`,
+      );
+    }
+  }
+}
+
+function radialBranchPath(points: simpleVertex[]): string {
+  const positions = points.length;
+
+  switch (positions) {
+    case 0: {
+      return "";
+    }
+    case 3: {
+      const [parent, child] = points; //parent is parent and gets pushed to end of array
+      return `M${parent.x},${parent.y}L${(parent.x + child.x) / 2},${(parent.y + child.y) / 2}L${child.x},${child.y}`;
+    }
+    default: {
+      throw new Error(
+        `path rectangular generator not implemented for this ${positions} of points`,
+      );
+    }
+  }
+}

package/src/components/hoc/with-branches.tsx

@@ -0,0 +1,54 @@
+/**
+ * An HOC that passes nodes and attrs to label components
+ */
+import type { NodeRef } from "../../evo";
+import type { AttrsRecord, InternalInteractionType } from "../baubles/types";
+
+export type BranchProps<A extends object> = {
+  branches: { node: NodeRef; parent: NodeRef }[];
+  attrs?: AttrsRecord<A>;
+  interactions?: { [key: string]: InternalInteractionType }; // keyed by node id // check type
+  // shape:NodeShapes,
+  keyBy?: (n: NodeRef) => string;
+  curvature?: number;
+};
+
+/**
+ * A HOC that provides parent child and attrs to componets that need this information
+ */
+//TODO do interactions
+export function withBranches<baseComponentAttrs extends object>(
+  ShapeComponent: React.FC<
+    baseComponentAttrs & { node: NodeRef; parent?: NodeRef; curvature?: number }
+  >,
+): React.FC<BranchProps<baseComponentAttrs>> {
+  const withNodes = (props: BranchProps<baseComponentAttrs>) => {
+    const {
+      branches,
+      keyBy = (n: NodeRef) => n._id,
+      attrs = {},
+      curvature,
+    } = props;
+
+    return (
+      <g className={"branch-layer"}>
+        {branches.map(({ node, parent }) => {
+          const nodeAttrs = attrs[node._id] ?? {};
+          // const nodeInteractions = interactions[node._id]?? {}
+          return (
+            <ShapeComponent
+              key={keyBy(node)}
+              node={node}
+              parent={parent}
+              {...nodeAttrs}
+              curvature={curvature}
+              // interactions={nodeInteractions}
+            />
+          );
+        })}
+      </g>
+    );
+  };
+  withNodes.displayName = `withBranchArray(${ShapeComponent.displayName || ShapeComponent.name || "Component"})`;
+  return withNodes;
+}