diff --git a/package-lock.json b/package-lock.json
index bd188983f6207f28b3a69da35ac6eba9c0401c03..0e29f3d539f9ad38f24074348da4a8be52f29180 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1127,6 +1127,69 @@
"to-fast-properties": "^2.0.0"
}
},
+ "@fortawesome/fontawesome-common-types": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz",
+ "integrity": "sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w=="
+ },
+ "@fortawesome/fontawesome-free": {
+ "version": "6.1.1",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz",
+ "integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg=="
+ },
+ "@fortawesome/fontawesome-svg-core": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0.tgz",
+ "integrity": "sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.3.0"
+ }
+ },
+ "@fortawesome/free-brands-svg-icons": {
+ "version": "5.15.4",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
+ "integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.2.36"
+ },
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": {
+ "version": "0.2.36",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+ "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+ }
+ }
+ },
+ "@fortawesome/free-regular-svg-icons": {
+ "version": "5.15.4",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz",
+ "integrity": "sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.2.36"
+ },
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": {
+ "version": "0.2.36",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+ "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+ }
+ }
+ },
+ "@fortawesome/free-solid-svg-icons": {
+ "version": "5.15.4",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
+ "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.2.36"
+ },
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": {
+ "version": "0.2.36",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+ "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+ }
+ }
+ },
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -2642,9 +2705,9 @@
"dev": true
},
"async": {
- "version": "2.6.3",
- "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
- "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+ "version": "2.6.4",
+ "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+ "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
"dev": true,
"requires": {
"lodash": "^4.17.14"
@@ -4380,9 +4443,9 @@
"dev": true
},
"d3": {
- "version": "7.3.0",
- "resolved": "https://registry.npmjs.org/d3/-/d3-7.3.0.tgz",
- "integrity": "sha512-MDRLJCMK232OJQRqGljQ/gCxtB8k3/sLKFjftMjzPB3nKVUODpdW9Rb3vcq7U8Ka5YKoZkAmp++Ur6I+6iNWIw==",
+ "version": "7.4.4",
+ "resolved": "https://registry.npmjs.org/d3/-/d3-7.4.4.tgz",
+ "integrity": "sha512-97FE+MYdAlV3R9P74+R3Uar7wUKkIFu89UWMjEaDhiJ9VxKvqaMxauImy8PC2DdBkdM2BxJOIoLxPrcZUyrKoQ==",
"requires": {
"d3-array": "3",
"d3-axis": "3",
@@ -4417,9 +4480,9 @@
}
},
"d3-array": {
- "version": "3.1.1",
- "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.1.1.tgz",
- "integrity": "sha512-33qQ+ZoZlli19IFiQx4QEpf2CBEayMRzhlisJHSCsSUbDXv6ZishqS1x7uFVClKG4Wr7rZVHvaAttoLow6GqdQ==",
+ "version": "3.1.6",
+ "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.1.6.tgz",
+ "integrity": "sha512-DCbBBNuKOeiR9h04ySRBMW52TFVc91O9wJziuyXw6Ztmy8D3oZbmCkOO3UHKC7ceNJsN2Mavo9+vwV8EAEUXzA==",
"requires": {
"internmap": "1 - 2"
}
@@ -4450,9 +4513,9 @@
}
},
"d3-color": {
- "version": "3.0.1",
- "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
- "integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw=="
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+ "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
},
"d3-contour": {
"version": "3.0.1",
@@ -4546,9 +4609,9 @@
}
},
"d3-hierarchy": {
- "version": "3.1.1",
- "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.1.tgz",
- "integrity": "sha512-LtAIu54UctRmhGKllleflmHalttH3zkfSi4NlKrTAoFKjC+AFBJohsCAdgCBYQwH0F8hIOGY89X1pPqAchlMkA=="
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+ "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="
},
"d3-interpolate": {
"version": "3.0.1",
@@ -7328,6 +7391,11 @@
"integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
"dev": true
},
+ "jquery": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+ "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+ },
"js-message": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -7889,9 +7957,9 @@
}
},
"minimist": {
- "version": "1.2.5",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
- "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+ "version": "1.2.6",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+ "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
"dev": true
},
"minipass": {
@@ -7949,9 +8017,9 @@
}
},
"moment": {
- "version": "2.29.1",
- "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
- "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+ "version": "2.29.3",
+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.3.tgz",
+ "integrity": "sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw=="
},
"move-concurrently": {
"version": "1.0.1",
@@ -11809,9 +11877,9 @@
}
},
"url-parse": {
- "version": "1.5.4",
- "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.4.tgz",
- "integrity": "sha512-ITeAByWWoqutFClc/lRZnFplgXgEZr3WJ6XngMM/N9DMIm4K8zXPCZ1Jdu0rERwO84w1WC5wkle2ubwTA4NTBg==",
+ "version": "1.5.10",
+ "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+ "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
"dev": true,
"requires": {
"querystringify": "^2.1.1",
diff --git a/package.json b/package.json
index 1cd30ad590a1c0bf056653a91b03e8a3806ca76a..81447f6608f2d8c033ebda3e09ec7aee30e4ae32 100644
--- a/package.json
+++ b/package.json
@@ -8,16 +8,22 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
+ "@fortawesome/fontawesome-free": "^6.1.1",
+ "@fortawesome/fontawesome-svg-core": "^1.3.0",
+ "@fortawesome/free-brands-svg-icons": "^5.15.4",
+ "@fortawesome/free-regular-svg-icons": "^5.15.4",
+ "@fortawesome/free-solid-svg-icons": "^5.15.4",
"@ssthouse/vue3-tree-chart": "^0.1.0",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
+ "jquery": "^3.6.0",
+ "moment": "^2.29.3",
"vue": "^3.2.29",
"vue-axios": "^3.4.1",
"vue-router": "^4.0.12",
- "vuex": "^4.0.2",
- "moment": "^2.29.1"
+ "vuex": "^4.0.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.15",
diff --git a/src/components/Tree.vue b/src/components/Tree.vue
index 87baa88a091beb9cf72e800f743824102dd6cee2..cefc4988ac35f991c8aa717e86e1300aac7163b2 100644
--- a/src/components/Tree.vue
+++ b/src/components/Tree.vue
@@ -1,6 +1,7 @@
<template>
<div class="container">
- <div class="info-box" v-show="hoveredNode">
+ <div class="box info-box" v-show="hoveredNode">
+ <div class="close-button"><i @click="infoBoxClose" title="Close" class="fa fa-solid fa-xmark"></i></div>
<p v-if="hoveredNode?.name != null"><b>Name:</b> {{hoveredNode.name}}</p>
<p v-if="hoveredNode?.state == 'UNSET'"><b>State:</b> No evidence obtained</p>
<p v-if="hoveredNode?.state == 'UNSELECTED'"><b>State:</b> Unselected</p>
@@ -25,6 +26,14 @@
<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>
+ <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>
+ <ul>
+ <li><b>left click:</b> hide/show node childrens</li>
+ <li><b>right click:</b> permanently open node details</li>
+ </ul>
</div>
<vue-tree
v-if="treeData"
@@ -33,7 +42,6 @@
:dataset="treeData"
:config="treeConfig"
:collapse-enabled="true"
-
>
<template v-slot:node="{ node, collapsed }">
<div
@@ -43,10 +51,12 @@
'node-set-conformant': (node.state == 'SET' && node.conformant),
'node-set-unconformant': (node.state == 'SET' && !node.conformant)}"
:style="{ border: collapsed ? '3px solid black' : '' }"
- @mouseover="infoBoxShow(node)"
- @mouseleave="infoBoxHide()"
+ @mouseover="infoBoxTemporarilyShow(node, $event.target)"
+ @mouseleave="infoBoxHide($event.target)"
+ @mousedown.right="infoBoxPermanentlyShowed(node, $event.target)"
+ @contextmenu.prevent
>
- <span style="padding: 4px 0; font-weight: bold; word-wrap: break-word; overflow-wrap: break-word;"
+ <span style="padding: 4px 0; font-weight: bold; word-break: break-word; overflow-wrap: break-word;"
>{{ node.name }}</span>
</div>
</template>
@@ -58,6 +68,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';
export default {
name: 'Tree',
@@ -69,6 +80,8 @@ export default {
return {
treeConfig: { nodeWidth: 230, nodeHeight: 80, levelHeight: 200 },
hoveredNode: null,
+ infoBoxPermanentlyShowedNodeElement: null,
+ showInstructions: false,
}
},
methods: {
@@ -89,8 +102,32 @@ export default {
infoBoxShow(node) {
this.hoveredNode = node;
},
- infoBoxHide() {
- this.hoveredNode = null;
+ infoBoxHide(el) {
+ if (!this.infoBoxPermanentlyShowedNodeElement) {
+ $(el).removeClass('selected');
+ this.hoveredNode = null;
+ }
+ },
+
+ infoBoxTemporarilyShow(node, el) {
+ if (!this.infoBoxPermanentlyShowedNodeElement) {
+ $(el).parent().addClass('selected');
+ this.infoBoxShow(node);
+ }
+ },
+ infoBoxPermanentlyShowed(node, el) {
+ this.infoBoxPermanentlyShowedNodeElement = $(el).parent();
+ $(el).parent().addClass('selected');
+ this.infoBoxShow(node);
+ },
+ infoBoxClose() {
+ var el = this.infoBoxPermanentlyShowedNodeElement;
+ this.infoBoxPermanentlyShowedNodeElement = null;
+ this.infoBoxHide(el);
+ },
+
+ toogleInstructions() {
+ this.showInstructions = !this.showInstructions;
},
formatDate(date) {
@@ -130,21 +167,38 @@ export default {
font-size: 14px;
}
-.info-box {
- p{padding: 0px 10px}
+.box {
+ p{
+ padding: 0px 10px;
+ }
padding-top: 10px;
- z-index: 10;
position: fixed;
top: 128px;
- left: 72px;
min-width: 340px;
background-color: white;
- border: 1px solid $color-blue;
+ border: 1px solid;
border-radius: 0;
font-size: 14px;
text-align: left;
max-width: 25%;
+
+ .close-button {
+ font-size: 20px;
+ text-align: right;
+ padding-right: 14px;
+ }
+
+ &.info-box {
+ border-color: $color-blue;
+ z-index: 10;
+ left: 72px;
+ }
+
+ &#instructions {
+ border-color: $color-green;
+ z-index: 11;
+ }
}
.btn {
@@ -153,28 +207,28 @@ export default {
.node-unset {
background-color: $node-yellow-background;
- &:hover {
+ &.selected {
background-color: $node-yellow-dark-background;
}
}
.node-set-conformant {
background-color: $node-green-background;
- &:hover {
+ &.selected {
background-color: $node-green-dark-background;
}
}
.node-set-unconformant {
background-color: $node-red-background;
- &:hover {
+ &.selected {
background-color: $node-red-dark-background;
}
}
.node-unselected {
background-color: $node-gray-background;
- &:hover {
+ &.selected {
background-color: $node-gray-dark-background;
}
}
diff --git a/src/main.js b/src/main.js
index b2d7dddb0b55d51b1bb2a667b35aa99d9ca6fa98..4d27991b8efe49a313516500ec46ea1b6c4ec6ca 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,9 @@ import VueAxios from 'vue-axios';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle.min'
import 'bootstrap-vue/dist/bootstrap-vue.css'
+import { dom } from "@fortawesome/fontawesome-svg-core";
+dom.watch();
+import "@fortawesome/fontawesome-free/css/all.css";
const app = createApp(App)
app.use(router);
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 30b849cc5d53b6a7a7c975e026cca7b100d2ea11..3a41e668045cee711293c9aabd867040296ab85a 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -8,4 +8,5 @@ $node-green-dark-background: rgb(128, 214, 48);
$node-red-dark-background: rgb(250, 70, 70);
$node-gray-dark-background: rgb(177, 169, 169);
-$color-blue: #0d6efd;
\ No newline at end of file
+$color-blue: #0d6efd;
+$color-green: #198754;
\ No newline at end of file