Is it possible to get a force graph model to have a vertical layout for certain types of nodes, and multiple of that type then spread out horizontally?
Basically it requires that instances of a certain type of nodes are fixed, by some vertical constraint or positional argument, one that can be input at design time, or dynamically through some form, and then the horizontal spreading happens automatically.
My target layout looks like the image below. Assume I have some vertical ranking of node types in mind, very similar to the picture, and I have multiple sub-objects clustered around each of the layered nodes, and there is a similar degree of interaction around my Stix data.
Are there any suggestions on how to achieve this type of layout using dropdowns and/or code??
Its for an open-source cybersecurity project. Thanks
If you want to precompute part of the layout (e.g. using elkjs), you can pin a node’s position by setting its fx and fy values.
Alternatively you could add a custom force that constrains the movement of some nodes to only one axis.
Can you say more about why you prefer a force graph over e.g. Graphviz dot or mermaid’s flow diagrams?
1 Like
thanks for your interest @mootari, I know you are a guru
In a Stix Incident, the top-level object, there are then a series of types of sub-objects, each with one or more objects instances associated with it:
- Impact Objects,
- Event Objects,
- Task Objects,
- Behaviour Objects,
- Sighting Objects,
Each of the object instances in these sub-object types may have between 1 or more sub-sub-objects associated with it. These sub-sub-objects may be connected to other objects in the graph.
The thought was that we might set the “y-dimension” and “x-dimension” for the sub-objects, but leave the sub-sub-objects free, and arrange them with a force graph engine.
I am actually a python programmer, with a bit of experience on the side in D3, so its all a bit of a mystery. Elk JS looks super interesting, but it is another library to learn, which is a concern.
In short, some nodes will be fixed, others need to be free. What can you recommend?
Could you share example data for such an incident (preferably as JSON or XML), and speak more about the nature of the project and the interactions you have in mind of the graph, e.g.:
- Does the project have a server-side component, and do you plan to also generate graph layouts on the server? If so, what is the language/environment?
- Do you expect to dynamically add or remove nodes? Would you want to recompute the entire layout or prefer that it remains stable?
1 Like
We have an installable JavaScript User Interface, called Type Refinery. The docs are a bit outdated, but we hope to release an MVP in 3rd quarter.
Type Refinery has its own services layer, and we include a TypeDB Knowledge Graph, MongoDB, Postgres, and other services, such as BPMN, cybersecurity servers and Jupyter Notebook.
Type Refinery has a low-code middle layer, based on Total JS Flow, which can run Python, Javascript or Java function blocks. We are developing a library of Python Blocks, based on our other open-source library, the StixORM, which is simple means to generate cybersecurity objects, store them in the knowledge graph, and retrieve them.
Type Refinery user interface is driven by the open-source Website CMS, and we have integrated most of the Bootstrap library plus a series of custom viz elements based on D3, such as this or this. An example of the data is here.
Interactions with the CMS UI widgets for data, or to respond to events os driven by function blocks
In short, we have a powerful platform, but are seeking to go the next level on our vizes. We could support a Java server, but are not that familiar with ELK or Sprotty
Given the clear ranking I would recommend to avoid any force directed positioning and instead rely on layered graphs as provided by Graphviz, ELK, Mermaid and many other libraries. Most of these should also be able to handle arbitrary bounding boxes of custom components (as opposed to d3-force which out of the box is purely point based).
I would then group leaf nodes in sub graphs (clusters) with their parent node to control their effect on the overall layout (which should also allow you to customize how they are arranged).
Does that sound like it could work for your use case?
2 Likes
IT sounds brilliant, it could just take me quite a while, because i am unfamiliar with the ELK stuff, but it is a great suggestion. Thanks
We actually wanted to talk to you anyway about bringing your most excellent nested, expandable Tree to the platform, and perhaps expanding its capability
I would recommend to start with Graphviz. Check out their gallery to get a sense of what’s possible and to find examples.
I also have a notebook with a light wrapper for viz.js which is a browser build of Graphviz. The project has its own online editor with examples here: https://viz-js.com/.
If you have any questions about a particular syntax or problem please feel free to add it to this thread.
I’m afraid I’m not really interested in working more on that, but please feel free to take the code and modify it as needed. I added a CC0 license, in case that helps with your project.
1 Like
Thanks so much Fabian, I really appreciate your time and your advice. Its really great thanks a lot.
Your insights have made me realise that we really need someone with more expertise to drive the vizes specifically. I really like the ELK stuff you showed, and ideally we have someone who can do Sprotty as well, since we have a fair few DSL’s in cybersecurity that could benefit from a GUI.
Further, I lack the skill to improve your CSS table, so it would be better to wait on both of those till we get investment a little later this year. Its good to know your own value, and me spending a lot of time on new vizes, no matter how exciting these new ideas are.
Fortunately, we’ve had investors circling for more than a year, so we only need to release our MVP, and we’ll be in a great position. At least I have developed a really novel, useful set of visualisations, a 3-pane interaction, for the new MVP. I will hit you up to check it in a month or so, since it is a new take on visualisation and promotion of concepts.
Anyway, thanks a million for your help, all the best, speak soon.
1 Like
