@figtreejs/core 0.0.1-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @figtreejs/core
+
+## 0.0.1-alpha.0
+
+### Patch Changes
+
+- This version marks the initial version of several packages, and the start of a new developement system
+- Updated dependencies
+  - @figtreejs/maybe@0.0.1-alpha.0

package/eslint.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from "eslint/config";
+import defaultConfig  from "@figtreejs/eslint-config";
+
+export default defineConfig({
+  "extends": [defaultConfig],
+  "rules":{
+   "@typescript-eslint/restrict-template-expressions": ["error", { allowNumber: true }]
+  }
+})

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@figtreejs/core",
+  "version": "0.0.1-alpha.0",
+  "description": "A react component library for phylogenetic visualization and app building",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/figtreo/figtreejs.git"
+  },
+  "license": "MIT",
+  "author": "Andrew Rambaut and JT McCrone",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "check-types": "tsc --noEmit",
+    "dev": "vite build --watch",
+    "lint": "eslint src/",
+    "test": "vitest run",
+    "vitest-preview": "vitest-preview"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "eslint",
+      "prettier --write --ignore-unknown"
+    ],
+    "!(*.js|*.ts)": [
+      "prettier --write --ignore-unknown"
+    ]
+  },
+  "dependencies": {
+    "@figtreejs/maybe": "0.0.1-alpha.0",
+    "@react-spring/web": "^9.7.5",
+    "abs-svg-path": "^0.1.1",
+    "d3-array": "^3.2.4",
+    "d3-format": "^3.1.0",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "d3-time-format": "^4.1.0",
+    "immer": "^10.1.1",
+    "normalize-svg-path": "^1.1.0",
+    "parse-svg-path": "^0.1.2",
+    "uuid": "^13.0.0"
+  },
+  "devDependencies": {
+    "@figtreejs/eslint-config": "0.0.1-alpha.0",
+    "@figtreejs/typescript-config": "0.0.1-alpha.0",
+    "@microsoft/api-extractor": "^7.55.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/abs-svg-path": "^0.1.3",
+    "@types/d3-array": "^3.2.2",
+    "@types/d3-format": "^3.0.4",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.7",
+    "@types/d3-time-format": "^4.0.3",
+    "@vitejs/plugin-react": "^5.1.0",
+    "jsdom": "^27.1.0",
+    "typescript": "^5.9.3",
+    "unplugin-dts": "^1.0.0-beta.0",
+    "vite": "^7.2.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.8"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

package/src/@custom-types/normalize-svg-path.d.ts

@@ -0,0 +1,13 @@
+declare module 'normalize-svg-path' {
+  // Pull in the derived types (no value import here—types only)
+
+  type NormalizedCommand = import('./svg-path-types').NormalizedCommand;  // eslint-disable-line  @typescript-eslint/consistent-type-imports
+
+  // What normalize returns: path must be absolute; segments become curves (plus M/Z)
+
+
+  // The library exposes a single function; the upstream repo publishes CJS + ESM builds.
+  // We'll declare CJS style; with esModuleInterop you can default-import it if you like.
+  function normalize(path: AbsAnyCommand[]): NormalizedCommand[];
+  export = normalize;
+}

package/src/@custom-types/parse-svg-path.d.ts

@@ -0,0 +1,8 @@
+// import type {AnyCommand} from 'abs-svg-path'
+declare module 'parse-svg-path'{
+
+  // Derive the *input* element type of abs() commands:
+    type AnyCommand = import('./svg-path-types').AnyCommand;  // eslint-disable-line  @typescript-eslint/consistent-type-imports
+    const parse:(n:string)=>AnyCommand[],
+    export default parse;
+}

package/src/@custom-types/svg-path-types.d.ts

@@ -0,0 +1,37 @@
+// This file is a *module* (it exports types).
+// It derives types from the value type of 'abs-svg-path'.
+
+export type AbsFn = typeof import('abs-svg-path'); // eslint-disable-line  @typescript-eslint/consistent-type-imports
+
+// Array element type of the *input* to abs()
+export type AnyCommand = Parameters<AbsFn>[0][number];
+
+// Array element type of the *output* from abs() (absolute commands)
+export type AbsAnyCommand = ReturnType<AbsFn>[number];
+
+// Generic helper: pick the command union members whose first tuple entry matches C
+type CommandOf<C extends string> = Extract<AnyCommand, [C, ...unknown[]]>;
+
+// Common subtypes you might want:
+export type RelMoveCommand = CommandOf<'m'>;
+export type AbsMoveCommand = CommandOf<'M'>;
+export type RelLineCommand = CommandOf<'l'>;
+export type AbsLineCommand = CommandOf<'L'>;
+export type RelHorizontalCommand = CommandOf<'h'>;
+export type AbsHorizontalCommand = CommandOf<'H'>;
+export type RelVerticalCommand = CommandOf<'v'>;
+export type AbsVerticalCommand = CommandOf<'V'>;
+export type RelClosePathCommand = CommandOf<'z'>;
+export type AbsClosePathCommand = CommandOf<'Z'>;
+export type RelBezierCurveCommand = CommandOf<'c'>;
+export type AbsBezierCurveCommand = CommandOf<'C'>;
+export type RelFollowingBezierCurveCommand = CommandOf<'s'>;
+export type AbsFollowingBezierCurveCommand = CommandOf<'S'>;
+export type RelQuadraticCurveCommand = CommandOf<'q'>;
+export type AbsQuadraticCurveCommand = CommandOf<'Q'>;
+export type RelFollowingQuadraticCurveCommand = CommandOf<'t'>;
+export type AbsFollowingQuadraticCurveCommand = CommandOf<'T'>;
+export type RelArcCommand = CommandOf<'a'>;
+export type AbsArcCommand = CommandOf<'A'>;
+
+export  type NormalizedCommand = AbsMoveCommand | AbsBezierCurveCommand | AbsClosePathCommand;

package/src/bauble-makers/makers.ts

@@ -0,0 +1,112 @@
+// Nodes
+
+import type {
+  CircleAttrs,
+  TextAttrs,
+  PathAttrs,
+  RectAttrs,
+  HighlightRectAttrs,
+} from "../components";
+import {
+  BaubleTarget,
+  CladeShapes,
+  NodeShapes,
+} from "../components/baubles/bauble";
+import type { BaseBaubleOptions, ExposedAttrs } from "./utils";
+
+type RectangleNodeAttrs = ExposedAttrs<RectAttrs>;
+type CircleNodeAttrs = ExposedAttrs<CircleAttrs>;
+
+export type RectangleNodeOptions = BaseBaubleOptions<RectangleNodeAttrs>;
+export type CircleNodeOptions = BaseBaubleOptions<CircleNodeAttrs>;
+export type InternalNodeOptions = (
+  | (CircleNodeOptions & { shape: NodeShapes.Circle })
+  | (RectangleNodeOptions & { shape: NodeShapes.Rectangle })
+) & { target: BaubleTarget.Node };
+
+export function CircleNodes(options: CircleNodeOptions): InternalNodeOptions {
+  return { ...options, shape: NodeShapes.Circle, target: BaubleTarget.Node };
+}
+
+export function RectangleNodes(
+  options: RectangleNodeOptions,
+): InternalNodeOptions {
+  return { ...options, shape: NodeShapes.Rectangle, target: BaubleTarget.Node };
+}
+
+// Branches
+
+type BranchAttrs = ExposedAttrs<PathAttrs>;
+
+export type BranchOptions = BaseBaubleOptions<BranchAttrs> & {
+  curvature?: number;
+};
+export type InternalBranchOptions = BranchOptions & {
+  target: BaubleTarget.Branch;
+};
+
+/**
+ * This function takes options from the user about the branches they would like in the figure
+ * and passes it to the figure. It is a nice functional API.
+ *
+ */
+
+export function Branches(options: BranchOptions): InternalBranchOptions {
+  return { ...options, target: BaubleTarget.Branch };
+}
+
+// Labels
+
+type LabelSpecificTextAttrs = Omit<TextAttrs, "text">; // we will provide this next the text attrs
+type LabelAttrs = ExposedAttrs<LabelSpecificTextAttrs>;
+type LabelOptions = BaseBaubleOptions<LabelAttrs> &
+  ExposedAttrs<{ text: string }>;
+export type InternalLabelOptions = LabelOptions &
+  (
+    | { target: BaubleTarget.NodeLabel; aligned?: boolean }
+    | { target: BaubleTarget.BranchLabel }
+  );
+export type ExternalLabelOptions = Omit<LabelOptions, "attrs"> & {
+  attrs?: LabelAttrs;
+};
+
+export function NodeLabels(
+  options: ExternalLabelOptions & { aligned?: boolean },
+): InternalLabelOptions {
+  return {
+    attrs: {},
+    aligned: false,
+    ...options,
+    target: BaubleTarget.NodeLabel,
+  };
+}
+
+export function BranchLabels(
+  options: ExternalLabelOptions,
+): InternalLabelOptions {
+  return { attrs: {}, ...options, target: BaubleTarget.BranchLabel };
+}
+
+type HighlightAttrs = ExposedAttrs<HighlightRectAttrs>;
+type CartoonAttrs = ExposedAttrs<PathAttrs>;
+
+export type HighlightOptions = BaseBaubleOptions<HighlightAttrs>;
+export type CartoonOptions = BaseBaubleOptions<CartoonAttrs>;
+export type InternalCladeOptions = (
+  | (HighlightOptions & { shape: CladeShapes.Highlight })
+  | (CartoonOptions & { shape: CladeShapes.Cartoon })
+) & { target: BaubleTarget.Clade };
+
+export function HighlightClades(
+  options: HighlightOptions,
+): InternalCladeOptions {
+  return {
+    ...options,
+    shape: CladeShapes.Highlight,
+    target: BaubleTarget.Clade,
+  };
+}
+
+export function CartoonClades(options: CartoonOptions): InternalCladeOptions {
+  return { ...options, shape: CladeShapes.Cartoon, target: BaubleTarget.Clade };
+}

package/src/bauble-makers/set-up-baubles.ts

@@ -0,0 +1,197 @@
+import { maxIndex } from "d3-array";
+import type {
+  CircleAttrs,
+  HighlightRectAttrs,
+  PathAttrs,
+  RectAttrs,
+  TextAttrs,
+} from "../components";
+import type { BaubleSpec } from "../components/baubles/bauble";
+import {
+  BaubleTarget,
+  CladeShapes,
+  NodeShapes,
+} from "../components/baubles/bauble";
+import type { ImmutableTree, NodeRef } from "../evo";
+import { tipIterator } from "../evo";
+import type {
+  InternalBranchOptions,
+  InternalCladeOptions,
+  InternalLabelOptions,
+  InternalNodeOptions,
+} from "./makers";
+import { mapAttrsToProps, mapInteractionsToProps } from "./utils";
+import type { Clade } from "../components/hoc/with-clades";
+import { notNull } from "../utils";
+
+export type InternalBaubleOptions =
+  | InternalNodeOptions
+  | InternalBranchOptions
+  | InternalLabelOptions
+  | InternalCladeOptions; // TODO fix redundancy and keep types happy
+export function setupBaubles(
+  options: InternalBaubleOptions,
+  tree: ImmutableTree,
+): BaubleSpec {
+  const filterer = "filter" in options ? options.filter : () => true;
+
+  notNull(filterer, "Issue with filter option when making baubles");
+
+  const nodes: NodeRef[] =
+    "nodes" in options ? options.nodes : tree.getNodes().filter(filterer);
+
+  const interactionMapper = mapInteractionsToProps(options.interactions ?? {});
+
+  if (options.target === BaubleTarget.Node) {
+    if (options.shape === NodeShapes.Circle) {
+      const attrMapper = mapAttrsToProps(options.attrs); //fill is none unless we are told otherwise
+      const attrs = nodes.reduce((acc: Record<string, CircleAttrs>, n) => {
+        const nodeAttrs = attrMapper(n);
+        const nodeInteractions = interactionMapper(n);
+        acc[n._id] = { ...nodeAttrs, ...nodeInteractions };
+        return acc;
+      }, {});
+
+      return {
+        nodes,
+        attrs,
+        id: options.id,
+        target: options.target,
+        shape: options.shape,
+      };
+    } else {
+      const attrMapper = mapAttrsToProps(options.attrs); //fill is none unless we are told otherwise
+      const attrs = nodes.reduce((acc: Record<string, RectAttrs>, n) => {
+        const nodeAttrs = attrMapper(n);
+        const nodeInteractions = interactionMapper(n);
+        acc[n._id] = { ...nodeAttrs, ...nodeInteractions };
+        return acc;
+      }, {});
+      return {
+        nodes,
+        attrs,
+        id: options.id,
+        target: options.target,
+        shape: options.shape,
+      };
+    }
+  } else if (options.target === BaubleTarget.Branch) {
+    const branches = nodes
+      .filter((n) => !tree.isRoot(n))
+      .map((node) => ({ node, parent: tree.getParent(node) }));
+    const attrMapper = mapAttrsToProps({ fill: "none", ...options.attrs }); //fill is none unless we are told otherwise
+    const interactionMapper = mapInteractionsToProps(
+      options.interactions ?? {},
+    );
+    const attrs = nodes.reduce((acc: Record<string, PathAttrs>, n) => {
+      const nodeAttrs = attrMapper(n);
+      const nodeInteractions = interactionMapper(n);
+      acc[n._id] = { ...nodeAttrs, ...nodeInteractions };
+      return acc;
+    }, {});
+
+    return {
+      branches,
+      attrs,
+      id: options.id,
+      curvature: options.curvature,
+      target: options.target,
+    };
+  } else if (options.target === BaubleTarget.NodeLabel) {
+    const attrMapper = mapAttrsToProps(options.attrs);
+    const textMapper = mapAttrsToProps({ text: options.text });
+    const interactionMapper = mapInteractionsToProps(
+      options.interactions ?? {},
+    );
+    const attrs = nodes.reduce((acc: Record<string, TextAttrs>, n) => {
+      const nodeAttrs = attrMapper(n);
+      const nodeInteractions = interactionMapper(n);
+      const text = textMapper(n);
+      acc[n._id] = { ...nodeAttrs, ...nodeInteractions, ...text };
+      return acc;
+    }, {});
+
+    return {
+      nodes,
+      attrs,
+      id: options.id,
+      target: options.target,
+      aligned: options.aligned ?? false,
+    };
+  } else if (options.target === BaubleTarget.BranchLabel) {
+    const sineRoot = nodes.filter((n) => !tree.isRoot(n));
+    const branches = sineRoot
+      // .filter((n) => !tree.isRoot(n))
+      .map((node) => ({ node, parent: tree.getParent(node) }));
+    const attrMapper = mapAttrsToProps(options.attrs); //fill is none unless we are told otherwise
+    const interactionMapper = mapInteractionsToProps(
+      options.interactions ?? {},
+    );
+    const textMapper = mapAttrsToProps({ text: options.text });
+    const attrs = sineRoot.reduce((acc: Record<string, TextAttrs>, n) => {
+      const nodeAttrs = attrMapper(n);
+      const nodeInteractions = interactionMapper(n);
+      const text = textMapper(n);
+      acc[n._id] = { ...nodeAttrs, ...nodeInteractions, ...text };
+      return acc;
+    }, {});
+
+    return {
+      branches,
+      attrs,
+      id: options.id,
+      target: options.target,
+    };
+  } else {
+    // if(options.target===BaubleTarget.Clade){
+    const clades: Clade[] = nodes.map((n) => {
+      const tips = [...tipIterator(tree, n)];
+      const leftMost = tips[0];
+      const rightMost = tips[tips.length - 1];
+      const mostDiverged = tips[maxIndex(tips, (d) => tree.getDivergence(d))];
+      return {
+        root: n,
+        leftMost,
+        rightMost,
+        mostDiverged,
+      };
+    });
+
+    if (options.shape === CladeShapes.Highlight) {
+      const attrMapper = mapAttrsToProps(options.attrs); //fill is none unless we are told otherwise
+      const attrs = nodes.reduce(
+        (acc: Record<string, HighlightRectAttrs>, n) => {
+          const nodeAttrs = attrMapper(n);
+          const nodeInteractions = interactionMapper(n);
+          acc[n._id] = { ...nodeAttrs, ...nodeInteractions };
+          return acc;
+        },
+        {},
+      );
+      return {
+        clades,
+        attrs,
+        id: options.id,
+        target: options.target,
+        shape: options.shape,
+      };
+    } else {
+      const attrMapper = mapAttrsToProps(options.attrs); //fill is none unless we are told otherwise
+      const attrs = nodes.reduce((acc: Record<string, PathAttrs>, n) => {
+        const nodeAttrs = attrMapper(n);
+        const nodeInteractions = interactionMapper(n);
+        acc[n._id] = { ...nodeAttrs, ...nodeInteractions };
+        return acc;
+      }, {});
+      return {
+        clades,
+        attrs,
+        id: options.id,
+        target: options.target,
+        shape: options.shape,
+      };
+    }
+  }
+
+  throw new Error("not implemented the rest");
+}

package/src/bauble-makers/utils.ts

@@ -0,0 +1,61 @@
+import type {
+  InteractionType,
+  InternalInteractionType,
+} from "../components/baubles/types";
+import type { NodeRef } from "../evo";
+
+export type ExposedAttrs<A> = {
+  [K in keyof A]: A[K] | ((n: NodeRef) => A[K]);
+};
+export type filterOption = {
+  filter?: (n: NodeRef) => boolean;
+};
+export type nodeOption = {
+  nodes: NodeRef[];
+};
+
+export type BaseBaubleOptions<A> = {
+  id?: string;
+  attrs: A;
+  interactions?: InteractionType;
+} & (filterOption | nodeOption);
+
+// is T needed here?
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters
+function isFn<T>(val: unknown): val is (n: NodeRef) => T {
+  return typeof val === "function";
+}
+
+export function mapAttrsToProps<A extends Record<string, unknown>>(
+  attrs: ExposedAttrs<A>,
+): (n: NodeRef) => A {
+  return function (node: NodeRef) {
+    const props = {} as A;
+    for (const k in attrs) {
+      const v = attrs[k];
+      if (isFn(v)) {
+        props[k as keyof A] = v(node) as A[typeof k];
+      } else {
+        props[k as keyof A] = v as A[typeof k];
+      }
+    }
+    return props;
+  };
+}
+
+export function mapInteractionsToProps(
+  interactions: InteractionType,
+): (n: NodeRef) => InternalInteractionType {
+  return function (node: NodeRef) {
+    const props: InternalInteractionType = {};
+    for (const k in interactions) {
+      const possibleInteraction = interactions[k as keyof InteractionType];
+      if (possibleInteraction !== undefined) {
+        props[k as keyof InteractionType] = () => {
+          possibleInteraction(node);
+        };
+      }
+    }
+    return props;
+  };
+}

package/src/components/baubles/bauble.tsx

@@ -0,0 +1,61 @@
+import type { NodeSpec } from "./nodes";
+import { Nodes } from "./nodes";
+import type { BranchLabelSpec, NodeLabelSpec } from "./labels";
+import { BranchLabels, NodeLabels } from "./labels";
+import type { BranchSpec } from "./branches";
+import { Branches } from "./branches";
+import type { CladeSpec } from "./clades";
+import { Clades } from "./clades";
+
+/**
+ * The main bauble which decides which baubles to renders base on the incoming specification
+ */
+export function Bauble(props: BaubleSpec) {
+  // const{id} = props
+  switch (
+    props.target // switch before destructure so destructure is type aware
+  ) {
+    case BaubleTarget.Node: {
+      return <Nodes {...props} />;
+    }
+    case BaubleTarget.Branch: {
+      return <Branches {...props} />;
+    }
+    case BaubleTarget.NodeLabel: {
+      return <NodeLabels {...props} />;
+    }
+
+    case BaubleTarget.BranchLabel: {
+      return <BranchLabels {...props} />;
+    }
+
+    case BaubleTarget.Clade: {
+      return <Clades {...props} />;
+    }
+  }
+}
+
+export enum BaubleTarget {
+  Node,
+  Branch,
+  NodeLabel,
+  BranchLabel,
+  Clade,
+  Axis,
+}
+
+export enum NodeShapes {
+  Circle,
+  Rectangle,
+}
+export enum CladeShapes {
+  Cartoon,
+  Highlight,
+}
+
+export type BaubleSpec =
+  | NodeSpec
+  | BranchSpec
+  | NodeLabelSpec
+  | BranchLabelSpec
+  | CladeSpec;

package/src/components/baubles/branches.tsx

@@ -0,0 +1,13 @@
+import { withBranch } from "../hoc";
+import type { BranchProps } from "../hoc/with-branches";
+import { withBranches } from "../hoc/with-branches";
+import type { BaubleTarget } from "./bauble";
+import { BasePath } from "./shapes";
+import type { PathAttrs } from "./shapes/branch";
+
+export type BranchSpec = BranchProps<PathAttrs> & {
+  target: BaubleTarget.Branch;
+  id?: string;
+};
+
+export const Branches = withBranches<PathAttrs>(withBranch(BasePath));

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

@@ -0,0 +1,68 @@
+import { layoutClass } from "../../../layouts";
+
+import { normalizePath } from "../../../path.helpers";
+import { BasePath } from "../shapes";
+import type { PolarVertex } from "../../../layouts/types";
+import type { PathProps } from "../shapes/branch";
+import { useContext } from "react";
+import { ScaleContext } from "../../../context/scale-context";
+import { layoutContext } from "../../../context/layout-context";
+import { animatedContext } from "../../../context/aminated-context";
+import type { Clade } from "../../hoc/with-clades";
+import { withClades } from "../../hoc/with-clades";
+
+//TODO add padding
+// const padding = 10;
+//TODO make normalization part of an hoc or d animation.
+
+/**
+ * A cartoon drawing of a clade in the tree.
+ * It will not yet render for radial layouts
+ */
+type Injected = {
+  d: string;
+  animated: boolean;
+};
+export type CladeProps = Omit<PathProps, keyof Injected> & { clade: Clade };
+function Cartoon(props: CladeProps) {
+  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 { x, y } = v;
+  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);
+  let d: string;
+  if (layoutType === layoutClass.Rectangular) {
+    const maxX = mdv.x;
+    const maxY = rmv.y;
+
+    const minY = lmv.y;
+
+    d = `M${x},${y}L${maxX},${maxY}L${maxX},${minY}Z`;
+  } else if (layoutType === layoutClass.Polar) {
+    //todo maybe swap lmv and rmv
+    // if we are here scale has returns a polarVertex
+    const top = lmv as PolarVertex;
+    const bottom = rmv as PolarVertex;
+
+    const arcBit =
+      top.theta === bottom.theta || top.r === 0
+        ? ""
+        : `A${top.r},${top.r} 0 0 ${top.theta < bottom.theta ? 1 : 0} ${bottom.x},${bottom.y}`;
+    d = `M${x},${y}L${top.x},${top.y} ${arcBit} Z`;
+  } else {
+    return null;
+  }
+
+  const normalized = normalizePath(d);
+
+  return <BasePath d={normalized} {...rest} animated={animated} />;
+}
+
+export const Cartoons = withClades(Cartoon);