@figtreejs/core 0.0.1-alpha.0

package/src/tests/baubles/branch-labels.test.tsx

@@ -0,0 +1,103 @@
+import { describe, test } from "vitest";
+import { render } from "@testing-library/react";
+import { ImmutableTree } from "../../evo";
+import { FigTree } from "../../components";
+import { polarLayout, radialLayout, rectangularLayout } from "../../layouts";
+import { Branches, BranchLabels } from "../../bauble-makers/makers";
+
+const tree = ImmutableTree.fromNewick("((A:1,B:1):2,C:1);");
+
+describe("Branch labels", () => {
+  test("renders a tree node labels", () => {
+    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" } }),
+            BranchLabels({ text: "Label!" }),
+          ]}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+  });
+  test("renders a tree with aligned Node labels and a function for text", () => {
+    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" } }),
+            BranchLabels({ text: (n) => `${n.number}` }),
+          ]}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+  });
+  test("renders a tree branchlabels - polar", () => {
+    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={polarLayout}
+          baubles={[
+            Branches({ attrs: { strokeWidth: 2, stroke: "black" } }),
+            BranchLabels({ text: "Label!" }),
+          ]}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+  });
+  test("renders a tree node labels in radial layout", () => {
+    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={radialLayout}
+          baubles={[
+            Branches({ attrs: { strokeWidth: 2, stroke: "black" } }),
+            BranchLabels({ text: "Label!" }),
+          ]}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+  });
+});

package/src/tests/baubles/label.svg

@@ -0,0 +1,131 @@
+ <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="2"
+              />
+              <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="2"
+              />
+              <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="2"
+              />
+              <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="2"
+              />
+              <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="2"
+              />
+            </g>
+            <g
+              class="node-label-layer"
+            >
+              <g>
+                <text
+                  alignment-baseline="bottom"
+                  text="Label!"
+                  text-anchor="end"
+                  transform="translate(-6,231.5) rotate(0)"
+                >
+                  Label!
+                </text>
+                <path
+                  d="M0 237.5L0 237.5"
+                  stroke="grey"
+                  stroke-dasharray="2"
+                  stroke-width="1"
+                />
+              </g>
+              <g>
+                <text
+                  alignment-baseline="hanging"
+                  text="Label!"
+                  text-anchor="end"
+                  transform="translate(247.33333333333331,101) rotate(0)"
+                >
+                  Label!
+                </text>
+                <path
+                  d="M253.33333333333331 95L253.33333333333331 95"
+                  stroke="grey"
+                  stroke-dasharray="2"
+                  stroke-width="1"
+                />
+              </g>
+              <g>
+                <text
+                  alignment-baseline="middle"
+                  text="Label!"
+                  text-anchor="start"
+                  transform="translate(386,0) rotate(0)"
+                >
+                  Label!
+                </text>
+                <path
+                  d="M380 0L380 0"
+                  stroke="grey"
+                  stroke-dasharray="2"
+                  stroke-width="1"
+                />
+              </g>
+              <g>
+                <text
+                  alignment-baseline="middle"
+                  text="Label!"
+                  text-anchor="start"
+                  transform="translate(386,190) rotate(0)"
+                >
+                  Label!
+                </text>
+                <path
+                  d="M380 190L380 190"
+                  stroke="grey"
+                  stroke-dasharray="2"
+                  stroke-width="1"
+                />
+              </g>
+              <g>
+                <text
+                  alignment-baseline="middle"
+                  text="Label!"
+                  text-anchor="start"
+                  transform="translate(132.66666666666666,380) rotate(0)"
+                >
+                  Label!
+                </text>
+                <path
+                  d="M126.66666666666666 380L126.66666666666666 380"
+                  stroke="grey"
+                  stroke-dasharray="2"
+                  stroke-width="1"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>

package/src/tests/baubles/node-labels.test.tsx

@@ -0,0 +1,126 @@
+import { describe, test } from "vitest";
+import { render } from "@testing-library/react";
+import { ImmutableTree } from "../../evo";
+import { FigTree } from "../../components";
+import { polarLayout, radialLayout, rectangularLayout } from "../../layouts";
+import { Branches, NodeLabels } from "../../bauble-makers/makers";
+
+const tree = ImmutableTree.fromNewick("((A:1,B:1):2,C:1);");
+
+describe("Node labels", () => {
+  test("renders a tree node labels", () => {
+    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" } }),
+            NodeLabels({ text: "Label!" }),
+          ]}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+  });
+  test("renders a tree with aligned Node labels and a function for text", () => {
+    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" } }),
+            NodeLabels({ text: (n) => `${n.number}`, aligned: true }),
+          ]}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+  });
+  test("renders a tree node labels - polar", () => {
+    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={polarLayout}
+          baubles={[
+            Branches({ attrs: { strokeWidth: 2, stroke: "black" } }),
+            NodeLabels({ text: "Label!" }),
+          ]}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+  });
+  test("renders a tree with aligned Node labels and a function for text - polar", () => {
+    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={polarLayout}
+          baubles={[
+            Branches({ attrs: { strokeWidth: 2, stroke: "black" } }),
+            NodeLabels({ text: (n) => `${n.number}`, aligned: true }),
+          ]}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+  });
+  test("renders a tree node labels in radial layout", () => {
+    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={radialLayout}
+          baubles={[
+            Branches({ attrs: { strokeWidth: 2, stroke: "black" } }),
+            NodeLabels({ text: "Label!" }),
+          ]}
+        />
+      </svg>,
+    );
+    //fig.debug();
+    expect(fig).toMatchSnapshot();
+  });
+});