fix: Update object visibility in ObjectTabModelContent component

BertrandRenault · Jan 18, 2024 · 2c94ad5 · 2c94ad5
1 parent 666e92c
commit 2c94ad5
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 23 deletions.
diff --git a/ui/components/imageWorkspace/src/ImageWorkspace.svelte b/ui/components/imageWorkspace/src/ImageWorkspace.svelte
@@ -57,7 +57,11 @@
   $: itemBboxes.subscribe((boxes) => (allBBoxes = boxes));
   $: itemMasks.subscribe((masks) => (allMasks = masks));
 
-  $: itemObjects.set(Object.values(selectedItem.objects || {}).flat());
+  $: itemObjects.set(
+    Object.values(selectedItem.objects || {})
+      .flat()
+      .map((obj) => ({ ...obj, displayControl: { hidden: false } })),
+  );
   $: itemMetas.set({
     features: selectedItem.features,
     itemFeatures: Object.values(selectedItem.objects || {})[0]?.features,

diff --git a/ui/components/imageWorkspace/src/components/ActionsTabs/ObjectTabContent.svelte b/ui/components/imageWorkspace/src/components/ActionsTabs/ObjectTabContent.svelte
@@ -17,7 +17,7 @@
   import { utils } from "@pixano/core";
 
   import ObjectTabFlatItem from "./ObjectTabFlatItem.svelte";
-  import ActionsTabsSearchInput from "./ObjectTabModelContent.svelte";
+  import ObjectTabModelContent from "./ObjectTabModelContent.svelte";
   import { itemObjects } from "../../lib/stores/imageWorkspaceStores";
   import { GROUND_TRUTH, MODEL_RUN } from "../../lib/constants";
   import { sortObjectsByModel } from "../../lib/api/objectsApi";
@@ -39,19 +39,19 @@
 
 <div class="p-2">
   <div>
-    <ActionsTabsSearchInput sectionTitle={"Ground truth"} modelName={GROUND_TRUTH}>
+    <ObjectTabModelContent sectionTitle={"Ground truth"} modelName={GROUND_TRUTH}>
       {#each allItemsSortedByModel[GROUND_TRUTH] as itemObject}
         <ObjectTabFlatItem bind:itemObject {colorScale} />
       {/each}
-    </ActionsTabsSearchInput>
+    </ObjectTabModelContent>
   </div>
-  <ActionsTabsSearchInput sectionTitle={"Model run"} modelName={MODEL_RUN}>
+  <ObjectTabModelContent sectionTitle={"Model run"} modelName={MODEL_RUN}>
     {#each allItemsSortedByModel[MODEL_RUN] as model}
-      <ActionsTabsSearchInput sectionTitle={model.modelName} modelName={model.modelName}>
+      <ObjectTabModelContent sectionTitle={model.modelName} modelName={model.modelName}>
         {#each model.objects as itemObject}
           <ObjectTabFlatItem bind:itemObject {colorScale} />
         {/each}
-      </ActionsTabsSearchInput>
+      </ObjectTabModelContent>
     {/each}
-  </ActionsTabsSearchInput>
+  </ObjectTabModelContent>
 </div>
diff --git a/ui/components/imageWorkspace/src/components/ActionsTabs/ObjectTabModelContent.svelte b/ui/components/imageWorkspace/src/components/ActionsTabs/ObjectTabModelContent.svelte
@@ -23,44 +23,71 @@
 
   export let sectionTitle: string;
   export let modelName: string;
-  let hideAllObjects: boolean | undefined;
 
-  let tooltipContent: string = hideAllObjects ? "show all" : "hide all";
+  let visibilityStatus: "hidden" | "shown" | "mixed" = "shown";
+  $: tooltipContent = visibilityStatus === "hidden" ? "show all" : "hide all";
   let open: boolean = true;
 
   itemObjects.subscribe((items) => {
-    const allItemsOfCurrentModelAreHidden = items
-      .filter((item) => {
-        if (modelName === MODEL_RUN) {
-          return item.source_id !== GROUND_TRUTH;
-        }
-        return item.source_id === modelName;
-      })
-      .find((item) => item.displayControl?.hidden);
-    hideAllObjects = !!allItemsOfCurrentModelAreHidden;
+    const allObjectsOfCurrentModel = items.filter((item) => {
+      if (modelName === MODEL_RUN) {
+        return item.source_id !== GROUND_TRUTH;
+      }
+      return item.source_id === modelName;
+    });
+    const allObjectsOfCurrentModelAreHidden = allObjectsOfCurrentModel.every(
+      (item) => item.displayControl?.hidden,
+    );
+    if (allObjectsOfCurrentModelAreHidden) {
+      visibilityStatus = "hidden";
+    }
+    const allObjectsOfCurrentModelAreShown = allObjectsOfCurrentModel.every(
+      (item) => !item.displayControl?.hidden,
+    );
+    if (allObjectsOfCurrentModelAreShown) {
+      visibilityStatus = "shown";
+    }
   });
 
   $: itemObjects.update((items) => {
     return items.map((item) => {
       if (item.source_id === modelName) {
-        return toggleObjectDisplayControl(item, "hidden", ["bbox", "mask"], !!hideAllObjects);
+        if (visibilityStatus === "mixed") return item;
+        return toggleObjectDisplayControl(
+          item,
+          "hidden",
+          ["bbox", "mask"],
+          visibilityStatus === "hidden",
+        );
       }
       if (modelName === MODEL_RUN && item.source_id !== GROUND_TRUTH) {
-        return toggleObjectDisplayControl(item, "hidden", ["bbox", "mask"], !!hideAllObjects);
+        if (visibilityStatus === "mixed") return item;
+        return toggleObjectDisplayControl(
+          item,
+          "hidden",
+          ["bbox", "mask"],
+          visibilityStatus === "hidden",
+        );
       }
       return item;
     });
   });
 
   const handleVisibilityIconClick = () => {
-    hideAllObjects = !hideAllObjects;
+    if (visibilityStatus === "hidden") {
+      visibilityStatus = "shown";
+    } else if (visibilityStatus === "shown") {
+      visibilityStatus = "hidden";
+    } else {
+      visibilityStatus = "hidden";
+    }
   };
 </script>
 
 <div class="flex items-center gap-3 justify-between">
   <div class="flex items-center gap-3">
     <IconButton {tooltipContent} on:click={handleVisibilityIconClick}>
-      {#if hideAllObjects}
+      {#if visibilityStatus === "hidden"}
         <EyeOff class="h-4" />
       {:else}
         <Eye class="h-4" />