Radial layout in Angular 11

[IgnatG]

Hello

I'm trying to load the library in Angular 11. I've based my code based on the solution from this ticket #129

 import { phylotree } from "phylotree";

 var example_tree = "(((EELA:0.150276,CONGERA:0.213019):0.230956,..."
 let tree = new phylotree(example_tree);
 const height = 900; 
 const width = 900;
 let svg = document.createElement('div'); 
 svg.setAttribute('id', 'tree_display');
 document.body.appendChild(svg);

 tree.render(
      '#tree_display', {
      height: height,
      width: width,
      'left-right-spacing': 'fit-to-size',
      'top-bottom-spacing': 'fit-to-size'
    }); 

However when I'm trying to change the layout to radial, nothing happens

 tree.render(
      '#tree_display', {
      height: height,
      width: width,
      'left-right-spacing': 'fit-to-size',
      'top-bottom-spacing': 'fit-to-size',
      'radial': true
    }); 

Is there a different way to load it?

[stevenweaver]

Dear @IgnatG,

Thank you for reporting this issue. I can confirm there is a bug. Looking into it now.

Best, Steven

[stevenweaver]

Dear @IgnatG,

The issue should be resolved in 1.0.0-alpha.27.

Best, Steven

[IgnatG]

Thanks @stevenweaver I'm still having the problem though. actually 2 problems:

1. Nothing seems to be rendered on the UI. In the console I'm able to see that the tree variable has content (I used console.log(tree)) - see the output below

   

   Inside the HTML I can see that a div was created (having the id= tree_display). But this is empty

2. I ran a console.log(this.radial()) - inside node_modules/phylotree, and it returns false all the time - no matter what I put in radial attribute

I'm using Angular 11 "D3": v6 (I've tried v5 and v4 as well but nothing changed) "phylotree": 1.0.0-alpha.27 "underscore": "^1.13.1"

Am I missing anything?

[IgnatG]

Dear @stevenweaver

I've fixed the problem. It was a mistake on my end. I was using radial: true to get the tree to display in a radial layout. However, the correct syntax is is-radial: true

tree.render({
 container: '#tree_display',
 height: 900,
 width: 900,
 'left-right-spacing': 'fit-to-size',
 'top-bottom-spacing': 'fit-to-size',
 'is-radial': true
});

I think this ticket can be closed now.

Thank you for your help!