Auto collapse and expand: start with collapsed nodes.

Squashed commit of the following:

commit a83a43f5
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date:   Mon May 30 13:31:46 2022 +0200

    Version 0.1.4

commit 05820fd4
Merge: a19afbab 023e3fdd
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date:   Mon May 30 11:30:14 2022 +0000

    Merge branch 'auto-collapse' into 'develop'

    Start with collapsed nodes

    See merge request medina/cce-frontend!3

commit 023e3fdd
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date:   Mon May 30 11:30:14 2022 +0000

    Start with collapsed nodes

commit a19afbab
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date:   Fri May 27 13:33:56 2022 +0200

    Version up: 0.1.3

commit a2bf39a7
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date:   Thu May 26 17:39:06 2022 +0200

    Add targetValue property.

    Rearrange properties in infoBox.
    Don't show 'code' if same as 'name'.

commit d7dd3b66
Merge: 0bedbed3 dc3d4b90
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date:   Fri May 20 10:04:47 2022 +0200

    Merge branch 'master' into develop

commit 0bedbed3
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date:   Fri May 20 10:00:02 2022 +0200

    Minor fix in instructions.

commit 8df42ada
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date:   Fri May 20 09:47:09 2022 +0200

    Revert "Updated getting for CI from package.json"

    This reverts commit 64b5b515.

commit e318c485
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date:   Fri May 20 09:31:26 2022 +0200

    Version up - 1.1.2

commit 95f07516
Author: Aljaz Nuncic <aljaz.nuncic@xlab.si>
Date:   Thu May 19 19:26:49 2022 +0200

    Added word breaking, permanent node description box option, instructions

commit 64b5b515
Author: Aljaz Nuncic <aljaz.nuncic@xlab.si>
Date:   Thu May 19 19:25:53 2022 +0200

    Updated getting for CI from package.json

package.json

 {
   "name": "cce-frontend",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/Tree.vue

@@ -23,11 +23,19 @@
       <p v-if="hoveredNode?.resource?.weight != null"><b>Resource weight:</b> {{hoveredNode.resource.weight}}</p>
       <p v-if="hoveredNode?.description != null"><b>Description:</b> {{hoveredNode.description}}</p>
     </div>
-    <div style="display: flex;">
+    <div>
+      <span class="btn-group">
         <button class="btn btn-outline-primary" @click="controlScale('bigger')">Zoom in</button>
         <button class="btn btn-outline-primary" @click="controlScale('smaller')">Zoom out</button>
         <button class="btn btn-outline-primary" @click="controlScale('restore')">Reset zoom</button>
+      </span>
+      <span class="btn-group">
+        <button class="btn btn-outline-primary" @click="collapseAll">Collapse all</button>
+        <button class="btn btn-outline-primary" @click="expandAll">Expand all</button>
+      </span>
+      <span class="btn-group">
         <button class="btn btn-outline-success" @click="toogleInstructions">Instructions</button>
+      </span>
     </div>
     <div class="box" id="instructions" v-show="showInstructions">
       <div class="close-button"><i @click="toogleInstructions" title="Close" class="fa fa-solid fa-xmark"></i></div>
@@ -70,6 +78,7 @@ import VueTree from "@ssthouse/vue3-tree-chart";
 import "@ssthouse/vue3-tree-chart/dist/vue3-tree-chart.css";
 import {formatDateHelper} from '../helpers/dataFormat';
 import $ from 'jquery';
+import { collapseExpandTree } from '@/mixins/collapseExpandTree';
 
 export default {
   name: 'Tree',
@@ -77,6 +86,7 @@ export default {
     'vue-tree': VueTree
   },
   props: ['treeData'],
+  mixins: [collapseExpandTree],
   data() {
     return {
       treeConfig: { nodeWidth: 230, nodeHeight: 80, levelHeight: 200 },
@@ -127,6 +137,16 @@ export default {
       this.infoBoxHide(el);
     },
 
+    collapseAll() {
+      this.collapseRecursively(this.$refs.scaleTree.nodeDataList[0].data)
+      this.$refs.scaleTree.draw();
+    },
+
+    expandAll() {
+      this.expandRecursively(this.$refs.scaleTree.nodeDataList[0].data);
+      this.$refs.scaleTree.draw();
+    },
+
     toogleInstructions() {
       this.showInstructions = !this.showInstructions;
     },
@@ -175,7 +195,7 @@ export default {
 
   padding-top: 10px;
   position: fixed;
-  top: 128px;
+  top: 134px;
   min-width: 340px;
   background-color: white;
   border: 1px solid;
@@ -202,9 +222,12 @@ export default {
   }
 }
 
+.btn-group {
+  margin: 3px 3px;
   .btn {
     margin: 5px 5px;
   }
+}
 
 .node-unset {
   background-color: $node-yellow-background;

src/mixins/collapseExpandTree.js

+export const collapseExpandTree = {
+  methods: {
+    collapseRecursively(node) {
+      if(!node.children) {
+        return;
+      }
+    
+      node.children.forEach(i => {
+        this.collapseRecursively(i);
+      });
+      
+      node._children = node.children;
+      node.children = null;
+      node._collapsed = true;
+    },
+
+    collapseAllFromLevel(node, level) {
+      if (level <= 0) {
+        this.collapseRecursively(node);
+      } else {
+        node.children?.forEach(i => {
+          this.collapseAllFromLevel(i, level - 1);
+        });
+      }
+    },                       
+
+    expandRecursively(node) {
+      if (node._children) {
+        node.children = node._children;
+        node._children = null;
+        node._collapsed = false;
+      }
+      node.children?.forEach(n => {
+        this.expandRecursively(n);
+      });
+    },
+  }
+}
\ No newline at end of file

src/store/index.js

 import {createStore} from 'vuex';
 import {ApiService} from '../services/ApiService';
+import { collapseExpandTree } from '../mixins/collapseExpandTree';
 
 const store = createStore({
   state: {
@@ -16,6 +17,9 @@ const store = createStore({
   actions: {
     async getTreeData({commit}) {
       await ApiService.getEvaluationTreeData().then((response) => {
+        // collapse all except root
+        collapseExpandTree.methods.collapseAllFromLevel(response.data.root, 1);
+
         commit('SAVE_TREE_DATA', response.data);
       }).catch((err) => {
         console.log("ERROR at action getTreeData: " + err);