Using phylotree in vue3

[apollis44]

Hello, I am new to phylotree and am trying to use it with vue3. I tried using the last version and everything seems to be working until I call the render function and gives my container as an input. When I do this, nothing renders and no error appears.

I was able to display a tree using the version 1.0.0-alpha.12 of phylotree but the tree looks like in the linked screenshot.

[stevenweaver]

Dear @apollis44,

This commonly occurs when the CSS is not loaded. If you include something like <link rel='stylesheet' href='https://unpkg.com/phylotree@1.0.0-alpha.12/dist/phylotree.css' /> to your source, it should render correctly.

As for why a later version of phylotree doesn't work, this will require investigation. If you have an error message that you would like to share, it would be helpful.

Best, Steven

[apollis44]

The problem for the later version is that I actually don't have any error and the tree seems to build without any problem.

Here is the code to build the tree:

I thought maybe that "tree_container" had not been created yet when calling render but if I manually select it with d3 and add text in it, it works fine. If you have any idea on why it doesn't work, it would be very useful.

[stevenweaver]

Dear @apollis44,

Here is a full example of a PhyloTree.vue file that can be imported into your project. It uses the latest version of phylotree. Note that rendered_tree.show() returns the svg which can be appended to the DOM, which will make integration with Vue much nicer.

<!-- components/PhyloTree.vue -->
<script setup>
import { onMounted } from 'vue'
import { phylotree } from 'phylotree'
import 'phylotree/dist/phylotree.css';

// Newick test string
let nwk = "(A:0.1,B:0.2,(C:0.3,D:0.4):0.5);";

onMounted(async () => {

  const container = document.getElementById("tree_container");

  if (container) {
    const tree = new phylotree(nwk);
    var rendered_tree = tree.render({
      container: "#tree_container", 
      height: 400,
      width: 400,
      "left-right-spacing": "fit-to-size",
      "top-bottom-spacing": "fit-to-size"
    });

    // Append the SVG directly to the container
    const svg = rendered_tree.show();
    container.appendChild(svg);
  }
});
</script>

<template>
  <div id="tree_container"></div>
</template>

<style scoped>
#tree_container {
  margin-top: 20px;
  min-height: 400px; /* Ensure it has some height */
  width: 550px; /* Ensure it has some width */
}
</style>

Best, Steven

[apollis44]

Thank you, it worked fine