Add optional "class" attribute to nodes and links - improved styling and interactivity

In the discussion of the color attribute in the README, you state “However, I haven’t found the balance between ease of use and expressiveness yet.” - I propose adding an optional “class” attribute to allow users to specify domain-specific CSS classes for specific nodes and links. This will allow for maximum expressiveness through the use of CSS when embedding the results in HTML without overwhelming the smcat API with numerous additional properties. This will also allow JavaScript to locate specific nodes by class efficiently.

Context

I would like the ability to have more flexible, custom, per-node styling and interactivity when using smcat within a javascript-based web application. By adding a custom “class” attribute to nodes and links, this can be supported without adding multiple new properties to the existing smcat API. Using per-node and per-link classes supports both: (1) custom CSS-based styling of specific node(s) and (2) the ability to attach custom handlers (e.g. onmouseover, onclick, etc) by selecting specific node(s) efficiently using getElementsByClassName.

Proposed Behavior

I propose that in the 2 places where the color attribute is currently supported (nodes and links), that a new class attribute also be added. This attribute will take a string and append it to the existing class (either “node” or “edge”) in the generated SVG.

An example of what this might look like in practice is available at: https://htmlpreview.github.io/?https://github.com/pangaeatech/state-machine-cat/blob/master/docs/class_example.html

Current Behavior

Currently, the only styling available is through the use of the (limited) color attribute.

Considered alternatives

Currently, the only way to achieve this is by knowing the order in which items will be rendered into the svg and using the existing id properties (e.g. “#node1”, “#edge2”, etc) for both CSS and for selecting items using getElementById - this is both very inefficient as it requires each node or edge to be handled individually instead of as a group and it is also very “brittle” in that the order of nodes is not guaranteed by the API and could potentially change with new versions of smcat.

[sverweij]

Surprisingly, I’m not able to even get it to yield invalid svg using that on https://sverweij.gitlab.io/state-machine-cat/ – I tried a few different variations, but all of them show up as properly escaped in the DOM of the page.

Browsers are quite unforgiving for svg embedded in html, I’ve noticed. When confronted with the separate svg, though (either from the webpage or the cli), they’ll start to eek out. In the next version the ‘class’ attribute is properly html escaped (the other attributes, like ‘color’ and ‘label’ already were) and both the smcat language and the json schema for the internal representation only allow ^[a-zA-Z0-9_\\.\\- ]*$ - which seems reasonable (and which is exactly what you proposed as well). If there’s need for more it’s easy to expand.

(published as state-machine-cat@7.4.0-beta-2 on npm and available on beta test site as well)

[sverweij]

Hi @mwaddell - sounds like a good idea. I’ve added it to the smcat language and the output modules for dot (and hence svg) => see the linked PR (WIP). It still needs a bit of documentation and a round-trip (json => smcat), but the smcat => svg (and hence smcat => json => dot => svg) work. I might still tweak some of the auto generated class names to grow a prefix and change around little details, but …

… you can try it out right now at either

• on line on sverweij.gitlab.io/state-machine-cat/
• on npm as a beta release (state-machine-cat@7.4.0-beta-1)

=> Let me know what you think - all feedback welcome