Tskit: Node colours not appearing Tree.draw SVG

[daniel-goldstein]

When I use the node_colours option on Tree.draw, the resulting SVG contains the the appropriate fill="blue" or fill="red" but are not being drawn correctly, seen below.

@hyanwong Do you have an idea of what's happening here?

[hyanwong]

Hmm, I think "style" overrides "fill". Is there a style="fill: black" somewhere?

[daniel-goldstein]

Ah yes there is a fill black for circle in the style. Here's the full SVG

<svg baseProfile="full" height="200" version="1.1" width="200"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <style type="text/css">
            <![CDATA[.axis {font-weight: bold}.tree, .axis {font-size: 14px; text-anchor:middle;}.edge {stroke: black; fill: none}.node > circle {r: 3px; fill: black; stroke: none}.tree text {dominant-baseline: middle}.mut > text.lft {transform: translateX(0.5em); text-anchor: start}.mut > text.rgt {transform: translateX(-0.5em); text-anchor: end}.root > text {transform: translateY(-0.8em)}.leaf > text {transform: translateY(1em)}.node > text.lft {transform: translate(0.5em, -0.5em); text-anchor: start}.node > text.rgt {transform: translate(-0.5em, -0.5em); text-anchor: end}.mut {fill: red; font-style: italic}]]>
        </style>
    </defs>
    <g class="tree t0">
        <g class="node n2 root" transform="translate(100.0 30.0)">
            <g class="leaf node n0 p2 sample" transform="translate(-30.0 140.0)">
                <path class="edge" d="M 0 0 V -140.0 H 30.0" />
                <circle cx="0" cy="0" fill="blue" r="1" />
                <text>0</text>
            </g>
            <g class="leaf node n1 p2 sample" transform="translate(30.0 140.0)">
                <path class="edge" d="M 0 0 V -140.0 H -30.0" />
                <circle cx="0" cy="0" fill="red" r="1" />
                <text>1</text>
            </g>
            <circle cx="0" cy="0" r="1" />
            <text>2</text>
        </g>
    </g>
</svg>

[hyanwong]

Good catch. We should change that I guess. I'll open a PR.

[hyanwong]

So I'm unclear if we should change the CSS in the <style> tag or change the fill=XXX tag in the SVG. I opted for setting the entire thing using a single style spec at the top of the page as this means we don't need to keep repeating the colours etc for all the tags.

I guess my preference would be that if node_colours is set, it adds style="fill: MY_COLOUR;" to the symbol, rather than setting fill="MY_COLOUR". Do you have an opinion here @benjeffery ?

[hyanwong]

@daniel-goldstein Can you see if #626 works for you now?

[benjeffery]

Prefer style= as then everything is following CSS rules only.

[daniel-goldstein]

@hyanwong Works for me now!

[hyanwong]

Great, I just need to get the tests working again then.