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)
             })