speckle-server/packages/frontend-2/components/automate/viewer/panel/FunctionRunRowObjectResult.vue

<template>
  <div class="overflow-hidden">
    <button
      :class="`block w-full transition text-left hover:bg-primary-muted hover:shadow-md rounded-md p-1 cursor-pointer border-l-2  ${
        isIsolated || metadataGradientIsSet
          ? 'border-primary bg-primary-muted shadow-md'
          : 'border-transparent'
      }`"
      @click="handleClick()"
    >
      <div class="flex items-center space-x-1">
        <div>
          <Component :is="iconAndColor.icon" :class="`w-4 h-4 ${iconAndColor.color}`" />
        </div>
        <div :class="`text-xs ${iconAndColor.color}`">
          {{ result.category }}: {{ resultObjectIds.length }} affected elements
        </div>
      </div>
      <div v-if="result.message" class="text-xs text-foreground-2 pl-5">
        {{ result.message }}
      </div>
    </button>
    <div class="flex mt-2 px-3 overflow-hidden">
      <ViewerFiltersFilterNumeric
        v-if="metadataGradientIsSet && computedFilterData"
        :filter="computedFilterData"
        no-padding
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  CheckIcon,
  XMarkIcon,
  InformationCircleIcon,
  ExclamationTriangleIcon
} from '@heroicons/vue/24/outline'
import { useInjectedViewerState } from '~~/lib/viewer/composables/setup'
import { useSelectionUtilities } from '~~/lib/viewer/composables/ui'
import { useFilterUtilities } from '~/lib/viewer/composables/filtering/filtering'
import { useFilterColoringHelpers } from '~/lib/viewer/composables/filtering/coloringHelpers'
import type { NumericPropertyInfo } from '@speckle/viewer'
import { containsAll } from '~~/lib/common/helpers/utils'
import type { Automate } from '@speckle/shared'
import type { NumericFilterData } from '~/lib/viewer/helpers/filters/types'
import { isNumericFilter } from '~/lib/viewer/helpers/filters/types'
import { injectGradientDataIntoDataStore } from '~/lib/viewer/helpers/filters/utils'

type ObjectResult = Automate.AutomateTypes.ResultsSchema['values']['objectResults'][0]

const props = defineProps<{
  result: ObjectResult
  functionId?: string
}>()

const {
  viewer: {
    metadata: { filteringDataStore }
  }
} = useInjectedViewerState()

const {
  isolateObjects,
  resetFilters,
  resetIsolations,
  addActiveFilter,
  toggleFilterApplied,
  filters
} = useFilterUtilities()
const { clearSelection } = useSelectionUtilities()
const { setColorFilter, removeColorFilter } = useFilterColoringHelpers()
const logger = useLogger()

const hasMetadataGradient = computed(() => {
  if (props.result.metadata?.gradient) return true
  return false
})

const isIsolated = computed(() => {
  const isolatedIds = filters.isolatedObjectIds.value
  const ids = resultObjectIds.value

  logger.debug('isIsolated computed running for result:', props.result.category, {
    isolatedIds: isolatedIds?.length || 0,
    myIds: ids.length,
    hasGradient: hasMetadataGradient.value,
    gradientSet: metadataGradientIsSet.value,
    sampleMyIds: ids.slice(0, 3),
    sampleIsolatedIds: isolatedIds?.slice(0, 3) || [],
    containsAll: isolatedIds?.length ? containsAll(ids, isolatedIds) : false
  })

  if (!isolatedIds?.length) return false

  if (hasMetadataGradient.value && metadataGradientIsSet.value) return false

  return containsAll(ids, isolatedIds)
})

const resultObjectIds = computed(() => {
  if ('objectIds' in props.result) return props.result.objectIds
  return Object.keys(props.result.objectAppIds)
})

const handleClick = () => {
  logger.debug('handleClick')
  if (hasMetadataGradient.value) {
    logger.debug('About to call setOrUnsetGradient')
    setOrUnsetGradient()
    return
  }
  logger.debug('About to call isolateOrUnisolateObjects')
  isolateOrUnisolateObjects()
}

const isolateOrUnisolateObjects = () => {
  const ids = resultObjectIds.value
  const isCurrentlyIsolated = isIsolated.value

  logger.debug('isolateOrUnisolateObjects called:', {
    idsCount: ids.length,
    isCurrentlyIsolated,
    currentIsolatedIds: filters.isolatedObjectIds.value.length
  })

  resetFilters()
  logger.debug(
    'After resetFilters, isolatedObjectIds:',
    filters.isolatedObjectIds.value.length
  )

  if (isCurrentlyIsolated) {
    logger.debug('Deactivating result')
    resetIsolations()
    clearSelection()
  } else {
    logger.debug(
      'About to call isolateObjects with',
      ids.length,
      'objects:',
      ids.slice(0, 3)
    )
    isolateObjects(ids)
    logger.debug(
      'After isolateObjects, filters.isolatedObjectIds:',
      filters.isolatedObjectIds.value.length
    )
    logger.debug('Sample isolated IDs:', filters.isolatedObjectIds.value.slice(0, 3))
  }
}

const metadataGradientIsSet = ref(false)

// NOTE: This is currently a hacky convention!!!
const computedPropInfo = computed(() => {
  if (!hasMetadataGradient.value) return
  if (!props.result.metadata) return
  if (!props.functionId) return

  const propInfo: NumericPropertyInfo = {
    objectCount: 0,
    key: props.functionId,
    type: 'number',
    min: Number.MAX_VALUE,
    max: Number.MIN_VALUE,
    valueGroups: [],
    passMin: 0,
    passMax: 0
  }

  const gradientValues = props.result.metadata.gradientValues || {}
  propInfo.objectCount = Object.keys(gradientValues).length

  for (const [key, { gradientValue: value }] of Object.entries(gradientValues)) {
    const valueGroup = {
      id: key,
      value
    }
    propInfo.valueGroups.push(valueGroup)
    if (propInfo.max < value) propInfo.max = value
    if (propInfo.min > value) propInfo.min = value
  }
  propInfo.passMax = propInfo.max
  propInfo.passMin = propInfo.min
  return propInfo
})

const computedFilterData = computed((): NumericFilterData | undefined => {
  if (!metadataGradientIsSet.value || !props.functionId) return

  const activeFilter = filters.propertyFilters.value.find(
    (f) => f.filter?.key === props.functionId
  )

  return activeFilter && isNumericFilter(activeFilter) ? activeFilter : undefined
})

const setOrUnsetGradient = () => {
  if (metadataGradientIsSet.value) {
    resetFilters()
    removeColorFilter()
    metadataGradientIsSet.value = false
    return
  }
  resetFilters()
  if (!props.result.metadata) return
  if (!computedPropInfo.value) return
  if (!props.functionId) return

  const gradientValues = props.result.metadata?.gradientValues || {}
  injectGradientDataIntoDataStore(filteringDataStore, props.functionId, gradientValues)

  metadataGradientIsSet.value = true
  const filterId = addActiveFilter(computedPropInfo.value)
  toggleFilterApplied(filterId)

  setColorFilter(filterId)
}

const iconAndColor = computed(() => {
  switch (props.result.level) {
    case 'SUCCESS':
      return {
        icon: CheckIcon,
        color: 'text-success font-medium'
      }
    case 'ERROR':
      return {
        icon: XMarkIcon,
        color: 'text-danger font-medium'
      }
    case 'WARNING':
      return {
        icon: ExclamationTriangleIcon,
        color: 'text-warning font-medium'
      }
    case 'INFO':
    default:
      return {
        icon: InformationCircleIcon,
        color: 'text-foreground font-medium'
      }
  }
})

watch(
  () => filters.propertyFilters.value,
  (newFilters) => {
    if (!props.functionId) return
    const hasFilter = newFilters.some((f) => f.filter?.key === props.functionId)
    if (!hasFilter && metadataGradientIsSet.value) {
      metadataGradientIsSet.value = false
    }
  },
  { deep: true }
)
</script>