added family grouping plus family and cycle collapsing #1810
Conversation
|
Still to do (in order of priority).
|
|
Im struggling with grouping by families due to the fact that they can be nested ... The contextCollapsing and Expanding nodes is easier as the .dot file just needs the node/s added/removed .... and the edge (relationship between the node and other nodes) defined... This means I dont have to directly deal with a hierarchy (nested structure) as things are just being added/removed. For grouping the syntax is a little different, using subgraphs ... For grouping by cycle point there are no nested cycle points (doesnt make sense) so its just a case of making subgraph for each cycle. The subgraphs do need to account for the fact that the nodes may have been expanded or collapsed but that can be managed by calculating what nodes need to be included from the The problemThe problem is with nested grouping which is relevant for
The way this is represented in the .dot code is by having subgraphs within subgraphs...
The above is an simple example of some graphviz code for a simple nested family situation. Below is an example for a more complicated one... The subgraphs can be I have thought about giving each node a ranking in terms of how 'deep' it is in the hierarchy then ranking from most deep to least deep then looping through ... but this wont work because (as in the example above) you would miss out a lot of the graph |
|
I think this is a problem that warrants recursion as it's tricky to unroll as an iterative loop. Here's an idea of what that could look like (Python syntax):
from random import random
TASKS = {
'foo': {
'name': 'foo',
'parent': 'FOO',
},
'FOO': {
'name': 'FOO',
'parent': 'root'
},
'bar': {
'name': 'bar',
'parent': 'BAR1',
},
'baz': {
'name': 'baz',
'parent': 'BAR2',
},
'BAR1': {
'name': 'BAR1',
'parent': 'BAR',
},
'BAR2': {
'name': 'BAR2',
'parent': 'BAR',
},
'root': {
'name': 'root',
'parent': None,
},
}
TREE = {
'root': {
'FOO': None,
'BAR': {
'BAR1': None,
'BAR2': None,
},
},
}
def add_subgraph(dotcode, pointer, graph_sections):
for key, value in pointer.items():
dotcode.append(
f'subgraph cluster_{str(random())[2:]} {{'
f'\nlabel = "{key}"'
)
if value:
add_subgraph(dotcode, value, graph_sections)
if key in graph_sections:
dotcode.extend(graph_sections[key])
dotcode.append('}')
return dotcode
def get_dotcode(tasks):
graph_sections = {}
for task in tasks.values():
parent = task['parent']
if not parent:
continue
section = graph_sections.setdefault(parent, [])
section.append(f'{task["name"]} [title="{task["name"]}"]')
dotcode = ['digraph {']
add_subgraph(dotcode, TREE['root'], graph_sections)
return dotcode
for item in get_dotcode(TASKS):
print(item)digraph {
subgraph cluster_23300787190407446 {
label = "FOO"
foo [title="foo"]
}
subgraph cluster_5025488657295563 {
label = "BAR"
subgraph cluster_2135762450670372 {
label = "BAR1"
bar [title="bar"]
}
subgraph cluster_4413670667138756 {
label = "BAR2"
baz [title="baz"]
}
BAR1 [title="BAR1"]
BAR2 [title="BAR2"]
}I haven't taken cycles into account in this solution, you'll need to add a This solution will also add entries for families which have no tasks, so, you'll need some fancy logic for removing empty families, and any families that contain only empty families. |
markgrahamdawson
force-pushed
the
family-subgraphs
branch
from
21472f9 to
e45ccec
Compare
markgrahamdawson
force-pushed
the
family-subgraphs
branch
from
f1540f6 to
676466f
Compare
This comment was marked as resolved.
This comment was marked as resolved.
| const edges = this.getGraphEdges() | ||
| let edges = this.getGraphEdges() | ||
|
|
||
| // ---------------------------------------- |
There was a problem hiding this comment.
Collapsing nodes - adding and removing nodes and edges.
| }) | ||
| } |
There was a problem hiding this comment.
Grouping nodes
src/components/cylc/ViewToolbar.vue
Outdated
| data () { | ||
| return { | ||
| selectedItems: { | ||
| groupFamily: [], | ||
| collapseFamily: [], | ||
| collapseCycle: [] | ||
| } | ||
| } | ||
| }, | ||
| mounted () { | ||
| if (this.groups[0].controls.length >= 6) { | ||
| this.selectedItems.groupFamily = this.groups[0].controls[7].value | ||
| this.selectedItems.collapseCycle = this.groups[0].controls[8].value | ||
| this.selectedItems.collapseFamily = this.groups[0].controls[9].value | ||
| } | ||
| }, | ||
|
|
There was a problem hiding this comment.
Without the mounted hook, when I move away to a different workflow and then move back - the checkboxes in the toolbar component are not checked...
But I get what you are saying - Ill think of a way to implement this which is more generic
src/components/cylc/ViewToolbar.vue
Outdated
| data () { | ||
| return { | ||
| selectedItems: { | ||
| groupFamily: [], | ||
| collapseFamily: [], | ||
| collapseCycle: [] | ||
| } | ||
| } | ||
| }, | ||
| mounted () { | ||
| if (this.groups[0].controls.length >= 6) { | ||
| this.selectedItems.groupFamily = this.groups[0].controls[7].value | ||
| this.selectedItems.collapseCycle = this.groups[0].controls[8].value | ||
| this.selectedItems.collapseFamily = this.groups[0].controls[9].value | ||
| } | ||
| }, | ||
|
|
There was a problem hiding this comment.
Is this any better?
mounted () {
if (this.groups[0].title == 'Graph') {
const getControlValue = (groups, controlKey) => {
return groups[0].controls.find(control => control.key === controlKey).value
}
this.selectedItems.groupFamily = getControlValue(this.groups, 'groupFamily')
this.selectedItems.collapseCycle = getControlValue(this.groups, 'collapseCycle')
this.selectedItems.collapseFamily = getControlValue(this.groups, 'collapseFamily')
}
},
src/views/Graph.vue
Outdated
| }`) | ||
| const graphSections = {} | ||
| Object.keys(cycles).forEach((cycle, iCycle) => { | ||
| const indexSearch = Object.values(this.cylcTree.$index).filter((node) => { |
There was a problem hiding this comment.
Done in commit 139ee67
src/views/Graph.vue
Outdated
| // its the node has been removed/collapsed | ||
| const isRemoved = !removedNodes.includes(a.name) | ||
| // is not numeric | ||
| const isNumeric = !parseFloat(a.name) |
There was a problem hiding this comment.
So I could rename this to is retry @oliver-sanders ?
| @@ -46,6 +46,100 @@ | |||
| "ancestors": [] | |||
| } | |||
| ], | |||
| "families": [ | |||
There was a problem hiding this comment.
Are there not other fields that need adding based on the additions to the query in Graph.view?
The multi.json also ought to have a similar additions.
There was a problem hiding this comment.
I have updated the multi.json with families in this commit
ca89af7
Im not sure about adding other fields, the only fields that are added are families and familyProxies and the latter is already included in the mock json
There was a problem hiding this comment.
These fields are now requested on the FamilyProxy type:
isHeld
isRunahead
isQueued
but are not included in the mock data
There was a problem hiding this comment.
Also I think this is needed in multi.json
diff --git a/src/services/mock/json/workflows/multi.json b/src/services/mock/json/workflows/multi.json
index 14f7f37a..4232e136 100644
--- a/src/services/mock/json/workflows/multi.json
+++ b/src/services/mock/json/workflows/multi.json
@@ -168,4 +168,5 @@
"firstParent": {
"id": "~user/other/multi/run2//1/root",
+ "name": "root",
"__typename": "FamilyProxy"
},
@@ -186,4 +187,5 @@
"firstParent": {
"id": "~user/other/multi/run2//2/root",
+ "name": "root",
"__typename": "FamilyProxy"
},otherwise when I try to group by cycle point I get
TypeError: Cannot read properties of undefined (reading 'some')
at Proxy.isNodeCollapsedByFamily (Graph.vue:888:62)
src/components/cylc/ViewToolbar.vue
Outdated
| v-bind="{...$attrs, ...props, ...btnProps}" | ||
| :disabled="iControl.disabled" | ||
| :color="iControl.color"> |
There was a problem hiding this comment.
| v-bind="{...$attrs, ...props, ...btnProps}" | |
| :disabled="iControl.disabled" | |
| :color="iControl.color"> | |
| v-bind="{...$attrs, ...props, ...btnProps}" | |
| :disabled="iControl.disabled" | |
| :color="iControl.color" | |
| > |
| @@ -46,6 +46,100 @@ | |||
| "ancestors": [] | |||
| } | |||
| ], | |||
| "families": [ | |||
There was a problem hiding this comment.
Also I think this is needed in multi.json
diff --git a/src/services/mock/json/workflows/multi.json b/src/services/mock/json/workflows/multi.json
index 14f7f37a..4232e136 100644
--- a/src/services/mock/json/workflows/multi.json
+++ b/src/services/mock/json/workflows/multi.json
@@ -168,4 +168,5 @@
"firstParent": {
"id": "~user/other/multi/run2//1/root",
+ "name": "root",
"__typename": "FamilyProxy"
},
@@ -186,4 +187,5 @@
"firstParent": {
"id": "~user/other/multi/run2//2/root",
+ "name": "root",
"__typename": "FamilyProxy"
},otherwise when I try to group by cycle point I get
TypeError: Cannot read properties of undefined (reading 'some')
at Proxy.isNodeCollapsedByFamily (Graph.vue:888:62)
|
Testing on a real, complex workflow, unfortunately I got this error when I tried to collapse a family: |
Partly addresses issue #1130
The grouping of nodes by cycle point is completed in this pr #1763
----Notes on work----
Some ideas for a unified approach to grouping/collapsing cycles/families. I'm suggesting unifying the handling of cycles and families (note, cycles represent the "root" family so they are essentially the same thing).
Grouping/Ungrouping - Drawing dashed boxes around a cycle/family.
Collapsing/Expanding - Reducing a family down to a single node.
Limitations of the Cylc 7 approach:
Note, for simplicity, this approach groups/collapses all instances of selected families rather than managing this at a per-cycle level. I think this is probably more aligned with expectations, but does represent a minor limitation, e.g. there's no ability to collapse all but one cycle. The ability to expand/collapse specific cycle instances would be a reasonable enhancement.
Design Sketch
Had a quick discussion on this (more to come):
Check List
CONTRIBUTING.mdand added my name as a Code Contributor.setup.cfg(andconda-environment.ymlif present).CHANGES.mdentry included if this is a change that can affect users?.?.xbranch.