label separator `replace` adds a newline?

[yo8192]

In 1.16.1, it seems that label separator replace is adds a newline when it shouldn't?

The SVG in my editor (or if I open directly in my browser) looks like:

As you can see the labels are too high, on top of the arrows, which I did for now as a work around.

I have config like this for my labels:

  BatteryDischargeLabel:
    dataRef: "Battery Discharge Power"
    label:
      separator: "replace"
      units: "watt"
      decimalPoints: 1

Which gives in in Grafana Flow Panel something like:

As you can see the labels are shifted down, I suspect because an extra newline char is there where it shouldn't.

[andymchugh]

There's lots of use of 'replace' in the examples and provisioned dashboards for testing and they all work correctly; and there's been no change wrt how labels are positioned. I think to move forward I'd need a minimal svg + yaml that demonstrates the problem. Can you attach those to the issue?

[yo8192]

It seems to be an issue with the formatting of the SVG source text.

If I copy and paste the SVG source text exactly as exported from draw.io, i.e. compact with no formatting, then my text labels are in the right positions.

However if I load the SVG in VSCode and do a CTRL+SHIFT+I to format it, and then copy and paste the formatted SVG source text to Flow Panel, then the labels get shifted.

Looking at one label cell in the formatted SVG file I see:

                                                <div
                                                    style="display: inline-block; font-size: 40px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">3000.2
                                                    W</div>

and if I remove the label: for that cell, I see Flow Panel displays the text of that cell on two lines.

If I open the same SVG directly in my browser the text is displayed on one line, even if the source was over two lines.

I've attached the files demonstrating this:

• YAML config: flow_panel_config.yaml.txt
• SVG file, which should display OK here in github, but the text should shit down when loaded in Flow Panel:

[andymchugh]

Reading the above you seem to be saying the VSCode svg formatter is the problem. As a workflow I'd expect you to:

• edit in draw.io -> save as svg (or if you want extra stuff like flow animations then export as svg)
• from vscode -> copy paste that blob straight into the panel (assuming you are not pulling via urls)

vscode is great for this copy/paste and yaml editing, but there's no reason to format the svg there. From what I've seen of different formatters, they do often have an impact on the final image. For general troubleshooting though, https://codebeautify.org/svg-formatter-beautifier#google_vignette is quite handy to see / format / tweak.

Can we close this assuming this is a problem with your vscode formatter?

[yo8192]

The trigger seems to be the way the SVG text source is formatted, but I'm not sure that the formatting is wrong and that is the issue.

With the SVG above, if I remove the Flow Panel YAML config the formatting is correct (as it is when I open the file directly in Chrome or Firefox, outside of Grafana/Flow Panel):

However with the Flow Panel YAML config the formatting is incorrect, and the text label cell appears to have been shifted down (rather than having a newline char as I initially thought):

So that makes me think the issue is something that Flow Panel does rather than the SVG file?

[andymchugh]

Thanks. It's to do with the style->whitespace setting. The panel has always changed it to 'pre' which means labels aren't constrained horizontally and I can add a '\n' where a label has a 'cr' separator. But it also means other whitespace is preserved so if the svg has been formatted it's all gonna go awry. I'll have a think about it but for now, not putting it through a formatter will remove the issue.

[andymchugh]

A fix for this is built into 1.16.3. I'll ping when it's published. Thanks for pointing out.

[andymchugh]

1.16.3 has now been published. The example you posted above is fine with it so fingers crossed all formatted svgs will now display correctly. Just reopen if you still have issues.

[yo8192]

Indeed I no longer see the issue in 1.16.3. Thanks for the super quick turn-around!