From 0e63df2ebcb04a09654498ea29ce022787e3ece4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?An=C5=BEe=20=C5=BDitnik?= <anze.zitnik@xlab.si>
Date: Mon, 30 May 2022 13:32:21 +0200
Subject: [PATCH] Auto collapse and expand: start with collapsed nodes.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Squashed commit of the following:
commit a83a43f586014412b6bb9b90e9bb1e22d822a1da
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date: Mon May 30 13:31:46 2022 +0200
Version 0.1.4
commit 05820fd40a5c015c0bcdbad8435d74a5c8ea83ac
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 023e3fddbe77f1b9f04ca796cbfbf530ee37b301
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date: Mon May 30 11:30:14 2022 +0000
Start with collapsed nodes
commit a19afbabad93e6654d7eefdf3c78335d5c051e6b
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date: Fri May 27 13:33:56 2022 +0200
Version up: 0.1.3
commit a2bf39a78579f0c17b215e96026a5a7c9edf9270
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 d7dd3b66c66fc8718787e1347c6f72f405fc1dfa
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 0bedbed33cd8a0f5e58a570e51f7cdfe6d854f3f
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date: Fri May 20 10:00:02 2022 +0200
Minor fix in instructions.
commit 8df42ada6f9eab247280c26b8518661ed721681f
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 64b5b5152b2e065db8b31313ed756a8df10d61e2.
commit e318c48589b14d32dd727584926c1318016192bb
Author: Anže Žitnik <anze.zitnik@xlab.si>
Date: Fri May 20 09:31:26 2022 +0200
Version up - 1.1.2
commit 95f07516f8593fdfc4e1c43e13020b6909cc661f
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 64b5b5152b2e065db8b31313ed756a8df10d61e2
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 | 2 +-
src/components/Tree.vue | 39 +++++++++++++++++++++++++-------
src/mixins/collapseExpandTree.js | 38 +++++++++++++++++++++++++++++++
src/store/index.js | 4 ++++
4 files changed, 74 insertions(+), 9 deletions(-)
create mode 100644 src/mixins/collapseExpandTree.js
diff --git a/package.json b/package.json
index 86a3d2bd..3dc04d1f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "cce-frontend",
- "version": "0.1.3",
+ "version": "0.1.4",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/src/components/Tree.vue b/src/components/Tree.vue
index 2ad5f1e1..a98abc33 100644
--- a/src/components/Tree.vue
+++ b/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;">
- <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>
- <button class="btn btn-outline-success" @click="toogleInstructions">Instructions</button>
+ <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,8 +222,11 @@ export default {
}
}
-.btn {
- margin: 5px 5px;
+.btn-group {
+ margin: 3px 3px;
+ .btn {
+ margin: 5px 5px;
+ }
}
.node-unset {
diff --git a/src/mixins/collapseExpandTree.js b/src/mixins/collapseExpandTree.js
new file mode 100644
index 00000000..acc67618
--- /dev/null
+++ b/src/mixins/collapseExpandTree.js
@@ -0,0 +1,38 @@
+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
diff --git a/src/store/index.js b/src/store/index.js
index ae265e80..34eb412f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,5 +1,6 @@
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);
--
GitLab