From a12410c628656aa8eff79fc5582097ae99a5ee8b Mon Sep 17 00:00:00 2001
From: Juliana Silva Barbosa <julesbarbosa@Julianas-MacBook-Pro.local>
Date: Sat, 16 Dec 2023 17:21:57 -0500
Subject: [PATCH] label all remove label

---
 client/src/lib/ImageCard.svelte | 226 ++++++++++++--------------------
 client/src/lib/LabelAll.svelte  | 221 ++++++++++---------------------
 2 files changed, 147 insertions(+), 300 deletions(-)

diff --git a/client/src/lib/ImageCard.svelte b/client/src/lib/ImageCard.svelte
index 8d45573..7aff43a 100644
--- a/client/src/lib/ImageCard.svelte
+++ b/client/src/lib/ImageCard.svelte
@@ -2,7 +2,12 @@
   import Modal from "./Modal.svelte";
   import type { Hit } from "./Api";
   import { navigate } from "svelte-routing";
-  import { labelStore, animalStore, negativeKeywordStore, selectedDataStore } from "./stores";
+  import {
+    labelStore,
+    animalStore,
+    negativeKeywordStore,
+    selectedDataStore,
+  } from "./stores";
   import AutoComplete from "simple-svelte-autocomplete";
   import * as api from "./Api";
 
@@ -14,12 +19,12 @@
   let allLabels: string[];
   let allAnimals: string[];
   let allNegKeywords: string[];
-  let allSelectedData: {[key: string]: boolean; };
+  let allSelectedData: { [key: string]: boolean };
   let selectedDescription: string;
   let selectedNegKeyword: string;
   let selectedAnimal: string;
   let isSelected: boolean = true;
-  $: hitLabels = hit.labels
+  $: hitLabels = hit.labels_types_dict;
 
   // tableau10 colors
   const colors = [
@@ -53,150 +58,91 @@
 
   function togggleSelected() {
     isSelected = !isSelected;
-    allSelectedData[hit.image_path] = isSelected
+    allSelectedData[hit.image_path] = isSelected;
     selectedDataStore.update((allSelectedData) => {
-      return allSelectedData
+      return allSelectedData;
     });
   }
 
-  function addLabel(newLabel: string) {
+  function addLabelExclusive(newLabel: string, type: keyof Hit) {
     if (!newLabel || newLabel === "") {
       return;
     }
-    let hitLabels = hit.labels;
-    let hitRelevants = hit.relevant;
-    if (hitRelevants && hitRelevants.length > 0 && hitLabels) {
-      if (hitRelevants.includes(newLabel)) {
+    let hitLabels = hit.labels_types_dict;
+    let hitKey = hit[type];
+    hitLabels
+    if (typeof hitKey === 'string') {
+      if (hitKey === newLabel) {
         return;
       }
       if (
-        newLabel === "animal origin" &&
-        hitRelevants.includes("not animal origin")
-      ) {
-        api.removeLabel(hit.image_path, "not animal origin", "relevant");
-        hitLabels = hitLabels.filter((l) => l !== "not animal origin");
-        hitRelevants = "animal origin";
-      } else if (
-        newLabel === "not animal origin" &&
-        hitLabels.includes("animal origin")
-      ) {
-        api.removeLabel(hit.image_path, "animal origin", "relevant");
-        hitLabels = hitLabels.filter((l) => l !== "animal origin");
-        hitRelevants = "not animal origin";
+        hitKey !== newLabel
+      ){
+        api.removeLabel(hit.image_path, hitKey, `${type}`);
+        delete hitLabels[hitKey];
       }
-      hitLabels = [...new Set([...hitLabels, newLabel])];
-      hitRelevants = newLabel;
-    } else {
-      hitLabels = [...new Set([...hitLabels, newLabel])];
-      hitRelevants = newLabel;
     }
-    hit.labels = hitLabels;
-    hit.relevant = hitRelevants;
+    hitLabels[newLabel] = `${type}`;
+    hitKey = newLabel;
+    hit.labels_types_dict = hitLabels;
+    hit[type] = hitKey;
     try {
-      api.addLabel(hit.image_path, newLabel, "relevant");
+      api.addLabel(hit.image_path, newLabel, `${type}`);
     } catch (e) {
       console.log(e);
     }
   }
 
-  function addDescription(newDescription: string) {
-    if (!newDescription || newDescription === "") {
+  function addLabelInclusive(newLabel: string, type: keyof Hit) {
+    if (!newLabel || newLabel === "") {
       return;
     }
-    let hitDescription = hit.description;
-    let hitLabels = hit.labels;
-    if (hitDescription && hitDescription.length > 0) {
-      if (hitDescription.includes(newDescription)) {
+    let hitKey = hit[type];
+    let hitLabels = hit.labels_types_dict;
+    console.log(hitKey)
+    if ((Array.isArray(hitKey)) && hitKey.length > 0) {
+      if (hitKey.includes(newLabel)) {
         return;
       } else {
-        hitDescription = [...new Set([...hitDescription, newDescription])];
-        hitLabels = [...new Set([...hitLabels, newDescription])];
+        hitKey = [...new Set([...hitKey, newLabel])];
       }
     } else {
-      hitDescription = [newDescription];
-      hitLabels = [...new Set([...hitLabels, newDescription])];
+      hitKey = [newLabel];
     }
-    hit.description = hitDescription;
-    hit.labels = hitLabels;
+    hitLabels[newLabel] = `${type}`;
+    hit[type] = hitKey;
+    hit.labels_types_dict = hitLabels;
     try {
-      api.addLabel(hit.image_path, newDescription, "description");
+      api.addLabel(hit.image_path, newLabel, `${type}`);
     } catch (e) {
       console.log(e);
     }
   }
 
-  function addAnimal(newAnimal: string) {
-    if (!newAnimal || newAnimal === "") {
-      return;
-    }
-    let hitLabels = hit.labels;
-    let hitAnimal = hit.animal;
-    if (hitAnimal && hitAnimal !== newAnimal) {
-      api.removeLabel(hit.image_path, hitAnimal, "animal");
-    }
-
-    if (hitLabels && hitLabels.length > 0) {
-      if (hitAnimal && hitLabels.includes(hitAnimal)) {
-        hitLabels = hitLabels.filter((l) => l !== hitAnimal);
-        hitLabels = [...new Set([...hitLabels, newAnimal])];
-      } else {
-        hitLabels = [...new Set([...hitLabels, newAnimal])];
-      }
+  function onChangelabelKeyword(newLabel: string) {
+    if (newLabel) {
+      console.log("onChangeLabel", newLabel);
+      addLabelInclusive(newLabel, "keywords");
     } else {
-      hit.labels = [newAnimal];
-      hitLabels = hit.labels;
-    }
-    hit.labels = hitLabels;
-    hitAnimal = newAnimal;
-    hit.animal = hitAnimal;
-
-    try {
-      api.addLabel(hit.image_path, newAnimal, "animal");
-    } catch (e) {
-      console.log(e);
+      console.log("undefined Keyword: ", newLabel);
     }
   }
 
-  function addKeyword(newKeyword: string) {
-    console.log("add", newKeyword);
-    if (!newKeyword || newKeyword === "") {
-      return;
-    }
-    let hitNegKeywords = hit.keywords;
-    let hitLabels = hit.labels;
-    if (hitNegKeywords && hitNegKeywords.length > 0) {
-      if (hitNegKeywords.includes(newKeyword)) {
-        api.removeLabel(hit.image_path, newKeyword, "keywords");
-        if (
-          hitLabels &&
-          hitLabels.length > 0 &&
-          hitLabels.includes(newKeyword)
-        ) {
-          hitLabels = hitLabels.filter((l) => l !== newKeyword);
-        }
-      } else {
-        hitNegKeywords = [...new Set([...hitNegKeywords, newKeyword])];
-        hitLabels = [...new Set([...hitLabels, newKeyword])];
-      }
+  function onChangelabelDescription(newLabel: string) {
+    if (newLabel) {
+      console.log("onChangeLabel", newLabel);
+      addLabelInclusive(newLabel, "description");
     } else {
-      hitNegKeywords = [newKeyword];
-      hitLabels = [...new Set([...hitLabels, newKeyword])];
-    }
-    hit.keywords = hitNegKeywords;
-    hit.labels = hitLabels;
-    try {
-      api.addLabel(hit.image_path, newKeyword, "keywords");
-    } catch (e) {
-      console.log(e);
+      console.log("undefined Keyword: ", newLabel);
     }
   }
 
-  function onChangeDescription(newLabel: string) {
-    if (newLabel) {
-      console.log("onChangeDescription", newLabel);
-      addDescription(newLabel);
+  function onChangeLabelAnimal(newAnimal: string, type: string) {
+    if (newAnimal) {
+      console.log("onChangeAnimal", newAnimal);
+      addLabelExclusive(newAnimal, "animal");
     } else {
-      console.log("undefined Description: ", newLabel);
+      console.log("undefined label: ", newAnimal);
     }
   }
 
@@ -207,15 +153,6 @@
     return newLabel; // return the new label to the autocomplete
   }
 
-  function onChangeKeyword(newKeyword: string) {
-    if (newKeyword) {
-      console.log("onChangeKeyword", newKeyword);
-      addKeyword(newKeyword);
-    } else {
-      console.log("undefined Keyword: ", newKeyword);
-    }
-  }
-
   function handleCreateKeyword(newKeyword: string) {
     negativeKeywordStore.update((storeNegKeyword) => {
       return [...new Set([...storeNegKeyword, newKeyword])];
@@ -223,27 +160,21 @@
     return newKeyword; // return the new label to the autocomplete
   }
 
-  function onChangeAnimal(newAnimal: string) {
-    if (newAnimal) {
-      console.log("onChangeAnimal", newAnimal);
-      addAnimal(newAnimal);
-    } else {
-      console.log("undefined label: ", newAnimal);
-    }
-  }
-
   function removeLabels(label: string) {
-    console.log(hit)
-    let hitLabels = hit.labels;
-    let hittypes = hit.labels_types_dict;
-    if (hittypes && hittypes[label]) {
-      api.removeLabel(hit.image_path, label, hittypes[label]);
-      hittypes = hit.labels_types_dict;
-    }
-    if (hitLabels && hitLabels.includes(label)) {
-      hitLabels = hitLabels.filter((l) => l !== label);
-      hit.labels = hitLabels;
+    let hitLabels = hit.labels_types_dict;
+    let type =  hitLabels[label] as keyof Hit;
+    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);
   }
 </script>
 
@@ -254,7 +185,10 @@
     class="card-img-top"
   />
   <div class="box-container">
-    <div class="d-flex flex-row-reverse btn-group btn-group-toggle btn-group-sm" data-toggle="buttons">
+    <div
+      class="d-flex flex-row-reverse btn-group btn-group-toggle btn-group-sm"
+      data-toggle="buttons"
+    >
       <label class="btn btn-sm btn-outline-primary" style="font-size: 0.7em">
         <input
           class="form-check-input"
@@ -275,13 +209,13 @@
         <div class="btn-group me-2" role="group" aria-label="">
           <button
             class="btn btn-sm btn-success"
-            on:click={() => addLabel("animal origin")}
+            on:click={() => addLabelExclusive("animal origin", "relevant")}
           >
             <i class="fa fa-thumbs-up" aria-hidden="true" />
           </button>
           <button
             class="btn btn-sm btn-warning"
-            on:click={() => addLabel("not animal origin")}
+            on:click={() => addLabelExclusive("not animal origin", "relevant")}
           >
             <i class="fa fa-thumbs-down" aria-hidden="true" />
           </button>
@@ -293,7 +227,7 @@
             items={allAnimals}
             bind:selectedItem={selectedAnimal}
             create={false}
-            onChange={onChangeAnimal}
+            onChange={onChangeLabelAnimal}
             placeholder="Animal"
           />
         </div>
@@ -306,7 +240,7 @@
               bind:selectedItem={selectedDescription}
               create={true}
               onCreate={handleCreateDescription}
-              onChange={onChangeDescription}
+              onChange={onChangelabelDescription}
               placeholder="Description"
             />
           </div>
@@ -319,15 +253,15 @@
               items={allNegKeywords}
               bind:selectedItem={selectedNegKeyword}
               create={true}
-              onChange={onChangeKeyword}
+              onChange={onChangelabelKeyword}
               onCreate={handleCreateKeyword}
               placeholder="Negative Keyword"
             />
           </div>
         </div>
-        {#if hitLabels && hitLabels.length > 0}
+        {#if hitLabels && Object.keys(hitLabels).length > 0}
           <div class="btn-toolbar">
-            {#each hitLabels as label, idx}
+            {#each Object.entries(hitLabels) as [label, value], idx}
               <span
                 class="badge rounded-pill bg-secondary me-1 mt-2 position-relative"
               >
@@ -347,8 +281,10 @@
         {/if}
         <div class="d-flex justify-content-between">
           <div class="btn-group">
-
-            <button class="btn btn-sm btn-info me-1" on:click={() => (showModal = true)}>
+            <button
+              class="btn btn-sm btn-info me-1"
+              on:click={() => (showModal = true)}
+            >
               <i class="fa fa-info-circle me-1" aria-hidden="true" />
               Metadata
             </button>
diff --git a/client/src/lib/LabelAll.svelte b/client/src/lib/LabelAll.svelte
index a5ba9c6..c559b7a 100644
--- a/client/src/lib/LabelAll.svelte
+++ b/client/src/lib/LabelAll.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-  import Modal from "./Modal.svelte";
   import type { Hit } from "./Api";
-  import { navigate } from "svelte-routing";
   import {
     labelStore,
     animalStore,
@@ -20,22 +18,7 @@
   let selectedNegKeyword: string;
   let selectedAnimal: string;
   let allSelectedData: { [key: string]: boolean };
-  $: hitLabels = [];
-  $: animal = "";
-
-  // tableau10 colors
-  const colors = [
-    "#1f77b4",
-    "#ff7f0e",
-    "#2ca02c",
-    "#d62728",
-    "#9467bd",
-    "#8c564b",
-    "#e377c2",
-    "#7f7f7f",
-    "#bcbd22",
-    "#17becf",
-  ];
+  let hitLabelsall = {};
 
   labelStore.subscribe((storeLabels) => {
     allLabels = storeLabels;
@@ -53,153 +36,75 @@
     allSelectedData = storeSelectedData;
   });
 
-  function addLabel(newLabel: string) {
+  function addLabelExclusive(newLabel: string, type: keyof Hit) {
     if (!newLabel || newLabel === "") {
       return;
     }
-    if (newLabel === "not animal origin"){
-      hitLabels = hitLabels.filter((l) => l !== "animal origin");
-      hitLabels = [...new Set([...hitLabels, newLabel])];
-    } else {
-      hitLabels = hitLabels.filter((l) => l !== "not animal origin");
-      hitLabels = [...new Set([...hitLabels, newLabel])];
+    console.log(hitLabelsall)
+    if (
+      hitLabelsall &&
+      Object.keys(hitLabelsall).length !== 0
+    ) {
+      const labelKey = Object.keys(hitLabelsall).find((key) => hitLabelsall[key] === type);
+      if (labelKey && labelKey !== newLabel) {
+        delete hitLabelsall[labelKey];
+      }
     }
-
+    hitLabelsall[newLabel] = `${type}`;
+    // Send label for all hits marked
     for (let hit of allHits) {
       if (allSelectedData[hit.image_path] === true) {
-        let hitRelevants = hit.relevant;
-        if (hitRelevants && hitRelevants.length > 0) {
-          if (hitRelevants === newLabel) {
-            return;
+        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 (
-            newLabel === "animal origin" &&
-            hitRelevants === "not animal origin"
-          ) {
-            api.removeLabel(hit.image_path, "not animal origin", "relevant");
-            hitRelevants = "animal origin";
-          } else if (
-            newLabel === "not animal origin" &&
-            hitRelevants === "animal origin"
-          ) {
-            api.removeLabel(hit.image_path, "animal origin", "relevant");
-            hitRelevants = "not animal origin";
+            hitKey !== newLabel
+          ){
+            api.removeLabel(hit.image_path, hitKey, `${type}`);
+            delete hitLabels[hitKey];
           }
-        } else {
-          hitRelevants = newLabel;
         }
-        hit.relevant = hitRelevants;
+        hitLabels[newLabel] = `${type}`;
+        hitKey = newLabel;
+        hit.labels_types_dict = hitLabels;
+        hit[type] = hitKey;
         try {
-          api.addLabel(hit.image_path, newLabel, "relevant");
+          api.addLabel(hit.image_path, newLabel, `${type}`);
         } catch (e) {
           console.log(e);
         }
       }
     }
+    console.log(hitLabelsall)
   }
 
-  function addDescription(newDescription: string) {
-    if (!newDescription || newDescription === "") {
+  function addLabelInclusive(newLabel: string, type: keyof Hit) {
+    if (!newLabel || newLabel === "") {
       return;
     }
-    hitLabels = [...new Set([...hitLabels, newDescription])];
+    hitLabelsall[newLabel] =  `${type}`;
+    // add label for each hit on page
     for (let hit of allHits) {
       if (allSelectedData[hit.image_path] === true) {
-        let hitDescription = hit.description;
-        if (hitDescription && hitDescription.length > 0) {
-          if (hitDescription.includes(newDescription)) {
+        let hitKey = hit[type];
+        let hitLabels = hit.labels_types_dict;
+        if ((Array.isArray(hitKey)) && hitKey.length > 0) {
+          if (hitKey.includes(newLabel)) {
             return;
           } else {
-            hitDescription = [...new Set([...hitDescription, newDescription])];
-          }
-        } else {
-          hitDescription = [newDescription];
-        }
-        hit.description = hitDescription;
-        hit.labels = hitLabels;
-        try {
-          api.addLabel(hit.image_path, newDescription, "description");
-        } catch (e) {
-          console.log(e);
-        }
-      }
-    }
-  }
-
-  function addAnimal(newAnimal: string) {
-    if (!newAnimal || newAnimal === "") {
-      return;
-    }
-    if (hitLabels.length > 0 && !(hitLabels.includes(newAnimal))){
-      if (animal !== ""){
-        hitLabels = hitLabels.filter((l) => l !== animal);
-      }
-      animal = newAnimal
-    }
-    hitLabels = [...new Set([...hitLabels, newAnimal])];
-
-    for (let hit of allHits) {
-      if (allSelectedData[hit.image_path] === true) {
-        let hitLabels = hit.labels;
-        let hitAnimal = hit.animal;
-        if (hitAnimal && hitAnimal !== newAnimal) {
-          api.removeLabel(hit.image_path, hitAnimal, "animal");
-        }
-        if (hitLabels && hitLabels.length > 0) {
-          if (hitAnimal && hitLabels.includes(hitAnimal)) {
-            hitLabels = hitLabels.filter((l) => l !== hitAnimal);
-            hitLabels = [...new Set([...hitLabels, newAnimal])];
-          } else {
-            hitLabels = [...new Set([...hitLabels, newAnimal])];
-          }
-        } else {
-          hit.labels = [newAnimal];
-          hitLabels = hit.labels;
-        }
-        hit.labels = hitLabels;
-        hitAnimal = newAnimal;
-        hit.animal = hitAnimal;
-
-        try {
-          api.addLabel(hit.image_path, newAnimal, "animal");
-        } catch (e) {
-          console.log(e);
-        }
-      }
-    }
-  }
-
-  function addKeyword(newKeyword: string) {
-    if (!newKeyword || newKeyword === "") {
-      return;
-    }
-    hitLabels = [...new Set([...hitLabels, newKeyword])];
-    for (let hit of allHits) {
-      if (allSelectedData[hit.image_path] === true) {
-        let hitNegKeywords = hit.keywords;
-        let hitLabels = hit.labels;
-        if (hitNegKeywords && hitNegKeywords.length > 0) {
-          if (hitNegKeywords.includes(newKeyword)) {
-            api.removeLabel(hit.image_path, newKeyword, "keywords");
-            if (
-              hitLabels &&
-              hitLabels.length > 0 &&
-              hitLabels.includes(newKeyword)
-            ) {
-              hitLabels = hitLabels.filter((l) => l !== newKeyword);
-            }
-          } else {
-            hitNegKeywords = [...new Set([...hitNegKeywords, newKeyword])];
-            hitLabels = [...new Set([...hitLabels, newKeyword])];
+            hitKey = [...new Set([...hitKey, newLabel])];
           }
         } else {
-          hitNegKeywords = [newKeyword];
-          hitLabels = [...new Set([...hitLabels, newKeyword])];
+          hitKey = [newLabel];
         }
-        hit.keywords = hitNegKeywords;
-        hit.labels = hitLabels;
+        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, newKeyword, "keywords");
+          api.addLabel(hit.image_path, newLabel, `${type}`);
         } catch (e) {
           console.log(e);
         }
@@ -210,7 +115,7 @@
   function onChangeDescription(newLabel: string) {
     if (newLabel) {
       console.log("onChangeDescription", newLabel);
-      addDescription(newLabel);
+      addLabelInclusive(newLabel, "description");
     } else {
       console.log("undefined Description: ", newLabel);
     }
@@ -226,7 +131,7 @@
   function onChangeKeyword(newKeyword: string) {
     if (newKeyword) {
       console.log("onChangeKeyword", newKeyword);
-      addKeyword(newKeyword);
+      addLabelInclusive(newKeyword, "keywords");
     } else {
       console.log("undefined Keyword: ", newKeyword);
     }
@@ -236,35 +141,41 @@
     negativeKeywordStore.update((storeNegKeyword) => {
       return [...new Set([...storeNegKeyword, newKeyword])];
     });
-    return newKeyword; // return the new label to the autocomplete
+    return newKeyword;
   }
 
   function onChangeAnimal(newAnimal: string) {
+    console.log("change", hitLabelsall, newAnimal);
     if (newAnimal) {
       console.log("onChangeAnimal", newAnimal);
-      addAnimal(newAnimal);
+      addLabelExclusive(newAnimal, "animal");
     } else {
       console.log("undefined label: ", newAnimal);
     }
   }
 
   function removeLabels(label: string) {
+    delete hitLabelsall[label];
+    hitLabelsall = hitLabelsall;
     for (let hit of allHits) {
-      console.log(hit)
       if (allSelectedData[hit.image_path] === true) {
-        // let hitLabels = hit.labels;
-        let hittypes = hit.labels_types_dict;
-        if (hittypes && hittypes[label]) {
-          console.log(hittypes)
-          api.removeLabel(hit.image_path, label, hittypes[label]);
-          hittypes = hit.labels_types_dict;
+        let hitLabels = hit.labels_types_dict;
+        let type =  hitLabels[label] as keyof Hit;
+        if (hitLabels && hitLabels[label]) {
+          api.removeLabel(hit.image_path, label, `${type}`);
+          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);
+          }
         }
       }
     }
-    if (hitLabels && hitLabels.includes(label)) {
-      hitLabels = hitLabels.filter((l) => l !== label);
-    }
   }
+
 </script>
 
 <div class="card me-3 mb-3">
@@ -275,13 +186,13 @@
         <div class="btn-group me-2" role="group" aria-label="">
           <button
             class="btn btn-sm btn-success"
-            on:click={() => addLabel("animal origin")}
+            on:click={() => addLabelExclusive("animal origin", "relevant")}
           >
             <i class="fa fa-thumbs-up" aria-hidden="true" />
           </button>
           <button
             class="btn btn-sm btn-warning"
-            on:click={() => addLabel("not animal origin")}
+            on:click={() => addLabelExclusive("not animal origin", "relevant")}
           >
             <i class="fa fa-thumbs-down" aria-hidden="true" />
           </button>
@@ -328,9 +239,9 @@
       </div>
     </div>
   </div>
-  {#if hitLabels && hitLabels.length > 0}
+  {#if hitLabelsall && Object.keys(hitLabelsall).length > 0}
     <div class="btn-toolbar">
-      {#each hitLabels as label, idx}
+      {#each Object.entries(hitLabelsall) as [label, value], idx}
         <span
           class="badge rounded-pill bg-secondary me-1 mt-2 position-relative"
         >