From e0a2290f0760e794dc874292f6280aeaf0ba3bf7 Mon Sep 17 00:00:00 2001
From: Juliana Silva Barbosa <julesbarbosa1@gmail.com>
Date: Sun, 17 Dec 2023 21:07:03 -0500
Subject: [PATCH] syncro label all

---
 client/src/App.svelte           |   4 +-
 client/src/lib/Api.ts           |  14 ++-
 client/src/lib/ImageCard.svelte |  74 +++--------
 client/src/lib/LabelAll.svelte  | 213 +++++++++++++++-----------------
 client/src/lib/Random.svelte    |  10 +-
 client/src/lib/stores.ts        |  15 ++-
 6 files changed, 148 insertions(+), 182 deletions(-)

diff --git a/client/src/App.svelte b/client/src/App.svelte
index da71fc8..859e2c5 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Router, Link, Route } from "svelte-routing";
   import { onMount } from "svelte";
-  import { labelStore, negativeKeywordStore } from "./lib/stores";
+  import { descriptionsStore, negativeKeywordStore } from "./lib/stores";
   import * as api from "./lib/Api";
   import BootstrapComponents from "./BootstrapComponents.svelte";
   import Search from "./lib/Search.svelte";
@@ -15,7 +15,7 @@
   onMount(async () => {
     console.log("Loading positive keywords");
     const remotePositivekeywords = await api.loadLabels("description");
-    labelStore.update((labels: string[]) => [
+    descriptionsStore.update((labels: string[]) => [
       ...new Set([...labels, ...remotePositivekeywords.labels]),
     ]);
 
diff --git a/client/src/lib/Api.ts b/client/src/lib/Api.ts
index 1c01b49..57a1145 100644
--- a/client/src/lib/Api.ts
+++ b/client/src/lib/Api.ts
@@ -5,16 +5,18 @@ export interface Hits {
     hits: Hit[];
 }
 
+export type LabelType = "relevant" | "animal" | "description" | "keywords";
+
 export interface Hit {
     _distance: number;
     image_path: string;
     title: string;
     metadata?: string;
-    labels_types_dict: {[key: string]: string; };
-    relevant?: string;
-    animal?: string;
-    description?: string[];
-    keywords?: string[];
+    labels_types_dict: {[key: string]: LabelType; };
+    // relevant?: string;
+    // animal?: string;
+    // description?: string[];
+    // keywords?: string[];
 }
 
 
@@ -87,6 +89,8 @@ interface RemoveLabelResponse {
 }
 
 export async function removeLabel(image_path: string, label: string, table: string): Promise<RemoveLabelResponse> {
+    console.log("api.removeLabel()", image_path, label, table);
+
     const response = await fetchJSON<RemoveLabelResponse>("/remove_label", {
         image_path,
         label,
diff --git a/client/src/lib/ImageCard.svelte b/client/src/lib/ImageCard.svelte
index 7aff43a..9a80868 100644
--- a/client/src/lib/ImageCard.svelte
+++ b/client/src/lib/ImageCard.svelte
@@ -3,7 +3,7 @@
   import type { Hit } from "./Api";
   import { navigate } from "svelte-routing";
   import {
-    labelStore,
+    descriptionsStore,
     animalStore,
     negativeKeywordStore,
     selectedDataStore,
@@ -13,6 +13,7 @@
 
   export let hit: Hit;
   $: parsedHitMetadata = hit.metadata;
+  $: hitLabels = hit.labels_types_dict;
 
   let showModal = false;
 
@@ -24,7 +25,6 @@
   let selectedNegKeyword: string;
   let selectedAnimal: string;
   let isSelected: boolean = true;
-  $: hitLabels = hit.labels_types_dict;
 
   // tableau10 colors
   const colors = [
@@ -40,7 +40,7 @@
     "#17becf",
   ];
 
-  labelStore.subscribe((storeLabels) => {
+  descriptionsStore.subscribe((storeLabels) => {
     allLabels = storeLabels;
   });
 
@@ -58,19 +58,18 @@
 
   function togggleSelected() {
     isSelected = !isSelected;
-    allSelectedData[hit.image_path] = isSelected;
-    selectedDataStore.update((allSelectedData) => {
-      return allSelectedData;
+    selectedDataStore.update((selectedData) => {
+      selectedData[hit.image_path] = isSelected;
+      return selectedData;
     });
   }
 
-  function addLabelExclusive(newLabel: string, type: keyof Hit) {
+  function addLabelExclusive(newLabel: string, type: api.LabelType) {
     if (!newLabel || newLabel === "") {
       return;
     }
     let hitLabels = hit.labels_types_dict;
-    let hitKey = hit[type];
-    hitLabels
+    let hitKey = Object.keys(hitLabels).find((key) => hitLabels[key] === type);
     if (typeof hitKey === 'string') {
       if (hitKey === newLabel) {
         return;
@@ -83,9 +82,7 @@
       }
     }
     hitLabels[newLabel] = `${type}`;
-    hitKey = newLabel;
     hit.labels_types_dict = hitLabels;
-    hit[type] = hitKey;
     try {
       api.addLabel(hit.image_path, newLabel, `${type}`);
     } catch (e) {
@@ -93,24 +90,19 @@
     }
   }
 
-  function addLabelInclusive(newLabel: string, type: keyof Hit) {
+  function addLabelInclusive(newLabel: string, type: api.LabelType) {
     if (!newLabel || newLabel === "") {
       return;
     }
-    let hitKey = hit[type];
     let hitLabels = hit.labels_types_dict;
+    let hitKey = Object.keys(hitLabels).find((key) => hitLabels[key] === type);
     console.log(hitKey)
     if ((Array.isArray(hitKey)) && hitKey.length > 0) {
       if (hitKey.includes(newLabel)) {
         return;
-      } else {
-        hitKey = [...new Set([...hitKey, newLabel])];
       }
-    } else {
-      hitKey = [newLabel];
     }
     hitLabels[newLabel] = `${type}`;
-    hit[type] = hitKey;
     hit.labels_types_dict = hitLabels;
     try {
       api.addLabel(hit.image_path, newLabel, `${type}`);
@@ -119,35 +111,8 @@
     }
   }
 
-  function onChangelabelKeyword(newLabel: string) {
-    if (newLabel) {
-      console.log("onChangeLabel", newLabel);
-      addLabelInclusive(newLabel, "keywords");
-    } else {
-      console.log("undefined Keyword: ", newLabel);
-    }
-  }
-
-  function onChangelabelDescription(newLabel: string) {
-    if (newLabel) {
-      console.log("onChangeLabel", newLabel);
-      addLabelInclusive(newLabel, "description");
-    } else {
-      console.log("undefined Keyword: ", newLabel);
-    }
-  }
-
-  function onChangeLabelAnimal(newAnimal: string, type: string) {
-    if (newAnimal) {
-      console.log("onChangeAnimal", newAnimal);
-      addLabelExclusive(newAnimal, "animal");
-    } else {
-      console.log("undefined label: ", newAnimal);
-    }
-  }
-
   function handleCreateDescription(newLabel: string) {
-    labelStore.update((storeLabels) => {
+    descriptionsStore.update((storeLabels) => {
       return [...new Set([...storeLabels, newLabel])];
     });
     return newLabel; // return the new label to the autocomplete
@@ -162,17 +127,12 @@
 
   function removeLabels(label: string) {
     let hitLabels = hit.labels_types_dict;
-    let type =  hitLabels[label] as keyof Hit;
+    let type =  hitLabels[label] as api.LabelType;
     console.log(hitLabels, type);
     if (hitLabels && hitLabels[label]) {
       api.removeLabel(hit.image_path, label, `${type}`);
       delete hitLabels[label];
       hit.labels_types_dict = hitLabels;
-      if (typeof hit[type] === 'string'){
-        hit[type] = undefined
-      }else if (Array.isArray(hit[type])){
-        hit[type] = hit[type].filter((l) => l !== label);
-      }
     }
     console.log("end: ", hitLabels);
   }
@@ -227,7 +187,7 @@
             items={allAnimals}
             bind:selectedItem={selectedAnimal}
             create={false}
-            onChange={onChangeLabelAnimal}
+            onChange={(label) => addLabelExclusive(label, "animal")}
             placeholder="Animal"
           />
         </div>
@@ -240,7 +200,7 @@
               bind:selectedItem={selectedDescription}
               create={true}
               onCreate={handleCreateDescription}
-              onChange={onChangelabelDescription}
+              onChange={(label) => addLabelInclusive(label, "description")}
               placeholder="Description"
             />
           </div>
@@ -253,17 +213,17 @@
               items={allNegKeywords}
               bind:selectedItem={selectedNegKeyword}
               create={true}
-              onChange={onChangelabelKeyword}
+              onChange={(label) => addLabelInclusive(label, "keywords")}
               onCreate={handleCreateKeyword}
               placeholder="Negative Keyword"
             />
           </div>
         </div>
         {#if hitLabels && Object.keys(hitLabels).length > 0}
-          <div class="btn-toolbar">
+          <div class="btn-toolbar mb-1">
             {#each Object.entries(hitLabels) as [label, value], idx}
               <span
-                class="badge rounded-pill bg-secondary me-1 mt-2 position-relative"
+                class="badge rounded-pill bg-secondary me-1 mt-1 mb-1 position-relative"
               >
                 <!-- style="background-color: {colors[idx]} !important;" -->
                 {label}
diff --git a/client/src/lib/LabelAll.svelte b/client/src/lib/LabelAll.svelte
index c559b7a..10c4889 100644
--- a/client/src/lib/LabelAll.svelte
+++ b/client/src/lib/LabelAll.svelte
@@ -1,27 +1,33 @@
 <script lang="ts">
   import type { Hit } from "./Api";
   import {
-    labelStore,
+    descriptionsStore,
     animalStore,
     negativeKeywordStore,
     selectedDataStore,
   } from "./stores";
   import AutoComplete from "simple-svelte-autocomplete";
   import * as api from "./Api";
+  import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
 
   export let allHits: Hit[];
 
-  let allLabels: string[];
+  let allDescriptions: string[];
   let allAnimals: string[];
   let allNegKeywords: string[];
+
   let selectedDescription: string;
-  let selectedNegKeyword: string;
   let selectedAnimal: string;
+  let selectedNegKeyword: string;
+
   let allSelectedData: { [key: string]: boolean };
-  let hitLabelsall = {};
 
-  labelStore.subscribe((storeLabels) => {
-    allLabels = storeLabels;
+  let labels = {};
+
+  descriptionsStore.subscribe((storeLabels) => {
+    allDescriptions = storeLabels;
   });
 
   animalStore.subscribe((storeAnimals) => {
@@ -36,107 +42,91 @@
     allSelectedData = storeSelectedData;
   });
 
-  function addLabelExclusive(newLabel: string, type: keyof Hit) {
+  function addLabelExclusive(newLabel: string, type: api.LabelType) {
     if (!newLabel || newLabel === "") {
       return;
     }
-    console.log(hitLabelsall)
+    console.log(labels);
+
     if (
-      hitLabelsall &&
-      Object.keys(hitLabelsall).length !== 0
+      labels &&
+      Object.keys(labels).length !== 0
     ) {
-      const labelKey = Object.keys(hitLabelsall).find((key) => hitLabelsall[key] === type);
+      const labelKey = Object.keys(labels).find((key) => labels[key] === type);
       if (labelKey && labelKey !== newLabel) {
-        delete hitLabelsall[labelKey];
+        delete labels[labelKey];
       }
     }
-    hitLabelsall[newLabel] = `${type}`;
+    labels[newLabel] = `${type}`;
+
+    const selectedHits = allHits.filter(hit => allSelectedData[hit.image_path] === true);
+
     // Send label for all hits marked
-    for (let hit of allHits) {
-      if (allSelectedData[hit.image_path] === true) {
-        let hitLabels = hit.labels_types_dict;
-        let hitKey = hit[type]; // label from table type
-        if (typeof hitKey === 'string') {
-          if (hitKey === newLabel) {
-            return; // label already applied
-          }
-          if (
-            hitKey !== newLabel
-          ){
-            api.removeLabel(hit.image_path, hitKey, `${type}`);
-            delete hitLabels[hitKey];
-          }
-        }
-        hitLabels[newLabel] = `${type}`;
-        hitKey = newLabel;
-        hit.labels_types_dict = hitLabels;
-        hit[type] = hitKey;
-        try {
-          api.addLabel(hit.image_path, newLabel, `${type}`);
-        } catch (e) {
-          console.log(e);
+    for (let hit of selectedHits) {
+      let hitLabels = hit.labels_types_dict;
+      let hitKey = Object.keys(hitLabels).find((key) => hitLabels[key] === type);
+      if (hitKey) {
+        if (hitKey === newLabel) {
+          // label already applied, skip to next
+          continue;
+        } else {
+          api.removeLabel(hit.image_path, hitKey, `${type}`);
+          delete hit.labels_types_dict[hitKey];
         }
       }
+      hit.labels_types_dict[newLabel] = type;
+      sendToBackend(hit.image_path, newLabel, type);
     }
-    console.log(hitLabelsall)
+    dispatch('changeLabels', {
+			newLabel, type
+		});
+    console.log(labels)
   }
 
-  function addLabelInclusive(newLabel: string, type: keyof Hit) {
+  function addLabelInclusive(newLabel: string, type: api.LabelType) {
+    console.log("addLabelInclusive", newLabel, type);
     if (!newLabel || newLabel === "") {
       return;
     }
-    hitLabelsall[newLabel] =  `${type}`;
+    labels[newLabel] = `${type}`;
+
     // add label for each hit on page
-    for (let hit of allHits) {
-      if (allSelectedData[hit.image_path] === true) {
-        let hitKey = hit[type];
-        let hitLabels = hit.labels_types_dict;
-        if ((Array.isArray(hitKey)) && hitKey.length > 0) {
-          if (hitKey.includes(newLabel)) {
-            return;
-          } else {
-            hitKey = [...new Set([...hitKey, newLabel])];
-          }
-        } else {
-          hitKey = [newLabel];
-        }
-        hitLabels[newLabel] = `${type}`;
-        hit[type] = hitKey; // TODO: future remove all from HIT and use only the dict
-        hit.labels_types_dict = hitLabels;
-        try {
-          api.addLabel(hit.image_path, newLabel, `${type}`);
-        } catch (e) {
-          console.log(e);
-        }
-      }
+    const selectedHits = allHits.filter(hit => allSelectedData[hit.image_path] === true);
+    for (let hit of selectedHits) {
+      let hitLabels = hit.labels_types_dict;
+      hitLabels[newLabel] = `${type}`;
+      hit.labels_types_dict = hitLabels;
+      sendToBackend(hit.image_path, newLabel, type);
     }
+    dispatch('changeLabels', {
+			newLabel, type
+		});
   }
 
-  function onChangeDescription(newLabel: string) {
-    if (newLabel) {
-      console.log("onChangeDescription", newLabel);
-      addLabelInclusive(newLabel, "description");
-    } else {
-      console.log("undefined Description: ", newLabel);
+  function sendToBackend(image_path: string, label: string, type: api.LabelType) {
+    console.log('Send to backend: ', image_path, label, type);
+    try {
+      api.addLabel(image_path, label, type); // FIXME
+    } catch (e) {
+      console.log(e);
     }
   }
 
+  function onChangeDescription(newLabel: string) {
+    addLabelInclusive(newLabel, "description");
+  }
+
+  function onChangeKeyword(newKeyword: string) {
+    addLabelInclusive(newKeyword, "keywords");
+  }
+
   function handleCreateDescription(newLabel: string) {
-    labelStore.update((storeLabels) => {
+    descriptionsStore.update((storeLabels) => {
       return [...new Set([...storeLabels, newLabel])];
     });
     return newLabel; // return the new label to the autocomplete
   }
 
-  function onChangeKeyword(newKeyword: string) {
-    if (newKeyword) {
-      console.log("onChangeKeyword", newKeyword);
-      addLabelInclusive(newKeyword, "keywords");
-    } else {
-      console.log("undefined Keyword: ", newKeyword);
-    }
-  }
-
   function handleCreateKeyword(newKeyword: string) {
     negativeKeywordStore.update((storeNegKeyword) => {
       return [...new Set([...storeNegKeyword, newKeyword])];
@@ -145,7 +135,7 @@
   }
 
   function onChangeAnimal(newAnimal: string) {
-    console.log("change", hitLabelsall, newAnimal);
+    console.log("change", labels, newAnimal);
     if (newAnimal) {
       console.log("onChangeAnimal", newAnimal);
       addLabelExclusive(newAnimal, "animal");
@@ -155,25 +145,24 @@
   }
 
   function removeLabels(label: string) {
-    delete hitLabelsall[label];
-    hitLabelsall = hitLabelsall;
-    for (let hit of allHits) {
+    delete labels[label];
+    labels = labels; // required to update component
+
+    const selectedHits = allHits.filter(hit => allSelectedData[hit.image_path] === true);
+    for (let hit of selectedHits) {
       if (allSelectedData[hit.image_path] === true) {
-        let hitLabels = hit.labels_types_dict;
-        let type =  hitLabels[label] as keyof Hit;
+
+        const hitLabels = hit.labels_types_dict;
         if (hitLabels && hitLabels[label]) {
-          api.removeLabel(hit.image_path, label, `${type}`);
+          api.removeLabel(hit.image_path, label, hitLabels[label]);
           delete hitLabels[label];
-          hitLabels = hitLabels;
-          hit.labels_types_dict = hitLabels;
-          if (typeof hit[type] === 'string'){
-            hit[type] = undefined
-          }else if (Array.isArray(hit[type])){
-            hit[type] = hit[type].filter((l) => l !== label);
-          }
         }
       }
     }
+
+    dispatch('changeLabels', {
+			label // TODO: type?
+		});
   }
 
 </script>
@@ -213,7 +202,7 @@
             <AutoComplete
               debug={false}
               inputClassName="form-control"
-              items={allLabels}
+              items={allDescriptions}
               bind:selectedItem={selectedDescription}
               create={true}
               onCreate={handleCreateDescription}
@@ -237,28 +226,28 @@
           </div>
         </div>
       </div>
+      {#if labels && Object.keys(labels).length > 0}
+        <div class="btn-toolbar">
+          {#each Object.entries(labels) as [label, value], idx}
+            <span
+              class="badge rounded-pill bg-secondary me-1 mt-2 position-relative"
+            >
+              <!-- style="background-color: {colors[idx]} !important;" -->
+              {label}
+              <span
+                role="button"
+                on:click={() => removeLabels(label)}
+                class="position-absolute top-0 start-100 translate-middle"
+              >
+                <i class="fa fa-times-circle" aria-hidden="true" />
+                <span class="visually-hidden">Remove label</span>
+              </span>
+            </span>
+          {/each}
+        </div>
+      {/if}
     </div>
   </div>
-  {#if hitLabelsall && Object.keys(hitLabelsall).length > 0}
-    <div class="btn-toolbar">
-      {#each Object.entries(hitLabelsall) as [label, value], idx}
-        <span
-          class="badge rounded-pill bg-secondary me-1 mt-2 position-relative"
-        >
-          <!-- style="background-color: {colors[idx]} !important;" -->
-          {label}
-          <span
-            role="button"
-            on:click={() => removeLabels(label)}
-            class="position-absolute top-0 start-100 translate-middle"
-          >
-            <i class="fa fa-times-circle" aria-hidden="true" />
-            <span class="visually-hidden">Remove label</span>
-          </span>
-        </span>
-      {/each}
-    </div>
-  {/if}
 </div>
 
 <style>
diff --git a/client/src/lib/Random.svelte b/client/src/lib/Random.svelte
index c04dff2..8626438 100644
--- a/client/src/lib/Random.svelte
+++ b/client/src/lib/Random.svelte
@@ -26,10 +26,10 @@
     });
   }
 
-  export const someFunc = () => console.log("someFunc");
-  // onLoad(() => {
-  //   onQuerySubmit();
-  // });
+  function onLabelAllEvent() {
+    console.log("onChangeLabels");
+    result = result;
+  }
 </script>
 
 <div class="container">
@@ -89,7 +89,7 @@
             </div>
           {/each}
           <div class="w-25">
-            <LabelAll allHits={result.hits} />
+            <LabelAll allHits={result.hits} on:changeLabels={onLabelAllEvent} />
           </div>
         </div>
       {/if}
diff --git a/client/src/lib/stores.ts b/client/src/lib/stores.ts
index bf4adf4..fe34ea5 100644
--- a/client/src/lib/stores.ts
+++ b/client/src/lib/stores.ts
@@ -1,7 +1,20 @@
 import { writable } from 'svelte/store';
 import { animals, descriptions, negativeKeywords } from "./Descriptions";
 
-export const labelStore = writable<string[]>(descriptions);
+// type LabelType = "relevant" |  " animal";
+
+// interface Label {
+//     name: string;
+//     type: LabelType;
+// }
+
+// const labels: Label[];
+
+// interface LabelList = {
+//     [key: LabelType]: string[];
+// };
+
+export const descriptionsStore = writable<string[]>(descriptions);
 
 export const animalStore = writable<string[]>(animals);