Change Style to tree

[neriaaa46]

I try to check if this library appropriate to my needs I use newick string and get nice tree !

but I want to change the style:
the node of the tree get default color of pink and blue border - can I change the pink color or better hide the circle of node ? the leaves of the tree get default color of blue and blue border - can I delete the blue border ? the root get yellow color - can I change the yellow color or better hide the circle of node ?

I use glyphs to separate the data to groups, leaves can belong to more 5 or 6 groups, but the rectangles position on the label and hide the label, I want some margin between the rectangles to the leaves label, it is possible ?

[lipme]

Hi, Thanks for using vue-phylogram. For changing styles, for now, it's only possible by using the node style (https://github.com/lipme/vue-phylogram#node-styles). However, I'm adding a new option to define default colors. It will be ready in two weeks I think.

Glyphs overflow is clearly a bug, I'm going to fix it as soon as possible.

Ludo

[lipme]

Hi,

The last version of vue-phylogram now allows to specify default fill and outline colors for nodes and branches. See the doc for more details. Also, you have a demo here to see all the features of vue-phylogram : https://lipme.github.io/vue-phylogram/

Ludo

[neriaaa46]

Hi, thank you for your help !!!

Ok, I will wait for this - "Glyphs overflow is clearly a bug, I'm going to fix it as soon as possible."

I have more issues, you send me a demo that i can check all function of the tree, I see there is some function that not work to me:

1 - when i hover on node or leaf nothing happens

2 - when I click on a node or leaf nothing happens, in the demo I see the branch and label color change of the selected nodes.

in addition I check the display-inner-nodes="false", display-inner-labels="false" props and this Functionality not work too.

I am using nuxt 2, and the input string is newick - can you explain to me how to use these events ?

‫בתאריך יום ה׳, 3 בנוב׳ 2022 ב-17:30 מאת ‪lipme‬‏ @.*** ‬‏>:‬

Hi,

The last version of vue-phylogram now allows to specify default fill and outline colors for nodes and branches. See the doc for more details. Also, you have a demo here to see all the features of vue-phylogram : https://lipme.github.io/vue-phylogram/

Ludo

— Reply to this email directly, view it on GitHub https://github.com/lipme/vue-phylogram/issues/4#issuecomment-1302287519, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS55QO7N2WKYCBAOWEOTJ3DWGPLB5ANCNFSM6AAAAAARMXI674 . You are receiving this because you authored the thread.Message ID: @.***>

[lipme]

Hi,

I have just tested the site with chrome and firefox and the hover (node size increases) and click (selection of the node) events look ok. Which browser do you use?

I think, it lacks the ":" before your props. Try :

:display-inner-nodes="false"

and

:display-inner-labels="false"

[neriaaa46]

ן i am use chrome, and i use in ":" in the props. Can i show u in zoom ?

בתאריך יום שני, 7 בנובמבר 2022, מאת lipme @.***>:

Hi,

I have just tested the site with chrome and firefox and the hover (node size increases) and click (selection of the node) events look ok. Which browser do you use?

I think, it lacks the ":" before your props. Try :

:display-inner-nodes="false"

and

:display-inner-labels="false"

— Reply to this email directly, view it on GitHub https://github.com/lipme/vue-phylogram/issues/4#issuecomment-1305511593, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS55QO34TVMOC2C6H63PTOLWHDWIFANCNFSM6AAAAAARMXI674 . You are receiving this because you authored the thread.Message ID: @.***>

[lipme]

I prefer not to use Zoom to fix issues :-).

Can you tell me if you found bugs in the demo website (https://lipme.github.io/vue-phylogram/) or in your own code ? If the bugs appear only in the app that you coded, please copy paste the code that involves vue-phylogram so that I can test it.

[neriaaa46]

The issue is in my project, I don't have options to click on nodes or leaves to see the path of children's nodes and color them. I see that options in the demo, to use these options I should use some props or some events ? or something else ? or just add the newick string props to the components ?

i use newick string and use nuxt 2 project

‫בתאריך יום ג׳, 8 בנוב׳ 2022 ב-8:49 מאת ‪lipme‬‏ @.*** ‬‏>:‬

Closed #4 https://github.com/lipme/vue-phylogram/issues/4 as completed via 9494934 https://github.com/lipme/vue-phylogram/commit/94949340425b3e97e242fc6d1debd60db408bca2 .

— Reply to this email directly, view it on GitHub https://github.com/lipme/vue-phylogram/issues/4#event-7759394742, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS55QO3XCX5JBFQQJE7OT43WHHZXVANCNFSM6AAAAAARMXI674 . You are receiving this because you authored the thread.Message ID: @.***>

[neriaaa46]

example of my code and newick tree

‫בתאריך יום ג׳, 8 בנוב׳ 2022 ב-10:38 מאת נריה סיון @.*** ‬‏>:‬

The issue is in my project, I don't have options to click on nodes or leaves to see the path of children's nodes and color them. I see that options in the demo, to use these options I should use some props or some events ? or something else ? or just add the newick string props to the components ?

i use newick string and use nuxt 2 project

‫בתאריך יום ג׳, 8 בנוב׳ 2022 ב-8:49 מאת ‪lipme‬‏ <‪ @.***‬‏>:‬

Closed #4 https://github.com/lipme/vue-phylogram/issues/4 as completed via 9494934 https://github.com/lipme/vue-phylogram/commit/94949340425b3e97e242fc6d1debd60db408bca2 .

— Reply to this email directly, view it on GitHub https://github.com/lipme/vue-phylogram/issues/4#event-7759394742, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS55QO3XCX5JBFQQJE7OT43WHHZXVANCNFSM6AAAAAARMXI674 . You are receiving this because you authored the thread.Message ID: @.***>

[lipme]

Ok, it seems that nuxt misses some css...

Add

import 'vue-phylogram/dist/vue-phylogram.css'

at the beginning of the script part, it should fix the problem.

To handle events (click, hover, etc...), please read this comment : https://github.com/lipme/vue-phylogram/issues/5#issuecomment-1306231573

[neriaaa46]

ok, it helps !! There are events like click and hover.

last question: I see that you can hide some nodes or paths by clicking. How can I do that ?

‫בתאריך יום ג׳, 8 בנוב׳ 2022 ב-18:55 מאת ‪lipme‬‏ @.*** ‬‏>:‬

Ok, it seems that nuxt misses some css...

Add

import 'vue-phylogram/dist/vue-phylogram.css'

at the beginning of the script part, it should fix the problem.

To handle events (click, hover, etc...), please read this comment :

5 (comment)

https://github.com/lipme/vue-phylogram/issues/5#issuecomment-1306231573

— Reply to this email directly, view it on GitHub https://github.com/lipme/vue-phylogram/issues/4#issuecomment-1307526420, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS55QO5ZI5HODFE6ALPTCN3WHKAWNANCNFSM6AAAAAARMXI674 . You are receiving this because you authored the thread.Message ID: @.***>

[neriaaa46]

Can I choose the label color for the selected nodes by click ? In my project I color 2 groups of leaves by positive - green and negative by red, when i click on a node the font labels of the leaves change to bold but the color is red. Can I choose a different color ?

‫בתאריך יום ג׳, 8 בנוב׳ 2022 ב-19:41 מאת נריה סיון @.*** ‬‏>:‬

ok, it helps !! There are events like click and hover.

last question: I see that you can hide some nodes or paths by clicking. How can I do that ?

‫בתאריך יום ג׳, 8 בנוב׳ 2022 ב-18:55 מאת ‪lipme‬‏ <‪ @.***‬‏>:‬

Ok, it seems that nuxt misses some css...

Add

import 'vue-phylogram/dist/vue-phylogram.css'

at the beginning of the script part, it should fix the problem.

To handle events (click, hover, etc...), please read this comment :

5 (comment)

https://github.com/lipme/vue-phylogram/issues/5#issuecomment-1306231573

— Reply to this email directly, view it on GitHub https://github.com/lipme/vue-phylogram/issues/4#issuecomment-1307526420, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS55QO5ZI5HODFE6ALPTCN3WHKAWNANCNFSM6AAAAAARMXI674 . You are receiving this because you authored the thread.Message ID: @.***>

[lipme]

You can collapse nodes by indicating nodes in the props : https://github.com/lipme/vue-phylogram#collapse-nodes-from-props

Considering your last question, the default color for labels (selected or not) are now configurable in the defaultColors prop in the last version (3.3.0) of vue-phylogram.