KNowledgeOnWebScale / dataflow-visualization

https://knowledgeonwebscale.github.io/dataflow-visualization/
MIT License
4 stars 2 forks source link

autolayout does weird things when switching source/target #27

Open bjdmeest opened 2 years ago

bjdmeest commented 2 years ago

See following example

Global

autoLayout: true
animated: true
markerEnd:
  type: arrowclosed
strokeDasharray: 2 2

Nodes

- shape: comunica
- shape: rmlio
- shape: solid
- shape: cylinder
  label: DB1
- shape: cylinder
  label: DB2

Edges

- source: DB1
  target: rmlio
  edgeThickness: 5
- source: DB2
  target: rmlio
  edgeThickness: 5
- source: rmlio
  target: solid
- source: solid
  target: comunica
- source: DB2
  target: comunica
  animated: true
  edgeThickness: 2

image

This image is almost perfect, but I want to last edge to change direction. Switching source and target of the latest element however totally messes up the autoLayout

image

I figured it might have been because the edge handlers are by default right for source and left for target (in horizontal mode), so I changed that too, last element is now

- source: comunica
  target: DB2
  sourceHandle: left-source
  targetHandle: right-target
  animated: true
  edgeThickness: 2

but no :(

image

I can then move the comunica node to have almost the same layout as originally, but I'm wondering if there's a smarter layouting idea we can do, eg by reordering the nodes based on the edges before doing the layout? reordering the nodes changes the layout only when there's a 'reverse' edge somewhere.

TiboStr commented 2 years ago

I know it is not what you want, but remember you can just use something like this:

"animation": "dashdraw .6s linear infinite reverse"

I am not sure whether I can do a lot to fix this problem, because the positioning is done by dagre.

Reordering the nodes before 'handing' them over to dagre has no effect whatsoever.

bjdmeest commented 2 years ago

Can you add an FAQ section in the readme and add your 'reverse animation' trick there? It covers my use case, so good enough for me for now! :)