Show associated images, if available

Author: manthey

.github/workflows/ci.yaml

@@ -3,6 +3,7 @@ name: ci
 on:
   pull_request:
   push:
+    tags: "*"
     branches:
       - main
 jobs:

client/package.json

@@ -41,7 +41,7 @@
     "vue-eslint-parser": "^9.4.3",
     "vue-tsc": "^2.2.0"
   },
-  "packageManager": "yarn@4.5.1+sha256.dc2e45a77f87a9c2a76708d098ab54ca0cfdd5ec2cf7d9e3c1f24bf786a2383c",
+  "packageManager": "yarn@4.10.3+sha512.c38cafb5c7bb273f3926d04e55e1d8c9dfa7d9c3ea1f36a4868fa028b9e5f72298f0b7f401ad5eb921749eb012eb1c3bb74bf7503df3ee43fd600d14a018266f",
   "dependenciesMeta": {
     "remixicon@3.7.0": {
       "unplugged": true

client/public/associatedPlaceholder.svg

@@ -22,6 +22,8 @@ defineProps({
       <tr class="text-base bg-gray-600">
         <th class="bg-neutral text-white py-5 px-6">Image File Name</th>
         <th class="bg-gray-600 text-white py-5 px-10">Image</th>
+        <th class="bg-gray-600 text-white py-5 px-10">Label</th>
+        <th class="bg-gray-600 text-white py-5 px-10">Macro</th>
         <th class="bg-gray-600 text-white">Redaction Status</th>
         <th
           v-if="Object.keys(imageRedactionPlan.data).includes('missing_tags')"
@@ -44,6 +46,12 @@ defineProps({
         <td>
           <img :src="image.thumbnail" />
         </td>
+        <td>
+          <img :src="image.label" />
+        </td>
+        <td>
+          <img :src="image.macro" />
+        </td>
         <td>
           <div
             v-if="image.missing_tags"
@@ -118,4 +126,7 @@ tbody th:first-child {
   z-index: 1;
   background-color: #ffffff;
 }
+td img {
+  min-width: 160px;
+}
 </style>

client/src/components/ImageDataTable.vue

@@ -14,28 +14,31 @@ export const useRedactionPlan = reactive({
   },
   async getThumbnail(imagedict: Record<string, Record<string, string>>) {
     Object.keys(imagedict).forEach(async (image) => {
-      const response = await getImages(
-        this.currentDirectory + "/" + image,
-        "thumbnail",
-      );
-      if (response.status >= 400) {
-        this.imageRedactionPlan.data[image].thumbnail =
-          "/thumbnailPlaceholder.svg";
-        return;
-      }
-      if (response.body) {
-        const reader = response.body.getReader();
-        const chunks = [];
+      const keys = ["thumbnail", "label", "macro"];
+      for (let kidx=0; kidx < keys.length; kidx += 1) {
+        const key = keys[kidx];
+        const response = await getImages(
+          this.currentDirectory + "/" + image,
+          key,
+        );
+        if (response.status >= 400) {
+          this.imageRedactionPlan.data[image][key] = key === "thumbnail" ? "/thumbnailPlaceholder.svg" : "/associatedPlaceholder.svg";
+          return;
+        }
+        if (response.body) {
+          const reader = response.body.getReader();
+          const chunks = [];
 
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          chunks.push(value);
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            chunks.push(value);
+          }
+          const blob = new Blob(chunks);
+          const url = URL.createObjectURL(blob);
+          this.imageRedactionPlan.data[image][key]= url;
         }
-        const blob = new Blob(chunks);
-        const url = URL.createObjectURL(blob);
-        this.imageRedactionPlan.data[image].thumbnail = url;
-      }
+      };
     });
   },