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
diff --git a/src/App.vue b/src/App.vue
index 7caf6f3..9bea57c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -110,6 +110,19 @@ body {
   float: left;
 }
 
+.deco-panel {
+  background-color: yellowgreen;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}
+.graph-logs-panel {
+  background-color: yellow;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+
 .info-panel-outer {
   position: relative;
   clear: left;
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 4cf2400..cb2c693 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 <template>
     <div class="deco-panel">
         <h1 class="title is-4 deco-text">
@@ -518,3 +519,527 @@ export default defineComponent({
     }
 });
 </script>
+||||||| 223d967
+=======
+<template>
+    <div class="deco-panel">
+        <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">
+                    Node Size:
+                </h1>
+                <div class="slider-demo-block">
+                    Tag Priority:
+                    <el-slider style="width: 10rem" v-model="tag_priority" @change="tag_priority_change"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+.deco-text {
+    color: blue;
+}
+
+.tag {
+    margin-inline: 1rem;
+}
+
+.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 { assert } from "@vue/compiler-core";
+import axios from "axios";
+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", "selected_nodes"],
+    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}`
+            this.$emit('add_log', 'DecoPanel', 'edit size...');
+            axios.post(request_url)
+                .then(response => {
+                    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
+            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(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 () {
+            this.$emit("resumeKeyDown");
+        },
+        pauseKeyDown: function () {
+            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]
+            else return null
+        },
+        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, tag_name)
+            if (first_tag_matching_name == null) {
+                first_tag_matching_name = await this.create_tag().then((res) => { return res; })
+            }
+            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=${tag_id}`
+            this.$emit('add_log', 'DecoPanel', 'add tag...');
+            axios.post(request_url)
+                .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 () {
+            if (this.tag_name_input == "") return
+            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
+                return a.priority - b.priority
+            })
+        },
+        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 (resource_id: string) { // list tags for a specific resource
+            if (!resource_id) return
+            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) => {
+                    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 (tag_id: string) {
+            try {
+                assert(!isNaN(parseInt(tag_id)))
+            } catch {
+                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=${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 => {
+                    this.$emit('add_log', 'DecoPanel', 'delete tag error');
+                    throw 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) 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=${tag_id}`
+            this.$emit('add_log', 'DecoPanel', 'diss tag...');
+            axios.post(request_url)
+                .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
+            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_id}` +
+                `/update_color?color=${new_color}`
+            this.$emit('add_log', 'DecoPanel', 'update tag color...');
+            axios.post(request_url)
+                .then((response) => {
+                    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
+            (tag_focus as any).value.color = e.target.value
+        },
+        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_id}` +
+                `/update_name?name=${new_name}`
+            this.$emit('add_log', 'DecoPanel', 'update tag name...');
+            axios.post(request_url)
+                .then((response) => {
+                    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) {
+            (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_id}` +
+                `/list_resources`
+            this.$emit('add_log', 'DecoPanel', 'click tag...');
+            return await axios.get(request_url)
+                .then((response) => {
+                    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,
+            disable_add,
+            tag_focus,
+            tag_name_input,
+            hide_deco_panel
+        }
+    },
+    watch: {
+        async 'data_panel.uid'(new_value) {
+            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.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 () {
+                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
+        },
+        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
+            }
+        },
+        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})` 
+        }
+    }
+});
+</script>
+>>>>>>> 7525c4323540924fcbe2d9db0247c8b3c01d5f95
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/graphData.ts b/src/graphData.ts
index 3752a5f..19cf702 100644
--- a/src/graphData.ts
+++ b/src/graphData.ts
@@ -36,6 +36,10 @@ var configs = vNG.defineConfigs({
   },
   node: {
     selectable: true,
+    normal: {
+      color: node => ('color' in node ? node.color : 'blue'),
+      radius: node => ('size' in node ? node.size : 20),
+    }
   },
   edge: {
     selectable: true,
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 0fc55a7..f9e2f80 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -1,19 +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 @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({});
@@ -21,6 +27,8 @@ 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();
+const graph_logs_ref: any = ref();
 var pause_key_down: boolean = false;
 
 function delete_node(node: any) {
@@ -45,8 +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
+    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']
@@ -76,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) {
@@ -96,7 +106,9 @@ export default defineComponent({
     name: "Graph",
     components: {
         DataPanelVue,
-        ControlPanelVue
+        ControlPanelVue,
+        DecoPanelVue,
+        GraphLogsVue
     },
     data() {
         return {
@@ -108,11 +120,10 @@ export default defineComponent({
             eventHandlers: {
                 // wildcard: capture all events
                 "*": (type: string, event: any) => {
-                    console.log(type, event)
                     if (type == 'node:pointerover') {
                         dataPanel.value = graphData.nodes.value[event.node]
-                    } else if (type == 'node:pointerout'){
-                        if(selected_nodes.value){
+                    } 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') {
@@ -129,8 +140,33 @@ export default defineComponent({
         }
     },
     methods: {
-        updatedDataPanel: function(){
-            dataPanel.value = graphData.nodes.value[`node${dataPanel.value.uid}`] 
+        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
+            }
+        },
+        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
@@ -179,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
                 }
             }
@@ -206,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,
@@ -218,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)
             })