Merge pull request #1810 from markgrahamdawson/family-subgraphs

added family grouping plus family and cycle collapsing

Author: oliver-sanders

changes.d/1810.feat.md

@@ -0,0 +1 @@
+Added graph view feature to group by family, and collapse by family and cycle point

src/components/cylc/ViewToolbar.vue

@@ -30,7 +30,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="control"
         :data-cy="`control-${iControl.key}`"
       >
-        <v-btn
+        <v-menu
+        v-if="iControl.action==='select-tree'"
+          :close-on-content-click="false"
+        >
+          <template v-slot:activator="{ props }">
+            <v-btn
+              v-bind="{...$attrs, ...props, ...btnProps}"
+              :disabled="iControl.disabled"
+              :color="iControl.color"
+            >
+              <v-icon>{{ iControl.icon }}</v-icon>
+              <v-tooltip>{{ iControl.title }}</v-tooltip>
+            </v-btn>
+          </template>
+          <v-treeview
+            v-model:selected="iControl.value"
+            v-on:update:selected="iControl.callback"
+            :items="iControl.items"
+            item-props
+            select-strategy='independent'
+            item-title="name"
+            item-value="name"
+            selectable
+            open-all
+          ></v-treeview>
+        </v-menu>
+        <v-btn v-else
           v-bind="btnProps"
           :disabled="iControl.disabled"
           :color="iControl.color"
@@ -46,10 +72,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import { btnProps } from '@/utils/viewToolbar'
+import { VTreeview } from 'vuetify/labs/VTreeview'
 
 export default {
   name: 'ViewToolbar',
 
+  components: {
+    VTreeview,
+  },
+
   emits: [
     'setOption'
   ],
@@ -120,7 +151,6 @@ export default {
           color = null
           callback = null
           disabled = false
-
           // set callback and color
           switch (control.action) {
             case 'toggle':
@@ -132,6 +162,12 @@ export default {
             case 'callback':
               callback = (e) => this.call(control, e)
               break
+            case 'select-tree':
+              callback = (e) => this.select(control, e)
+              if (control.value.length) {
+                color = 'blue'
+              }
+              break
           }
 
           // set disabled
@@ -178,6 +214,10 @@ export default {
       control.callback()
       e.currentTarget.blur()
     },
+    select (control, value) {
+      // call a control's callback
+      this.$emit('setOption', control.key, value)
+    },
     getValues () {
       // an object with all defined values
       const vars = {}

src/services/mock/json/workflows/multi.json

@@ -111,6 +111,22 @@
             ]
           }
         ],
+        "families": [
+          {
+            "__typename": "Family",
+            "id": "~user/other/multi/run2//$namespace|root",
+            "name": "root",
+            "parents": [],
+            "descendants": ["foo"],
+            "childTasks": [
+              {
+                "name": "foo",
+                "__typename": "Task"
+              }
+            ],
+            "childFamilies": []
+          }
+        ],
         "familyProxies": [
           {
             "__typename": "FamilyProxy",
@@ -152,6 +168,7 @@
             },
             "firstParent": {
               "id": "~user/other/multi/run2//1/root",
+              "name": "root",
               "__typename": "FamilyProxy"
             },
             "__typename": "TaskProxy"
@@ -170,6 +187,7 @@
             },
             "firstParent": {
               "id": "~user/other/multi/run2//2/root",
+              "name": "root",
               "__typename": "FamilyProxy"
             },
             "__typename": "TaskProxy"

src/services/mock/json/workflows/one.json

@@ -46,6 +46,107 @@
           "ancestors": []
         }
       ],
+      "families": [
+        {
+          "__typename": "Family",
+          "id": "~user/one//$namespace|root",
+          "name": "root",
+          "parents": [],
+          "descendants": ["BAD", "GOOD", "waiting", "sleepy", "checkpoint"],
+          "childTasks": [
+            {
+              "name": "checkpoint",
+              "_typename": "Task"
+            },
+            {
+              "name": "sleepy",
+              "_typename": "Task"
+            },
+            {
+              "name": "waiting",
+              "_typename": "Task"
+            }
+          ],
+          "childFamilies": [
+            {
+              "name": "BAD",
+              "_typename": "Family"
+            },
+            {
+              "name": "GOOD",
+              "_typename": "Family"
+            }
+          ]
+        },
+        {
+          "__typename": "Family",
+          "id": "~user/one//$namespace|BAD",
+          "name": "BAD",
+          "firstParent": { "id": "~user/one//$namespace|root", "name": "root"},
+          "parents": [
+            {
+              "name": "root",
+              "_typename": "Family"
+            }
+          ],
+          "descendants": ["failed", "retrying"],
+          "childTasks": [
+            {
+              "name": "failed",
+              "_typename": "Task"
+            },
+            {
+              "name": "retrying",
+              "_typename": "Task"
+            }
+          ],
+          "childFamilies": []
+        },
+        {
+          "__typename": "Family",
+          "id": "~user/one//$namespace|GOOD",
+          "name": "GOOD",
+          "firstParent": { "id": "~user/one//$namespace|root", "name": "root"},
+          "parents": [
+            {
+              "name": "root",
+              "_typename": "family"
+            }
+          ],
+          "descendants": ["SUCCEEDED"],
+          "childTasks": [],
+          "childFamilies": [
+            {
+              "name": "SUCCEEDED",
+              "_typename": "Family"
+            }
+          ]
+        },
+        {
+          "__typename": "Family",
+          "id": "~user/one//$namespace|SUCCEEDED",
+          "name": "SUCCEEDED",
+          "firstParent": { "id": "~user/one//$namespace|GOOD", "name": "GOOD"},
+          "parents": [
+            {
+              "name": "GOOD",
+              "_typename": "Family"
+            }
+          ],
+          "descendants": ["eventually_succeeded", "succeeded"],
+          "childTasks": [
+            {
+              "name": "eventually_succeeded",
+              "_typename": "Task"
+            },
+            {
+              "name": "succeeded",
+              "_typename": "Task"
+            }
+          ],
+          "childFamilies": []
+        }
+      ],
       "familyProxies": [
         {
           "__typename": "FamilyProxy",

src/store/workflows.module.js

@@ -514,10 +514,10 @@ const mutations = {
 // NOTE: deltas are applied in the order listed here
 // NOTE: we must create tasks before families (note cycles ARE families
 // because of the way we request them)
-const KEYS = ['workflow', 'taskProxies', 'cyclePoints', 'familyProxies', 'jobs', 'edges']
+const KEYS = ['workflow', 'taskProxies', 'cyclePoints', 'familyProxies', 'jobs', 'edges', 'families']
 
 // Pruned keys which return arrays of pruned IDs
-const PRUNED_KEYS_MULT = ['taskProxies', 'familyProxies', 'jobs', 'edges']
+const PRUNED_KEYS_MULT = ['taskProxies', 'familyProxies', 'jobs', 'edges', 'families']
 // Pruned keys which contain single pruned IDs
 const PRUNED_KEYS_SING = ['workflow']