@figtreejs/core 0.0.1-alpha.0

package/src/tests/figtree/figtree.test.tsx

@@ -0,0 +1,123 @@
+import { describe, test } from "vitest";
+import { render } from "@testing-library/react";
+import { ImmutableTree } from "../../evo";
+import { FigTree } from "../../components";
+import { rectangularLayout } from "../../layouts";
+import {
+  Branches,
+  CircleNodes,
+  RectangleNodes,
+} from "../../bauble-makers/makers";
+
+const tree = ImmutableTree.fromNewick("((A:1,B:1):2,C:1);");
+
+describe("Figures", () => {
+  test("renders a simple figure", () => {
+    const fig = render(
+      <svg
+        width="400px"
+        height="400px"
+        data-testid="figure"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <FigTree
+          width={400}
+          height={400}
+          tree={tree}
+          layout={rectangularLayout}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+    // expect(fig).toBeInTheDocument();
+  });
+  test("renders a tree with branch baubles", () => {
+    const tree = ImmutableTree.fromNewick("((A:1,B:1):2,C:1);");
+    const fig = render(
+      <svg
+        width="400px"
+        height="400px"
+        data-testid="figure"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <FigTree
+          width={400}
+          height={400}
+          tree={tree}
+          layout={rectangularLayout}
+          baubles={[Branches({ attrs: { strokeWidth: 2, stroke: "black" } })]}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+  });
+
+  test("renders a tree with branch baubles and nodes", () => {
+    const tree = ImmutableTree.fromNewick("((A:1,B:1):2,C:1);");
+    const fig = render(
+      <svg
+        width="400px"
+        height="400px"
+        data-testid="figure"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <FigTree
+          width={400}
+          height={400}
+          tree={tree}
+          layout={rectangularLayout}
+          baubles={[
+            Branches({ attrs: { strokeWidth: 2, stroke: "black" } }),
+            CircleNodes({
+              filter: (n) => tree.isExternal(n),
+              attrs: { fill: "black", r: 10 },
+            }),
+            RectangleNodes({
+              filter: (n) => !tree.isExternal(n),
+              attrs: { fill: "black", width: 10, height: 4 },
+            }),
+          ]}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+    // screen.debug()
+    // expect(fig).toBeInTheDocument();
+  });
+
+  test("renders a tree with branch baubles and and functions", () => {
+    const tree = ImmutableTree.fromNewick("((A:1,B:1):2,C:1);");
+    const fig = render(
+      <svg
+        width="400px"
+        height="400px"
+        data-testid="figure"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <FigTree
+          width={400}
+          height={400}
+          tree={tree}
+          layout={rectangularLayout}
+          baubles={[
+            Branches({ attrs: { strokeWidth: 2, stroke: () => "black" } }),
+            CircleNodes({
+              filter: (n) => tree.isExternal(n),
+              attrs: { fill: "black", r: (n) => n.number },
+            }),
+            RectangleNodes({
+              filter: (n) => !tree.isExternal(n),
+              attrs: { fill: "black", width: 10, height: 4 },
+            }),
+          ]}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+    // expect(fig).toBeInTheDocument();
+  });
+});

package/src/tests/figtree/simple.svg

@@ -0,0 +1,47 @@
+    <svg
+      data-testid="figure"
+      height="400px"
+      width="400px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
+        <g
+          transform="translate(10,10)"
+        >
+          <g
+            class="branch-layer"
+          >
+            <path
+              d="M 0.001 237.5 C0.001,237.5 0,237.5 0,237.5 C0,237.5 0,237.5005 0,237.50074999999998 C0,237.50074999999998 0,237.500875 0,237.50093750000002 C0,237.50093750000002 0,237.50096875000003 0,237.50098437500003 C0,237.50098437500003 0,237.5009921875 0,237.50099609375002 C0,237.50099609375002 0,237.501 0,237.501 "
+              fill="none"
+              stroke="black"
+              stroke-width="1"
+            />
+            <path
+              d="M 0.001 237.5 C0.001,237.5 0,95 0,95 C0,95 126.66666666666666,95.0005 190,95.00075000000001 C190,95.00075000000001 221.66666666666666,95.00087500000001 237.5,95.0009375 C237.5,95.0009375 245.41666666666666,95.00096875 249.375,95.000984375 C249.375,95.000984375 251.35416666666666,95.0009921875 252.34375,95.00099609375 C252.34375,95.00099609375 253.33333333333331,95.001 253.33333333333331,95.001 "
+              fill="none"
+              stroke="black"
+              stroke-width="1"
+            />
+            <path
+              d="M 253.33433333333332 95 C253.33433333333332,95 253.33333333333331,0 253.33333333333331,0 C253.33333333333331,0 316.66666666666663,0.0005 348.3333333333333,0.00075 C348.3333333333333,0.00075 364.16666666666663,0.000875 372.0833333333333,0.0009375 C372.0833333333333,0.0009375 376.04166666666663,0.00096875 378.0208333333333,0.000984375 C378.0208333333333,0.000984375 379.01041666666663,0.0009921875 379.5052083333333,0.00099609375 C379.5052083333333,0.00099609375 380,0.001 380,0.001 "
+              fill="none"
+              stroke="black"
+              stroke-width="1"
+            />
+            <path
+              d="M 253.33433333333332 95 C253.33433333333332,95 253.33333333333331,190 253.33333333333331,190 C253.33333333333331,190 316.66666666666663,190.0005 348.3333333333333,190.00074999999998 C348.3333333333333,190.00074999999998 364.16666666666663,190.000875 372.0833333333333,190.00093750000002 C372.0833333333333,190.00093750000002 376.04166666666663,190.00096875000003 378.0208333333333,190.00098437500003 C378.0208333333333,190.00098437500003 379.01041666666663,190.0009921875 379.5052083333333,190.00099609375002 C379.5052083333333,190.00099609375002 380,190.001 380,190.001 "
+              fill="none"
+              stroke="black"
+              stroke-width="1"
+            />
+            <path
+              d="M 0.001 237.5 C0.001,237.5 0,380 0,380 C0,380 63.33333333333333,380.0005 95,380.00075 C95,380.00075 110.83333333333333,380.00087499999995 118.75,380.00093749999996 C118.75,380.00093749999996 122.70833333333333,380.00096874999997 124.6875,380.000984375 C124.6875,380.000984375 125.67708333333333,380.00099218749995 126.171875,380.00099609374996 C126.171875,380.00099609374996 126.66666666666666,380.001 126.66666666666666,380.001 "
+              fill="none"
+              stroke="black"
+              stroke-width="1"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>

package/src/tests/layouts/radiallayout.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from "vitest";
+import { ImmutableTree } from "../../evo";
+import { radialLayout } from "../../layouts";
+describe("Test rectangular layout", () => {
+  it("check x and y on root", function () {
+    const tree = ImmutableTree.fromNewick("((a:1,b:1):1,c:1);");
+    const layout = radialLayout(tree);
+    const root = layout(tree.getRoot());
+    expect(root.x).toBeCloseTo(0);
+    expect(root.y).toBeCloseTo(0);
+
+    // //a
+    const a = tree.getNodeByTaxon(tree.getTaxonByName("a"));
+    const aV = layout(a);
+    expect(aV.x).toBeCloseTo(0.0015820025368573631);
+    expect(aV.y).toBeCloseTo(-1.7311355093381278);
+
+    const c = tree.getNodeByTaxon(tree.getTaxonByName("c"));
+    const cV = layout(c);
+    expect(cV.x).toBeCloseTo(0.5);
+    expect(cV.y).toBeCloseTo(0.8660254037844386);
+  });
+});

package/src/tests/layouts/rectangularlayout.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from "vitest";
+import { ImmutableTree } from "../../evo";
+import { rectangularLayout } from "../../layouts";
+import { u } from "../../utils";
+
+describe("Test rectangular layout", () => {
+  it("check x and y on root", function () {
+    const tree = ImmutableTree.fromNewick("((a:1,b:1):1,c:1);");
+    const layout = rectangularLayout(tree);
+    const root = layout(tree.getRoot());
+    expect(root.x).toBeCloseTo(0);
+    expect(root.y).toBeCloseTo(1.25);
+
+    // //a
+    const a = tree.getNodeByTaxon(tree.getTaxonByName("a"));
+    const aV = layout(a);
+    expect(aV.x).toBeCloseTo(2);
+    expect(aV.y).toBeCloseTo(0);
+
+    // //c
+    const c = tree.getNodeByTaxon(tree.getTaxonByName("c"));
+    const cV = layout(c);
+    expect(cV.x).toBeCloseTo(1);
+    expect(cV.y).toBeCloseTo(2);
+  });
+  it("check x and y on root - tree", function () {
+    const tree = ImmutableTree.fromNewick("((a:1,b:1):1,c:1);");
+
+    const layout = rectangularLayout(tree);
+    const root = layout(tree.getRoot());
+    const c = tree.getNodeByTaxon(tree.getTaxonByName("c"));
+    const cV = layout(c);
+    const tree2 = tree.setDivergence(
+      u(tree.getNodeByTaxon(tree.getTaxonByName("a"))),
+      3.0,
+    );
+    const layout2 = rectangularLayout(tree2);
+    const root2 = layout2(tree2.getRoot());
+    const c2 = tree2.getNodeByTaxon(tree.getTaxonByName("c"));
+    const cV2 = layout2(c2);
+
+    expect(c2).toStrictEqual(c);
+    expect(cV2).toStrictEqual(cV);
+
+    expect(root2).not.toBe(root); //these are vertexes
+    expect(root2.x).toBeCloseTo(0);
+  });
+
+  it("check after reordering", function () {
+    // check above but with rotations
+
+    const tree = ImmutableTree.fromNewick("((a:1,b:1):1,c:1);");
+
+    const layout = rectangularLayout(tree);
+    const reordered = tree.orderNodesByDensity(true);
+    const reorderedLayout = rectangularLayout(reordered);
+    const reordededC = reordered.getNodeByTaxon(tree.getTaxonByName("c"));
+    const ogC = tree.getNodeByTaxon(tree.getTaxonByName("c"));
+
+    const ogCvertext = layout(ogC);
+    const reorderedCVertex = reorderedLayout(reordededC);
+
+    expect(ogCvertext).not.toBe(reorderedCVertex);
+  });
+});

package/src/tests/shapes/branch.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { BasePath } from "../../components/baubles/shapes";
+
+describe("BaseBranch", () => {
+  test("renders BaseBranch, SVG path which has the right attributes", () => {
+    const d =
+      "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30Q 90,60 50,90 Q 10,60 10,30 z";
+    render(
+      <svg>
+        <BasePath
+          d={d}
+          {...{ stroke: "blue", "data-testid": "branch", animated: false }}
+        />
+      </svg>,
+    );
+
+    const branch = screen.getByTestId("branch");
+    expect(branch.getAttribute("d")).toBe(d);
+    expect(branch.getAttribute("stroke")).toBe("blue");
+  });
+
+  test("Renders an animated branch , SVG path which has the right attributes", () => {
+    const d =
+      "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30Q 90,60 50,90 Q 10,60 10,30 z";
+    render(
+      <svg>
+        <BasePath
+          d={d}
+          animated={true}
+          {...{ stroke: "blue", "data-testid": "branch" }}
+        />
+      </svg>,
+    );
+
+    const branch = screen.getByTestId("branch");
+    expect(branch.getAttribute("d")).toBe(d);
+    expect(branch.getAttribute("stroke")).toBe("rgba(0, 0, 255, 1)"); // animation used rga
+  });
+});

package/src/tests/shapes/circle.test.tsx

@@ -0,0 +1,47 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { BaseCircle } from "../../components/baubles/shapes";
+
+describe("BaseCircle", () => {
+  test("renders an SVG circle with the right attributes", () => {
+    render(
+      <svg>
+        <BaseCircle
+          x={0}
+          y={0}
+          {...{ r: 1, fill: "blue", "data-testid": "circle" }}
+          animated={false}
+        />
+      </svg>,
+    );
+
+    const circle = screen.getByTestId("circle"); // const circle = container.querySelector("circle");
+
+    expect(circle).not.toBeNull();
+    expect(circle.getAttribute("cx")).toBe("0");
+    expect(circle.getAttribute("cy")).toBe("0");
+    expect(circle.getAttribute("r")).toBe("1");
+    expect(circle.getAttribute("fill")).toBe("blue");
+  });
+
+  test("renders an animated circle with the right attributes", () => {
+    render(
+      <svg>
+        <BaseCircle
+          x={0}
+          y={0}
+          {...{ r: 1, fill: "blue", "data-testid": "circle" }}
+          animated={true}
+        />
+      </svg>,
+    );
+
+    const circle = screen.getByTestId("circle"); // const circle = container.querySelector("circle");
+
+    expect(circle).not.toBeNull();
+    expect(circle.getAttribute("cx")).toBe("0");
+    expect(circle.getAttribute("cy")).toBe("0");
+    expect(circle.getAttribute("r")).toBe("1");
+    expect(circle.getAttribute("fill")).toBe("rgba(0, 0, 255, 1)");
+  });
+});

package/src/tests/shapes/label.test.tsx

@@ -0,0 +1,101 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { BaseLabel } from "../../components/baubles/shapes/label";
+import { unNullify } from "../../utils";
+
+describe("BaseLabel", () => {
+  test("renders an SVG text element that uses transform to position", () => {
+    render(
+      <svg>
+        <BaseLabel
+          x={2}
+          y={2}
+          {...{ alignmentBaseline: "central", textAnchor: "end", rotation: 0 }}
+          text={"TEST"}
+          animated={false}
+        />
+      </svg>,
+    );
+    const textEl = screen.getByText("TEST");
+    expect(textEl.tagName.toLowerCase()).toBe("text");
+    expect(textEl.getAttribute("transform")).toBe("translate(2,2) rotate(0)");
+  });
+  test("renders an SVG text element an alignment line", () => {
+    const d =
+      "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30Q 90,60 50,90 Q 10,60 10,30 z";
+    const { container } = render(
+      <svg>
+        <BaseLabel
+          x={2}
+          y={2}
+          {...{ alignmentBaseline: "central", textAnchor: "end", rotation: 0 }}
+          text={"TEST"}
+          animated={false}
+          d={d}
+        />
+      </svg>,
+    );
+
+    const path = unNullify(container.querySelector("path"), `path was null`);
+    expect(path).not.toBeNull();
+    expect(path.getAttribute("d")).toBe(d);
+  });
+
+  test("renders a label element an alignment line", () => {
+    const d =
+      "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30Q 90,60 50,90 Q 10,60 10,30 z";
+    const { container } = render(
+      <svg>
+        <BaseLabel
+          x={2}
+          y={2}
+          {...{ alignmentBaseline: "central", textAnchor: "end", rotation: 0 }}
+          text={"TEST"}
+          animated={false}
+          d={d}
+        />
+      </svg>,
+    );
+
+    const path = unNullify(container.querySelector("path"), `path was null`);
+    expect(path).not.toBeNull();
+    expect(path.getAttribute("d")).toBe(d);
+  });
+
+  test("renders an animated label element that uses transform to position", () => {
+    render(
+      <svg>
+        <BaseLabel
+          x={2}
+          y={2}
+          {...{ alignmentBaseline: "central", textAnchor: "end", rotation: 0 }}
+          text={"TEST"}
+          animated={true}
+        />
+      </svg>,
+    );
+    const textEl = screen.getByText("TEST");
+    expect(textEl.tagName.toLowerCase()).toBe("text");
+    expect(textEl.getAttribute("transform")).toBe("translate(2,2) rotate(0)");
+  });
+  test("renders an animated label element an alignment line", () => {
+    const d =
+      "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30Q 90,60 50,90 Q 10,60 10,30 z";
+    const { container } = render(
+      <svg>
+        <BaseLabel
+          x={2}
+          y={2}
+          {...{ alignmentBaseline: "central", textAnchor: "end", rotation: 0 }}
+          text={"TEST"}
+          animated={true}
+          d={d}
+        />
+      </svg>,
+    );
+
+    const path = unNullify(container.querySelector("path"), `path was null`);
+    expect(path).not.toBeNull();
+    expect(path.getAttribute("d")).toBe(d);
+  });
+});

package/src/tests/shapes/rectangle.test.tsx

@@ -0,0 +1,67 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  BaseRectangle,
+  CenteredRectangle,
+} from "../../components/baubles/shapes";
+
+describe("BaseRectangle", () => {
+  test("renders an SVG rect which is centered and has the right attributes", () => {
+    render(
+      <svg>
+        <CenteredRectangle
+          x={2}
+          y={2}
+          {...{ width: 2, height: 3, "data-testid": "rect" }}
+          animated={false}
+        />
+      </svg>,
+    );
+
+    const rect = screen.getByTestId("rect");
+    // const circle = container.querySelector("circle");
+
+    // expect(rect).toBeInTheDocument();
+    expect(rect.getAttribute("x")).toBe("1");
+    expect(rect.getAttribute("y")).toBe("0.5");
+    expect(rect.getAttribute("width")).toBe("2");
+    expect(rect.getAttribute("height")).toBe("3");
+  });
+
+  test("renders a rect which is not centered and has the right attributes", () => {
+    render(
+      <svg>
+        <BaseRectangle
+          x={2}
+          y={2}
+          {...{ width: 2, height: 3, "data-testid": "rect" }}
+          animated={false}
+        />
+      </svg>,
+    );
+
+    const rect = screen.getByTestId("rect");
+    expect(rect.getAttribute("x")).toBe("2");
+    expect(rect.getAttribute("y")).toBe("2");
+    expect(rect.getAttribute("width")).toBe("2");
+    expect(rect.getAttribute("height")).toBe("3");
+  });
+  test("renders an animated rect which is centered and has the right attributes", () => {
+    render(
+      <svg>
+        <BaseRectangle
+          x={2}
+          y={2}
+          {...{ width: 2, height: 3, "data-testid": "rect" }}
+          animated={true}
+        />
+      </svg>,
+    );
+
+    const rect = screen.getByTestId("rect");
+    expect(rect.getAttribute("x")).toBe("2");
+    expect(rect.getAttribute("y")).toBe("2");
+    expect(rect.getAttribute("width")).toBe("2");
+    expect(rect.getAttribute("height")).toBe("3");
+  });
+});

package/src/tests/shapes/types.ts

@@ -0,0 +1 @@
+export type WithTestId<T> = T & { "data-testid"?: string };

package/src/utils.ts

@@ -0,0 +1,57 @@
+import {timeParse, timeFormat} from "d3-time-format";
+
+//https://stackoverflow.com/questions/29400171/how-do-i-convert-a-decimal-year-value-into-a-date-in-javascript
+/**
+ * Helper function to determine if the provided year is a leap year
+ * @param year
+ * @return {boolean}
+ */
+export function leapYear(year:number):boolean {
+    return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
+}
+
+/**
+ * A function which converts a decimal float into a date object
+ * @param decimalDate
+ * @return {Date}
+ */
+export function decimalToDate(decimal:number):Date{
+    const year = Math.trunc(decimal);
+    const totalNumberOfDays = leapYear(year)? 366:365;
+    const day = Math.round(((decimal-year)*totalNumberOfDays));
+    const date = timeParse("%Y-%j")(`${year}-${day}`)
+    // notNull(date,`Could not convert ${decimal} to date tried (year:${year} - day: ${day})`)
+    return unNullify(date,`Could not convert ${decimal} to date tried (year:${year} - day: ${day})`);
+}
+
+/**
+ * A function that converts a date into a decimal.
+ * @param date
+ * @return {number}
+ */
+export function dateToDecimal(date:Date){
+    const year = parseInt(timeFormat("%Y")(date));
+    const day = parseInt(timeFormat("%j")(date));
+    const totalNumberOfDays = leapYear(year)? 366:365;
+    return year+day/totalNumberOfDays
+}
+export function panic(message: string): never { throw new Error(message); }
+
+
+export function u<T>(x: T | undefined): NonNullable<T> {
+  if (x === undefined) {
+    throw new Error('internal bug! unhandled undefined');
+  }
+  return x as NonNullable<T>;
+}
+
+
+export function notNull<T>(x: T,message:string): asserts x is NonNullable<T> {
+  if (x === undefined) throw new Error(message);
+}
+
+export function unNullify<T>(x: T,message:string):  NonNullable<T> {
+  if (x === null) throw new Error(message);
+  return x as NonNullable<T>
+}
+

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@figtreejs/typescript-config/vite.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true,
+    "noUncheckedIndexedAccess": false,
+    "jsx": "react-jsx",
+    "types": ["vitest/globals"], // gives types for describe/test/expect
+    "lib": ["ES2020", "DOM", "DOM.Iterable"] // DOM types for `document`
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "*.js", "*.ts"] // /src files and config files
+}

package/vite.config.ts

@@ -0,0 +1,34 @@
+import dts from 'vite-plugin-dts'
+import packageJson from "./package.json";
+import { defineConfig } from 'vitest/config';
+
+import react from '@vitejs/plugin-react';
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(),dts({ rollupTypes: true })],
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+     name: packageJson.name, // used only for UMD/IIFE
+      formats: ['es', 'cjs'], // add 'umd' only if you need it
+      fileName: (format) => (format === 'es' ? 'index.mjs' : `index.${format}`)
+    },
+    rollupOptions: {
+      // mark peer deps external to avoid bundling react, etc.
+      external: ['react', 'react-dom','react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM' //react jsx runtime?
+        }
+      }
+    }
+  },
+   test: {
+    globals: true,
+    environment: 'jsdom',          // makes `document` available at runtime
+    include: ['src/**/*.{test,spec}.{ts,tsx}'],
+    // setupFiles: ['./vitest.setup.ts'], // optional
+  },
+});
+

package/vitetest.config.ts

@@ -0,0 +1,11 @@
+
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',          // makes `document` available at runtime
+    include: ['src/**/*.{test,spec}.{ts,tsx}'],
+    // setupFiles: ['./vitest.setup.ts'], // optional
+  },
+});