From 11e66a4c3cdce7dfa0a09f3f246e9d2b9e68466e Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Fri, 23 Sep 2022 14:57:22 +0800
Subject: [PATCH 01/29] fixed open button

---
 src/components/DataPanel.vue | 50 +++++++++++++-----------------------
 1 file changed, 18 insertions(+), 32 deletions(-)

diff --git a/src/components/DataPanel.vue b/src/components/DataPanel.vue
index 18e75dc..7d6d03d 100644
--- a/src/components/DataPanel.vue
+++ b/src/components/DataPanel.vue
@@ -2,36 +2,19 @@
   <div class="info-panel-outer">
     <h1 class="title is-4">ID : {{ data_panel.uid }}</h1>
     <div class="control">
-      <input
-        class="input is-hovered"
-        type="text"
-        placeholder="Name"
-        :value="data_panel.name"
-        @focus="pauseKeyDown"
-        @blur="handleBlur('name', $event)"
-      />
+      <input class="input is-hovered" type="text" placeholder="Name" :value="data_panel.name" @focus="pauseKeyDown"
+        @blur="handleBlur('name', $event)" />
     </div>
-    <div class="control"  :style="{marginBottom: '5px'}">
-      <input
-        class="input is-hovered"
-        type="text"
-        placeholder="URL"
-        :value="data_panel.link"
-        @focus="pauseKeyDown"
-        @blur="handleBlur('link', $event)"
-      />
+    <div class="control" :style="{marginBottom: '5px'}">
+      <input class="input is-hovered" type="text" placeholder="URL" :value="data_panel.link" @focus="pauseKeyDown"
+        @blur="handleBlur('link', $event)" />
     </div>
-    <button class="button is-dark" :href="data_panel.link">Open</button>
+    <a :href="data_panel.link">
+      <button class="button is-dark">Open</button>
+    </a>
     <div class="control" :style="{marginTop: '10px'}">
-      <textarea
-        class="textarea"
-        rows="5"
-        cols="50"
-        placeholder="Description"
-        :value="data_panel.description"
-        @focus="pauseKeyDown"
-        @blur="handleBlur('description', $event)"
-      ></textarea>
+      <textarea class="textarea" rows="5" cols="50" placeholder="Description" :value="data_panel.description"
+        @focus="pauseKeyDown" @blur="handleBlur('description', $event)"></textarea>
     </div>
 
     <div class="info-panel-inner">
@@ -43,10 +26,13 @@
 <style lang="scss" scoped>
 .info-panel-outer {
   background-color: green;
+
   h1 {
     color: white;
   }
-  font-family: 'Noto Sans', sans-serif;
+
+  font-family: 'Noto Sans',
+  sans-serif;
   padding: 1rem;
   border-bottom-left-radius: 25px;
 }
@@ -60,7 +46,7 @@ import graphData from "../graphData";
 const project_id: any = ref("");
 export default defineComponent({
   name: "DataPanel",
-  setup() {},
+  setup() { },
   props: ["data_panel"],
   mounted() {
     axios.defaults.headers.common["X-User"] = this.$store.state.kratos_user_id;
@@ -116,9 +102,9 @@ export default defineComponent({
         }
       });
     },
-    onInputPropertyName: function () {},
-    onInputPropertyValue: function () {},
-    onInputLabel: function () {},
+    onInputPropertyName: function () { },
+    onInputPropertyValue: function () { },
+    onInputLabel: function () { },
     pauseKeyDown: function () {
       this.$emit("pauseKeyDown");
     },

From 7581e413b59901ef56aefeac40d8df2c053675ad Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Fri, 23 Sep 2022 15:19:36 +0800
Subject: [PATCH 02/29] added saving status

---
 src/components/ControlPanel.vue | 29 +++++++++++++++++++++++------
 src/components/DataPanel.vue    |  7 +++++--
 src/views/Graph.vue             | 21 ++++++++++++++++++---
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index 6537cd2..5796c48 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -1,10 +1,13 @@
 <template>
     <div class="control-panel">
-        <button class="button is-light" @click="$emit('home')">Home</button>
-        <DropdownComponent @custom_change="changed_item" :dropdownItem="options"></DropdownComponent>
-        <button class="button is-light" @click="$emit('save-locations')">Save Locations</button>
+        <div id="control-box">
+            <button class="button is-light control-box-item" @click="$emit('home')">Center</button>
+            <DropdownComponent @custom_change="changed_item" :dropdownItem="options"></DropdownComponent>
+            <button class="button is-light control-box-item" @click="$emit('save-locations')">Save Locations </button>
+            <text class="title is-4 control-box-item">{{ save_locations_status }}</text>
+        </div>
         <div id="information-box-thing">
-            <text>Pressing delete will remove selected items. </text>
+            <text>Pressing <i>delete</i> will remove selected items. </text><br>
             <text>{{ instructions }}</text>
         </div>
     </div>
@@ -17,11 +20,13 @@ const options = [
     { name: 'add-node', label: 'Add Vertex (V)' },
     { name: 'add-edge', label: 'Add Edge (E)', },
     { name: 'move', label: 'Look Around (A)' }];
+const save_locations_status = ref("")
 export default defineComponent({
     name: "ControlPanel",
     data() {
         return {
             options,
+            save_locations_status,
         };
     },
     methods: {
@@ -59,13 +64,25 @@ export default defineComponent({
 .control-panel {
     #information-box-thing {
       padding-left: 0.5rem;
+      padding-top: 0.5rem;
+    }
+    #control-box{
+      padding-left: 0.5rem;
+      align-items: center;
+      display: flex;
+      padding-top: 0.5rem;
+      .control-box-item{
+        margin-inline: 0.2rem;
+      }
     }
-    width: 30%;
+    width: 40%;
     padding-bottom: 1rem;
     border-bottom-right-radius: 25px;
     background-color: lightblue;
     font-family: 'Noto Sans', sans-serif;
-
+}
+i {
+    font-style: italic;
 }
 
 .flush-right {
diff --git a/src/components/DataPanel.vue b/src/components/DataPanel.vue
index 7d6d03d..779c3e9 100644
--- a/src/components/DataPanel.vue
+++ b/src/components/DataPanel.vue
@@ -2,11 +2,11 @@
   <div class="info-panel-outer">
     <h1 class="title is-4">ID : {{ data_panel.uid }}</h1>
     <div class="control">
-      <input class="input is-hovered" type="text" placeholder="Name" :value="data_panel.name" @focus="pauseKeyDown"
+      <input class="input is-hovered info-panel-item" type="text" placeholder="Name" :value="data_panel.name" @focus="pauseKeyDown"
         @blur="handleBlur('name', $event)" />
     </div>
     <div class="control" :style="{marginBottom: '5px'}">
-      <input class="input is-hovered" type="text" placeholder="URL" :value="data_panel.link" @focus="pauseKeyDown"
+      <input class="input is-hovered info-panel-item" type="text" placeholder="URL" :value="data_panel.link" @focus="pauseKeyDown"
         @blur="handleBlur('link', $event)" />
     </div>
     <a :href="data_panel.link">
@@ -36,6 +36,9 @@
   padding: 1rem;
   border-bottom-left-radius: 25px;
 }
+.info-panel-item{
+  margin: 0.1rem;
+}
 </style>
 
 <script lang="ts">
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 16406fe..50f59d1 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -101,6 +101,7 @@ export default defineComponent({
     data() {
         return {
             graph_ref,
+            control_panel_ref,
             project_id,
             graphData,
             dataPanel,
@@ -210,11 +211,25 @@ export default defineComponent({
                     y: node_pos_raw[n].y,
                 }
             }
-            console.log(node_pos)
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${project_id.value}` +
-                `/positions/update`
-            axios.post(request_url, node_pos)
+                `/positions/update`;
+            (this.$refs.control_panel_ref as any).save_locations_status = 'saving...'
+            axios.post(request_url, node_pos).then((response) => {
+                if(response.status == 200){
+                    (this.$refs.control_panel_ref as any).save_locations_status = 'saved'
+                    setInterval(() => { 
+                        (this.$refs.control_panel_ref as any).save_locations_status = ''
+                    }, 1000)
+                }else{
+                    throw 'err'
+                }
+            }).catch((error) => {
+                (this.$refs.control_panel_ref as any).save_locations_status = 'error!'
+                setInterval(() => { 
+                    (this.$refs.control_panel_ref as any).save_locations_status = ''
+                }, 1000)
+            })
         },
         get_items,
         add_node_with_mouse: function (raw: any, e: any) {

From c8b7179fe95905e086f2988704d620ed464b16e5 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Fri, 23 Sep 2022 15:43:33 +0800
Subject: [PATCH 03/29] retrieval status + minor design changes

---
 src/components/ControlPanel.vue |  2 +-
 src/components/DataPanel.vue    | 42 ++++++++++++++++++++++++++-------
 src/views/Graph.vue             | 15 ++++++------
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index 5796c48..4c89fb4 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -4,7 +4,7 @@
             <button class="button is-light control-box-item" @click="$emit('home')">Center</button>
             <DropdownComponent @custom_change="changed_item" :dropdownItem="options"></DropdownComponent>
             <button class="button is-light control-box-item" @click="$emit('save-locations')">Save Locations </button>
-            <text class="title is-4 control-box-item">{{ save_locations_status }}</text>
+            <text class="subtitle is-4 control-box-item">{{ save_locations_status }}</text>
         </div>
         <div id="information-box-thing">
             <text>Pressing <i>delete</i> will remove selected items. </text><br>
diff --git a/src/components/DataPanel.vue b/src/components/DataPanel.vue
index 779c3e9..2e7e6fb 100644
--- a/src/components/DataPanel.vue
+++ b/src/components/DataPanel.vue
@@ -2,16 +2,19 @@
   <div class="info-panel-outer">
     <h1 class="title is-4">ID : {{ data_panel.uid }}</h1>
     <div class="control">
-      <input class="input is-hovered info-panel-item" type="text" placeholder="Name" :value="data_panel.name" @focus="pauseKeyDown"
-        @blur="handleBlur('name', $event)" />
+      <input class="input is-hovered info-panel-item" type="text" placeholder="Name" :value="data_panel.name"
+        @focus="pauseKeyDown" @blur="handleBlur('name', $event)" />
     </div>
     <div class="control" :style="{marginBottom: '5px'}">
-      <input class="input is-hovered info-panel-item" type="text" placeholder="URL" :value="data_panel.link" @focus="pauseKeyDown"
-        @blur="handleBlur('link', $event)" />
+      <input class="input is-hovered info-panel-item" type="text" placeholder="URL" :value="data_panel.link"
+        @focus="pauseKeyDown" @blur="handleBlur('link', $event)" />
+    </div>
+    <div class="control">
+      <a target="_blank" :href="data_panel.link">
+        <button class="button is-dark">Open</button>
+      </a>
+      <text class="subtitle is-4 data-panel-item">{{ retrieval_status }}</text>
     </div>
-    <a :href="data_panel.link">
-      <button class="button is-dark">Open</button>
-    </a>
     <div class="control" :style="{marginTop: '10px'}">
       <textarea class="textarea" rows="5" cols="50" placeholder="Description" :value="data_panel.description"
         @focus="pauseKeyDown" @blur="handleBlur('description', $event)"></textarea>
@@ -24,6 +27,16 @@
 </template>
 
 <style lang="scss" scoped>
+
+.control{
+  align-items: center;
+  display: flex;
+}
+.data-panel-item {
+  margin-inline: 0.2rem;
+  color: white;
+}
+
 .info-panel-outer {
   background-color: green;
 
@@ -36,7 +49,8 @@
   padding: 1rem;
   border-bottom-left-radius: 25px;
 }
-.info-panel-item{
+
+.info-panel-item {
   margin: 0.1rem;
 }
 </style>
@@ -47,6 +61,7 @@ import { defineComponent, ref } from "vue";
 import graphData from "../graphData";
 
 const project_id: any = ref("");
+const retrieval_status = ref("")
 export default defineComponent({
   name: "DataPanel",
   setup() { },
@@ -55,6 +70,11 @@ export default defineComponent({
     axios.defaults.headers.common["X-User"] = this.$store.state.kratos_user_id;
     project_id.value = this.$route.params.id;
   },
+  data() {
+    return {
+      retrieval_status
+    }
+  },
   methods: {
     handleBlur: async function (property: string, e: any) {
       this.$emit("resumeKeyDown");
@@ -75,6 +95,7 @@ export default defineComponent({
           link = "",
           description = "";
         try {
+          retrieval_status.value = "Retrieving website info..."
           const response = await axios.get(autofill_request_url);
           name = response.data.title;
           link = response.data.url;
@@ -97,12 +118,17 @@ export default defineComponent({
       request_url_post =
         request_url_post.substring(0, requestLengthLimit) +
         (request_url_post.length > requestLengthLimit ? "..." : "");
+      retrieval_status.value = "Saving..."
       axios.post(request_url_pre + request_url_post).then((response) => {
         console.log(response.data);
         graphData.nodes.value[`node${response.data.uid}`] = response.data;
         if (this.$props.data_panel.uid == response.data.uid) {
           this.$emit("updatedDataPanel");
         }
+        retrieval_status.value = "Saved!"
+        setTimeout(() => {
+          retrieval_status.value = ""
+        }, 1000)
       });
     },
     onInputPropertyName: function () { },
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 50f59d1..3ede976 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -214,20 +214,21 @@ export default defineComponent({
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${project_id.value}` +
                 `/positions/update`;
-            (this.$refs.control_panel_ref as any).save_locations_status = 'saving...'
+            const cp_ref : any= (this.$refs.control_panel_ref as any);
+            cp_ref.save_locations_status = 'saving...'
             axios.post(request_url, node_pos).then((response) => {
                 if(response.status == 200){
-                    (this.$refs.control_panel_ref as any).save_locations_status = 'saved'
-                    setInterval(() => { 
-                        (this.$refs.control_panel_ref as any).save_locations_status = ''
+                    (cp_ref).save_locations_status = 'saved'
+                    setTimeout(() => { 
+                        (cp_ref).save_locations_status = ''
                     }, 1000)
                 }else{
                     throw 'err'
                 }
             }).catch((error) => {
-                (this.$refs.control_panel_ref as any).save_locations_status = 'error!'
-                setInterval(() => { 
-                    (this.$refs.control_panel_ref as any).save_locations_status = ''
+                (cp_ref).save_locations_status = 'error!'
+                setTimeout(() => { 
+                    (cp_ref).save_locations_status = ''
                 }, 1000)
             })
         },

From f9ddbe50e9cd19a43904ff8b5bf93897869dc4f8 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Fri, 23 Sep 2022 15:50:02 +0800
Subject: [PATCH 04/29] fixed select + hover

---
 src/components/DataPanel.vue | 2 +-
 src/views/Graph.vue          | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/DataPanel.vue b/src/components/DataPanel.vue
index 2e7e6fb..6dc7514 100644
--- a/src/components/DataPanel.vue
+++ b/src/components/DataPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="info-panel-outer">
-    <h1 class="title is-4">ID : {{ data_panel.uid }}</h1>
+    <h1 class="title is-4">ID : {{ (data_panel.uid ? data_panel.uid : "Hover over a node") }}</h1>
     <div class="control">
       <input class="input is-hovered info-panel-item" type="text" placeholder="Name" :value="data_panel.name"
         @focus="pauseKeyDown" @blur="handleBlur('name', $event)" />
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 3ede976..0fc55a7 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -111,6 +111,10 @@ export default defineComponent({
                     console.log(type, event)
                     if (type == 'node:pointerover') {
                         dataPanel.value = graphData.nodes.value[event.node]
+                    } else if (type == 'node:pointerout'){
+                        if(selected_nodes.value){
+                            dataPanel.value = graphData.nodes.value[selected_nodes.value[0]]
+                        }
                     } else if (type == 'view:click') {
                         this.handle_view_click(event)
                     } else if (type == 'node:select') {

From 9832480b6bc07d1ff71b27e23fdd64f6096df4c6 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Fri, 23 Sep 2022 16:06:02 +0800
Subject: [PATCH 05/29] fixed minor bug that appears only in production

---
 src/views/Graph.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 0fc55a7..b9efd25 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -112,7 +112,7 @@ export default defineComponent({
                     if (type == 'node:pointerover') {
                         dataPanel.value = graphData.nodes.value[event.node]
                     } else if (type == 'node:pointerout'){
-                        if(selected_nodes.value){
+                        if(selected_nodes.value.length > 0){
                             dataPanel.value = graphData.nodes.value[selected_nodes.value[0]]
                         }
                     } else if (type == 'view:click') {

From ad87ade54efb455dd7b0a87ac4f6cc990346511a Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Mon, 26 Sep 2022 15:02:39 +0800
Subject: [PATCH 06/29] twigslot.com migration

---
 .env.production                        | 8 ++++----
 kubernetes/nginx-service.yaml          | 6 ++++--
 kubernetes/traefik-ingress-client.yaml | 4 ++--
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/.env.production b/.env.production
index c3478f7..d8f81e3 100644
--- a/.env.production
+++ b/.env.production
@@ -1,4 +1,4 @@
-VITE_ORY_URL=https://twig.tchlabs.net/kratos
-VITE_AUTH_URL=https://twig.tchlabs.net/auth
-VITE_API_URL=https://twig.tchlabs.net/api
-VITE_AUTOFILL_URL=https://twig.tchlabs.net/autofill
\ No newline at end of file
+VITE_ORY_URL=https://twigslot.com/kratos
+VITE_AUTH_URL=https://twigslot.com/auth
+VITE_API_URL=https://twigslot.com/api
+VITE_AUTOFILL_URL=https://twigslot.com/autofill
diff --git a/kubernetes/nginx-service.yaml b/kubernetes/nginx-service.yaml
index 06e69c3..44efc32 100644
--- a/kubernetes/nginx-service.yaml
+++ b/kubernetes/nginx-service.yaml
@@ -14,7 +14,7 @@ spec:
     spec:
       containers:
       - name: nginx-container
-        image: tch1001/twig_client:latest
+        image: tch1001/twig_client:v3.1.1
         ports:
         - containerPort: 80
 ---
@@ -28,4 +28,6 @@ spec:
   ports:
     - protocol: TCP
       port: 80
-      targetPort: 80
\ No newline at end of file
+      targetPort: 80
+      nodePort: 30002
+  type: LoadBalancer
\ No newline at end of file
diff --git a/kubernetes/traefik-ingress-client.yaml b/kubernetes/traefik-ingress-client.yaml
index 4e49dfc..598652c 100644
--- a/kubernetes/traefik-ingress-client.yaml
+++ b/kubernetes/traefik-ingress-client.yaml
@@ -7,7 +7,7 @@ spec:
   entryPoints:
     - websecure
   routes:
-    - match: Host(`twig.tchlabs.net`)
+    - match: Host(`twigslot.com`)
       kind: Rule
       services:
         - name: nginx-service
@@ -15,4 +15,4 @@ spec:
   tls:
     certResolver: myresolver
     domains: 
-    - main: twig.tchlabs.net
\ No newline at end of file
+    - main: twigslot.com
\ No newline at end of file

From 9a6f9b50f80288183f3942b9fe2996d3510a7494 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Tue, 4 Oct 2022 14:47:13 +0800
Subject: [PATCH 07/29] added deco box

---
 src/App.vue                  |  7 ++++++
 src/components/DecoPanel.vue | 46 ++++++++++++++++++++++++++++++++++++
 src/graphData.ts             |  3 +++
 src/views/Graph.vue          |  8 ++++++-
 4 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DecoPanel.vue

diff --git a/src/App.vue b/src/App.vue
index 7caf6f3..a0d92dc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -110,6 +110,13 @@ body {
   float: left;
 }
 
+.deco-panel {
+  background-color: pink;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}
+
 .info-panel-outer {
   position: relative;
   clear: left;
diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
new file mode 100644
index 0000000..6355c0d
--- /dev/null
+++ b/src/components/DecoPanel.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="deco-panel">
+        <div id="deco-box">
+            <h1 class="title is-4 deco-text">
+                Tags:
+            </h1>
+        </div>
+        <div id="deco-box">
+            <h1 class="title is-4 deco-text">
+                Size:
+            </h1>
+        </div>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+.deco-text {
+    color: blue;
+}
+
+.deco-panel {
+
+    #deco-box {
+        padding-left: 0.5rem;
+        align-items: center;
+        display: flex;
+        padding-top: 0.5rem;
+        margin-inline: 0.2rem;
+    }
+
+    width: 40%;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    border-top-left-radius: 1rem;
+    font-family: 'Noto Sans',
+    sans-serif;
+}
+</style>
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+    name: "DecoPanel",
+});
+</script>
\ No newline at end of file
diff --git a/src/graphData.ts b/src/graphData.ts
index 3752a5f..2365377 100644
--- a/src/graphData.ts
+++ b/src/graphData.ts
@@ -36,6 +36,9 @@ var configs = vNG.defineConfigs({
   },
   node: {
     selectable: true,
+    normal: {
+      color: node => node.color,
+    }
   },
   edge: {
     selectable: true,
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index b9efd25..684b695 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -9,11 +9,13 @@
         :data_panel="dataPanel" @updatedDataPanel="updatedDataPanel"></DataPanelVue>
     <ControlPanelVue @home="home" @save-locations="saveLocations" @customkeydown="keydown" ref="control_panel_ref">
     </ControlPanelVue>
+    <DecoPanelVue></DecoPanelVue>
 </template>
 <script lang="ts">
 import axios from "axios";
 import DataPanelVue from "../components/DataPanel.vue";
 import ControlPanelVue from "../components/ControlPanel.vue";
+import DecoPanelVue from "../components/DecoPanel.vue";
 import { defineComponent, reactive, ref } from "vue";
 import graphData from "../graphData"
 var dataPanel: any = ref({});
@@ -96,7 +98,8 @@ export default defineComponent({
     name: "Graph",
     components: {
         DataPanelVue,
-        ControlPanelVue
+        ControlPanelVue,
+        DecoPanelVue
     },
     data() {
         return {
@@ -158,6 +161,9 @@ export default defineComponent({
             } else {
                 (this.$store.state as any).edge_source_node = event.node
             }
+            console.log('onclick', event.node)
+            console.log('it is', graphData.nodes.value[event.node])
+            graphData.nodes.value[event.node].color = "gray"
         },
         create_edge: function (s: any, t: any) {
             const request_url = `${import.meta.env.VITE_API_URL}` +

From 87e4e560ee7c8c1e501049a21c24b36881a0c0ef Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Tue, 4 Oct 2022 15:14:22 +0800
Subject: [PATCH 08/29] v model for color and size (has some vue bugs)

---
 src/components/DecoPanel.vue | 18 +++++++++++++++---
 src/views/Graph.vue          |  8 ++++----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 6355c0d..35f1294 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -1,14 +1,21 @@
 <template>
     <div class="deco-panel">
         <div id="deco-box">
-            <h1 class="title is-4 deco-text">
-                Tags:
-            </h1>
+            <div class="deco-item">
+                <h1 class="title is-4 deco-text">
+                    Tags:
+                </h1>
+                <input class="input is-hovered info-panel-item" type="text" placeholder="Name" v-model="data_panel.color"/>
+            </div>
         </div>
         <div id="deco-box">
             <h1 class="title is-4 deco-text">
                 Size:
             </h1>
+            <div class="slider-demo-block">
+                <span class="demonstration">Customized initial value</span>
+                <el-slider v-model="data_panel.size" />
+            </div>
         </div>
     </div>
 </template>
@@ -42,5 +49,10 @@ import { defineComponent, ref } from "vue";
 
 export default defineComponent({
     name: "DecoPanel",
+    props: ["data_panel"],
+    data() {
+        return {
+        }
+    }
 });
 </script>
\ No newline at end of file
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 684b695..6bce2cb 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -9,7 +9,7 @@
         :data_panel="dataPanel" @updatedDataPanel="updatedDataPanel"></DataPanelVue>
     <ControlPanelVue @home="home" @save-locations="saveLocations" @customkeydown="keydown" ref="control_panel_ref">
     </ControlPanelVue>
-    <DecoPanelVue></DecoPanelVue>
+    <DecoPanelVue ref="deco_panel_ref" :data_panel="dataPanel"></DecoPanelVue>
 </template>
 <script lang="ts">
 import axios from "axios";
@@ -23,6 +23,7 @@ var dataPanel: any = ref({});
 const project_id: any = ref("");
 const graph_ref: any = ref();
 const control_panel_ref: any = ref();
+const deco_panel_ref: any = ref();
 var pause_key_down: boolean = false;
 
 function delete_node(node: any) {
@@ -47,6 +48,8 @@ function delete_edge(edge: any) {
         })
 }
 function add_node(raw: any) {
+    if(!('color' in raw)) raw.color = 'blue'
+    if(!('size' in raw)) raw.size = 10
     graphData.nodes.value[`node${raw.uid}`] = raw
     if('pos_x' in raw && 'pos_y' in raw){
         graphData.layouts.value.nodes[`node${raw.uid}`] = {
@@ -161,9 +164,6 @@ export default defineComponent({
             } else {
                 (this.$store.state as any).edge_source_node = event.node
             }
-            console.log('onclick', event.node)
-            console.log('it is', graphData.nodes.value[event.node])
-            graphData.nodes.value[event.node].color = "gray"
         },
         create_edge: function (s: any, t: any) {
             const request_url = `${import.meta.env.VITE_API_URL}` +

From 8c76512f2ecac7f6e13186f2cd98e486365d6648 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Tue, 4 Oct 2022 15:29:44 +0800
Subject: [PATCH 09/29] node size working now

---
 src/graphData.ts    | 1 +
 src/views/Graph.vue | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/graphData.ts b/src/graphData.ts
index 2365377..a9d556a 100644
--- a/src/graphData.ts
+++ b/src/graphData.ts
@@ -38,6 +38,7 @@ var configs = vNG.defineConfigs({
     selectable: true,
     normal: {
       color: node => node.color,
+      radius: node => node.size,
     }
   },
   edge: {
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 6bce2cb..089e3d9 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -49,7 +49,7 @@ function delete_edge(edge: any) {
 }
 function add_node(raw: any) {
     if(!('color' in raw)) raw.color = 'blue'
-    if(!('size' in raw)) raw.size = 10
+    if(!('size' in raw)) raw.size = 20
     graphData.nodes.value[`node${raw.uid}`] = raw
     if('pos_x' in raw && 'pos_y' in raw){
         graphData.layouts.value.nodes[`node${raw.uid}`] = {
@@ -114,8 +114,8 @@ export default defineComponent({
             eventHandlers: {
                 // wildcard: capture all events
                 "*": (type: string, event: any) => {
-                    console.log(type, event)
                     if (type == 'node:pointerover') {
+                        console.log(type, graphData.nodes.value[event.node])
                         dataPanel.value = graphData.nodes.value[event.node]
                     } else if (type == 'node:pointerout'){
                         if(selected_nodes.value.length > 0){

From 05be5e330600114c0ef9e0c8b1b3057b1cdc1989 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Tue, 4 Oct 2022 15:33:22 +0800
Subject: [PATCH 10/29] fixed broken zooming

---
 src/graphData.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/graphData.ts b/src/graphData.ts
index a9d556a..19cf702 100644
--- a/src/graphData.ts
+++ b/src/graphData.ts
@@ -37,8 +37,8 @@ var configs = vNG.defineConfigs({
   node: {
     selectable: true,
     normal: {
-      color: node => node.color,
-      radius: node => node.size,
+      color: node => ('color' in node ? node.color : 'blue'),
+      radius: node => ('size' in node ? node.size : 20),
     }
   },
   edge: {

From 30e827ff030e785902089a82fbaad9be42409c07 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Tue, 4 Oct 2022 15:38:06 +0800
Subject: [PATCH 11/29] implemented keyboard freezing to prevent annoying
 backspaces from deleting node

---
 src/components/DecoPanel.vue | 13 +++++++++++--
 src/views/Graph.vue          |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 35f1294..d57a1e2 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -5,7 +5,8 @@
                 <h1 class="title is-4 deco-text">
                     Tags:
                 </h1>
-                <input class="input is-hovered info-panel-item" type="text" placeholder="Name" v-model="data_panel.color"/>
+                <input class="input is-hovered info-panel-item" type="text" placeholder="Color"
+                    v-model="data_panel.color" @focus="pauseKeyDown" @blur="handleBlur()" />
             </div>
         </div>
         <div id="deco-box">
@@ -14,7 +15,7 @@
             </h1>
             <div class="slider-demo-block">
                 <span class="demonstration">Customized initial value</span>
-                <el-slider v-model="data_panel.size" />
+                <el-slider v-model="data_panel.size"/>
             </div>
         </div>
     </div>
@@ -50,6 +51,14 @@ import { defineComponent, ref } from "vue";
 export default defineComponent({
     name: "DecoPanel",
     props: ["data_panel"],
+    methods: {
+        handleBlur: async function () {
+            this.$emit("resumeKeyDown");
+        },
+        pauseKeyDown: function () {
+            this.$emit("pauseKeyDown");
+        },
+    },
     data() {
         return {
         }
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 089e3d9..f65d4c6 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -9,7 +9,7 @@
         :data_panel="dataPanel" @updatedDataPanel="updatedDataPanel"></DataPanelVue>
     <ControlPanelVue @home="home" @save-locations="saveLocations" @customkeydown="keydown" ref="control_panel_ref">
     </ControlPanelVue>
-    <DecoPanelVue ref="deco_panel_ref" :data_panel="dataPanel"></DecoPanelVue>
+    <DecoPanelVue ref="deco_panel_ref" :data_panel="dataPanel" @pauseKeyDown="pauseKeyDown" @resumeKeyDown="resumeKeyDown"></DecoPanelVue>
 </template>
 <script lang="ts">
 import axios from "axios";

From 36a7d068849346b372e7b589e440ac25949899be Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Tue, 4 Oct 2022 14:47:13 +0800
Subject: [PATCH 12/29] added deco box

---
 src/App.vue                  |  7 ++++++
 src/components/DecoPanel.vue | 46 ++++++++++++++++++++++++++++++++++++
 src/graphData.ts             |  3 +++
 src/views/Graph.vue          |  8 ++++++-
 4 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DecoPanel.vue

diff --git a/src/App.vue b/src/App.vue
index 7caf6f3..a0d92dc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -110,6 +110,13 @@ body {
   float: left;
 }
 
+.deco-panel {
+  background-color: pink;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}
+
 .info-panel-outer {
   position: relative;
   clear: left;
diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
new file mode 100644
index 0000000..6355c0d
--- /dev/null
+++ b/src/components/DecoPanel.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="deco-panel">
+        <div id="deco-box">
+            <h1 class="title is-4 deco-text">
+                Tags:
+            </h1>
+        </div>
+        <div id="deco-box">
+            <h1 class="title is-4 deco-text">
+                Size:
+            </h1>
+        </div>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+.deco-text {
+    color: blue;
+}
+
+.deco-panel {
+
+    #deco-box {
+        padding-left: 0.5rem;
+        align-items: center;
+        display: flex;
+        padding-top: 0.5rem;
+        margin-inline: 0.2rem;
+    }
+
+    width: 40%;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    border-top-left-radius: 1rem;
+    font-family: 'Noto Sans',
+    sans-serif;
+}
+</style>
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+    name: "DecoPanel",
+});
+</script>
\ No newline at end of file
diff --git a/src/graphData.ts b/src/graphData.ts
index 3752a5f..2365377 100644
--- a/src/graphData.ts
+++ b/src/graphData.ts
@@ -36,6 +36,9 @@ var configs = vNG.defineConfigs({
   },
   node: {
     selectable: true,
+    normal: {
+      color: node => node.color,
+    }
   },
   edge: {
     selectable: true,
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index b9efd25..684b695 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -9,11 +9,13 @@
         :data_panel="dataPanel" @updatedDataPanel="updatedDataPanel"></DataPanelVue>
     <ControlPanelVue @home="home" @save-locations="saveLocations" @customkeydown="keydown" ref="control_panel_ref">
     </ControlPanelVue>
+    <DecoPanelVue></DecoPanelVue>
 </template>
 <script lang="ts">
 import axios from "axios";
 import DataPanelVue from "../components/DataPanel.vue";
 import ControlPanelVue from "../components/ControlPanel.vue";
+import DecoPanelVue from "../components/DecoPanel.vue";
 import { defineComponent, reactive, ref } from "vue";
 import graphData from "../graphData"
 var dataPanel: any = ref({});
@@ -96,7 +98,8 @@ export default defineComponent({
     name: "Graph",
     components: {
         DataPanelVue,
-        ControlPanelVue
+        ControlPanelVue,
+        DecoPanelVue
     },
     data() {
         return {
@@ -158,6 +161,9 @@ export default defineComponent({
             } else {
                 (this.$store.state as any).edge_source_node = event.node
             }
+            console.log('onclick', event.node)
+            console.log('it is', graphData.nodes.value[event.node])
+            graphData.nodes.value[event.node].color = "gray"
         },
         create_edge: function (s: any, t: any) {
             const request_url = `${import.meta.env.VITE_API_URL}` +

From 40581136e320c790c77039663ea9a472a7db216f Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Tue, 4 Oct 2022 15:14:22 +0800
Subject: [PATCH 13/29] v model for color and size (has some vue bugs)

---
 src/components/DecoPanel.vue | 18 +++++++++++++++---
 src/views/Graph.vue          |  8 ++++----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 6355c0d..35f1294 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -1,14 +1,21 @@
 <template>
     <div class="deco-panel">
         <div id="deco-box">
-            <h1 class="title is-4 deco-text">
-                Tags:
-            </h1>
+            <div class="deco-item">
+                <h1 class="title is-4 deco-text">
+                    Tags:
+                </h1>
+                <input class="input is-hovered info-panel-item" type="text" placeholder="Name" v-model="data_panel.color"/>
+            </div>
         </div>
         <div id="deco-box">
             <h1 class="title is-4 deco-text">
                 Size:
             </h1>
+            <div class="slider-demo-block">
+                <span class="demonstration">Customized initial value</span>
+                <el-slider v-model="data_panel.size" />
+            </div>
         </div>
     </div>
 </template>
@@ -42,5 +49,10 @@ import { defineComponent, ref } from "vue";
 
 export default defineComponent({
     name: "DecoPanel",
+    props: ["data_panel"],
+    data() {
+        return {
+        }
+    }
 });
 </script>
\ No newline at end of file
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 684b695..6bce2cb 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -9,7 +9,7 @@
         :data_panel="dataPanel" @updatedDataPanel="updatedDataPanel"></DataPanelVue>
     <ControlPanelVue @home="home" @save-locations="saveLocations" @customkeydown="keydown" ref="control_panel_ref">
     </ControlPanelVue>
-    <DecoPanelVue></DecoPanelVue>
+    <DecoPanelVue ref="deco_panel_ref" :data_panel="dataPanel"></DecoPanelVue>
 </template>
 <script lang="ts">
 import axios from "axios";
@@ -23,6 +23,7 @@ var dataPanel: any = ref({});
 const project_id: any = ref("");
 const graph_ref: any = ref();
 const control_panel_ref: any = ref();
+const deco_panel_ref: any = ref();
 var pause_key_down: boolean = false;
 
 function delete_node(node: any) {
@@ -47,6 +48,8 @@ function delete_edge(edge: any) {
         })
 }
 function add_node(raw: any) {
+    if(!('color' in raw)) raw.color = 'blue'
+    if(!('size' in raw)) raw.size = 10
     graphData.nodes.value[`node${raw.uid}`] = raw
     if('pos_x' in raw && 'pos_y' in raw){
         graphData.layouts.value.nodes[`node${raw.uid}`] = {
@@ -161,9 +164,6 @@ export default defineComponent({
             } else {
                 (this.$store.state as any).edge_source_node = event.node
             }
-            console.log('onclick', event.node)
-            console.log('it is', graphData.nodes.value[event.node])
-            graphData.nodes.value[event.node].color = "gray"
         },
         create_edge: function (s: any, t: any) {
             const request_url = `${import.meta.env.VITE_API_URL}` +

From 80381bc7037346031b0947baffa3ab5040a982f6 Mon Sep 17 00:00:00 2001
From: Tan Chien Hao <tanchienhao@gmail.com>
Date: Tue, 4 Oct 2022 21:35:18 +0800
Subject: [PATCH 14/29] add list delete tags implemented

---
 src/components/DecoPanel.vue | 59 ++++++++++++++++++++++++++++++++++--
 src/views/Graph.vue          |  2 +-
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 35f1294..bb03d82 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -5,7 +5,12 @@
                 <h1 class="title is-4 deco-text">
                     Tags:
                 </h1>
-                <input class="input is-hovered info-panel-item" type="text" placeholder="Name" v-model="data_panel.color"/>
+                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag" v-model="tag_name" />
+                <input class="button is-primary" placeholder="Add Tag" @click="add_tag" />
+                <input class="button is-primary" placeholder="List Tags" @click="list_tags" />
+                <input class="button is-primary" placeholder="Delete Tag (by uid)" @click="delete_tag" />
+                <input class="input is-hovered info-panel-item" type="text" placeholder="Color"
+                    v-model="data_panel.color" />
             </div>
         </div>
         <div id="deco-box">
@@ -45,13 +50,63 @@
 }
 </style>
 <script lang="ts">
+import { assert } from "@vue/compiler-core";
+import axios from "axios";
+import { ta } from "element-plus/es/locale";
 import { defineComponent, ref } from "vue";
 
+const tag_name = ref("")
 export default defineComponent({
     name: "DecoPanel",
-    props: ["data_panel"],
+    props: ["data_panel", "project_id"],
+    methods: {
+        add_tag: function () {
+            if (tag_name.value == "") return
+            console.log("adding", tag_name.value)
+            console.log('inside project', this.$props.project_id)
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/create_tag?name=${tag_name.value}`
+            axios.post(request_url)
+                .then((response) => {
+                    console.log(response.data)
+                })
+        },
+        list_tags: async function () {
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/list_tags`
+            return axios.get(request_url)
+                .then((response) => {
+                    console.log(response.data)
+                    return response.data
+                })
+        },
+        delete_tag: async function () {
+            const tags = await this.list_tags().then((arr) => {return arr;})
+            console.log(tags)
+            try{
+                assert(!isNaN(parseInt(tag_name.value)))
+            }catch{
+                return
+            }
+            if(tags.filter((tag : any) => tag.uid == parseInt(tag_name.value)).length == 0) return
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/delete_tag?uid=${tag_name.value}`
+            axios.post(request_url)
+                .then((response) => {
+                    console.log(response.data)
+                })
+                .catch((err) => {
+                    console.log(err)
+                })
+
+        }
+    },
     data() {
         return {
+            tag_name
         }
     }
 });
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 6bce2cb..2b859ca 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -9,7 +9,7 @@
         :data_panel="dataPanel" @updatedDataPanel="updatedDataPanel"></DataPanelVue>
     <ControlPanelVue @home="home" @save-locations="saveLocations" @customkeydown="keydown" ref="control_panel_ref">
     </ControlPanelVue>
-    <DecoPanelVue ref="deco_panel_ref" :data_panel="dataPanel"></DecoPanelVue>
+    <DecoPanelVue ref="deco_panel_ref" :data_panel="dataPanel" :project_id="project_id"></DecoPanelVue>
 </template>
 <script lang="ts">
 import axios from "axios";

From a93840efd6cda7da670066af54aafe0bbd99014e Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Wed, 5 Oct 2022 07:40:56 +0800
Subject: [PATCH 15/29] tag list

---
 src/components/DecoPanel.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index d57a1e2..e8f1d3e 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -5,6 +5,9 @@
                 <h1 class="title is-4 deco-text">
                     Tags:
                 </h1>
+                <div id="tags-list">
+                    <text class="subtitle tag">hi</text>
+                </div>
                 <input class="input is-hovered info-panel-item" type="text" placeholder="Color"
                     v-model="data_panel.color" @focus="pauseKeyDown" @blur="handleBlur()" />
             </div>
@@ -15,7 +18,7 @@
             </h1>
             <div class="slider-demo-block">
                 <span class="demonstration">Customized initial value</span>
-                <el-slider v-model="data_panel.size"/>
+                <el-slider v-model="data_panel.size" />
             </div>
         </div>
     </div>
@@ -26,6 +29,10 @@
     color: blue;
 }
 
+.tag  {
+    margin-inline: 1rem;
+}
+
 .deco-panel {
 
     #deco-box {

From 7404b2caf3c02e7443ca4185caf2c4c7c2a2bca8 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Wed, 5 Oct 2022 07:47:32 +0800
Subject: [PATCH 16/29] oops forgot to handle merge conflict

---
 src/views/Graph.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 05f3276..f65d4c6 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -48,14 +48,8 @@ function delete_edge(edge: any) {
         })
 }
 function add_node(raw: any) {
-<<<<<<< HEAD
     if(!('color' in raw)) raw.color = 'blue'
     if(!('size' in raw)) raw.size = 20
-||||||| ad87ade
-=======
-    if(!('color' in raw)) raw.color = 'blue'
-    if(!('size' in raw)) raw.size = 10
->>>>>>> origin/coloring-alt
     graphData.nodes.value[`node${raw.uid}`] = raw
     if('pos_x' in raw && 'pos_y' in raw){
         graphData.layouts.value.nodes[`node${raw.uid}`] = {

From f51ff819e6d44b02e426d019d61bdd55de999a7a Mon Sep 17 00:00:00 2001
From: Tan Chien Hao <tanchienhao@gmail.com>
Date: Tue, 4 Oct 2022 21:35:18 +0800
Subject: [PATCH 17/29] add list delete tags implemented

---
 src/components/DecoPanel.vue | 54 +++++++++++++++++++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 72c3dd8..bc6df46 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -10,6 +10,10 @@
                 </div>
                 <input class="input is-hovered info-panel-item" type="text" placeholder="Color"
                     v-model="data_panel.color" @focus="pauseKeyDown" @blur="handleBlur()" />
+                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag" v-model="tag_name" />
+                <input class="button is-primary" placeholder="Add Tag" @click="add_tag" />
+                <input class="button is-primary" placeholder="List Tags" @click="list_tags" />
+                <input class="button is-primary" placeholder="Delete Tag (by uid)" @click="delete_tag" />
             </div>
         </div>
         <div id="deco-box">
@@ -53,11 +57,15 @@
 }
 </style>
 <script lang="ts">
+import { assert } from "@vue/compiler-core";
+import axios from "axios";
+import { ta } from "element-plus/es/locale";
 import { defineComponent, ref } from "vue";
 
+const tag_name = ref("")
 export default defineComponent({
     name: "DecoPanel",
-    props: ["data_panel"],
+    props: ["data_panel", "project_id"],
     methods: {
         handleBlur: async function () {
             this.$emit("resumeKeyDown");
@@ -65,9 +73,53 @@ export default defineComponent({
         pauseKeyDown: function () {
             this.$emit("pauseKeyDown");
         },
+        add_tag: function () {
+            if (tag_name.value == "") return
+            console.log("adding", tag_name.value)
+            console.log('inside project', this.$props.project_id)
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/create_tag?name=${tag_name.value}`
+            axios.post(request_url)
+                .then((response) => {
+                    console.log(response.data)
+                })
+        },
+        list_tags: async function () {
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/list_tags`
+            return axios.get(request_url)
+                .then((response) => {
+                    console.log(response.data)
+                    return response.data
+                })
+        },
+        delete_tag: async function () {
+            const tags = await this.list_tags().then((arr) => {return arr;})
+            console.log(tags)
+            try{
+                assert(!isNaN(parseInt(tag_name.value)))
+            }catch{
+                return
+            }
+            if(tags.filter((tag : any) => tag.uid == parseInt(tag_name.value)).length == 0) return
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/delete_tag?uid=${tag_name.value}`
+            axios.post(request_url)
+                .then((response) => {
+                    console.log(response.data)
+                })
+                .catch((err) => {
+                    console.log(err)
+                })
+
+        }
     },
     data() {
         return {
+            tag_name
         }
     }
 });

From 3207c8c601104fed347ec39da801abe3616c4577 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Wed, 5 Oct 2022 07:53:35 +0800
Subject: [PATCH 18/29] fixed tag bug

---
 src/views/Graph.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index f65d4c6..8bd134a 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -9,7 +9,7 @@
         :data_panel="dataPanel" @updatedDataPanel="updatedDataPanel"></DataPanelVue>
     <ControlPanelVue @home="home" @save-locations="saveLocations" @customkeydown="keydown" ref="control_panel_ref">
     </ControlPanelVue>
-    <DecoPanelVue ref="deco_panel_ref" :data_panel="dataPanel" @pauseKeyDown="pauseKeyDown" @resumeKeyDown="resumeKeyDown"></DecoPanelVue>
+    <DecoPanelVue ref="deco_panel_ref" :data_panel="dataPanel" :project_id="project_id" @pauseKeyDown="pauseKeyDown" @resumeKeyDown="resumeKeyDown"></DecoPanelVue>
 </template>
 <script lang="ts">
 import axios from "axios";

From d7daa656bbc0947a12beb4512d66454c7aa7a926 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Wed, 5 Oct 2022 09:13:59 +0800
Subject: [PATCH 19/29] basic tagging

---
 src/components/DecoPanel.vue | 82 ++++++++++++++++++++++++++++--------
 1 file changed, 65 insertions(+), 17 deletions(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index bc6df46..92a576c 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -6,14 +6,19 @@
                     Tags:
                 </h1>
                 <div id="tags-list">
-                    <text class="subtitle tag">hi</text>
+                    <text v-for="tag in tags_list" class="subtitle tag">{{(tag as any).name}}</text>
                 </div>
+                <br>
                 <input class="input is-hovered info-panel-item" type="text" placeholder="Color"
                     v-model="data_panel.color" @focus="pauseKeyDown" @blur="handleBlur()" />
-                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag" v-model="tag_name" />
-                <input class="button is-primary" placeholder="Add Tag" @click="add_tag" />
-                <input class="button is-primary" placeholder="List Tags" @click="list_tags" />
-                <input class="button is-primary" placeholder="Delete Tag (by uid)" @click="delete_tag" />
+                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag" v-model="tag_name" 
+                        autocomplete="on" list="autocomplete_tags"/>
+                <datalist id="autocomplete_tags">
+                    <option v-for="tag in tags_suggestions_list" :value="(tag as any).name">{{`uid: (${(tag as any).uid})`}}</option>
+                </datalist>
+                <input class="button is-primary" type="button" value="Add Tag" @click="add_tag" />
+                <input class="button is-primary" type="button" value="List ALL Tags" @click="list_all_tags" />
+                <input class="button is-primary" type="button" value="Delete Tag (by uid)" @click="delete_tag" />
             </div>
         </div>
         <div id="deco-box">
@@ -63,6 +68,8 @@ import { ta } from "element-plus/es/locale";
 import { defineComponent, ref } from "vue";
 
 const tag_name = ref("")
+const tags_list = ref([]);
+const tags_suggestions_list = ref([]);
 export default defineComponent({
     name: "DecoPanel",
     props: ["data_panel", "project_id"],
@@ -73,43 +80,77 @@ export default defineComponent({
         pauseKeyDown: function () {
             this.$emit("pauseKeyDown");
         },
-        add_tag: function () {
+        // checks whether name_of_tag is inside tags
+        tag_exists: function(tags: any, name_of_tag: string) {
+            const tags_matching_name = tags.filter((tag : any) => tag.name == name_of_tag)
+            if(tags_matching_name.length == 0) return tags_matching_name[0]
+            else return null
+        },
+        add_tag: async function (){
+            if(tag_name.value == "") return
+            const tags = await this.list_all_tags(false)
+            var first_tag_matching_name = this.tag_exists(tags, tag_name.value)
+            if(first_tag_matching_name == null){
+                first_tag_matching_name = await this.create_tag().then((res) => {return res;})
+            }
+            const resource_id = this.$props.data_panel.uid;
+            if(!resource_id) return
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/resource/${resource_id}` +
+                `/add_tag?tag_uid=${(first_tag_matching_name as any).uid}`
+            axios.post(request_url)
+                .then((response) => {
+                    (tags_list.value as any).push(response.data)
+                })
+        },
+        create_tag: async function () {
             if (tag_name.value == "") return
-            console.log("adding", tag_name.value)
-            console.log('inside project', this.$props.project_id)
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/create_tag?name=${tag_name.value}`
-            axios.post(request_url)
+            return axios.post(request_url)
                 .then((response) => {
-                    console.log(response.data)
+                    return response.data
                 })
         },
-        list_tags: async function () {
+        list_tags: async function (){
+            const resource_id = this.$props.data_panel.uid;
+            if(!resource_id) return
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
+                `/resource/${resource_id}` +
                 `/list_tags`
             return axios.get(request_url)
                 .then((response) => {
-                    console.log(response.data)
+                    tags_list.value = response.data
+                    return response.data
+                })
+        },
+        list_all_tags: async function (update_tags_list = true) {
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/list_all_tags`
+            return axios.get(request_url)
+                .then((response) => {
+                    if(update_tags_list) tags_list.value = response.data
+                    tags_suggestions_list.value = response.data
                     return response.data
                 })
         },
         delete_tag: async function () {
-            const tags = await this.list_tags().then((arr) => {return arr;})
-            console.log(tags)
+            const tags = await this.list_all_tags().then((arr) => {return arr;})
             try{
                 assert(!isNaN(parseInt(tag_name.value)))
             }catch{
                 return
             }
-            if(tags.filter((tag : any) => tag.uid == parseInt(tag_name.value)).length == 0) return
+            if(tags.filter((tag : any) => tag.uid == parseInt(tag_name.value)).length == 0) return 
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/delete_tag?uid=${tag_name.value}`
             axios.post(request_url)
                 .then((response) => {
-                    console.log(response.data)
                 })
                 .catch((err) => {
                     console.log(err)
@@ -119,7 +160,14 @@ export default defineComponent({
     },
     data() {
         return {
-            tag_name
+            tag_name,
+            tags_list,
+            tags_suggestions_list
+        }
+    },
+    watch: {
+        'data_panel.uid'(new_value){
+            this.list_tags()
         }
     }
 });

From 1dd6639aabd218e85aa0499e13b5fb0c294e943c Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Wed, 5 Oct 2022 12:23:58 +0800
Subject: [PATCH 20/29] tagging node now works great

---
 src/components/DecoPanel.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 92a576c..36147e5 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -17,7 +17,7 @@
                     <option v-for="tag in tags_suggestions_list" :value="(tag as any).name">{{`uid: (${(tag as any).uid})`}}</option>
                 </datalist>
                 <input class="button is-primary" type="button" value="Add Tag" @click="add_tag" />
-                <input class="button is-primary" type="button" value="List ALL Tags" @click="list_all_tags" />
+                <input class="button is-primary" type="button" value="List ALL Tags" @click="list_all_tags(true)" />
                 <input class="button is-primary" type="button" value="Delete Tag (by uid)" @click="delete_tag" />
             </div>
         </div>
@@ -81,16 +81,19 @@ export default defineComponent({
             this.$emit("pauseKeyDown");
         },
         // checks whether name_of_tag is inside tags
+        // returning the first one if it does
         tag_exists: function(tags: any, name_of_tag: string) {
             const tags_matching_name = tags.filter((tag : any) => tag.name == name_of_tag)
-            if(tags_matching_name.length == 0) return tags_matching_name[0]
+            if(tags_matching_name.length > 0) return tags_matching_name[0]
             else return null
         },
         add_tag: async function (){
             if(tag_name.value == "") return
             const tags = await this.list_all_tags(false)
             var first_tag_matching_name = this.tag_exists(tags, tag_name.value)
+            console.log(first_tag_matching_name)
             if(first_tag_matching_name == null){
+                console.log('creating')
                 first_tag_matching_name = await this.create_tag().then((res) => {return res;})
             }
             const resource_id = this.$props.data_panel.uid;
@@ -127,7 +130,7 @@ export default defineComponent({
                     return response.data
                 })
         },
-        list_all_tags: async function (update_tags_list = true) {
+        list_all_tags: async function (update_tags_list: boolean) {
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/list_all_tags`
@@ -139,7 +142,7 @@ export default defineComponent({
                 })
         },
         delete_tag: async function () {
-            const tags = await this.list_all_tags().then((arr) => {return arr;})
+            const tags = await this.list_all_tags(false).then((arr) => {return arr;})
             try{
                 assert(!isNaN(parseInt(tag_name.value)))
             }catch{
@@ -168,6 +171,7 @@ export default defineComponent({
     watch: {
         'data_panel.uid'(new_value){
             this.list_tags()
+            this.list_all_tags(false)
         }
     }
 });

From ea034d1e8cfa4739cf58ea9f63b40a74ada7d8d3 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Wed, 5 Oct 2022 12:43:44 +0800
Subject: [PATCH 21/29] ignore useless suggestions

---
 src/components/DecoPanel.vue | 77 ++++++++++++++++++++++++------------
 1 file changed, 51 insertions(+), 26 deletions(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 36147e5..fc8cabc 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -3,7 +3,7 @@
         <div id="deco-box">
             <div class="deco-item">
                 <h1 class="title is-4 deco-text">
-                    Tags:
+                    Tags: {{ showing_tags_for }}
                 </h1>
                 <div id="tags-list">
                     <text v-for="tag in tags_list" class="subtitle tag">{{(tag as any).name}}</text>
@@ -11,13 +11,14 @@
                 <br>
                 <input class="input is-hovered info-panel-item" type="text" placeholder="Color"
                     v-model="data_panel.color" @focus="pauseKeyDown" @blur="handleBlur()" />
-                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag" v-model="tag_name" 
-                        autocomplete="on" list="autocomplete_tags"/>
+                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag" v-model="tag_name"
+                    autocomplete="on" list="autocomplete_tags" />
                 <datalist id="autocomplete_tags">
-                    <option v-for="tag in tags_suggestions_list" :value="(tag as any).name">{{`uid: (${(tag as any).uid})`}}</option>
+                    <option v-for="tag in tags_suggestions_list" :value="(tag as any).name">{{`uid: (${(tag as
+                    any).uid})`}}</option>
                 </datalist>
                 <input class="button is-primary" type="button" value="Add Tag" @click="add_tag" />
-                <input class="button is-primary" type="button" value="List ALL Tags" @click="list_all_tags(true)" />
+                <input class="button is-primary" type="button" value="List ALL Tags in Project" @click="list_all_tags(true)" />
                 <input class="button is-primary" type="button" value="Delete Tag (by uid)" @click="delete_tag" />
             </div>
         </div>
@@ -38,7 +39,7 @@
     color: blue;
 }
 
-.tag  {
+.tag {
     margin-inline: 1rem;
 }
 
@@ -70,6 +71,7 @@ import { defineComponent, ref } from "vue";
 const tag_name = ref("")
 const tags_list = ref([]);
 const tags_suggestions_list = ref([]);
+const showing_tags_for = ref("");
 export default defineComponent({
     name: "DecoPanel",
     props: ["data_panel", "project_id"],
@@ -82,22 +84,22 @@ export default defineComponent({
         },
         // checks whether name_of_tag is inside tags
         // returning the first one if it does
-        tag_exists: function(tags: any, name_of_tag: string) {
-            const tags_matching_name = tags.filter((tag : any) => tag.name == name_of_tag)
-            if(tags_matching_name.length > 0) return tags_matching_name[0]
+        tag_exists: function (tags: any, name_of_tag: string) {
+            const tags_matching_name = tags.filter((tag: any) => tag.name == name_of_tag)
+            if (tags_matching_name.length > 0) return tags_matching_name[0]
             else return null
         },
-        add_tag: async function (){
-            if(tag_name.value == "") return
+        add_tag: async function () {
+            if (tag_name.value == "") return
             const tags = await this.list_all_tags(false)
             var first_tag_matching_name = this.tag_exists(tags, tag_name.value)
             console.log(first_tag_matching_name)
-            if(first_tag_matching_name == null){
+            if (first_tag_matching_name == null) {
                 console.log('creating')
-                first_tag_matching_name = await this.create_tag().then((res) => {return res;})
+                first_tag_matching_name = await this.create_tag().then((res) => { return res; })
             }
             const resource_id = this.$props.data_panel.uid;
-            if(!resource_id) return
+            if (!resource_id) return
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/resource/${resource_id}` +
@@ -117,9 +119,9 @@ export default defineComponent({
                     return response.data
                 })
         },
-        list_tags: async function (){
+        list_tags: async function () {
             const resource_id = this.$props.data_panel.uid;
-            if(!resource_id) return
+            if (!resource_id) return
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/resource/${resource_id}` +
@@ -136,19 +138,22 @@ export default defineComponent({
                 `/list_all_tags`
             return axios.get(request_url)
                 .then((response) => {
-                    if(update_tags_list) tags_list.value = response.data
+                    if (update_tags_list) {
+                        tags_list.value = response.data
+                        showing_tags_for.value = "Entire Project"
+                    }
                     tags_suggestions_list.value = response.data
                     return response.data
                 })
         },
         delete_tag: async function () {
-            const tags = await this.list_all_tags(false).then((arr) => {return arr;})
-            try{
+            const tags = await this.list_all_tags(false).then((arr) => { return arr; })
+            try {
                 assert(!isNaN(parseInt(tag_name.value)))
-            }catch{
+            } catch {
                 return
             }
-            if(tags.filter((tag : any) => tag.uid == parseInt(tag_name.value)).length == 0) return 
+            if (tags.filter((tag: any) => tag.uid == parseInt(tag_name.value)).length == 0) return
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/delete_tag?uid=${tag_name.value}`
@@ -158,20 +163,40 @@ export default defineComponent({
                 .catch((err) => {
                     console.log(err)
                 })
-
+        },
+        dissociate_tag: async function (name_of_tag: string) {
+            var first_tag_matching_name = this.tag_exists(tags_list.value, name_of_tag)
+            if (first_tag_matching_name == null) {
+                console.log('creating')
+                first_tag_matching_name = await this.create_tag().then((res) => { return res; })
+            }
+            const resource_id = this.$props.data_panel.uid;
+            if (!resource_id) return
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/resource/${resource_id}` +
+                `/add_tag?tag_uid=${(first_tag_matching_name as any).uid}`
+            axios.post(request_url)
+                .then((response) => {
+                    (tags_list.value as any).push(response.data)
+                })
         }
     },
     data() {
         return {
             tag_name,
             tags_list,
-            tags_suggestions_list
+            tags_suggestions_list,
+            showing_tags_for
         }
     },
     watch: {
-        'data_panel.uid'(new_value){
-            this.list_tags()
-            this.list_all_tags(false)
+        async 'data_panel.uid'(new_value) {
+            await this.list_tags()
+            await this.list_all_tags(false)
+            tags_suggestions_list.value = tags_suggestions_list.value.filter((v: any) => 
+                            (this.tag_exists(tags_list.value, v.name) == null))
+            showing_tags_for.value = "Node " + new_value
         }
     }
 });

From ee883fa7ee2235847be8770c7a5f7c1814cb0b50 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Wed, 5 Oct 2022 12:46:41 +0800
Subject: [PATCH 22/29] disabled add tag button when viewing all tags in
 project

---
 src/components/DecoPanel.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index fc8cabc..e0405de 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -17,7 +17,7 @@
                     <option v-for="tag in tags_suggestions_list" :value="(tag as any).name">{{`uid: (${(tag as
                     any).uid})`}}</option>
                 </datalist>
-                <input class="button is-primary" type="button" value="Add Tag" @click="add_tag" />
+                <input class="button is-primary" type="button" value="Add Tag" @click="add_tag" :disabled="disable_add"/>
                 <input class="button is-primary" type="button" value="List ALL Tags in Project" @click="list_all_tags(true)" />
                 <input class="button is-primary" type="button" value="Delete Tag (by uid)" @click="delete_tag" />
             </div>
@@ -72,6 +72,7 @@ const tag_name = ref("")
 const tags_list = ref([]);
 const tags_suggestions_list = ref([]);
 const showing_tags_for = ref("");
+const disable_add = ref(false);
 export default defineComponent({
     name: "DecoPanel",
     props: ["data_panel", "project_id"],
@@ -129,6 +130,7 @@ export default defineComponent({
             return axios.get(request_url)
                 .then((response) => {
                     tags_list.value = response.data
+                    disable_add.value = false;
                     return response.data
                 })
         },
@@ -141,6 +143,7 @@ export default defineComponent({
                     if (update_tags_list) {
                         tags_list.value = response.data
                         showing_tags_for.value = "Entire Project"
+                        disable_add.value = true
                     }
                     tags_suggestions_list.value = response.data
                     return response.data
@@ -187,7 +190,8 @@ export default defineComponent({
             tag_name,
             tags_list,
             tags_suggestions_list,
-            showing_tags_for
+            showing_tags_for,
+            disable_add
         }
     },
     watch: {

From 22514b88669366c6f47ebca603bbe4b8fd2d9b90 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Wed, 5 Oct 2022 13:16:49 +0800
Subject: [PATCH 23/29] added dissociating of tags!

---
 src/components/DecoPanel.vue | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index e0405de..00744e6 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -6,7 +6,9 @@
                     Tags: {{ showing_tags_for }}
                 </h1>
                 <div id="tags-list">
-                    <text v-for="tag in tags_list" class="subtitle tag">{{(tag as any).name}}</text>
+                    <text @contextmenu.prevent="dissociate_tag((tag as any).name)" v-for="tag in tags_list" class="subtitle tag">
+                        {{(tag as any).name}}
+                    </text>
                 </div>
                 <br>
                 <input class="input is-hovered info-panel-item" type="text" placeholder="Color"
@@ -17,8 +19,10 @@
                     <option v-for="tag in tags_suggestions_list" :value="(tag as any).name">{{`uid: (${(tag as
                     any).uid})`}}</option>
                 </datalist>
-                <input class="button is-primary" type="button" value="Add Tag" @click="add_tag" :disabled="disable_add"/>
-                <input class="button is-primary" type="button" value="List ALL Tags in Project" @click="list_all_tags(true)" />
+                <input class="button is-primary" type="button" value="Add Tag" @click="add_tag"
+                    :disabled="disable_add" />
+                <input class="button is-primary" type="button" value="List ALL Tags in Project"
+                    @click="list_all_tags(true)" />
                 <input class="button is-primary" type="button" value="Delete Tag (by uid)" @click="delete_tag" />
             </div>
         </div>
@@ -96,7 +100,6 @@ export default defineComponent({
             var first_tag_matching_name = this.tag_exists(tags, tag_name.value)
             console.log(first_tag_matching_name)
             if (first_tag_matching_name == null) {
-                console.log('creating')
                 first_tag_matching_name = await this.create_tag().then((res) => { return res; })
             }
             const resource_id = this.$props.data_panel.uid;
@@ -168,21 +171,24 @@ export default defineComponent({
                 })
         },
         dissociate_tag: async function (name_of_tag: string) {
+            console.log('diss', name_of_tag)
             var first_tag_matching_name = this.tag_exists(tags_list.value, name_of_tag)
-            if (first_tag_matching_name == null) {
-                console.log('creating')
-                first_tag_matching_name = await this.create_tag().then((res) => { return res; })
-            }
+            if (first_tag_matching_name == null) return
             const resource_id = this.$props.data_panel.uid;
             if (!resource_id) return
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/resource/${resource_id}` +
-                `/add_tag?tag_uid=${(first_tag_matching_name as any).uid}`
+                `/dissociate_tag?tag_uid=${(first_tag_matching_name as any).uid}`
             axios.post(request_url)
                 .then((response) => {
-                    (tags_list.value as any).push(response.data)
+                    console.log(response.data)
+                    this.list_tags()
                 })
+        },
+        filter_suggestions: function () {
+            tags_suggestions_list.value = tags_suggestions_list.value.filter((v: any) =>
+                (this.tag_exists(tags_list.value, v.name) == null))
         }
     },
     data() {
@@ -198,8 +204,7 @@ export default defineComponent({
         async 'data_panel.uid'(new_value) {
             await this.list_tags()
             await this.list_all_tags(false)
-            tags_suggestions_list.value = tags_suggestions_list.value.filter((v: any) => 
-                            (this.tag_exists(tags_list.value, v.name) == null))
+            this.filter_suggestions()
             showing_tags_for.value = "Node " + new_value
         }
     }

From df40f8681c59aa3aa6a16ca711be30afd5102c78 Mon Sep 17 00:00:00 2001
From: Tan Chien Hao <tanchienhao@gmail.com>
Date: Wed, 5 Oct 2022 22:38:59 +0800
Subject: [PATCH 24/29] implemented tag coloring

---
 src/App.vue                  |  2 +-
 src/components/DecoPanel.vue | 45 ++++++++++++++++++++++++++++++------
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a0d92dc..31b2f4a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -111,7 +111,7 @@ body {
 }
 
 .deco-panel {
-  background-color: pink;
+  background-color: yellowgreen;
   position: fixed;
   bottom: 0;
   right: 0;
diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 00744e6..8b86ab1 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -6,14 +6,19 @@
                     Tags: {{ showing_tags_for }}
                 </h1>
                 <div id="tags-list">
-                    <text @contextmenu.prevent="dissociate_tag((tag as any).name)" v-for="tag in tags_list" class="subtitle tag">
+                    <text @contextmenu.prevent="dissociate_tag((tag as any).name)" 
+                        v-for="tag in tags_list" 
+                        class="subtitle tag"
+                        :style="{'background-color': (tag as any).color}"
+                        @click="tag_focus = tag">
                         {{(tag as any).name}}
                     </text>
                 </div>
                 <br>
                 <input class="input is-hovered info-panel-item" type="text" placeholder="Color"
-                    v-model="data_panel.color" @focus="pauseKeyDown" @blur="handleBlur()" />
-                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag" v-model="tag_name"
+                    :value="tag_color" @input="preview_tag_color" @change="update_tag_color" @focus="pauseKeyDown" @blur="handleBlur()" />
+                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag" 
+                    :value="tag_name" @change="update_tag_name"
                     autocomplete="on" list="autocomplete_tags" />
                 <datalist id="autocomplete_tags">
                     <option v-for="tag in tags_suggestions_list" :value="(tag as any).name">{{`uid: (${(tag as
@@ -77,6 +82,7 @@ const tags_list = ref([]);
 const tags_suggestions_list = ref([]);
 const showing_tags_for = ref("");
 const disable_add = ref(false);
+const tag_focus = ref(null);
 export default defineComponent({
     name: "DecoPanel",
     props: ["data_panel", "project_id"],
@@ -182,22 +188,39 @@ export default defineComponent({
                 `/dissociate_tag?tag_uid=${(first_tag_matching_name as any).uid}`
             axios.post(request_url)
                 .then((response) => {
-                    console.log(response.data)
                     this.list_tags()
                 })
         },
         filter_suggestions: function () {
             tags_suggestions_list.value = tags_suggestions_list.value.filter((v: any) =>
                 (this.tag_exists(tags_list.value, v.name) == null))
-        }
+        },
+        update_tag_color: function(e: any){
+            if(tag_focus.value == null) return
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/tag/${(tag_focus as any).value.uid}` +
+                `/update_color?color=${e.target.value}`
+            axios.post(request_url)
+                .then((response) => {
+                    tag_focus.value = response.data
+                })
+        },
+        preview_tag_color: function(e: any){
+            if(tag_focus.value == null) return
+            (tag_focus as any).value.color = e.target.value
+        },
+        update_tag_name: function(e: any){
+            console.log(e)
+        },
     },
     data() {
         return {
-            tag_name,
             tags_list,
             tags_suggestions_list,
             showing_tags_for,
-            disable_add
+            disable_add,
+            tag_focus
         }
     },
     watch: {
@@ -207,6 +230,14 @@ export default defineComponent({
             this.filter_suggestions()
             showing_tags_for.value = "Node " + new_value
         }
+    },
+    computed: {
+        tag_name(){
+            return tag_focus.value == null ? '' : (tag_focus as any).value.name
+        },
+        tag_color(){
+            return tag_focus.value == null ? '' : (tag_focus as any).value.color
+        }
     }
 });
 </script>

From 3616d35117b6800c3bba03309ef628198db9b361 Mon Sep 17 00:00:00 2001
From: Tan Chien Hao <tanchienhao@gmail.com>
Date: Wed, 5 Oct 2022 23:12:32 +0800
Subject: [PATCH 25/29] bug fixes for adding tags

---
 src/components/DecoPanel.vue | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 8b86ab1..249f2cf 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -18,7 +18,7 @@
                 <input class="input is-hovered info-panel-item" type="text" placeholder="Color"
                     :value="tag_color" @input="preview_tag_color" @change="update_tag_color" @focus="pauseKeyDown" @blur="handleBlur()" />
                 <input class="input is-hovered info-panel-item" type="text" placeholder="Tag" 
-                    :value="tag_name" @change="update_tag_name"
+                    v-model="tag_name" @change="update_tag_name"
                     autocomplete="on" list="autocomplete_tags" />
                 <datalist id="autocomplete_tags">
                     <option v-for="tag in tags_suggestions_list" :value="(tag as any).name">{{`uid: (${(tag as
@@ -74,15 +74,14 @@
 <script lang="ts">
 import { assert } from "@vue/compiler-core";
 import axios from "axios";
-import { ta } from "element-plus/es/locale";
 import { defineComponent, ref } from "vue";
 
-const tag_name = ref("")
 const tags_list = ref([]);
 const tags_suggestions_list = ref([]);
 const showing_tags_for = ref("");
 const disable_add = ref(false);
 const tag_focus = ref(null);
+const tag_name_input = ref("");
 export default defineComponent({
     name: "DecoPanel",
     props: ["data_panel", "project_id"],
@@ -101,9 +100,9 @@ export default defineComponent({
             else return null
         },
         add_tag: async function () {
-            if (tag_name.value == "") return
+            if (this.tag_name_input == "") return
             const tags = await this.list_all_tags(false)
-            var first_tag_matching_name = this.tag_exists(tags, tag_name.value)
+            var first_tag_matching_name = this.tag_exists(tags, this.tag_name_input)
             console.log(first_tag_matching_name)
             if (first_tag_matching_name == null) {
                 first_tag_matching_name = await this.create_tag().then((res) => { return res; })
@@ -120,10 +119,10 @@ export default defineComponent({
                 })
         },
         create_tag: async function () {
-            if (tag_name.value == "") return
+            if (this.tag_name_input == "") return
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
-                `/create_tag?name=${tag_name.value}`
+                `/create_tag?name=${this.tag_name_input}`
             return axios.post(request_url)
                 .then((response) => {
                     return response.data
@@ -161,14 +160,14 @@ export default defineComponent({
         delete_tag: async function () {
             const tags = await this.list_all_tags(false).then((arr) => { return arr; })
             try {
-                assert(!isNaN(parseInt(tag_name.value)))
+                assert(!isNaN(parseInt(this.tag_name_input)))
             } catch {
                 return
             }
-            if (tags.filter((tag: any) => tag.uid == parseInt(tag_name.value)).length == 0) return
+            if (tags.filter((tag: any) => tag.uid == parseInt(this.tag_name_input)).length == 0) return
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
-                `/delete_tag?uid=${tag_name.value}`
+                `/delete_tag?uid=${this.tag_name_input}`
             axios.post(request_url)
                 .then((response) => {
                 })
@@ -220,7 +219,8 @@ export default defineComponent({
             tags_suggestions_list,
             showing_tags_for,
             disable_add,
-            tag_focus
+            tag_focus,
+            tag_name_input
         }
     },
     watch: {
@@ -232,8 +232,13 @@ export default defineComponent({
         }
     },
     computed: {
-        tag_name(){
-            return tag_focus.value == null ? '' : (tag_focus as any).value.name
+        tag_name: {
+            get: function(){
+                return tag_focus.value == null ? '' : (tag_focus as any).value.name
+            },
+            set: function(nv: string) {
+                this.tag_name_input = nv
+            }
         },
         tag_color(){
             return tag_focus.value == null ? '' : (tag_focus as any).value.color

From cc4dea8198942f5bf2995b584213a2bf8a156db9 Mon Sep 17 00:00:00 2001
From: Tan Chien Hao <tanchienhao@gmail.com>
Date: Wed, 5 Oct 2022 23:34:02 +0800
Subject: [PATCH 26/29] coloring nodes

---
 src/components/DecoPanel.vue | 17 ++++++++++++++++-
 src/views/Graph.vue          |  7 ++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 249f2cf..3896556 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -10,7 +10,7 @@
                         v-for="tag in tags_list" 
                         class="subtitle tag"
                         :style="{'background-color': (tag as any).color}"
-                        @click="tag_focus = tag">
+                        @click="click_tag(tag)">
                         {{(tag as any).name}}
                     </text>
                 </div>
@@ -212,6 +212,21 @@ export default defineComponent({
         update_tag_name: function(e: any){
             console.log(e)
         },
+        click_tag: function(tag: any){
+            (tag_focus as any).value = tag
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/tag/${(tag_focus as any).value.uid}` +
+                `/list_resources`
+            axios.get(request_url)
+                .then((response) => {
+                    var arr = []
+                    for(const i of response.data){
+                        arr.push(i.uid)
+                    }
+                    this.$emit('color_nodes', arr, (tag_focus as any).value.color)
+                })
+        }
     },
     data() {
         return {
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 8bd134a..92ba795 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -9,7 +9,7 @@
         :data_panel="dataPanel" @updatedDataPanel="updatedDataPanel"></DataPanelVue>
     <ControlPanelVue @home="home" @save-locations="saveLocations" @customkeydown="keydown" ref="control_panel_ref">
     </ControlPanelVue>
-    <DecoPanelVue ref="deco_panel_ref" :data_panel="dataPanel" :project_id="project_id" @pauseKeyDown="pauseKeyDown" @resumeKeyDown="resumeKeyDown"></DecoPanelVue>
+    <DecoPanelVue ref="deco_panel_ref" @color_nodes="color_nodes" :data_panel="dataPanel" :project_id="project_id" @pauseKeyDown="pauseKeyDown" @resumeKeyDown="resumeKeyDown"></DecoPanelVue>
 </template>
 <script lang="ts">
 import axios from "axios";
@@ -135,6 +135,11 @@ export default defineComponent({
         }
     },
     methods: {
+        color_nodes: function(arr: any, color: any){
+            for(const x of arr){
+                graphData.nodes.value[`node${x}`].color = color
+            }
+        },
         updatedDataPanel: function(){
             dataPanel.value = graphData.nodes.value[`node${dataPanel.value.uid}`] 
         },

From bb8dcbd37966923f280c99b5030dfbdf33c7702f Mon Sep 17 00:00:00 2001
From: Tan Chien Hao <tanchienhao@gmail.com>
Date: Thu, 6 Oct 2022 17:25:08 +0800
Subject: [PATCH 27/29] wooohoo done with coloring and tag priority

---
 src/components/DecoPanel.vue | 86 +++++++++++++++++++++++++++++++-----
 src/views/Graph.vue          |  2 +
 2 files changed, 78 insertions(+), 10 deletions(-)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 3896556..acbf847 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -15,15 +15,23 @@
                     </text>
                 </div>
                 <br>
-                <input class="input is-hovered info-panel-item" type="text" placeholder="Color"
-                    :value="tag_color" @input="preview_tag_color" @change="update_tag_color" @focus="pauseKeyDown" @blur="handleBlur()" />
-                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag" 
-                    v-model="tag_name" @change="update_tag_name"
+                Tag Color:
+                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag Color"
+                    :value="tag_color" @input="preview_tag_color" @change="update_tag_color" 
+                    @focus="pauseKeyDown" @blur="handleBlur()" />
+                <div class="slider-demo-block">
+                    <el-slider style="width: 10rem" v-model="tag_priority" @change="tag_priority_change"/>
+                </div>
+                Tag Name:
+                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag Name" 
+                    v-model="tag_name" @change="update_tag_name" 
+                    @focus="pauseKeyDown" @blur="handleBlur()" 
                     autocomplete="on" list="autocomplete_tags" />
                 <datalist id="autocomplete_tags">
                     <option v-for="tag in tags_suggestions_list" :value="(tag as any).name">{{`uid: (${(tag as
                     any).uid})`}}</option>
                 </datalist>
+                <input class="button is-primary" type="button" value="Color Graph" @click="click_all_tags" />
                 <input class="button is-primary" type="button" value="Add Tag" @click="add_tag"
                     :disabled="disable_add" />
                 <input class="button is-primary" type="button" value="List ALL Tags in Project"
@@ -33,11 +41,10 @@
         </div>
         <div id="deco-box">
             <h1 class="title is-4 deco-text">
-                Size:
+                Node Size:
             </h1>
             <div class="slider-demo-block">
-                <span class="demonstration">Customized initial value</span>
-                <el-slider v-model="data_panel.size" />
+                <el-slider style="width: 10rem" v-model="data_panel.size" @change="node_size_change"/>
             </div>
         </div>
     </div>
@@ -74,6 +81,7 @@
 <script lang="ts">
 import { assert } from "@vue/compiler-core";
 import axios from "axios";
+import { tag } from "type-fest/source/opaque";
 import { defineComponent, ref } from "vue";
 
 const tags_list = ref([]);
@@ -86,6 +94,30 @@ export default defineComponent({
     name: "DecoPanel",
     props: ["data_panel", "project_id"],
     methods: {
+        node_size_change: function(e: any){
+            const resource_id = this.$props.data_panel.uid;
+            if (!resource_id) return
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/resource/${resource_id}` +
+                `/edit?size=${e}`
+            axios.post(request_url)
+                .then(response => {
+                    console.log(response.data)
+                })
+        },
+        tag_priority_change: function(e: any){
+            if(tag_focus.value == null) return
+            console.log(e)
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/tag/${(tag_focus as any).value.uid}` +
+                `/update_priority?priority=${e}`
+            axios.post(request_url)
+                .then((response) => {
+                    tag_focus.value = response.data
+                })
+        },
         handleBlur: async function () {
             this.$emit("resumeKeyDown");
         },
@@ -116,6 +148,7 @@ export default defineComponent({
             axios.post(request_url)
                 .then((response) => {
                     (tags_list.value as any).push(response.data)
+                    this.sort_tags_list()
                 })
         },
         create_tag: async function () {
@@ -128,6 +161,18 @@ export default defineComponent({
                     return response.data
                 })
         },
+        sort_tags_list(){
+            tags_list.value.sort(function(a: any,b: any){
+                if(!('priority' in a)) a.priority = 0
+                if(!('priority' in b)) b.priority = 0
+                return a.priority - b.priority
+            })
+        },
+        async click_all_tags(){
+            for(const x of tags_list.value){
+                await this.click_tag(x)
+            }
+        },
         list_tags: async function () {
             const resource_id = this.$props.data_panel.uid;
             if (!resource_id) return
@@ -138,6 +183,7 @@ export default defineComponent({
             return axios.get(request_url)
                 .then((response) => {
                     tags_list.value = response.data
+                    this.sort_tags_list()
                     disable_add.value = false;
                     return response.data
                 })
@@ -150,6 +196,7 @@ export default defineComponent({
                 .then((response) => {
                     if (update_tags_list) {
                         tags_list.value = response.data
+                        this.sort_tags_list()
                         showing_tags_for.value = "Entire Project"
                         disable_add.value = true
                     }
@@ -210,15 +257,22 @@ export default defineComponent({
             (tag_focus as any).value.color = e.target.value
         },
         update_tag_name: function(e: any){
-            console.log(e)
+            const request_url = `${import.meta.env.VITE_API_URL}` +
+                `/project/${this.$props.project_id}` +
+                `/tag/${(tag_focus as any).value.uid}` +
+                `/update_name?name=${e.target.value}`
+            axios.post(request_url)
+                .then((response) => {
+                    tag_focus.value = response.data
+                })
         },
-        click_tag: function(tag: any){
+        click_tag: async function(tag: any){
             (tag_focus as any).value = tag
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/tag/${(tag_focus as any).value.uid}` +
                 `/list_resources`
-            axios.get(request_url)
+            await axios.get(request_url)
                 .then((response) => {
                     var arr = []
                     for(const i of response.data){
@@ -244,6 +298,10 @@ export default defineComponent({
             await this.list_all_tags(false)
             this.filter_suggestions()
             showing_tags_for.value = "Node " + new_value
+        },
+        async 'project_id'(new_value){
+            await this.list_all_tags(true)
+            this.click_all_tags()
         }
     },
     computed: {
@@ -257,6 +315,14 @@ export default defineComponent({
         },
         tag_color(){
             return tag_focus.value == null ? '' : (tag_focus as any).value.color
+        },
+        tag_priority: {
+            get: function() {
+                return tag_focus.value == null ? 0 : (tag_focus as any).value.priority
+            },
+            set: function(nv: number){
+                (tag_focus as any).value.priority = nv
+            }
         }
     }
 });
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 92ba795..88039cf 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -50,6 +50,7 @@ function delete_edge(edge: any) {
 function add_node(raw: any) {
     if(!('color' in raw)) raw.color = 'blue'
     if(!('size' in raw)) raw.size = 20
+    else raw.size = parseInt(raw.size)
     graphData.nodes.value[`node${raw.uid}`] = raw
     if('pos_x' in raw && 'pos_y' in raw){
         graphData.layouts.value.nodes[`node${raw.uid}`] = {
@@ -137,6 +138,7 @@ export default defineComponent({
     methods: {
         color_nodes: function(arr: any, color: any){
             for(const x of arr){
+                console.log('coloring', x, color)
                 graphData.nodes.value[`node${x}`].color = color
             }
         },

From 1a58e71e7c8bb00d746c875997b3206260db806e Mon Sep 17 00:00:00 2001
From: Tan Chien Hao <tanchienhao@gmail.com>
Date: Thu, 6 Oct 2022 17:51:53 +0800
Subject: [PATCH 28/29] minor bug fix involving clearing of tag_focus

---
 src/components/DecoPanel.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index f445eff..566e08a 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -299,6 +299,7 @@ export default defineComponent({
             await this.list_all_tags(false)
             this.filter_suggestions()
             showing_tags_for.value = "Node " + new_value
+            tag_focus.value = null
         },
         async 'project_id'(new_value){
             await this.list_all_tags(true)

From 7525c4323540924fcbe2d9db0247c8b3c01d5f95 Mon Sep 17 00:00:00 2001
From: tch1001 <tanchienhao@gmail.com>
Date: Sat, 8 Oct 2022 11:21:56 +0800
Subject: [PATCH 29/29] Neaten (#30)

* added toggles

* minor bug fix involving clearing of tag_focus

* halfway through cleaning up the excessive data pulls

* caching for get_tag_resources

* halfway

* fixed broken coloring

* color bug fix

* quite smooth now

* neatened things

* small design bugs

* multiadd tags
---
 src/App.vue                  |   6 +
 src/components/DataPanel.vue |  16 +-
 src/components/DecoPanel.vue | 444 +++++++++++++++++++++++++----------
 src/components/GraphLogs.vue |  31 +++
 src/views/Graph.vue          |  84 ++++---
 5 files changed, 417 insertions(+), 164 deletions(-)
 create mode 100644 src/components/GraphLogs.vue

diff --git a/src/App.vue b/src/App.vue
index 31b2f4a..9bea57c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -116,6 +116,12 @@ body {
   bottom: 0;
   right: 0;
 }
+.graph-logs-panel {
+  background-color: yellow;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
 
 .info-panel-outer {
   position: relative;
diff --git a/src/components/DataPanel.vue b/src/components/DataPanel.vue
index 6dc7514..51f153a 100644
--- a/src/components/DataPanel.vue
+++ b/src/components/DataPanel.vue
@@ -11,18 +11,16 @@
     </div>
     <div class="control">
       <a target="_blank" :href="data_panel.link">
-        <button class="button is-dark">Open</button>
+        <button class="button is-dark info-panel-item">Open</button>
+        <button @click="hide_description = !hide_description"
+          class="button info-panel-item">{{ hide_description ? "Show" : "Hide"}} description</button>
       </a>
       <text class="subtitle is-4 data-panel-item">{{ retrieval_status }}</text>
     </div>
-    <div class="control" :style="{marginTop: '10px'}">
+    <div class="control" :style="{marginTop: '10px'}" v-if="!hide_description">
       <textarea class="textarea" rows="5" cols="50" placeholder="Description" :value="data_panel.description"
         @focus="pauseKeyDown" @blur="handleBlur('description', $event)"></textarea>
     </div>
-
-    <div class="info-panel-inner">
-      <div></div>
-    </div>
   </div>
 </template>
 
@@ -62,6 +60,7 @@ import graphData from "../graphData";
 
 const project_id: any = ref("");
 const retrieval_status = ref("")
+const hide_description = ref(true);
 export default defineComponent({
   name: "DataPanel",
   setup() { },
@@ -72,7 +71,8 @@ export default defineComponent({
   },
   data() {
     return {
-      retrieval_status
+      retrieval_status,
+      hide_description
     }
   },
   methods: {
@@ -119,6 +119,7 @@ export default defineComponent({
         request_url_post.substring(0, requestLengthLimit) +
         (request_url_post.length > requestLengthLimit ? "..." : "");
       retrieval_status.value = "Saving..."
+      this.$emit('add_log', 'DataPanel', 'saving data panel...')
       axios.post(request_url_pre + request_url_post).then((response) => {
         console.log(response.data);
         graphData.nodes.value[`node${response.data.uid}`] = response.data;
@@ -126,6 +127,7 @@ export default defineComponent({
           this.$emit("updatedDataPanel");
         }
         retrieval_status.value = "Saved!"
+        this.$emit('add_log', 'DataPanel', 'saved')
         setTimeout(() => {
           retrieval_status.value = ""
         }, 1000)
diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 566e08a..2bd7dfb 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -1,51 +1,68 @@
 <template>
     <div class="deco-panel">
-        <div id="deco-box">
-            <div class="deco-item">
+        <h1 class="title is-4 deco-text">
+            Tags: {{ showing_tags_for }}
+            <button class="button" @click="hide_deco_panel = !hide_deco_panel">
+                {{ hide_deco_panel ?
+                "Show" :
+                "Hide"}}
+            </button>
+            <button class="button" @click="repull">
+                Resync All Tags
+            </button>
+        </h1>
+        <div v-if="!hide_deco_panel">
+            <div id="deco-box">
+                <div class="deco-item">
+                    <div>
+                        <div id="tags-list">
+                            <text v-for="tag in tags_list" @contextmenu.prevent="
+                                disable_add ? delete_tag((tag as any).uid) : dissociate_tag((tag as any).name)
+                            " class="subtitle tag" :style="{'background-color': (tag as any).color}"
+                                @click="click_tag(tag)">
+                                {{(tag as any).name}}
+                            </text>
+                        </div>
+                        <text>
+                            {{ chosen_tag == '' ?  `Left-click a tag to edit it` : `Edit Tag : ${ chosen_tag }` }}
+                        </text>
+                        <br>
+                        <div v-if="tag_focus != null">
+                            Tag Color:
+                            <input class="input is-hovered info-panel-item" type="text" placeholder="Tag Color"
+                                :value="tag_color" @input="preview_tag_color" @change="update_tag_color"
+                                @focus="pauseKeyDown" @blur="handleBlur" />
+                        </div>
+                        <div v-if="tag_focus != null" class="slider-demo-block">
+                            <el-slider style="width: 10rem" v-model="tag_priority" @change="tag_priority_change" />
+                        </div>
+                        <div>
+                            Tag Name:
+                            <input class="input is-hovered info-panel-item" type="text" placeholder="Tag Name"
+                                v-model="tag_name" @change="update_tag_name" @focus="pauseKeyDown" @blur="handleBlur()"
+                                autocomplete="on" list="autocomplete_tags" />
+                        </div>
+                        <datalist id="autocomplete_tags">
+                            <option v-for="tag in tags_suggestions_list" :value="(tag as any).name">{{`uid: (${(tag as
+                            any).uid})`}}</option>
+                        </datalist>
+                        <input class="button is-primary" type="button" value="Color Graph" @click="color_all_nodes" />
+                        <input class="button is-primary" type="button" value="Plain Graph" @click="plain_graph" />
+                        <input class="button is-primary" type="button" :value="add_tag_button" @click="batch_add_tag()"
+                            :disabled="disable_add" />
+                        <input class="button is-primary" type="button" value="List ALL Tags in Project"
+                            @click="list_all_tags(true)" />
+                    </div>
+                </div>
+            </div>
+            <div id="deco-box">
                 <h1 class="title is-4 deco-text">
-                    Tags: {{ showing_tags_for }}
+                    Node Size:
                 </h1>
-                <div id="tags-list">
-                    <text @contextmenu.prevent="dissociate_tag((tag as any).name)" 
-                        v-for="tag in tags_list" 
-                        class="subtitle tag"
-                        :style="{'background-color': (tag as any).color}"
-                        @click="click_tag(tag)">
-                        {{(tag as any).name}}
-                    </text>
-                </div>
-                <br>
-                Tag Color:
-                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag Color"
-                    :value="tag_color" @input="preview_tag_color" @change="update_tag_color" 
-                    @focus="pauseKeyDown" @blur="handleBlur()" />
                 <div class="slider-demo-block">
                     Tag Priority:
                     <el-slider style="width: 10rem" v-model="tag_priority" @change="tag_priority_change"/>
                 </div>
-                Tag Name:
-                <input class="input is-hovered info-panel-item" type="text" placeholder="Tag Name" 
-                    v-model="tag_name" @change="update_tag_name" 
-                    @focus="pauseKeyDown" @blur="handleBlur()" 
-                    autocomplete="on" list="autocomplete_tags" />
-                <datalist id="autocomplete_tags">
-                    <option v-for="tag in tags_suggestions_list" :value="(tag as any).name">{{`uid: (${(tag as
-                    any).uid})`}}</option>
-                </datalist>
-                <input class="button is-primary" type="button" value="Color Graph" @click="click_all_tags" />
-                <input class="button is-primary" type="button" value="Add Tag" @click="add_tag"
-                    :disabled="disable_add" />
-                <input class="button is-primary" type="button" value="List ALL Tags in Project"
-                    @click="list_all_tags(true)" />
-                <input class="button is-primary" type="button" value="Delete Tag (by uid)" @click="delete_tag" />
-            </div>
-        </div>
-        <div id="deco-box">
-            <h1 class="title is-4 deco-text">
-                Node Size:
-            </h1>
-            <div class="slider-demo-block">
-                <el-slider style="width: 10rem" v-model="data_panel.size" @change="node_size_change"/>
             </div>
         </div>
     </div>
@@ -82,41 +99,53 @@
 <script lang="ts">
 import { assert } from "@vue/compiler-core";
 import axios from "axios";
-import { tag } from "type-fest/source/opaque";
 import { defineComponent, ref } from "vue";
 
 const tags_list = ref([]);
 const tags_suggestions_list = ref([]);
+const all_tags = ref([]);
+const all_tag_resources = ref({});
 const showing_tags_for = ref("");
 const disable_add = ref(false);
 const tag_focus = ref(null);
 const tag_name_input = ref("");
+const hide_deco_panel = ref(false);
 export default defineComponent({
     name: "DecoPanel",
-    props: ["data_panel", "project_id"],
+    props: ["data_panel", "project_id", "selected_nodes"],
     methods: {
-        node_size_change: function(e: any){
+        node_size_change: function (e: any) {
             const resource_id = this.$props.data_panel.uid;
             if (!resource_id) return
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/resource/${resource_id}` +
                 `/edit?size=${e}`
+            this.$emit('add_log', 'DecoPanel', 'edit size...');
             axios.post(request_url)
                 .then(response => {
-                    console.log(response.data)
+                    this.$emit('add_log', 'DecoPanel', 'edit size ok');
+                })
+                .catch(err => {
+                    this.$emit('add_log', 'ERROR', 'edit size');
+                    throw err
                 })
         },
-        tag_priority_change: function(e: any){
-            if(tag_focus.value == null) return
-            console.log(e)
+        tag_priority_change: function (e: any) {
+            if (tag_focus.value == null) return
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/tag/${(tag_focus as any).value.uid}` +
                 `/update_priority?priority=${e}`
+            this.$emit('add_log', 'DecoPanel', 'update_priority...');
             axios.post(request_url)
-                .then((response) => {
-                    tag_focus.value = response.data
+                .then(async (response) => {
+                    this.$emit('add_log', 'DecoPanel', 'update priority ok');
+                    this.sort_tags_list()
+                })
+                .catch(err => {
+                    this.$emit('add_log', 'DecoPanel', 'update priority error');
+                    throw err
                 })
         },
         handleBlur: async function () {
@@ -132,24 +161,54 @@ export default defineComponent({
             if (tags_matching_name.length > 0) return tags_matching_name[0]
             else return null
         },
-        add_tag: async function () {
-            if (this.tag_name_input == "") return
+        tag_resource: function (tag_id: string, resource_id: any) {
+            if (resource_id == null) { // serves as initializer
+                (all_tag_resources as any).value[tag_id] = [];
+                return
+            }
+            if (!(tag_id in all_tag_resources.value))
+                (all_tag_resources as any).value[tag_id] = [];
+            (all_tag_resources as any).value[tag_id].push(resource_id);
+        },
+        update_suggestions_list: async function () {
+            tags_suggestions_list.value = await this.list_all_tags(false)
+            this.filter_suggestions()
+        },
+        batch_add_tag: async function(){
+            const tag_name = this.tag_name_input
             const tags = await this.list_all_tags(false)
-            var first_tag_matching_name = this.tag_exists(tags, this.tag_name_input)
-            console.log(first_tag_matching_name)
+            var first_tag_matching_name = this.tag_exists(tags, tag_name)
             if (first_tag_matching_name == null) {
                 first_tag_matching_name = await this.create_tag().then((res) => { return res; })
             }
-            const resource_id = this.$props.data_panel.uid;
+            const sn = this.$props.selected_nodes
+            for(const x of sn){
+                this.add_tag(x.substr(4), first_tag_matching_name)
+            }
+        },
+        add_tag: async function (resource_id : any, tag : any) {
+            if(!tag) return
+            const tags = await this.list_all_tags(false)
+            if(!resource_id) resource_id = this.$props.data_panel.uid;
             if (!resource_id) return
+            const tag_id = tag.uid
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/resource/${resource_id}` +
-                `/add_tag?tag_uid=${(first_tag_matching_name as any).uid}`
+                `/add_tag?tag_uid=${tag_id}`
+            this.$emit('add_log', 'DecoPanel', 'add tag...');
             axios.post(request_url)
-                .then((response) => {
-                    (tags_list.value as any).push(response.data)
+                .then(async (response) => {
+                    this.tag_resource(tag_id, resource_id);
                     this.sort_tags_list()
+                    await this.list_tags(resource_id)
+                    this.filter_suggestions()
+                    this.$emit('add_log', 'DecoPanel', 'add tag ok');
+                    this.$emit('color_node', resource_id, tag.color, tag.priority, true)
+                })
+                .catch(err => {
+                    this.$emit('add_log', 'DecoPanel', 'add tag error');
+                    throw err
                 })
         },
         create_tag: async function () {
@@ -157,174 +216,305 @@ export default defineComponent({
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/create_tag?name=${this.tag_name_input}`
+            this.$emit('add_log', 'DecoPanel', 'create tag...');
             return axios.post(request_url)
                 .then((response) => {
+                    (all_tags.value as any).push(response.data);
+                    this.$emit('add_log', 'DecoPanel', 'create tag ok');
                     return response.data
                 })
+                .catch(err => {
+                    this.$emit('add_log', 'DecoPanel', 'create tag error');
+                    throw err
+                })
         },
-        sort_tags_list(){
-            tags_list.value.sort(function(a: any,b: any){
-                if(!('priority' in a)) a.priority = 0
-                if(!('priority' in b)) b.priority = 0
+        sort_tags_list() {
+            tags_list.value.sort(function (a: any, b: any) {
+                if (!('priority' in a)) a.priority = 0
+                if (!('priority' in b)) b.priority = 0
                 return a.priority - b.priority
             })
         },
-        async click_all_tags(){
-            for(const x of tags_list.value){
-                await this.click_tag(x)
-            }
+        get_tag_by_id: function (tag_id: string) {
+            const one = all_tags.value.filter(tag => (tag as any).uid == parseInt(tag_id))
+            return one.length == 0 ? null : one[0];
         },
-        list_tags: async function () {
-            const resource_id = this.$props.data_panel.uid;
+
+        list_tags: async function (resource_id: string) { // list tags for a specific resource
             if (!resource_id) return
-            const request_url = `${import.meta.env.VITE_API_URL}` +
-                `/project/${this.$props.project_id}` +
-                `/resource/${resource_id}` +
-                `/list_tags`
-            return axios.get(request_url)
-                .then((response) => {
-                    tags_list.value = response.data
-                    this.sort_tags_list()
-                    disable_add.value = false;
-                    return response.data
-                })
+            if (all_tags.value.length == 0) await this.list_all_tags(false)
+            tags_list.value = []
+            for (const x in all_tags.value) { // for all tags
+                const tag = (all_tags as any).value[x]
+                const tr: any = await this.list_tag_resources(tag)
+                if (tr.indexOf(resource_id) != -1) {
+                    (tags_list as any).value.push(tag)
+                }
+            }
+            this.sort_tags_list()
+            disable_add.value = false;
+            return tags_list.value
         },
+        // list all tags
         list_all_tags: async function (update_tags_list: boolean) {
+            if (all_tags.value.length == 0) {
+                all_tags.value = await this.list_all_tags_pull_from_online(update_tags_list);
+            }
+            if (update_tags_list) {
+                tags_list.value = all_tags.value
+                this.sort_tags_list()
+                showing_tags_for.value = "Entire Project"
+                disable_add.value = true
+            }
+            tags_suggestions_list.value = all_tags.value
+            return all_tags.value
+        },
+        list_all_tags_pull_from_online: async function (update_tags_list: boolean) {
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/list_all_tags`
+            this.$emit('add_log', 'DecoPanel', 'list all tag...');
             return axios.get(request_url)
                 .then((response) => {
-                    if (update_tags_list) {
-                        tags_list.value = response.data
-                        this.sort_tags_list()
-                        showing_tags_for.value = "Entire Project"
-                        disable_add.value = true
-                    }
-                    tags_suggestions_list.value = response.data
+                    this.$emit('add_log', 'DecoPanel', 'list all tag ok');
                     return response.data
                 })
+                .catch(err => {
+                    this.$emit('add_log', 'DecoPanel', 'list all tag error');
+                    throw err
+                })
         },
-        delete_tag: async function () {
-            const tags = await this.list_all_tags(false).then((arr) => { return arr; })
+        delete_tag: async function (tag_id: string) {
             try {
-                assert(!isNaN(parseInt(this.tag_name_input)))
+                assert(!isNaN(parseInt(tag_id)))
             } catch {
                 return
             }
-            if (tags.filter((tag: any) => tag.uid == parseInt(this.tag_name_input)).length == 0) return
+            const tag = this.get_tag_by_id(tag_id);
+            if (tag == null) return
+            const tr: any = await this.list_tag_resources(tag)
+            if (tr.length > 0) {
+                if (!confirm(`there are ${tr.length} resources with this tag? delete for sure?`)) return
+            }
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
-                `/delete_tag?uid=${this.tag_name_input}`
+                `/delete_tag?uid=${tag_id}`
+            this.$emit('add_log', 'DecoPanel', 'delete tag...');
             axios.post(request_url)
                 .then((response) => {
+                    all_tags.value = all_tags.value.filter((tag: any) => tag.uid != parseInt(tag_id))
+                    tags_list.value = all_tags.value
+                    this.sort_tags_list()
+                    this.$emit('add_log', 'DecoPanel', 'delete tag ok');
                 })
-                .catch((err) => {
-                    console.log(err)
+                .catch(err => {
+                    this.$emit('add_log', 'DecoPanel', 'delete tag error');
+                    throw err
                 })
         },
         dissociate_tag: async function (name_of_tag: string) {
-            console.log('diss', name_of_tag)
             var first_tag_matching_name = this.tag_exists(tags_list.value, name_of_tag)
             if (first_tag_matching_name == null) return
             const resource_id = this.$props.data_panel.uid;
             if (!resource_id) return
+            const tag = (first_tag_matching_name as any)
+            const tag_id = tag.uid
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
                 `/resource/${resource_id}` +
-                `/dissociate_tag?tag_uid=${(first_tag_matching_name as any).uid}`
+                `/dissociate_tag?tag_uid=${tag_id}`
+            this.$emit('add_log', 'DecoPanel', 'diss tag...');
             axios.post(request_url)
-                .then((response) => {
-                    this.list_tags()
+                .then(async (response) => {
+                    this.$emit('add_log', 'DecoPanel', 'diss tag ok');
+                    delete (all_tag_resources as any).value[tag_id]
+                    this.list_tag_resources(this.get_tag_by_id(tag_id))
+                    const existing_tags: any = await this.list_tags(resource_id)
+                    this.update_suggestions_list()
+                    await this.$emit('color_node', resource_id, 'blue', tag.priority, true)
+                    for (const et in existing_tags) {
+                        this.$emit('color_node', resource_id,
+                            existing_tags[et].color,
+                            existing_tags[et].priority,
+                            false)
+                    }
+                })
+                .catch(err => {
+                    this.$emit('add_log', 'DecoPanel', 'diss tag error');
+                    throw err
                 })
         },
         filter_suggestions: function () {
             tags_suggestions_list.value = tags_suggestions_list.value.filter((v: any) =>
                 (this.tag_exists(tags_list.value, v.name) == null))
         },
-        update_tag_color: function(e: any){
-            if(tag_focus.value == null) return
+        update_tag_color: function (e: any) {
+            if (tag_focus.value == null) return
+            const tag_id = (tag_focus as any).value.uid
+            const tag: any = this.get_tag_by_id(tag_id)
+            const new_color = e.target.value
+            if(new_color == '') return;
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
-                `/tag/${(tag_focus as any).value.uid}` +
-                `/update_color?color=${e.target.value}`
+                `/tag/${tag_id}` +
+                `/update_color?color=${new_color}`
+            this.$emit('add_log', 'DecoPanel', 'update tag color...');
             axios.post(request_url)
                 .then((response) => {
-                    tag_focus.value = response.data
+                    this.$emit('add_log', 'DecoPanel', 'update tag color ok');
+                    tag.color = new_color;
+                })
+                .catch(err => {
+                    this.$emit('add_log', 'DecoPanel', 'update tag color error');
+                    throw err
                 })
         },
-        preview_tag_color: function(e: any){
-            if(tag_focus.value == null) return
+        preview_tag_color: function (e: any) {
+            if (tag_focus.value == null) return
             (tag_focus as any).value.color = e.target.value
         },
-        update_tag_name: function(e: any){
+        update_tag_name: function (e: any) {
+            if (tag_focus.value == null) return;
+            const tag_id = (tag_focus as any).value.uid
+            const tag : any = this.get_tag_by_id(tag_id)
+            const new_name = e.target.value
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
-                `/tag/${(tag_focus as any).value.uid}` +
-                `/update_name?name=${e.target.value}`
+                `/tag/${tag_id}` +
+                `/update_name?name=${new_name}`
+            this.$emit('add_log', 'DecoPanel', 'update tag name...');
             axios.post(request_url)
                 .then((response) => {
-                    tag_focus.value = response.data
+                    this.$emit('add_log', 'DecoPanel', 'update tag name ok');
+                    tag.name = new_name
+                })
+                .catch(err => {
+                    this.$emit('add_log', 'DecoPanel', 'update tag name error');
+                    throw err
                 })
+
+        },
+        color_nodes: async function (tag: any, override: boolean) {
+            const tr = await this.list_tag_resources(tag)
+            // tr is the array of nodes to color <color>
+            for (const x in tr) {
+                this.$emit('color_node', tr[x], tag.color, tag.priority, override)
+            }
         },
-        click_tag: async function(tag: any){
+        click_tag: async function (tag: any) {
             (tag_focus as any).value = tag
+            this.color_nodes(tag, true)
+        },
+        // lists the resources associated with this tag
+        list_tag_resources: async function (tag: any) {
+            const tag_id = tag.uid;
+            var all_tr = (all_tag_resources as any).value
+            if (!(tag_id in all_tr)) {
+                var data = await this.list_tag_resources_pull_from_online(tag);
+                this.tag_resource(tag_id, null)
+                for (const i of data) {
+                    await this.tag_resource(tag_id, i.uid)
+                }
+            }
+            return all_tr[tag_id]
+        },
+        list_tag_resources_pull_from_online: async function (tag: any) {
+            if (this.$props.project_id == undefined) return
+            const tag_id = tag.uid
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${this.$props.project_id}` +
-                `/tag/${(tag_focus as any).value.uid}` +
+                `/tag/${tag_id}` +
                 `/list_resources`
-            await axios.get(request_url)
+            this.$emit('add_log', 'DecoPanel', 'click tag...');
+            return await axios.get(request_url)
                 .then((response) => {
-                    var arr = []
-                    for(const i of response.data){
-                        arr.push(i.uid)
-                    }
-                    this.$emit('color_nodes', arr, (tag_focus as any).value.color)
+                    this.$emit('add_log', 'DecoPanel', 'click tag ok');
+                    return response.data
                 })
+                .catch(err => {
+                    this.$emit('add_log', 'DecoPanel', 'click tag error');
+                    throw err
+                })
+        },
+        list_all_tag_resources: function () {
+            for (const i in all_tags.value) {
+                this.list_tag_resources(all_tags.value[i])
+            }
+        },
+        color_all_nodes: function () {
+            for (const x in (all_tags as any).value) {
+                this.color_nodes((all_tags as any).value[x], false)
+            }
+        },
+        plain_graph: function(){
+            this.$emit('plain_graph')
+        },
+        repull: async function () {
+            all_tags.value = [];
+            all_tag_resources.value = {};
+            await this.list_all_tags(true)
+            await this.list_all_tag_resources()
+            this.color_all_nodes()
         }
     },
     data() {
         return {
             tags_list,
             tags_suggestions_list,
-            showing_tags_for,
             disable_add,
             tag_focus,
-            tag_name_input
+            tag_name_input,
+            hide_deco_panel
         }
     },
     watch: {
         async 'data_panel.uid'(new_value) {
-            await this.list_tags()
-            await this.list_all_tags(false)
+            await this.list_tags(this.$props.data_panel.uid)
             this.filter_suggestions()
             showing_tags_for.value = "Node " + new_value
             tag_focus.value = null
         },
-        async 'project_id'(new_value){
-            await this.list_all_tags(true)
-            this.click_all_tags()
+        async 'project_id'(new_value) {
+            await this.repull()
         }
     },
     computed: {
+        showing_tags_for(){
+            if(!this.$props.selected_nodes) return "Select a node"
+            const sn = this.$props.selected_nodes
+            const len = sn.length 
+            if(len == 1) return `Node ${sn[0].substr(4)}`
+            return `${len} nodes`
+        },
         tag_name: {
-            get: function(){
+            get: function () {
                 return tag_focus.value == null ? '' : (tag_focus as any).value.name
             },
-            set: function(nv: string) {
+            set: function (nv: string) {
                 this.tag_name_input = nv
             }
         },
-        tag_color(){
+        tag_color() {
             return tag_focus.value == null ? '' : (tag_focus as any).value.color
         },
         tag_priority: {
-            get: function() {
+            get: function () {
                 return tag_focus.value == null ? 0 : (tag_focus as any).value.priority
             },
-            set: function(nv: number){
+            set: function (nv: number) {
                 (tag_focus as any).value.priority = nv
             }
+        },
+        chosen_tag() {
+            return tag_focus.value ? (tag_focus as any).value.uid : ''
+        },
+        add_tag_button(){
+            if(!this.$props.selected_nodes) return "Add Tag"
+            const len = this.$props.selected_nodes.length 
+            if(len <= 1){
+                return "Add Tag"
+            } 
+            return `Add Tag (${len})` 
         }
     }
 });
diff --git a/src/components/GraphLogs.vue b/src/components/GraphLogs.vue
new file mode 100644
index 0000000..c3cd326
--- /dev/null
+++ b/src/components/GraphLogs.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="graph-logs-panel" @click="show_all = !show_all">
+    <text v-if="show_all" class="log-message" v-for="log in logs">{{ log.type }} : {{ log.message }}<br></text>
+    <text v-else class="log-message">{{ logs[logs.length-1].type }} : {{ logs[logs.length-1].message }}<br></text>
+  </div>
+</template>
+<style>
+.log-message{
+  width: 10rem;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, reactive, ref } from "vue";
+const logs = ref([{ type: 'hello', message: 'world' }]);
+const show_all = ref(false);
+export default {
+  name: "DropdownComponent",
+  data() {
+    return {
+      logs,
+      show_all
+    }
+  },
+  methods: {
+    add_log: function(type: string, message: string){
+      logs.value.push({type: type, message: message});
+    }
+  },
+};
+</script>
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 88039cf..f9e2f80 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -1,21 +1,25 @@
 <template>
     <div id="graph" ref="div_ref">
         <v-network-graph ref="graph_ref" v-model:selected-nodes="graphData.selectedNodes"
-            v-model:selected-edges="graphData.selectedEdges" :nodes="graphData.nodes"
-            :edges="graphData.edges" :layouts="graphData.layouts"
-            :configs="graphData.configs" :event-handlers="eventHandlers" />
+            v-model:selected-edges="graphData.selectedEdges" :nodes="graphData.nodes" :edges="graphData.edges"
+            :layouts="graphData.layouts" :configs="graphData.configs" :event-handlers="eventHandlers" />
     </div>
-    <DataPanelVue @pauseKeyDown="pauseKeyDown" @resumeKeyDown="resumeKeyDown"
-        :data_panel="dataPanel" @updatedDataPanel="updatedDataPanel"></DataPanelVue>
-    <ControlPanelVue @home="home" @save-locations="saveLocations" @customkeydown="keydown" ref="control_panel_ref">
+    <DataPanelVue @add_log="add_log" @pauseKeyDown="pauseKeyDown" @resumeKeyDown="resumeKeyDown" :data_panel="dataPanel"
+        @updatedDataPanel="updatedDataPanel"></DataPanelVue>
+    <ControlPanelVue @add_log="add_log" @home="home" @save-locations="saveLocations" @customkeydown="keydown"
+        ref="control_panel_ref">
     </ControlPanelVue>
-    <DecoPanelVue ref="deco_panel_ref" @color_nodes="color_nodes" :data_panel="dataPanel" :project_id="project_id" @pauseKeyDown="pauseKeyDown" @resumeKeyDown="resumeKeyDown"></DecoPanelVue>
+    <DecoPanelVue @add_log="add_log" ref="deco_panel_ref" @color_node="color_node" @plain_graph="plain_graph" :data_panel="dataPanel"
+        :project_id="project_id" @pauseKeyDown="pauseKeyDown" @resumeKeyDown="resumeKeyDown"
+        :selected_nodes="graphData.selectedNodes"></DecoPanelVue>
+    <GraphLogsVue ref="graph_logs_ref"></GraphLogsVue>
 </template>
 <script lang="ts">
 import axios from "axios";
 import DataPanelVue from "../components/DataPanel.vue";
 import ControlPanelVue from "../components/ControlPanel.vue";
 import DecoPanelVue from "../components/DecoPanel.vue";
+import GraphLogsVue from "../components/GraphLogs.vue";
 import { defineComponent, reactive, ref } from "vue";
 import graphData from "../graphData"
 var dataPanel: any = ref({});
@@ -24,6 +28,7 @@ const project_id: any = ref("");
 const graph_ref: any = ref();
 const control_panel_ref: any = ref();
 const deco_panel_ref: any = ref();
+const graph_logs_ref: any = ref();
 var pause_key_down: boolean = false;
 
 function delete_node(node: any) {
@@ -48,11 +53,11 @@ function delete_edge(edge: any) {
         })
 }
 function add_node(raw: any) {
-    if(!('color' in raw)) raw.color = 'blue'
-    if(!('size' in raw)) raw.size = 20
+    if (!('color' in raw)) raw.color = 'blue'
+    if (!('size' in raw)) raw.size = 20
     else raw.size = parseInt(raw.size)
     graphData.nodes.value[`node${raw.uid}`] = raw
-    if('pos_x' in raw && 'pos_y' in raw){
+    if ('pos_x' in raw && 'pos_y' in raw) {
         graphData.layouts.value.nodes[`node${raw.uid}`] = {
             'x': raw['pos_x'],
             'y': raw['pos_y']
@@ -82,7 +87,6 @@ function get_items() {
         .then(response => {
             graphData.nodes.value = {}
             graphData.edges.value = {}
-            console.log(response.data)
             var edge_queue: Array<Object> = []
             for (const item of response.data.items) {
                 if (item instanceof Array) {
@@ -103,7 +107,8 @@ export default defineComponent({
     components: {
         DataPanelVue,
         ControlPanelVue,
-        DecoPanelVue
+        DecoPanelVue,
+        GraphLogsVue
     },
     data() {
         return {
@@ -116,10 +121,9 @@ export default defineComponent({
                 // wildcard: capture all events
                 "*": (type: string, event: any) => {
                     if (type == 'node:pointerover') {
-                        console.log(type, graphData.nodes.value[event.node])
                         dataPanel.value = graphData.nodes.value[event.node]
-                    } else if (type == 'node:pointerout'){
-                        if(selected_nodes.value.length > 0){
+                    } else if (type == 'node:pointerout') {
+                        if (selected_nodes.value.length > 0) {
                             dataPanel.value = graphData.nodes.value[selected_nodes.value[0]]
                         }
                     } else if (type == 'view:click') {
@@ -136,14 +140,33 @@ export default defineComponent({
         }
     },
     methods: {
-        color_nodes: function(arr: any, color: any){
-            for(const x of arr){
-                console.log('coloring', x, color)
-                graphData.nodes.value[`node${x}`].color = color
+        add_log: function (type: string, message: string) {
+            (this.$refs.graph_logs_ref as any).add_log(type, message);
+        },
+        plain_graph: function(){
+            for(const x in graphData.nodes.value){
+                graphData.nodes.value[x].color = 'blue'
+                graphData.nodes.value[x].highest_priority = -100
             }
         },
-        updatedDataPanel: function(){
-            dataPanel.value = graphData.nodes.value[`node${dataPanel.value.uid}`] 
+        color_node: function (node_id: any, color: any, priority: number, override: boolean) {
+            const n = graphData.nodes.value[`node${node_id}`]
+            if (!n) return
+            console.log(n, priority)
+            if (override) {
+                n.color = color;
+                n.highest_priority = -100;
+                return;
+            }
+            if (!('highest_priority' in n)) n.highest_priority = -100;
+            if (priority >= n.highest_priority) {
+                n.color = color
+                n.highest_priority = priority
+            }
+        },
+
+        updatedDataPanel: function () {
+            dataPanel.value = graphData.nodes.value[`node${dataPanel.value.uid}`]
         },
         handle_view_click: function (event: any) {
             const selected_mode = (this.$store.state as any).selected_mode
@@ -192,7 +215,7 @@ export default defineComponent({
             if (selected_mode == 'add-edge') {
                 if (event.length == 1) {
                     (this.$store.state as any).edge_source_node = event[0]
-                }else {
+                } else {
                     (this.$store.state as any).edge_source_node = null
                 }
             }
@@ -219,10 +242,10 @@ export default defineComponent({
                 bottom: maxY + padding,
             });
         },
-        saveLocations: function(){
+        saveLocations: function () {
             const node_pos_raw = (this.$refs.graph_ref as any).layouts.nodes
-            const node_pos : any = {}
-            for(var n in node_pos_raw){
+            const node_pos: any = {}
+            for (var n in node_pos_raw) {
                 node_pos[n.substring(4)] = {
                     x: node_pos_raw[n].x,
                     y: node_pos_raw[n].y,
@@ -231,20 +254,21 @@ export default defineComponent({
             const request_url = `${import.meta.env.VITE_API_URL}` +
                 `/project/${project_id.value}` +
                 `/positions/update`;
-            const cp_ref : any= (this.$refs.control_panel_ref as any);
+            const cp_ref: any = (this.$refs.control_panel_ref as any);
             cp_ref.save_locations_status = 'saving...'
             axios.post(request_url, node_pos).then((response) => {
-                if(response.status == 200){
+                if (response.status == 200) {
+                    this.add_log('Location', "Saved");
                     (cp_ref).save_locations_status = 'saved'
-                    setTimeout(() => { 
+                    setTimeout(() => {
                         (cp_ref).save_locations_status = ''
                     }, 1000)
-                }else{
+                } else {
                     throw 'err'
                 }
             }).catch((error) => {
                 (cp_ref).save_locations_status = 'error!'
-                setTimeout(() => { 
+                setTimeout(() => {
                     (cp_ref).save_locations_status = ''
                 }, 1000)
             })