Skip to content
Snippets Groups Projects
Commit 0e63df2e authored by Zitnik, Anze's avatar Zitnik, Anze
Browse files

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
parent 38a5a145
No related branches found
No related tags found
No related merge requests found
{ {
"name": "cce-frontend", "name": "cce-frontend",
"version": "0.1.3", "version": "0.1.4",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
......
...@@ -23,11 +23,19 @@ ...@@ -23,11 +23,19 @@
<p v-if="hoveredNode?.resource?.weight != null"><b>Resource weight:</b> {{hoveredNode.resource.weight}}</p> <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> <p v-if="hoveredNode?.description != null"><b>Description:</b> {{hoveredNode.description}}</p>
</div> </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('bigger')">Zoom in</button>
<button class="btn btn-outline-primary" @click="controlScale('smaller')">Zoom out</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-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> <button class="btn btn-outline-success" @click="toogleInstructions">Instructions</button>
</span>
</div> </div>
<div class="box" id="instructions" v-show="showInstructions"> <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> <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"; ...@@ -70,6 +78,7 @@ import VueTree from "@ssthouse/vue3-tree-chart";
import "@ssthouse/vue3-tree-chart/dist/vue3-tree-chart.css"; import "@ssthouse/vue3-tree-chart/dist/vue3-tree-chart.css";
import {formatDateHelper} from '../helpers/dataFormat'; import {formatDateHelper} from '../helpers/dataFormat';
import $ from 'jquery'; import $ from 'jquery';
import { collapseExpandTree } from '@/mixins/collapseExpandTree';
export default { export default {
name: 'Tree', name: 'Tree',
...@@ -77,6 +86,7 @@ export default { ...@@ -77,6 +86,7 @@ export default {
'vue-tree': VueTree 'vue-tree': VueTree
}, },
props: ['treeData'], props: ['treeData'],
mixins: [collapseExpandTree],
data() { data() {
return { return {
treeConfig: { nodeWidth: 230, nodeHeight: 80, levelHeight: 200 }, treeConfig: { nodeWidth: 230, nodeHeight: 80, levelHeight: 200 },
...@@ -127,6 +137,16 @@ export default { ...@@ -127,6 +137,16 @@ export default {
this.infoBoxHide(el); 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() { toogleInstructions() {
this.showInstructions = !this.showInstructions; this.showInstructions = !this.showInstructions;
}, },
...@@ -175,7 +195,7 @@ export default { ...@@ -175,7 +195,7 @@ export default {
padding-top: 10px; padding-top: 10px;
position: fixed; position: fixed;
top: 128px; top: 134px;
min-width: 340px; min-width: 340px;
background-color: white; background-color: white;
border: 1px solid; border: 1px solid;
...@@ -202,9 +222,12 @@ export default { ...@@ -202,9 +222,12 @@ export default {
} }
} }
.btn-group {
margin: 3px 3px;
.btn { .btn {
margin: 5px 5px; margin: 5px 5px;
} }
}
.node-unset { .node-unset {
background-color: $node-yellow-background; background-color: $node-yellow-background;
......
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
import {createStore} from 'vuex'; import {createStore} from 'vuex';
import {ApiService} from '../services/ApiService'; import {ApiService} from '../services/ApiService';
import { collapseExpandTree } from '../mixins/collapseExpandTree';
const store = createStore({ const store = createStore({
state: { state: {
...@@ -16,6 +17,9 @@ const store = createStore({ ...@@ -16,6 +17,9 @@ const store = createStore({
actions: { actions: {
async getTreeData({commit}) { async getTreeData({commit}) {
await ApiService.getEvaluationTreeData().then((response) => { await ApiService.getEvaluationTreeData().then((response) => {
// collapse all except root
collapseExpandTree.methods.collapseAllFromLevel(response.data.root, 1);
commit('SAVE_TREE_DATA', response.data); commit('SAVE_TREE_DATA', response.data);
}).catch((err) => { }).catch((err) => {
console.log("ERROR at action getTreeData: " + err); console.log("ERROR at action getTreeData: " + err);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment