Basic Visualisation #15

danpalmer · 2017-12-27T23:37:58Z

This PR introduces visualisation of state machines and labels locations in them.

Note: this has been handy for debugging configs but low priority and will likely not be finished and merged before launch.

TODO:

explore linters
tidy up the JS (remove inline onchange, etc.)

PeterJCLaw · 2018-04-18T16:24:56Z

@danpalmer were there any particular things you thought that the example visualisation should do? The example.yaml contains forks and merges in the graph, as well as both gates and actions, so I'm proposing that we build the example visualisation around that.

danpalmer · 2018-04-18T16:31:03Z

The main things I wanted to do were around readability. I remember it being pretty basic and not very clear. Destinations, triggers, defaults, etc would be good to get on there, maybe the field used to control the destination selection, etc.

PeterJCLaw · 2018-04-25T15:50:09Z

@danpalmer since we discovered that pydot does indeed depend on having graphviz installed, thoughts on letting the render be in JavaScript? https://www.graphdracula.net/ looks fairly reasonable (and appears to allow annotations on various things which we know we want to do at some point)

This renders in JS into a canvas

Cytoscape is apparently fine with this

This avoids needing to worry about escaping the content of our JSON.

routemaster/config/visualisation.html

routemaster/server/tests/test_endpoints.py

danpalmer · 2018-05-02T18:14:35Z

routemaster/state_machine/visualisation.py

+from routemaster.config import Action, StateMachine
+
+
+def nodes_for_cytoscape(


I'm not sure how much I like the naming being specific to the library we're using on the front end.

On the one hand, this looks like a specific format that wouldn't easily be used in other tools, but on the other, it feels like we shouldn't be encoding JS dependencies in Python naming like this.

What do you think?

I originally had the massively more vague name convert_to_network and change to this since the output format is specific to cytoscape. I'm not sure whether I like that the name is coupled to the library, however since the data format is pretty much coupled anyway, I think having the name be clear is better than the alternative.

The data format could be used by other code paths and funged into whatever format is necessary.

How about state_machine_for_render?

I'd imagine we might add a label_for_render in the future too?

routemaster/state_machine/tests/test_visualisation.py

routemaster/config/visualisation.html

routemaster/state_machine/visualisation.py

This seems to produce a slightly better layout in some cases.

This was disabled because zooming was annoying and the layouts were better without this. Now that zooming is less sensitive, fitting the first view results in a more useful initial view.

While there's not a lot we can usefully assert about the returned content, we can assert that it's the expected type.

This clarifies that it's data not code.

danpalmer added 3 commits December 27, 2017 22:01

First pass at state machite visualisation

04722ad

Merge branch 'master' into visualisation

5929e3c

Improve styling

9f15757

danpalmer added the Work in Progress label Dec 27, 2017

danpalmer modified the milestone: Internal Production Use Dec 27, 2017

PeterJCLaw added 2 commits January 22, 2018 20:32

Merge branch 'master' into visualisation

5d1f35e

Merge branch 'master' into visualisation

293b056

PeterJCLaw added 3 commits April 18, 2018 17:40

Clarify that this is a collection

83ee7ac

Expect this endpoint to exist too

698f2f8

These are collections too

9a531b4

PeterJCLaw added 7 commits April 25, 2018 18:24

Merge branch 'master' into visualisation

2767516

Add alternative using Cytoscape

331a351

This renders in JS into a canvas

Don't need to prettify this

b51c976

Drop draw_state_machine

28846c7

Simplify the return type

ba45628

Cytoscape is apparently fine with this

Type signature here

70bfa80

isort

a52bc9b

PeterJCLaw force-pushed the visualisation branch from 51fa9ac to a52bc9b Compare April 25, 2018 19:19

PeterJCLaw added 3 commits April 25, 2018 20:19

Drop redundant inline style

ead96ab

Fix indentation

7c83fc8

Slightly better colours

a712785

PeterJCLaw force-pushed the visualisation branch from e9a33c2 to 51b6b15 Compare April 25, 2018 19:24

Drop more dead code

345837a

PeterJCLaw force-pushed the visualisation branch from 51b6b15 to 345837a Compare April 25, 2018 19:26

PeterJCLaw added 2 commits May 2, 2018 15:54

Merge branch 'master' into visualisation

16e0b18

Template this properly

021f0c4

This avoids needing to worry about escaping the content of our JSON.

Configure scroll zooming sensitivity instead of providing our own

82a75ae

danpalmer commented May 2, 2018

View reviewed changes

PeterJCLaw added 17 commits May 2, 2018 19:33

Allow an adjustment once layed out

4dca5d4

This seems to produce a slightly better layout in some cases.

Fit to the display window

aaf1ec8

This was disabled because zooming was annoying and the layouts were better without this. Now that zooming is less sensitive, fitting the first view results in a more useful initial view.

Also test the 404 case

92416b9

Extract fixture for the root path of the repo

a2f3e85

Rename for clarity

11a9e81

Use system fonts

1171013

Indentation

00a0eb3

Rename file to clarify rendering

f98ad5f

Include the template in the manifest

fd2c457

Simplify this

db7f349

Not SVG

f891b93

Assert the content type

dcbc51f

While there's not a lot we can usefully assert about the returned content, we can assert that it's the expected type.

Name this type for clarity when used

4b9d8c0

This isn't just HTML any more

8c07681

Switch to the minified version of the library

4b5d3a7

Subresource integrity the external library

b0b05cb

No need to return false here

7d4edd2

PeterJCLaw mentioned this pull request Apr 3, 2022

Make use of url_for rather than hardcoded view paths #117

Open

PeterJCLaw added 7 commits April 3, 2022 10:42

Explicitly parse the config as JSON

d5c676d

This clarifies that it's data not code.

Merge branch 'master' into visualisation

b24c25d

Connect event up in JS rather than inline

0e9e49c

Fix lints

23689dc

Update visualisation test for data loading changes on master branch

fd59e2f

Update cytoscape

e146e8a

Adjust spacing presets to cope with larger workflows

f717068

PeterJCLaw force-pushed the visualisation branch from 500491d to bdaaa35 Compare April 3, 2022 12:37

Add labels for exit conditions to edges between nodes

277c214

PeterJCLaw force-pushed the visualisation branch from bdaaa35 to 277c214 Compare April 3, 2022 12:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Basic Visualisation #15

Basic Visualisation #15

danpalmer commented Dec 27, 2017 •

edited by PeterJCLaw

PeterJCLaw commented Apr 18, 2018

danpalmer commented Apr 18, 2018

PeterJCLaw commented Apr 25, 2018

danpalmer May 2, 2018

PeterJCLaw May 2, 2018

danpalmer May 2, 2018

		from routemaster.config import Action, StateMachine


		def nodes_for_cytoscape(

Basic Visualisation #15

Are you sure you want to change the base?

Basic Visualisation #15

Conversation

danpalmer commented Dec 27, 2017 • edited by PeterJCLaw

PeterJCLaw commented Apr 18, 2018

danpalmer commented Apr 18, 2018

PeterJCLaw commented Apr 25, 2018

danpalmer May 2, 2018

Choose a reason for hiding this comment

PeterJCLaw May 2, 2018

Choose a reason for hiding this comment

danpalmer May 2, 2018

Choose a reason for hiding this comment

danpalmer commented Dec 27, 2017 •

edited by PeterJCLaw