constrain svg arrows for large y lengths

[will-moore]

First attempt to improve arrow layout for example such as https://deploy-preview-78--ome-ngff-validator.netlify.app/?source=https://radosgw.public.os.wwu.de/s2v/P2A_B6_M2.ome.zarr/

Also:

• show a tooltip when you mouseover the arrow itself (not just the label box)
• redraw the arrows on window resize - to prevent misalignment when layout changes
• improve look of the popup: path/name for input & output; css: light text on dark blue background

cc @jo-mueller

[netlify]

✅ Deploy Preview for ome-ngff-validator ready!

Name	Link
🔨 Latest commit	f374326
🔍 Latest deploy log	https://app.netlify.com/projects/ome-ngff-validator/deploys/6a2c0847caf15900089760bf
😎 Deploy Preview	https://deploy-preview-78--ome-ngff-validator.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[will-moore]

I also enabled the coordinateTransform tooltip when you mouseover the Arrows (as well as the label) so for the longer Arrows, you can still see the tooltip, even if you can't find the Arrow label.

[lubianat]

Thanks @will-moore, that looks much better than before.

I wonder if setting a 0.8 alpha on the arrows, or putting the box on top of them (and then adding a .8 alpha) would improve it. It is still a bit busy:

[will-moore]

@lubianat I add the arrows behind all the labels now

[lubianat]

other than the black/red thing, LGTM

[lubianat]

for me the path looks black in the mouseover

[jo-mueller]

@will-moore would it be possible to make the boxes that are now the multiscale groups collapsible and the arrows straight lines?

• Pro: It would make everything a lot cleaner
• Con: It's probably hard to rewire the arrows to point from multiscale group to multiscale group if the thing is collapsed but from coordinate system to another coordinate system if the whole thing is expanded 😬

On second thought, maybe it would not be problematic to leave the scale levels out of the graph entirely? It is not possible to build a scene graph that connects to a particular multiscale, so a scene graph would never include the implicit coordinate system of a particular resolution level. We could highlight the "intrinsic" coordinate system in a particular color, though? Or make the scale level transform graph collapsible/expandable?

[will-moore]

@jo-mueller I'm not sure I understand what you're proposing...

multiscale groups collapsible

you mean s0, s1, s2, s3 should be expandable to show the separate resolutions?

Arrows straight lines

Like this?

leave the scale levels out of the graph entirely

You mean remove s0, s1, s2, s3 or show s0 instead? I think that this gives you less info, and I'm not sure why you'd want that?

a scene graph would never include the implicit coordinate system of a particular resolution level

I think that the implicit coordinate system of a particular resolution level would be a child / leaf of the graph (connected by a scale to the intrinsic coordinateSystem, but we just don't show that level of detail.

We could highlight the "intrinsic" coordinate system in a particular color, though? Or make the scale level transform graph collapsible/expandable?

Are these 2 alternative solutions to the same problem? They seem unrelated?
I guess we could add some graph validation:

• check that the output of all dataset.coordinateTransformations is the same ("intrinsic") coordinateSystem
• check that any multiscale.coordinateTransformations use that "intrinsic" coordinateSystem as their input

This PR is really about fixing / cleaning the current layout. Any extra validation / display of more info etc can come in a follow-up?

[will-moore]

Anything else to do here @jo-mueller?