added family grouping plus family and cycle collapsing

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,31 @@ 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="selectedItems[iControl.key]"
+            v-on:update:selected="iControl.callback"
+            :items="iControl.items"
+            select-strategy='independent'
+            item-title="name"
+            item-value="name"
+            item-props
+            selectable
+            open-all
+          ></v-treeview>
+        </v-menu>
+        <v-btn v-else
           v-bind="btnProps"
           :disabled="iControl.disabled"
           :color="iControl.color"
@@ -46,10 +70,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'
   ],
@@ -100,6 +129,22 @@ export default {
     }
   },
 
+  data () {
+    return {
+      selectedItems: {}
+    }
+  },
+  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')
+    }
+  },
+
   computed: {
     iGroups () {
       // wrap the provided props into something we can mutate with derived
@@ -132,6 +177,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 +229,11 @@ export default {
       control.callback()
       e.currentTarget.blur()
     },
+    select (control, e) {
+      // call a control's callback
+      control.value = this.selectedItems[control.key]
+      this.$emit('setOption', control.key, control.value)
+    },
     getValues () {
       // an object with all defined values
       const vars = {}

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

@@ -46,6 +46,100 @@
           "ancestors": []
         }
       ],
+      "families": [
+        {
+          "__typename": "Family",
+          "id": "~user/one//$namespace|root",
+          "name": "root",
+          "parents": [],
+          "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",
+          "parents": [
+            {
+              "name": "root",
+              "_typename": "Family"
+            }
+          ],
+          "childTasks": [
+            {
+              "name": "failed",
+              "_typename": "Task"
+            },
+            {
+              "name": "retrying",
+              "_typename": "Task"
+            }
+          ],
+          "childFamilies": []
+        },
+        {
+          "__typename": "Family",
+          "id": "~user/one//$namespace|GOOD",
+          "name": "GOOD",
+          "parents": [
+            {
+              "name": "root",
+              "_typename": "family"
+            }
+          ],
+          "childTasks": [],
+          "childFamilies": [
+            {
+              "name": "SUCCEEDED",
+              "_typename": "Family"
+            }
+          ]
+        },
+        {
+          "__typename": "Family",
+          "id": "~user/one//$namespace|SUCCEEDED",
+          "name": "SUCCEEDED",
+          "parents": [
+            {
+              "name": "GOOD",
+              "_typename": "Family"
+            }
+          ],
+          "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']