Heya, apology accepted, and I feel I should say sorry as well – my last post feels rather cold.
So, let’s try and clarify, I’ll start with some goals:
Let’s make a diagram generator that helps to communicate information clearly
Showing layers of detail, highlighting relevant information using colour.
It should be easy to “just use”, both through typing by hand and programmatically
It should be robust – remove / reduce opportunity for errors, or handle them gracefully
It should be predictable
With that in mind (and quotations out of order):
For rendering a nice diagram, it would be really nice from a user of this tool, to be able to go:
<img src="http://dot_ix/?src=the_diagram_source" />
and have it render!
Though having things in an
<img /> tag means, we lose the fonts / interactivity, even if it’s CSS only – I only realized this while typing this answer.
What I’ve just discovered is, having:
<object data="diagram.svg" type="image/svg+xml"></object>
diagram.svg containing both the SVG and the styles inlined into the SVG, you can get the interactivity through one
GET request! (easy to “just use”).
It’s… it’s… a browser ! But from a web page that I don’t control. This would be:
- users who
I do use some JS / WASM for that app; I think the use cases I want to support for both myself and others are:
100% client side rendering – client side logic renders and styles the whole graph.
This is good for people with poor internet connections, or when you have to turn off mobile data. At least if you load the page once, you can save it. Browser storage would be very useful here as well.
100% server side rendering – Server logic renders and styles the whole graph.
Good for scripts / other websites to call as a service.
using CSS for interactivity seems like a road where you will probably hit a dead end where the behavior you want is only available in JS and not CSS
why not do more with Rust and less with CSS?
I conclude that you speak from a position of experience, and at least in web development, I come from a position of inexperience (and don’t necessarily know what’s a bad idea).
I suspect I will end up doing more with Rust/JS – e.g. click on a node in the SVG, and show more details in a different element somewhere else on the page. And that really feels like a case not for CSS.
string replacements + little things
Definitely a red flag to me in general , and I’d certainly want to parse and edit structured values in memory than using string replacements in an unguaranteed format; just haven’t gotten there yet. Indeed, at this stage it’s still a toy project, and doesn’t satisfy the robustness criteria.
It doesn’t always work
If memory serves me right, this one’s to do with CSS combinator rules conflicting with each other. The generated SVG and stylesheet are consistent (robustness), but because the behaviour is:
- CSS selector: If a previous sibling is focused, I should have this styling
- Node C has a previous sibling A, and previous sibling B.
- Node C has two CSS selectors, “style me as green when A is focused”, “style me as green when B is focused”
- The unstated rules are “don’t style me as green when A is unfocused” (and same for B)
- The engine somehow mixes the selectors and styles C half on (the stroke is green) and half off (the fill is not green), when I want it to be green for both the stroke and fill when either A or B are focused.
It really may be impossible to solve via CSS selector rules; I just hope that it is possible.
It also looks like it relies on implicit knowledge on things outside of your control, like the need to specify tag-clusters above node clusters to achieve the desired result.
Yeap this one needs some internal knowledge; a robust way would be to parse the SVG and re-outputing the SVG nodes in a certain order (based on ID / class). There’s also an idea to generate separate SVGs, then combine them (offsetting all the coordinates), which I may end up doing long term.
My comments are meant to be collaborative, my apologies again if they come off as critical.
Truth be told, your questions have piqued my motivation to pick this up again , so thank you.