tgdwyer / WebCola

Javascript constraint-based graph layout
http://marvl.infotech.monash.edu/webcola/
MIT License
2.01k stars 257 forks source link

Can you advise how to use Constraints to Visualize Evidentiary Value #353

Open brettforbes opened 6 months ago

brettforbes commented 6 months ago

Hi, Summary: Can we stack 3 x bounding boxes vertically in a page and have membership dependent on a variable (see below)?

We're building a next-generation open-source cybersecurity system based on protocols such as OASIS Stix 2.1 and MITRE ATT&CK, and have about 88 different cybersecurity objects (icons) in our knowledge graphs. Incident management relies on creating sets of sub-graphs to describe Sightings, Tasks, Impacts and Events, and full description can be quite complex, for example see our d3 force graph effort here observable.

A better approach is to take slices into the Incident, along a series of orthogonal dimensions, namely Sightings, Tasks, Impacts, Events, and manage them all with a single user interface with 3 horizontal elements:

  1. A treeview that shows the data hierarchy through a data slice
  2. A webCola constraints-based force-graph forms the working panel, where the bulk of the user interaction goes
  3. A forms environment that makes the forms based on templates

image

This idea of a working pane, is relatively interesting as it is designed to visually reflect the evidentiary value, by using constraints to separate the objects into 3 bands, as shown below. This layout it is also subtly prompting the user to good process, and it becomes a good

image

I am sure there is some way of using webCola constraint-layout to actually achieve these 3 visual zones, based on a field value. Plus webCola can at the same time handle the force graph layout for the small sub-graphs. I imagine it is based on a single field added to each node, with one of 3 values (enum), unattached, attached or Promoted. I suppose this value could then used to specify some kind of bounding box separation constraints. But which constraints work best for this sort of outcome? Should I use multiple bounding boxes, or use invisible nodes? Can you advise please? Which constraints should i use, and what should be my general strategy?

Please help thanks

Oh by the way, I already have the treeview sorted for the other part of the check this vizhub, but ignore the buttons, hahaha my html is pretty weak https://vizhub.com/brettforbes/376352ffa3c149829be74cec0d053313.

I would really like to do 3 stacked bounding boxes, like your demo here https://marvl.infotech.monash.edu/webcola/examples/pageBoundsConstraints.html. Can I stack 3 of these vertically, and make ownership dependent on a variable. How might we do this?