Feature/network graph #597
Conversation
| export enum DataSourceType { | ||
| default = 0, | ||
| metadata = 1, | ||
| provenance = 2, |
There was a problem hiding this comment.
Added this in for now so that I can re-use the data source prompt to upload just a provenance file on its own
|
|
||
| // Start generating nodes and edges for selected file | ||
| // To do: disable if no provenance data source | ||
| dispatch(provenance.actions.constructProvenanceGraph(fileDetails)); |
There was a problem hiding this comment.
As part of this ticket we should investigate the efficiency of building this graph - it might make sense to have the graph load only when the Provenance button is clicked rather than when a file is focused if it is a costly operation - at a minimum it would probably be good to find a way to debounce it since if a user were to quickly go through selected files (like using the arrow key) these could end up crashing the app if the operations build up
| text="Provenance" | ||
| title="Temporary button to display provenance graph" | ||
| onClick={onClickProvenance} | ||
| // to do: disable if no provenance source |
There was a problem hiding this comment.
Check with UX, but if the button is still there just disabled (which might not be the best move - unsure) there should be some way to get "Help" for what that button would do
| targetPosition, | ||
| data, | ||
| }) => { | ||
| const [edgePath, labelX, labelY] = getBezierPath({ |
There was a problem hiding this comment.
Could use a comment explaining at a high level what this is doing
There was a problem hiding this comment.
Added comments in 964f165
|
|
||
| const dagreGraph = new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})); | ||
|
|
||
| const getLayoutedElements = (nodes: Node[], edges: Edge[], direction = "TB") => { |
There was a problem hiding this comment.
is "Layout" a term we should use for convention? if not maybe getOrganizedElements 🤷 just a thought though this is fine
There was a problem hiding this comment.
"Layout"/"Layouting" is the term used by these two libraries, but I'm not especially attached
| }; | ||
|
|
||
| // Currently arbitrary placeholder values | ||
| const NODE_WIDTH = 180; |
There was a problem hiding this comment.
Probably going to want to calculate this or set a maximum by screen size, can come later though
…feature/network-graph
…feature/network-graph
|
Pausing this work for finalization of design details |
Context
Proof-of-concept dev work for the provenance network graphs. Currently in early draft stages, so a lot of things are definitely not optimally written/organized
Changes
The most important code is in NetworkGraph/index.tsx, DatabaseService/index.ts, and state/provenance/logics.ts. Most of the other changes are just setup to allow me to upload & process provenance files (e.g., modified the data source modal so that I could re-use it for this).
Also, added a provenance state branch to keep the new logic separate from the rest of our redux state.
Currently using React Flow for UI and Dagre for automatic layouting
Screenshots (if relevant)
Currently generates graphs that look like this:
This was generated using a selection of files from AICS FMS and with a provenance csv file that looks like: