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'"
>
<ViewerGlobalFilterReset v-if="hasAnyFiltersApplied" />
<ViewerGlobalIsolationReset v-else-if="hasAnyIsolationsApplied" />
<ViewerGlobalIsolationHiddenReset
v-else-if="hasAnyIsolationsApplied || hasAnyHiddenApplied"
/>
</div>
</div>
</template>
@@ -163,7 +165,8 @@ const { users } = useViewerUserActivityTracking({ anchoredPointsParentEl: parent
const { isOpenThread, open, closeAllThreads } = useThreadUtilities()
const {
filters: { hasAnyFiltersApplied },
hasAnyIsolationsApplied
hasAnyIsolationsApplied,
hasAnyHiddenApplied
} = useFilterUtilities({ state: viewerState })
const canPostComment = useCheckViewerCommentingAccess()
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 = []
}
const resetHiddenAndIsolations = () => {
clearHighlightedObjects()
clearSelection()
filters.isolatedObjectIds.value = []
filters.hiddenObjectIds.value = []
}
const hasAnyIsolationsApplied = computed(() => {
return filters.isolatedObjectIds.value.length > 0
})
@@ -111,6 +118,16 @@ export function useFilterUtilities(
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)
*/
@@ -928,9 +945,12 @@ export function useFilterUtilities(
isolateObjects,
unIsolateObjects,
resetIsolations,
resetHiddenAndIsolations,
hideObjects,
showObjects,
resetHidden,
hasAnyIsolationsApplied,
hasAnyHiddenApplied,
filters,
addActiveFilter,
updateFilterProperty,