Adjust tag displays (#257)

Author: tomchop

src/components/DirectNeighbors.vue

@@ -95,13 +95,13 @@
       <template v-slot:item.relevant_node.tags="{ item }">
         <v-chip
           v-if="item.relevant_node.tags"
-          v-for="tag in Object.keys(item.relevant_node.tags)"
-          :key="tag"
+          v-for="tag in item.relevant_node.tags"
+          :key="tag.name"
           class="mr-2"
-          :color="item.relevant_node.tags[tag].fresh ? 'primary' : 'grey'"
+          :color="tag.fresh ? 'primary' : 'grey'"
           density="compact"
         >
-          {{ tag }}
+          {{ tag.name }}
         </v-chip>
       </template>
 

src/components/EditLink.vue

@@ -11,22 +11,24 @@
       <v-textarea label="Description" v-model="localEdge.description"></v-textarea>
       <div class="d-flex justify-center">
         <table>
-          <tr>
-            <td>
-              <v-chip
-                :text="vertices[edge.source].name || vertices[edge.source].value"
-                :prepend-icon="getIconForType(vertices[edge.source].type)"
-              />
-            </td>
-            <td>→</td>
-            <td>
-              <code>{{ localEdge.type || "?" }}</code>
-            </td>
-            <td>→</td>
-            <td>
-              <v-chip :text="vertices[edge.target].name" :prepend-icon="getIconForType(vertices[edge.target].type)" />
-            </td>
-          </tr>
+          <tbody>
+            <tr>
+              <td>
+                <v-chip
+                  :text="vertices[edge.source].name || vertices[edge.source].value"
+                  :prepend-icon="getIconForType(vertices[edge.source].type)"
+                />
+              </td>
+              <td>→</td>
+              <td>
+                <code>{{ localEdge.type || "?" }}</code>
+              </td>
+              <td>→</td>
+              <td>
+                <v-chip :text="vertices[edge.target].name" :prepend-icon="getIconForType(vertices[edge.target].type)" />
+              </td>
+            </tr>
+          </tbody>
         </table>
       </div>
     </v-card-text>

src/components/LinkObservables.vue

@@ -73,9 +73,9 @@
         <v-data-table :items="addedObservables" :headers="observableTableHeaders" density="compact">
           <template v-slot:item.tags="{ item }">
             <v-chip
-              v-for="name in Object.keys(item.tags)"
-              :color="item.tags[name].fresh ? 'blue ' : 'red'"
-              :text="name"
+              v-for="tag in item.tags"
+              :color="tag.fresh ? 'blue ' : 'grey'"
+              :text="tag.name"
               class="mr-1"
               size="small"
             ></v-chip>

src/components/ObjectList.vue

@@ -29,9 +29,9 @@
       </template>
       <template v-slot:item.tags="{ item }">
         <v-chip
-          v-for="name in Object.keys(item.tags)"
-          :color="item.tags[name].fresh ? 'blue ' : 'red'"
-          :text="name"
+          v-for="tag in item.tags"
+          :color="tag.fresh ? 'blue ' : 'red'"
+          :text="tag.name"
           class="mr-1"
           size="small"
         ></v-chip>
@@ -194,15 +194,6 @@ export default {
           this.loading = false;
         });
     }
-  },
-  watch: {
-    searchQuery() {
-      this.loadOjects({
-        page: this.page,
-        itemsPerPage: this.perPage,
-        sortBy: this.sortBy
-      });
-    }
   }
 };
 </script>

src/views/ObjectDetails.vue

@@ -207,10 +207,6 @@
               ><v-icon size="x-large" start>mdi-chat-question</v-icon>Related DFIQ
               <v-chip class="ml-3" density="comfortable">{{ relatedObjectTabCount["dfiq"] }}</v-chip></v-tab
             >
-            <v-tab value="related-tagged" href="#tagged"
-              ><v-icon size="x-large" start>mdi-tag</v-icon>Tag relationships
-              <v-chip class="ml-3" density="comfortable">{{ relatedObjectTabCount["tagged"] }}</v-chip></v-tab
-            >
           </v-tabs>
 
           <v-window v-model="activeTab">
@@ -264,17 +260,6 @@
                 @totalUpdated="value => countObjects('dfiq', value)"
               />
             </v-window-item>
-
-            <v-window-item value="related-tagged" eager class="my-4">
-              <related-objects
-                :id="id"
-                :source-type="typeToEndpointMapping[objectType]"
-                :hops="2"
-                graph="tagged"
-                :target-types="objectTypes['observable'].map(def => def.type)"
-                @totalUpdated="value => countObjects('tagged', value)"
-              ></related-objects>
-            </v-window-item>
           </v-window>
         </v-sheet>
       </v-container>
@@ -374,7 +359,7 @@ export default {
         .then(response => {
           let tagNames: string[] = [];
           this.object = response.data;
-          this.objectTags = this.object.tags ? Object.keys(this.object.tags) : [];
+          this.objectTags = this.object.tags ? this.object.tags.map(tag => tag.name) : [];
           this.navigateToFirstPopulatedTab();
           this.appStore.setPageTitleFromObject(this.object);
         })

src/views/ObservableDetails.vue

@@ -164,7 +164,7 @@
             <template v-slot:chip="tag">
               <v-chip
                 :text="tag.item.value"
-                :color="observable?.tags[tag.item.value]?.fresh ? 'primary' : 'grey'"
+                :color="observable?.tags.filter(t => t.name == tag.item.value)[0]?.fresh ? 'primary' : 'grey'"
                 size="default"
             /></template>
             <template v-slot:append>
@@ -336,7 +336,7 @@ export default {
         .then(response => {
           let tagNames: string[] = [];
           this.observable = response.data;
-          this.observableTags = Object.keys(this.observable.tags);
+          this.observableTags = this.observable.tags.map(tag => tag.name);
           // Switch back to Context view when reloading the page.
           this.activeTab = 0;
           this.appStore.setPageTitleFromObject(this.observable);

src/views/ObservableMatch.vue

@@ -87,9 +87,9 @@
                   </template>
                   <template v-slot:item.tags="{ item }">
                     <v-chip
-                      v-for="name in Object.keys(item.tags)"
-                      :color="item.tags[name].fresh ? 'blue' : 'grey'"
-                      :text="name"
+                      v-for="tag in item.tags"
+                      :color="tag.fresh ? 'blue' : 'grey'"
+                      :text="tag.name"
                       class="me-1"
                       size="small"
                     ></v-chip>
@@ -174,9 +174,9 @@
               </template>
               <template v-slot:item.tags="{ item }">
                 <v-chip
-                  v-for="name in Object.keys(item.tags)"
-                  :color="item.tags[name].fresh ? 'blue' : 'grey'"
-                  :text="name"
+                  v-for="tag in item.tags"
+                  :color="tag.fresh ? 'blue' : 'grey'"
+                  :text="tag.name"
                   class="me-1"
                   size="small"
                 ></v-chip>

src/views/ObservableSearch.vue

@@ -31,9 +31,9 @@
       </template>
       <template v-slot:item.tags="{ item }">
         <v-chip
-          v-for="name in Object.keys(item.tags)"
-          :color="item.tags[name].fresh ? 'blue ' : 'red'"
-          :text="name"
+          v-for="tag in item.tags"
+          :color="tag.fresh ? 'blue ' : 'red'"
+          :text="tag.name"
           class="mx-1"
           label
           size="small"