# \`dot\_ix\`: Toy web app to generate interactive graphs **URL:** \ **Category:** Show and Tell\ **Created:** [July 22, 2023, 10:10am UTC](https://forum.graphviz.org/t/dot-ix-toy-web-app-to-generate-interactive-graphs/1714 "2023-07-22T10:10:50Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![azriel](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/azriel/32/1138_2.png) [@azriel](https://forum.graphviz.org/u/azriel)\ **Post date:** [July 22, 2023, 10:10am UTC](https://forum.graphviz.org/t/dot-ix-toy-web-app-to-generate-interactive-graphs/1714/1 "2023-07-22T10:10:51Z")
Heya, I made this: [https://user-images.githubusercontent.com/2993230/253878816-0729970f-651f-45ef-a986-470f383b8018.mp4](https://user-images.githubusercontent.com/2993230/253878816-0729970f-651f-45ef-a986-470f383b8018.mp4) and here’s some links: - Play with the live version: [https://azriel.im/dot\_ix/](https://azriel.im/dot_ix/) Yes no server! - GitHub repository: [https://github.com/azriel91/dot\_ix](https://github.com/azriel91/dot_ix) The video doesn’t show it, but you can tag nodes with a tag, and when you click on the tag in the tag legend, it highlights the node. It’s very much a hacked together project right now, but I thought people would find it fun. enjoy ✌ ---
**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\ **Post date:** [July 24, 2023, 5:15pm UTC](https://forum.graphviz.org/t/dot-ix-toy-web-app-to-generate-interactive-graphs/1714/2 "2023-07-24T17:15:26Z")
Very nice. It helped me ses some of the opportunities and challenges of interactive Graphviz. thanks ---
**Author:** ![azriel](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/azriel/32/1138_2.png) [@azriel](https://forum.graphviz.org/u/azriel)\ **Post date:** [July 24, 2023, 7:20pm UTC](https://forum.graphviz.org/t/dot-ix-toy-web-app-to-generate-interactive-graphs/1714/3 "2023-07-24T19:20:34Z")
Thank you 🙇‍♂️! I intend to use it to visualize automation processes – when a step is running, style it blue + animate it; and one can click on the node to bring up more information / show actions that can be done – [example animation](https://peace.mk/book/learning_material/empathetic_code_design/output_and_presentation.html#web-page). ---
**Author:** ![bbx999](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@bbx999](https://forum.graphviz.org/u/bbx999)\ **Post date:** [July 25, 2023, 1:18am UTC](https://forum.graphviz.org/t/dot-ix-toy-web-app-to-generate-interactive-graphs/1714/4 "2023-07-25T01:18:31Z")
Is the node tagging accomplished by embedding the tag name in the css classes? Or is there some other mechanism? ---
**Author:** ![azriel](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/azriel/32/1138_2.png) [@azriel](https://forum.graphviz.org/u/azriel)\ **Post date:** [July 25, 2023, 9:13am UTC](https://forum.graphviz.org/t/dot-ix-toy-web-app-to-generate-interactive-graphs/1714/5 "2023-07-25T09:13:01Z")
Yeap, I’m using [`tailwind`](https://tailwindcss.com/), and for the node tagging, it specifically needs: 1. The tags to appear in the `` _before_ the nodes (or clusters) that need to be highlighted. 2. Make tag nodes _focusable_. 3. Add this css class to tag clusters: `peer/{tag_id}` 4. For the nodes that are tagged, add classes to style them when their sibling peer is _focused_. 5. Use the tailwind non-production JS library to process elements on the page to produce the necessary CSS. ---
**Author:** ![bbx999](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@bbx999](https://forum.graphviz.org/u/bbx999)\ **Post date:** [September 8, 2023, 7:34am UTC](https://forum.graphviz.org/t/dot-ix-toy-web-app-to-generate-interactive-graphs/1714/6 "2023-09-08T07:34:43Z")
@azriel That seems very complicated and unreliable… making me think there has go to be a better way? Are you starting with graphviz syntax? What if you started with a JSON model that compiled to graphviz syntax in a more deterministic way where you could then know how graphviz would give IDs to certain elements in the svg, and then use some JS to post-process the graphviz svg output (using the original JSON model) to add the interactivity you want? JS would also give you more options for interactivity than css alone. What do you think? ---
**Author:** ![azriel](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/azriel/32/1138_2.png) [@azriel](https://forum.graphviz.org/u/azriel)\ **Post date:** [September 8, 2023, 8:55am UTC](https://forum.graphviz.org/t/dot-ix-toy-web-app-to-generate-interactive-graphs/1714/7 "2023-09-08T08:55:30Z")
> That seems very complicated and unreliable… making me think there has go to be a better way? At least in computing, we really need more information than “seems”, because what you describe, is _very close_ what I’m doing (just different markup / language – yaml + rust instead of json + js). See the video in the first post – the IDs are deterministic from the input yaml, and (minimal) post processing is done – only adding tab index. Also, I try to aim for minimal javascript, as that means: - interactivity doesn’t need the client to have javascript enabled - programmatic access of the information is easier – javascript isn’t run to augment more information, so http clients can just run and have the same info, instead of “ahh this is only useful in a browser”. ---
**Author:** ![bbx999](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@bbx999](https://forum.graphviz.org/u/bbx999)\ **Post date:** [September 8, 2023, 10:58am UTC](https://forum.graphviz.org/t/dot-ix-toy-web-app-to-generate-interactive-graphs/1714/8 "2023-09-08T10:58:41Z")
My apologies. I used the word “seems” to indicate that my understanding may be incorrect; I did not mean for it to be a vague and thus unhelpful critique. Honestly, I had a hard time following your description and the two “red flags” in my mind were that it seemed to rely on string replacements and you said “It doesn’t always work”. 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. What if that changes? and how many more examples of little things like that does one need to keep in mind to make progress in adding interactivity? I don’t know your specific use case, but I thought I’d share some thoughts in case they were helpful in pointing in a better direction (if there even is one). I may well have misunderstood. I have struggled with adding interactivity to graphviz diagrams in my own app, so my comments above were my own reservations about adopting a similar approach. Our use cases might be very different though as mine is a web app, so I take the browser for granted. Also, you mention minimal javascript / not relying on a browser, but it seems you do use some javascript and css; if so, what environment is your client using to access this feature that supports minimal javascript and css and is not a browser? Also, 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 (as I believe interactivity was JS’s primary purpose and not the main purpose of CSS). So you might end up with more JS anyways, in which case the code might be more complicated having some things achieved via complex css rules and others via JS. Also, you mention that you are doing something very close to what I suggested, which I didn’t notice at first, but did now. In that case, why not do more with Rust and less with CSS? Is the way Rust interacts with the svg just as capable as JS interacting with the svg via the DOM? Or is it more like string manipulation? My comments are meant to be collaborative, my apologies again if they come off as critical. ---
**Author:** ![azriel](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/azriel/32/1138_2.png) [@azriel](https://forum.graphviz.org/u/azriel)\ **Post date:** [September 9, 2023, 2:38am UTC](https://forum.graphviz.org/t/dot-ix-toy-web-app-to-generate-interactive-graphs/1714/9 "2023-09-09T02:38:35Z")
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: 1. Let’s make a diagram generator that helps to communicate information clearly 2. It should be easy to “just use”, both through typing by hand and programmatically 3. It should be robust – remove / reduce opportunity for errors, or handle them gracefully 4. It should be predictable With that in mind (and quotations out of order): > minimal javascript / not relying on a browser For rendering a nice diagram, it would be really nice from a user of this tool, to be able to go: ```html ``` and have it render! Though having things in an `` 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: ```html ``` with `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”). > what environment is your client using to access this feature that supports minimal javascript and css and is not a browser? It’s… it’s… a browser 😬! But from a web page that I don’t control. This would be: - users who turn off javascript in their browser - users who `curl` for the SVG, then push it somewhere else – don’t require them to also ship the javascript / CSS, because they may only be allowed to upload SVGs. - other website developers who don’t want to include random javascript on their page – saves loading time. > it seems you do use some javascript and css 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. - 100% server side rendering – Server logic renders and styles the whole graph. > 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. Peace ✌