feat: add telemetry to answer for user failed to find template (#6489)

## Summary

Adds mixpanel telemetry with goal of: "We currently only know when a
user opens a template workflow. But we also want to know if they failed
to find what they want"

Example mixpanel query: 

```
app:template_library_closed
  WHERE template_selected = false AND time_spent_seconds >= 10
  ```

But can drill down further into what filters were selected etc to answer what they were looking for but couldn't find. 

```
 1. Event: app:template_filter_changed
  2. Filter:
- Add formula: "Where user also triggered app:template_library_closed
with template_selected = false in same session"
  3. Breakdown by: search_query
  4. Sort by: Total Count (descending)

  Search Query           Failed Sessions
  -----------------------------------
  "flux video"             45 times
  "sdxl controlnet"     32 times
  "upscaler"               28 times
  (empty/just filter)   20 times
```

```
 Event: app:template_filter_changed
  WHERE filtered_count = 0
    AND user did app:template_library_closed
    with template_selected = false

  Breakdown by: search_query
  ```
  etc.


https://www.notion.so/comfy-org/Number-of-users-who-open-the-template-library-and-where-do-they-click-29b6d73d36508044a595c0fb653ca6dc?source=copy_link

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6489-feat-add-telemetry-to-answer-for-user-failed-to-find-template-29d6d73d365081cdad72fd7c6ada5dc7)
by [Unito](https://www.unito.io)

Author: simula-r

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -382,7 +382,7 @@
 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
 import ProgressSpinner from 'primevue/progressspinner'
-import { computed, onBeforeUnmount, provide, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
@@ -403,6 +403,8 @@ import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useLazyPagination } from '@/composables/useLazyPagination'
 import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
 import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
 import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
@@ -412,10 +414,34 @@ import { createGridStyle } from '@/utils/gridUtil'
 
 const { t } = useI18n()
 
-const { onClose } = defineProps<{
+const { onClose: originalOnClose } = defineProps<{
   onClose: () => void
 }>()
 
+// Track session time for telemetry
+const sessionStartTime = ref<number>(0)
+const templateWasSelected = ref(false)
+
+onMounted(() => {
+  sessionStartTime.value = Date.now()
+})
+
+// Wrap onClose to track session end
+const onClose = () => {
+  if (isCloud) {
+    const timeSpentSeconds = Math.floor(
+      (Date.now() - sessionStartTime.value) / 1000
+    )
+
+    useTelemetry()?.trackTemplateLibraryClosed({
+      template_selected: templateWasSelected.value,
+      time_spent_seconds: timeSpentSeconds
+    })
+  }
+
+  originalOnClose()
+}
+
 provide(OnCloseKey, onClose)
 
 // Workflow templates store and composable
@@ -700,6 +726,7 @@ const onLoadWorkflow = async (template: any) => {
       template.name,
       getEffectiveSourceModule(template)
     )
+    templateWasSelected.value = true
     onClose()
   } finally {
     loadingTemplate.value = null

src/components/sidebar/ComfyMenuButton.vue

@@ -76,6 +76,7 @@ import { useI18n } from 'vue-i18n'
 
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
 import ComfyLogoTransparent from '@/components/icons/ComfyLogoTransparent.vue'
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useCommandStore } from '@/stores/commandStore'
@@ -160,7 +161,7 @@ const extraMenuItems = computed(() => [
     key: 'browse-templates',
     label: t('menuLabels.Browse Templates'),
     icon: 'icon-[comfy--template]',
-    command: () => commandStore.execute('Comfy.BrowseTemplates')
+    command: () => useWorkflowTemplateSelectorDialog().show('menu')
   },
   {
     key: 'settings',

src/components/sidebar/SidebarTemplatesButton.vue

@@ -12,19 +12,18 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCommandStore } from '@/stores/commandStore'
 
 import SidebarIcon from './SidebarIcon.vue'
 
 const settingStore = useSettingStore()
-const commandStore = useCommandStore()
 
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )
 
 const openTemplates = () => {
-  void commandStore.execute('Comfy.BrowseTemplates')
+  useWorkflowTemplateSelectorDialog().show('sidebar')
 }
 </script>

src/composables/useWorkflowTemplateSelectorDialog.ts

@@ -13,8 +13,8 @@ export const useWorkflowTemplateSelectorDialog = () => {
     dialogStore.closeDialog({ key: DIALOG_KEY })
   }
 
-  function show() {
-    useTelemetry()?.trackTemplateLibraryOpened({ source: 'command' })
+  function show(source: 'sidebar' | 'menu' | 'command' = 'command') {
+    useTelemetry()?.trackTemplateLibraryOpened({ source })
 
     dialogService.showLayoutDialog({
       key: DIALOG_KEY,

src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts

@@ -26,6 +26,7 @@ import type {
   TelemetryProvider,
   TemplateFilterMetadata,
   TemplateLibraryMetadata,
+  TemplateLibraryClosedMetadata,
   TemplateMetadata,
   WorkflowImportMetadata
 } from '../../types'
@@ -235,6 +236,10 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
     this.trackEvent(TelemetryEvents.TEMPLATE_LIBRARY_OPENED, metadata)
   }
 
+  trackTemplateLibraryClosed(metadata: TemplateLibraryClosedMetadata): void {
+    this.trackEvent(TelemetryEvents.TEMPLATE_LIBRARY_CLOSED, metadata)
+  }
+
   trackWorkflowImported(metadata: WorkflowImportMetadata): void {
     this.trackEvent(TelemetryEvents.WORKFLOW_IMPORTED, metadata)
   }

src/platform/telemetry/types.ts

@@ -122,6 +122,14 @@ export interface TemplateLibraryMetadata {
   source: 'sidebar' | 'menu' | 'command'
 }
 
+/**
+ * Template library closed metadata
+ */
+export interface TemplateLibraryClosedMetadata {
+  template_selected: boolean
+  time_spent_seconds: number
+}
+
 /**
  * Page visibility metadata
  */
@@ -193,6 +201,7 @@ export interface TelemetryProvider {
   // Template workflow events
   trackTemplate(metadata: TemplateMetadata): void
   trackTemplateLibraryOpened(metadata: TemplateLibraryMetadata): void
+  trackTemplateLibraryClosed(metadata: TemplateLibraryClosedMetadata): void
 
   // Workflow management events
   trackWorkflowImported(metadata: WorkflowImportMetadata): void
@@ -249,6 +258,7 @@ export const TelemetryEvents = {
   // Template Tracking
   TEMPLATE_WORKFLOW_OPENED: 'app:template_workflow_opened',
   TEMPLATE_LIBRARY_OPENED: 'app:template_library_opened',
+  TEMPLATE_LIBRARY_CLOSED: 'app:template_library_closed',
 
   // Workflow Management
   WORKFLOW_IMPORTED: 'app:workflow_imported',
@@ -289,6 +299,7 @@ export type TelemetryEventProperties =
   | CreditTopupMetadata
   | WorkflowImportMetadata
   | TemplateLibraryMetadata
+  | TemplateLibraryClosedMetadata
   | PageVisibilityMetadata
   | TabCountMetadata
   | NodeSearchMetadata