From b4ff70db1555a13d3e312eaa757477f705dda081 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Thu, 22 Feb 2024 17:23:42 +0000
Subject: [PATCH] Update to object hiding ux (#2064)

* Update to object hiding ux

* Updates from Call with Fabs

* Add comment

* Add hidden count

* Remove hidden count

* Spacing updates
---
 .../viewer/explorer/StringFilterItem.vue      | 81 +++++++++++--------
 .../components/viewer/selection/Sidebar.vue   | 10 ++-
 2 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/packages/frontend-2/components/viewer/explorer/StringFilterItem.vue b/packages/frontend-2/components/viewer/explorer/StringFilterItem.vue
index 029ef9009..da6de03a9 100644
--- a/packages/frontend-2/components/viewer/explorer/StringFilterItem.vue
+++ b/packages/frontend-2/components/viewer/explorer/StringFilterItem.vue
@@ -2,14 +2,12 @@
   <div>
     <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
     <div
-      :class="`flex group pl-1 justify-between items-center w-full max-w-full overflow-hidden select-none space-x-2 rounded border-l-4 hover:bg-primary-muted hover:shadow-md transition-all ${
-        availableTargetIds.length === 0
-          ? 'text-foreground-2 cursor-auto'
-          : 'text-foreground cursor-pointer'
-      } ${isSelected ? 'border-primary bg-primary-muted' : 'border-transparent'}`"
+      :class="`flex group pl-1 justify-between items-center w-full max-w-full overflow-hidden select-none space-x-2 rounded border-l-4 hover:bg-primary-muted hover:shadow-md transition-all text-foreground cursor-pointer ${
+        isSelected ? 'border-primary bg-primary-muted' : 'border-transparent'
+      }`"
       @click="setSelection()"
     >
-      <div class="flex space-x-2 items-center flex-shrink truncate text-xs sm:text-sm">
+      <div class="flex gap-1 items-center flex-shrink truncate text-xs sm:text-sm">
         <span
           v-if="color"
           class="w-3 h-3 rounded"
@@ -18,7 +16,17 @@
         <span class="truncate">
           {{ item.value.split('.').reverse()[0] || item.value || 'No Name' }}
         </span>
-        <span class="text-xs text-foreground-2">({{ availableTargetIds.length }})</span>
+        <div class="flex">
+          <span
+            v-if="props.item.ids.length !== availableTargetIds.length"
+            class="text-xs text-foreground-2"
+          >
+            {{ availableTargetIds.length }} ({{ props.item.ids.length }})
+          </span>
+          <span v-else class="text-xs text-foreground-2">
+            {{ props.item.ids.length }}
+          </span>
+        </div>
       </div>
       <!-- 
         Note: not allowing for hiding/isolation CURRENTLY as there is a larger change needed. 
@@ -29,25 +37,24 @@
 
         There's v-if=false that's hiding the div below :)
       -->
-      <div v-if="false" class="flex items-center flex-shrink-0">
-        <button
+      <div class="flex items-center gap-1 flex-shrink-0">
+        <!-- <button
           :class="`hover:text-primary px-1 py-2 opacity-0 transition group-hover:opacity-100 ${
             isHidden ? 'opacity-100' : ''
           }`"
           @click.stop="hideOrShowObject"
-        >
-          <EyeIcon v-if="!isHidden" class="h-3 w-3" />
-          <EyeSlashIcon v-else class="h-3 w-3" />
-        </button>
+        > -->
+        <EyeSlashIcon v-if="isHidden" class="h-3 w-3" />
+        <!-- </button>
         <button
           :class="`hover:text-primary px-1 py-2 opacity-0 transition group-hover:opacity-100 ${
             isIsolated ? 'opacity-100' : ''
           }`"
           @click.stop="isolateOrUnisolateObject"
-        >
-          <FunnelIconOutline v-if="!isIsolated" class="h-3 w-3" />
-          <FunnelIcon v-else class="h-3 w-3" />
-        </button>
+        > -->
+        <FunnelIconOutline v-if="!isIsolated" class="h-3 w-3" />
+        <FunnelIcon v-else class="h-3 w-3" />
+        <!-- </button> -->
       </div>
     </div>
     <!-- Debugging info -->
@@ -57,7 +64,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { EyeIcon, EyeSlashIcon, FunnelIcon } from '@heroicons/vue/24/solid'
+import { EyeSlashIcon, FunnelIcon } from '@heroicons/vue/24/solid'
 import { FunnelIcon as FunnelIconOutline } from '@heroicons/vue/24/outline'
 import { containsAll, hasIntersection } from '~~/lib/common/helpers/utils'
 import { useInjectedViewerState } from '~~/lib/viewer/composables/setup'
@@ -115,22 +122,26 @@ const color = computed(() => {
     ?.color
 })
 
-const hideOrShowObject = () => {
-  // const ids = props.item.ids
-  // if (!isHidden.value) {
-  //   // removeFromSelection(rawSpeckleData)
-  //   filters.hideObjects(ids, stateKey, true)
-  //   return
-  // }
-  // return filters.showObjects(ids, stateKey, true)
-}
+// It is possible to control the visibility and isolation of objects from here, There are
+// some performance concerns here, so this is something to come back to. For now, the icons
+// are purely indicators
 
-const isolateOrUnisolateObject = () => {
-  // const ids = props.item.ids
-  // if (!isIsolated.value) {
-  //   filters.isolateObjects(ids, stateKey, true)
-  //   return
-  // }
-  // return filters.unIsolateObjects(ids, stateKey, true)
-}
+// const hideOrShowObject = () => {
+//   const ids = props.item.ids
+//   if (!isHidden.value) {
+//     // removeFromSelection(rawSpeckleData)
+//     filters.hideObjects(ids, stateKey, true)
+//     return
+//   }
+//   return filters.showObjects(ids, stateKey, true)
+// }
+
+// const isolateOrUnisolateObject = () => {
+//   const ids = props.item.ids
+//   if (!isIsolated.value) {
+//     filters.isolateObjects(ids, stateKey, true)
+//     return
+//   }
+//   return filters.unIsolateObjects(ids, stateKey, true)
+// }
 </script>
diff --git a/packages/frontend-2/components/viewer/selection/Sidebar.vue b/packages/frontend-2/components/viewer/selection/Sidebar.vue
index a91572307..5463df077 100644
--- a/packages/frontend-2/components/viewer/selection/Sidebar.vue
+++ b/packages/frontend-2/components/viewer/selection/Sidebar.vue
@@ -18,9 +18,12 @@
             class="opacity-80 hover:opacity-100"
             @click.stop="hideOrShowSelection"
           >
-            <div class="flex items-center gap-1">
-              <EyeIcon v-if="!isHidden" class="h-4 w-4" />
-              <EyeSlashIcon v-else class="h-4 w-4" />
+            <div v-if="isHidden" class="flex items-center gap-1">
+              <EyeIcon class="h-4 w-4" />
+              Show
+            </div>
+            <div v-else class="flex items-center gap-1">
+              <EyeSlashIcon class="h-4 w-4" />
               Hide
             </div>
           </FormButton>
@@ -132,7 +135,6 @@ const mp = useMixpanel()
 const hideOrShowSelection = () => {
   if (!isHidden.value) {
     hideObjects(allTargetIds.value)
-    clearSelection() // when hiding, the objects disappear. they can't really stay "selected"
     mp.track('Viewer Action', {
       type: 'action',
       name: 'selection',