feat(fe): improved reset isolations/hidden button

This commit is contained in:
andrewwallacespeckle
2025-10-07 23:14:27 +01:00
parent 82e6e397f2
commit 7d9d2f4f00
4 changed files with 78 additions and 24 deletions
@@ -124,7 +124,9 @@
:class="showFollowerMessage ? 'top-24' : 'top-14'" :class="showFollowerMessage ? 'top-24' : 'top-14'"
> >
<ViewerGlobalFilterReset v-if="hasAnyFiltersApplied" /> <ViewerGlobalFilterReset v-if="hasAnyFiltersApplied" />
<ViewerGlobalIsolationReset v-else-if="hasAnyIsolationsApplied" /> <ViewerGlobalIsolationHiddenReset
v-else-if="hasAnyIsolationsApplied || hasAnyHiddenApplied"
/>
</div> </div>
</div> </div>
</template> </template>
@@ -163,7 +165,8 @@ const { users } = useViewerUserActivityTracking({ anchoredPointsParentEl: parent
const { isOpenThread, open, closeAllThreads } = useThreadUtilities() const { isOpenThread, open, closeAllThreads } = useThreadUtilities()
const { const {
filters: { hasAnyFiltersApplied }, filters: { hasAnyFiltersApplied },
hasAnyIsolationsApplied hasAnyIsolationsApplied,
hasAnyHiddenApplied
} = useFilterUtilities({ state: viewerState }) } = useFilterUtilities({ state: viewerState })
const canPostComment = useCheckViewerCommentingAccess() const canPostComment = useCheckViewerCommentingAccess()
const breakpoints = useBreakpoints(TailwindBreakpoints) const breakpoints = useBreakpoints(TailwindBreakpoints)
@@ -0,0 +1,53 @@
<template>
<FormButton
size="sm"
color="outline"
class="pointer-events-auto"
@click="trackAndReset"
>
{{ buttonText }}
</FormButton>
</template>
<script setup lang="ts">
import { useMixpanel } from '~~/lib/core/composables/mp'
import { useFilterUtilities } from '~/lib/viewer/composables/filtering/filtering'
import { useInjectedViewerState } from '~/lib/viewer/composables/setup'
const viewerState = useInjectedViewerState()
const { resetHiddenAndIsolations, hasAnyIsolationsApplied, hasAnyHiddenApplied } =
useFilterUtilities({ state: viewerState })
const buttonText = computed(() => {
const hasIsolations = hasAnyIsolationsApplied.value
const hasHidden = hasAnyHiddenApplied.value
if (hasIsolations && hasHidden) {
return 'Reset isolations/hidden'
} else if (hasIsolations) {
return 'Reset isolations'
} else if (hasHidden) {
return 'Reset hidden'
}
return 'Reset'
})
const mp = useMixpanel()
const trackAndReset = () => {
const hasIsolations = hasAnyIsolationsApplied.value
const hasHidden = hasAnyHiddenApplied.value
resetHiddenAndIsolations()
if (hasIsolations && hasHidden) {
mp.track('Viewer Action', {
type: 'action',
name: 'isolations-hidden',
action: 'reset'
})
} else if (hasIsolations) {
mp.track('Viewer Action', { type: 'action', name: 'isolations', action: 'reset' })
} else if (hasHidden) {
mp.track('Viewer Action', { type: 'action', name: 'hidden', action: 'reset' })
}
}
</script>
@@ -1,22 +0,0 @@
<template>
<FormButton
size="sm"
color="outline"
class="pointer-events-auto"
@click="trackAndResetIsolations"
>
Reset isolations
</FormButton>
</template>
<script setup lang="ts">
import { useMixpanel } from '~~/lib/core/composables/mp'
import { useFilterUtilities } from '~/lib/viewer/composables/filtering/filtering'
const { resetIsolations } = useFilterUtilities()
const mp = useMixpanel()
const trackAndResetIsolations = () => {
resetIsolations()
mp.track('Viewer Action', { type: 'action', name: 'isolations', action: 'reset' })
}
</script>
@@ -86,6 +86,13 @@ export function useFilterUtilities(
filters.isolatedObjectIds.value = [] filters.isolatedObjectIds.value = []
} }
const resetHiddenAndIsolations = () => {
clearHighlightedObjects()
clearSelection()
filters.isolatedObjectIds.value = []
filters.hiddenObjectIds.value = []
}
const hasAnyIsolationsApplied = computed(() => { const hasAnyIsolationsApplied = computed(() => {
return filters.isolatedObjectIds.value.length > 0 return filters.isolatedObjectIds.value.length > 0
}) })
@@ -111,6 +118,16 @@ export function useFilterUtilities(
filters.hiddenObjectIds.value = difference(filters.hiddenObjectIds.value, objectIds) filters.hiddenObjectIds.value = difference(filters.hiddenObjectIds.value, objectIds)
} }
const resetHidden = () => {
clearHighlightedObjects()
clearSelection()
filters.hiddenObjectIds.value = []
}
const hasAnyHiddenApplied = computed(() => {
return filters.hiddenObjectIds.value.length > 0
})
/** /**
* Gets ALL values for a property using pre-computed data (used for filtering logic) * Gets ALL values for a property using pre-computed data (used for filtering logic)
*/ */
@@ -928,9 +945,12 @@ export function useFilterUtilities(
isolateObjects, isolateObjects,
unIsolateObjects, unIsolateObjects,
resetIsolations, resetIsolations,
resetHiddenAndIsolations,
hideObjects, hideObjects,
showObjects, showObjects,
resetHidden,
hasAnyIsolationsApplied, hasAnyIsolationsApplied,
hasAnyHiddenApplied,
filters, filters,
addActiveFilter, addActiveFilter,
updateFilterProperty, updateFilterProperty,