From 736abb5bb7413edd31592f398897a06dd0771781 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 31 Oct 2025 23:11:40 -0700
Subject: [PATCH 1/8] Add buttom telemetry foundation and comfy_logo

---
 src/components/sidebar/ComfyMenuButton.vue       | 10 +++++++++-
 .../providers/cloud/MixpanelTelemetryProvider.ts |  5 +++++
 src/platform/telemetry/types.ts                  | 16 +++++++++++++++-
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/ComfyMenuButton.vue b/src/components/sidebar/ComfyMenuButton.vue
index 19aa5b0a0f..893bf4d579 100644
--- a/src/components/sidebar/ComfyMenuButton.vue
+++ b/src/components/sidebar/ComfyMenuButton.vue
@@ -4,7 +4,7 @@
     :class="{
       'comfy-menu-button-active': menuRef?.visible
     }"
-    @click="menuRef?.toggle($event)"
+    @click="onLogoMenuClick($event)"
   >
     <ComfyLogoTransparent
       alt="ComfyUI Logo"
@@ -78,6 +78,7 @@ import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.
 import ComfyLogoTransparent from '@/components/icons/ComfyLogoTransparent.vue'
 import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
+import { useTelemetry } from '@/platform/telemetry'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
@@ -104,6 +105,13 @@ const menuRef = ref<
   ({ dirty: boolean } & TieredMenuMethods & TieredMenuState) | null
 >(null)
 
+const telemetry = useTelemetry()
+
+function onLogoMenuClick(event: MouseEvent) {
+  telemetry?.trackUiButtonClicked({ button_id: 'comfy_logo' })
+  menuRef.value?.toggle(event)
+}
+
 const translateMenuItem = (item: MenuItem): MenuItem => {
   const label = typeof item.label === 'function' ? item.label() : item.label
   const translatedLabel = label
diff --git a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
index a669235011..7a39e94f27 100644
--- a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
+++ b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
@@ -28,6 +28,7 @@ import type {
   TemplateLibraryMetadata,
   TemplateLibraryClosedMetadata,
   TemplateMetadata,
+  UiButtonClickMetadata,
   WorkflowImportMetadata
 } from '../../types'
 import { TelemetryEvents } from '../../types'
@@ -282,6 +283,10 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
     this.trackEvent(TelemetryEvents.EXECUTION_SUCCESS, metadata)
   }
 
+  trackUiButtonClicked(metadata: UiButtonClickMetadata): void {
+    this.trackEvent(TelemetryEvents.UI_BUTTON_CLICKED, metadata)
+  }
+
   getExecutionContext(): ExecutionContext {
     const workflowStore = useWorkflowStore()
     const templatesStore = useWorkflowTemplatesStore()
diff --git a/src/platform/telemetry/types.ts b/src/platform/telemetry/types.ts
index fd9225c2cc..964a3da074 100644
--- a/src/platform/telemetry/types.ts
+++ b/src/platform/telemetry/types.ts
@@ -192,6 +192,14 @@ export interface TemplateFilterMetadata {
   total_count: number
 }
 
+/**
+ * UI button click tracking metadata
+ */
+export interface UiButtonClickMetadata {
+  /** Canonical identifier for the button (e.g., "comfy_logo") */
+  button_id: string
+}
+
 /**
  * Core telemetry provider interface
  */
@@ -239,6 +247,9 @@ export interface TelemetryProvider {
   trackWorkflowExecution(): void
   trackExecutionError(metadata: ExecutionErrorMetadata): void
   trackExecutionSuccess(metadata: ExecutionSuccessMetadata): void
+
+  // Generic UI button click events
+  trackUiButtonClicked(metadata: UiButtonClickMetadata): void
 }
 
 /**
@@ -296,7 +307,9 @@ export const TelemetryEvents = {
   // Execution Lifecycle
   EXECUTION_START: 'execution_start',
   EXECUTION_ERROR: 'execution_error',
-  EXECUTION_SUCCESS: 'execution_success'
+  EXECUTION_SUCCESS: 'execution_success',
+  // Generic UI Button Click
+  UI_BUTTON_CLICKED: 'app:ui_button_clicked'
 } as const
 
 export type TelemetryEventName =
@@ -322,3 +335,4 @@ export type TelemetryEventProperties =
   | NodeSearchMetadata
   | NodeSearchResultMetadata
   | TemplateFilterMetadata
+  | UiButtonClickMetadata

From 533306bce7e778d0da1d8300666b8d8e08193c56 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 31 Oct 2025 23:37:38 -0700
Subject: [PATCH 2/8] Add telemetry from General section

---
 src/components/sidebar/SideToolbar.vue        | 24 ++++++++++++++++++-
 .../SidebarBottomPanelToggleButton.vue        | 11 ++++++++-
 .../sidebar/SidebarHelpCenterIcon.vue         |  5 ++++
 .../sidebar/SidebarShortcutsToggleButton.vue  |  5 ++++
 .../sidebar/SidebarTemplatesButton.vue        |  5 ++++
 5 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index bac974f1f1..950d82bf60 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -57,6 +57,7 @@ import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useKeybindingStore } from '@/stores/keybindingStore'
@@ -97,10 +98,31 @@ const isConnected = computed(
 const tabs = computed(() => workspaceStore.getSidebarTabs())
 const selectedTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab)
 
-const onTabClick = async (item: SidebarTabExtension) =>
+/**
+ * Handle sidebar tab icon click.
+ * - Emits UI button telemetry for known tabs
+ * - Delegates to the corresponding toggle command
+ */
+const onTabClick = async (item: SidebarTabExtension) => {
+  const telemetry = useTelemetry()
+
+  const isNodeLibraryTab = item.id === 'node-library'
+  const isModelLibraryTab = item.id === 'model-library'
+  const isWorkflowsTab = item.id === 'workflows'
+  const isAssetsTab = item.id === 'assets'
+
+  if (isNodeLibraryTab)
+    telemetry?.trackUiButtonClicked({ button_id: 'node_library' })
+  else if (isModelLibraryTab)
+    telemetry?.trackUiButtonClicked({ button_id: 'model_library' })
+  else if (isWorkflowsTab)
+    telemetry?.trackUiButtonClicked({ button_id: 'workflows' })
+  else if (isAssetsTab) telemetry?.trackUiButtonClicked({ button_id: 'assets' })
+
   await commandStore.commands
     .find((cmd) => cmd.id === `Workspace.ToggleSidebarTab.${item.id}`)
     ?.function?.()
+}
 
 const keybindingStore = useKeybindingStore()
 const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
diff --git a/src/components/sidebar/SidebarBottomPanelToggleButton.vue b/src/components/sidebar/SidebarBottomPanelToggleButton.vue
index e4fcb3f1d9..3a79411c41 100644
--- a/src/components/sidebar/SidebarBottomPanelToggleButton.vue
+++ b/src/components/sidebar/SidebarBottomPanelToggleButton.vue
@@ -3,7 +3,7 @@
     :label="$t('sideToolbar.labels.console')"
     :tooltip="$t('menu.toggleBottomPanel')"
     :selected="bottomPanelStore.activePanel == 'terminal'"
-    @click="bottomPanelStore.toggleBottomPanel"
+    @click="toggleConsole"
   >
     <template #icon>
       <i-ph:terminal-bold />
@@ -12,9 +12,18 @@
 </template>
 
 <script setup lang="ts">
+import { useTelemetry } from '@/platform/telemetry'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 
 import SidebarIcon from './SidebarIcon.vue'
 
 const bottomPanelStore = useBottomPanelStore()
+
+/**
+ * Toggle console bottom panel and track UI button click.
+ */
+const toggleConsole = () => {
+  useTelemetry()?.trackUiButtonClicked({ button_id: 'console' })
+  bottomPanelStore.toggleBottomPanel()
+}
 </script>
diff --git a/src/components/sidebar/SidebarHelpCenterIcon.vue b/src/components/sidebar/SidebarHelpCenterIcon.vue
index 368b2aa169..9564d4de37 100644
--- a/src/components/sidebar/SidebarHelpCenterIcon.vue
+++ b/src/components/sidebar/SidebarHelpCenterIcon.vue
@@ -65,6 +65,7 @@ import { computed, onMounted, toRefs } from 'vue'
 
 import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import ReleaseNotificationToast from '@/platform/updates/components/ReleaseNotificationToast.vue'
 import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
@@ -104,7 +105,11 @@ const sidebarLocation = computed(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
 
+/**
+ * Toggle Help Center and track UI button click.
+ */
 const toggleHelpCenter = () => {
+  useTelemetry()?.trackUiButtonClicked({ button_id: 'help_center' })
   helpCenterStore.toggle()
 }
 
diff --git a/src/components/sidebar/SidebarShortcutsToggleButton.vue b/src/components/sidebar/SidebarShortcutsToggleButton.vue
index bf80cd1ff6..a1b56ac1d8 100644
--- a/src/components/sidebar/SidebarShortcutsToggleButton.vue
+++ b/src/components/sidebar/SidebarShortcutsToggleButton.vue
@@ -15,6 +15,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 
@@ -34,7 +35,11 @@ const tooltipText = computed(
   () => `${t('shortcuts.keyboardShortcuts')} (${formatKeySequence(command)})`
 )
 
+/**
+ * Toggle keyboard shortcuts panel and track UI button click.
+ */
 const toggleShortcutsPanel = () => {
+  useTelemetry()?.trackUiButtonClicked({ button_id: 'keyboard_shortcuts' })
   bottomPanelStore.togglePanel('shortcuts')
 }
 </script>
diff --git a/src/components/sidebar/SidebarTemplatesButton.vue b/src/components/sidebar/SidebarTemplatesButton.vue
index d16fd4c09b..426b0539e9 100644
--- a/src/components/sidebar/SidebarTemplatesButton.vue
+++ b/src/components/sidebar/SidebarTemplatesButton.vue
@@ -14,6 +14,7 @@ import { computed } from 'vue'
 
 import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 
 import SidebarIcon from './SidebarIcon.vue'
 
@@ -23,7 +24,11 @@ const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )
 
+/**
+ * Open templates dialog from sidebar and track UI button click.
+ */
 const openTemplates = () => {
+  useTelemetry()?.trackUiButtonClicked({ button_id: 'templates' })
   useWorkflowTemplateSelectorDialog().show('sidebar')
 }
 </script>

From 593f5dc2667d491995b07dc04c25d18a47b71d99 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 31 Oct 2025 23:51:29 -0700
Subject: [PATCH 3/8] Add telemetry for Floating bottom right menu

---
 src/components/graph/GraphCanvasMenu.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index 0923db0064..56b844a0d3 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -61,7 +61,7 @@
         data-testid="toggle-minimap-button"
         :style="stringifiedMinimapStyles.buttonStyles"
         :class="minimapButtonClass"
-        @click="() => commandStore.execute('Comfy.Canvas.ToggleMinimap')"
+        @click="onMinimapToggleClick"
       >
         <template #icon>
           <i class="icon-[lucide--map] h-4 w-4" />
@@ -82,7 +82,7 @@
         :aria-label="linkVisibilityAriaLabel"
         data-testid="toggle-link-visibility-button"
         :style="stringifiedMinimapStyles.buttonStyles"
-        @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
+        @click="onLinkVisibilityToggleClick"
       >
         <template #icon>
           <i class="icon-[lucide--route-off] h-4 w-4" />
@@ -101,6 +101,7 @@ import { useI18n } from 'vue-i18n'
 import { useZoomControls } from '@/composables/useZoomControls'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
@@ -218,6 +219,22 @@ onMounted(() => {
   canvasStore.initScaleSync()
 })
 
+/**
+ * Track minimap toggle button click and execute the command.
+ */
+const onMinimapToggleClick = () => {
+  useTelemetry()?.trackUiButtonClicked({ button_id: 'minimap_toggle' })
+  void commandStore.execute('Comfy.Canvas.ToggleMinimap')
+}
+
+/**
+ * Track hide/show links button click and execute the command.
+ */
+const onLinkVisibilityToggleClick = () => {
+  useTelemetry()?.trackUiButtonClicked({ button_id: 'hide_links' })
+  void commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')
+}
+
 onBeforeUnmount(() => {
   canvasStore.cleanupScaleSync()
 })

From 0ac80b1a600000032e520076ba706ddcf92c6656 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 31 Oct 2025 23:58:39 -0700
Subject: [PATCH 4/8] Add telemetry for Run button menu

---
 src/components/actionbar/ComfyActionbar.vue               | 8 ++++++++
 .../actionbar/ComfyRunButton/ComfyQueueButton.vue         | 8 +++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index f01beee25a..e763819505 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -48,6 +48,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
 import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { cn } from '@/utils/tailwindUtil'
 
 import ComfyRunButton from './ComfyRunButton'
@@ -132,6 +133,13 @@ watch(visible, async (newVisible) => {
   }
 })
 
+/**
+ * Track run button handle drag start using mousedown on the drag handle.
+ */
+useEventListener(dragHandleRef, 'mousedown', () => {
+  useTelemetry()?.trackUiButtonClicked({ button_id: 'run_button_handle' })
+})
+
 const lastDragState = ref({
   x: x.value,
   y: y.value,
diff --git a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
index a6359763e9..fdc01ceec1 100644
--- a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
@@ -100,7 +100,7 @@ import BatchCountEdit from '../BatchCountEdit.vue'
 
 const workspaceStore = useWorkspaceStore()
 const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
-const { mode: queueMode } = storeToRefs(useQueueSettingsStore())
+const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())
 
 const { t } = useI18n()
 const queueModeMenuItemLookup = computed(() => {
@@ -118,6 +118,7 @@ const queueModeMenuItemLookup = computed(() => {
       label: `${t('menu.run')} (${t('menu.onChange')})`,
       tooltip: t('menu.onChangeTooltip'),
       command: () => {
+        useTelemetry()?.trackUiButtonClicked({ button_id: 'run_on_change' })
         queueMode.value = 'change'
       }
     }
@@ -128,6 +129,7 @@ const queueModeMenuItemLookup = computed(() => {
       label: `${t('menu.run')} (${t('menu.instant')})`,
       tooltip: t('menu.instantTooltip'),
       command: () => {
+        useTelemetry()?.trackUiButtonClicked({ button_id: 'run_instant' })
         queueMode.value = 'instant'
       }
     }
@@ -162,6 +164,10 @@ const queuePrompt = async (e: Event) => {
     useTelemetry()?.trackRunButton({ subscribe_to_run: false })
   }
 
+  if (batchCount.value > 1) {
+    useTelemetry()?.trackUiButtonClicked({ button_id: 'queue_multiple' })
+  }
+
   await commandStore.execute(commandId)
 }
 </script>

From e9af3191d354914f692b11bc2eb864a3a5d38403 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 1 Nov 2025 00:45:16 -0700
Subject: [PATCH 5/8] Add telemetry for error dialogs

---
 .../dialog/content/ErrorDialogContent.vue     |  9 +++++++++
 .../dialog/content/error/FindIssueButton.vue  |  6 ++++++
 src/services/dialogService.ts                 | 19 +++++++++++++++++--
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/content/ErrorDialogContent.vue b/src/components/dialog/content/ErrorDialogContent.vue
index 97b0a18d3a..9f61c39ff4 100644
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -61,6 +61,7 @@ import { useI18n } from 'vue-i18n'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { useTelemetry } from '@/platform/telemetry'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
@@ -86,7 +87,11 @@ const repoOwner = 'comfyanonymous'
 const repoName = 'ComfyUI'
 const reportContent = ref('')
 const reportOpen = ref(false)
+/**
+ * Open the error report content and track telemetry.
+ */
 const showReport = () => {
+  useTelemetry()?.trackUiButtonClicked({ button_id: 'error_show_report' })
   reportOpen.value = true
 }
 const toast = useToast()
@@ -97,7 +102,11 @@ const title = computed<string>(
   () => error.nodeType ?? error.exceptionType ?? t('errorDialog.defaultTitle')
 )
 
+/**
+ * Open contact support flow from error dialog and track telemetry.
+ */
 const showContactSupport = async () => {
+  useTelemetry()?.trackUiButtonClicked({ button_id: 'error_help_fix_this' })
   await useCommandStore().execute('Comfy.ContactSupport')
 }
 
diff --git a/src/components/dialog/content/error/FindIssueButton.vue b/src/components/dialog/content/error/FindIssueButton.vue
index e4c32b4713..f2bc6852f7 100644
--- a/src/components/dialog/content/error/FindIssueButton.vue
+++ b/src/components/dialog/content/error/FindIssueButton.vue
@@ -11,6 +11,8 @@
 import Button from 'primevue/button'
 import { computed } from 'vue'
 
+import { useTelemetry } from '@/platform/telemetry'
+
 const props = defineProps<{
   errorMessage: string
   repoOwner: string
@@ -19,7 +21,11 @@ const props = defineProps<{
 
 const queryString = computed(() => props.errorMessage + ' is:issue')
 
+/**
+ * Open GitHub issues search and track telemetry.
+ */
 const openGitHubIssues = () => {
+  useTelemetry()?.trackUiButtonClicked({ button_id: 'error_find_issues' })
   const query = encodeURIComponent(queryString.value)
   const url = `https://github.com/${props.repoOwner}/${props.repoName}/issues?q=${query}`
   window.open(url, '_blank')
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index a9a8e72560..0114a1df3d 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -13,6 +13,7 @@ import UpdatePasswordContent from '@/components/dialog/content/UpdatePasswordCon
 import ComfyOrgHeader from '@/components/dialog/header/ComfyOrgHeader.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
 import { t } from '@/i18n'
+import { useTelemetry } from '@/platform/telemetry'
 import { isCloud } from '@/platform/distribution/types'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
@@ -107,7 +108,14 @@ export const useDialogService = () => {
     dialogStore.showDialog({
       key: 'global-execution-error',
       component: ErrorDialogContent,
-      props
+      props,
+      dialogComponentProps: {
+        onClose: () => {
+          useTelemetry()?.trackUiButtonClicked({
+            button_id: 'error_dialog_close'
+          })
+        }
+      }
     })
   }
 
@@ -189,7 +197,14 @@ export const useDialogService = () => {
     dialogStore.showDialog({
       key: 'global-error',
       component: ErrorDialogContent,
-      props
+      props,
+      dialogComponentProps: {
+        onClose: () => {
+          useTelemetry()?.trackUiButtonClicked({
+            button_id: 'error_dialog_close'
+          })
+        }
+      }
     })
   }
 

From 89df5274833452b5c6f5043d0b4da1d3004c85cb Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 1 Nov 2025 01:23:35 -0700
Subject: [PATCH 6/8] Add telemetry for nodes and subgraphs

---
 src/components/breadcrumb/SubgraphBreadcrumb.vue      |  7 +++++++
 src/components/graph/selectionToolbox/InfoButton.vue  | 11 ++++++++++-
 .../extensions/vueNodes/components/LGraphNode.vue     |  2 ++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index c5ee7ab71b..d5d68c1c3e 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -40,6 +40,7 @@ import { computed, onUpdated, ref, watch } from 'vue'
 
 import SubgraphBreadcrumbItem from '@/components/breadcrumb/SubgraphBreadcrumbItem.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
+import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
@@ -73,6 +74,9 @@ const items = computed(() => {
   const items = navigationStore.navigationStack.map<MenuItem>((subgraph) => ({
     label: subgraph.name,
     command: () => {
+      useTelemetry()?.trackUiButtonClicked({
+        button_id: 'subgraph_breadcrumb_item'
+      })
       const canvas = useCanvasStore().getCanvas()
       if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
@@ -97,6 +101,9 @@ const home = computed(() => ({
   key: 'root',
   isBlueprint: isBlueprint.value,
   command: () => {
+    useTelemetry()?.trackUiButtonClicked({
+      button_id: 'subgraph_breadcrumb_root'
+    })
     const canvas = useCanvasStore().getCanvas()
     if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
diff --git a/src/components/graph/selectionToolbox/InfoButton.vue b/src/components/graph/selectionToolbox/InfoButton.vue
index cb771c1f0c..a5f8e00853 100644
--- a/src/components/graph/selectionToolbox/InfoButton.vue
+++ b/src/components/graph/selectionToolbox/InfoButton.vue
@@ -7,7 +7,7 @@
     data-testid="info-button"
     text
     severity="secondary"
-    @click="toggleHelp"
+    @click="onInfoClick"
   >
     <i class="icon-[lucide--info] h-4 w-4" />
   </Button>
@@ -17,6 +17,15 @@
 import Button from 'primevue/button'
 
 import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { useTelemetry } from '@/platform/telemetry'
 
 const { showNodeHelp: toggleHelp } = useSelectionState()
+
+/**
+ * Track node info button click and toggle node help.
+ */
+const onInfoClick = () => {
+  useTelemetry()?.trackUiButtonClicked({ button_id: 'node_info' })
+  toggleHelp()
+}
 </script>
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 0a9d13b40c..19db7ab358 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -142,6 +142,7 @@ import { toggleNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
@@ -415,6 +416,7 @@ const handleHeaderTitleUpdate = (newTitle: string) => {
 }
 
 const handleEnterSubgraph = () => {
+  useTelemetry()?.trackUiButtonClicked({ button_id: 'open_subgraph' })
   const graph = app.graph?.rootGraph || app.graph
   if (!graph) {
     console.warn('LGraphNode: No graph available for subgraph navigation')

From c77c0f07b56c5529c2410a349b2f1ce98d798a98 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 1 Nov 2025 01:28:19 -0700
Subject: [PATCH 7/8] Add telemetry for settings related buttons

---
 src/components/dialog/content/setting/CreditsPanel.vue | 3 +++
 src/components/sidebar/ComfyMenuButton.vue             | 5 ++++-
 src/components/topbar/CurrentUserPopover.vue           | 3 +++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/dialog/content/setting/CreditsPanel.vue b/src/components/dialog/content/setting/CreditsPanel.vue
index fd1c537d7f..a2fe256141 100644
--- a/src/components/dialog/content/setting/CreditsPanel.vue
+++ b/src/components/dialog/content/setting/CreditsPanel.vue
@@ -116,6 +116,7 @@ import { computed, ref, watch } from 'vue'
 import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -153,6 +154,8 @@ watch(
 )
 
 const handlePurchaseCreditsClick = () => {
+  // Track purchase credits entry from Settings > Credits panel
+  useTelemetry()?.trackAddApiCreditButtonClicked()
   dialogService.showTopUpCreditsDialog()
 }
 
diff --git a/src/components/sidebar/ComfyMenuButton.vue b/src/components/sidebar/ComfyMenuButton.vue
index 893bf4d579..1a3551cefd 100644
--- a/src/components/sidebar/ComfyMenuButton.vue
+++ b/src/components/sidebar/ComfyMenuButton.vue
@@ -175,7 +175,10 @@ const extraMenuItems = computed(() => [
     key: 'settings',
     label: t('g.settings'),
     icon: 'mdi mdi-cog-outline',
-    command: () => showSettings()
+    command: () => {
+      telemetry?.trackUiButtonClicked({ button_id: 'settings_menu' })
+      showSettings()
+    }
   },
   {
     key: 'manage-extensions',
diff --git a/src/components/topbar/CurrentUserPopover.vue b/src/components/topbar/CurrentUserPopover.vue
index 5bedaa1144..d11418e5ee 100644
--- a/src/components/topbar/CurrentUserPopover.vue
+++ b/src/components/topbar/CurrentUserPopover.vue
@@ -104,6 +104,7 @@ import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthAction
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 
 const emit = defineEmits<{
@@ -136,6 +137,8 @@ const handleOpenPlanAndCreditsSettings = () => {
 }
 
 const handleTopUp = () => {
+  // Track purchase credits entry from avatar popover
+  useTelemetry()?.trackAddApiCreditButtonClicked()
   dialogService.showTopUpCreditsDialog()
   emit('close')
 }

From 5013a97e98e9ef07223cf0f845e99d953d9886be Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 1 Nov 2025 15:10:07 -0700
Subject: [PATCH 8/8] Improve event ID naming

---
 src/components/actionbar/ComfyActionbar.vue     |  4 +++-
 .../ComfyRunButton/ComfyQueueButton.vue         | 12 +++++++++---
 .../breadcrumb/SubgraphBreadcrumb.vue           |  4 ++--
 .../dialog/content/ErrorDialogContent.vue       |  4 +++-
 .../dialog/content/error/FindIssueButton.vue    |  4 +++-
 src/components/graph/GraphCanvasMenu.vue        |  8 ++++++--
 .../graph/selectionToolbox/InfoButton.vue       |  4 +++-
 src/components/sidebar/ComfyMenuButton.vue      |  8 ++++++--
 src/components/sidebar/SideToolbar.vue          | 17 +++++++++++++----
 .../sidebar/SidebarBottomPanelToggleButton.vue  |  4 +++-
 .../sidebar/SidebarHelpCenterIcon.vue           |  4 +++-
 .../sidebar/SidebarShortcutsToggleButton.vue    |  4 +++-
 .../sidebar/SidebarTemplatesButton.vue          |  4 +++-
 .../vueNodes/components/LGraphNode.vue          |  4 +++-
 src/services/dialogService.ts                   |  4 ++--
 15 files changed, 65 insertions(+), 24 deletions(-)

diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index e763819505..94666cb8fa 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -137,7 +137,9 @@ watch(visible, async (newVisible) => {
  * Track run button handle drag start using mousedown on the drag handle.
  */
 useEventListener(dragHandleRef, 'mousedown', () => {
-  useTelemetry()?.trackUiButtonClicked({ button_id: 'run_button_handle' })
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'actionbar_run_handle_drag_start'
+  })
 })
 
 const lastDragState = ref({
diff --git a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
index 9705cdf967..762ea7f2d6 100644
--- a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
@@ -118,7 +118,9 @@ const queueModeMenuItemLookup = computed(() => {
       label: `${t('menu.run')} (${t('menu.onChange')})`,
       tooltip: t('menu.onChangeTooltip'),
       command: () => {
-        useTelemetry()?.trackUiButtonClicked({ button_id: 'run_on_change' })
+        useTelemetry()?.trackUiButtonClicked({
+          button_id: 'queue_mode_option_run_on_change_selected'
+        })
         queueMode.value = 'change'
       }
     }
@@ -129,7 +131,9 @@ const queueModeMenuItemLookup = computed(() => {
       label: `${t('menu.run')} (${t('menu.instant')})`,
       tooltip: t('menu.instantTooltip'),
       command: () => {
-        useTelemetry()?.trackUiButtonClicked({ button_id: 'run_instant' })
+        useTelemetry()?.trackUiButtonClicked({
+          button_id: 'queue_mode_option_run_instant_selected'
+        })
         queueMode.value = 'instant'
       }
     }
@@ -163,7 +167,9 @@ const queuePrompt = async (e: Event) => {
   useTelemetry()?.trackRunButton({ subscribe_to_run: false })
 
   if (batchCount.value > 1) {
-    useTelemetry()?.trackUiButtonClicked({ button_id: 'queue_multiple' })
+    useTelemetry()?.trackUiButtonClicked({
+      button_id: 'queue_run_multiple_batches_submitted'
+    })
   }
 
   await commandStore.execute(commandId)
diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index d5d68c1c3e..e69fd896fa 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -75,7 +75,7 @@ const items = computed(() => {
     label: subgraph.name,
     command: () => {
       useTelemetry()?.trackUiButtonClicked({
-        button_id: 'subgraph_breadcrumb_item'
+        button_id: 'breadcrumb_subgraph_item_selected'
       })
       const canvas = useCanvasStore().getCanvas()
       if (!canvas.graph) throw new TypeError('Canvas has no graph')
@@ -102,7 +102,7 @@ const home = computed(() => ({
   isBlueprint: isBlueprint.value,
   command: () => {
     useTelemetry()?.trackUiButtonClicked({
-      button_id: 'subgraph_breadcrumb_root'
+      button_id: 'breadcrumb_subgraph_root_selected'
     })
     const canvas = useCanvasStore().getCanvas()
     if (!canvas.graph) throw new TypeError('Canvas has no graph')
diff --git a/src/components/dialog/content/ErrorDialogContent.vue b/src/components/dialog/content/ErrorDialogContent.vue
index 155e619b31..c709540c58 100644
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -91,7 +91,9 @@ const reportOpen = ref(false)
  * Open the error report content and track telemetry.
  */
 const showReport = () => {
-  useTelemetry()?.trackUiButtonClicked({ button_id: 'error_show_report' })
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'error_dialog_show_report_clicked'
+  })
   reportOpen.value = true
 }
 const toast = useToast()
diff --git a/src/components/dialog/content/error/FindIssueButton.vue b/src/components/dialog/content/error/FindIssueButton.vue
index f2bc6852f7..20f4f64896 100644
--- a/src/components/dialog/content/error/FindIssueButton.vue
+++ b/src/components/dialog/content/error/FindIssueButton.vue
@@ -25,7 +25,9 @@ const queryString = computed(() => props.errorMessage + ' is:issue')
  * Open GitHub issues search and track telemetry.
  */
 const openGitHubIssues = () => {
-  useTelemetry()?.trackUiButtonClicked({ button_id: 'error_find_issues' })
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'error_dialog_find_existing_issues_clicked'
+  })
   const query = encodeURIComponent(queryString.value)
   const url = `https://github.com/${props.repoOwner}/${props.repoName}/issues?q=${query}`
   window.open(url, '_blank')
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index 56b844a0d3..f1beafdabc 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -223,7 +223,9 @@ onMounted(() => {
  * Track minimap toggle button click and execute the command.
  */
 const onMinimapToggleClick = () => {
-  useTelemetry()?.trackUiButtonClicked({ button_id: 'minimap_toggle' })
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'graph_menu_minimap_toggle_clicked'
+  })
   void commandStore.execute('Comfy.Canvas.ToggleMinimap')
 }
 
@@ -231,7 +233,9 @@ const onMinimapToggleClick = () => {
  * Track hide/show links button click and execute the command.
  */
 const onLinkVisibilityToggleClick = () => {
-  useTelemetry()?.trackUiButtonClicked({ button_id: 'hide_links' })
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'graph_menu_hide_links_toggle_clicked'
+  })
   void commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')
 }
 
diff --git a/src/components/graph/selectionToolbox/InfoButton.vue b/src/components/graph/selectionToolbox/InfoButton.vue
index a5f8e00853..ed0e8e6cb0 100644
--- a/src/components/graph/selectionToolbox/InfoButton.vue
+++ b/src/components/graph/selectionToolbox/InfoButton.vue
@@ -25,7 +25,9 @@ const { showNodeHelp: toggleHelp } = useSelectionState()
  * Track node info button click and toggle node help.
  */
 const onInfoClick = () => {
-  useTelemetry()?.trackUiButtonClicked({ button_id: 'node_info' })
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'selection_toolbox_node_info_opened'
+  })
   toggleHelp()
 }
 </script>
diff --git a/src/components/sidebar/ComfyMenuButton.vue b/src/components/sidebar/ComfyMenuButton.vue
index 1a3551cefd..7c5e75fb0d 100644
--- a/src/components/sidebar/ComfyMenuButton.vue
+++ b/src/components/sidebar/ComfyMenuButton.vue
@@ -108,7 +108,9 @@ const menuRef = ref<
 const telemetry = useTelemetry()
 
 function onLogoMenuClick(event: MouseEvent) {
-  telemetry?.trackUiButtonClicked({ button_id: 'comfy_logo' })
+  telemetry?.trackUiButtonClicked({
+    button_id: 'sidebar_comfy_menu_opened'
+  })
   menuRef.value?.toggle(event)
 }
 
@@ -176,7 +178,9 @@ const extraMenuItems = computed(() => [
     label: t('g.settings'),
     icon: 'mdi mdi-cog-outline',
     command: () => {
-      telemetry?.trackUiButtonClicked({ button_id: 'settings_menu' })
+      telemetry?.trackUiButtonClicked({
+        button_id: 'sidebar_settings_menu_opened'
+      })
       showSettings()
     }
   },
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 950d82bf60..355c754b0c 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -112,12 +112,21 @@ const onTabClick = async (item: SidebarTabExtension) => {
   const isAssetsTab = item.id === 'assets'
 
   if (isNodeLibraryTab)
-    telemetry?.trackUiButtonClicked({ button_id: 'node_library' })
+    telemetry?.trackUiButtonClicked({
+      button_id: 'sidebar_tab_node_library_selected'
+    })
   else if (isModelLibraryTab)
-    telemetry?.trackUiButtonClicked({ button_id: 'model_library' })
+    telemetry?.trackUiButtonClicked({
+      button_id: 'sidebar_tab_model_library_selected'
+    })
   else if (isWorkflowsTab)
-    telemetry?.trackUiButtonClicked({ button_id: 'workflows' })
-  else if (isAssetsTab) telemetry?.trackUiButtonClicked({ button_id: 'assets' })
+    telemetry?.trackUiButtonClicked({
+      button_id: 'sidebar_tab_workflows_selected'
+    })
+  else if (isAssetsTab)
+    telemetry?.trackUiButtonClicked({
+      button_id: 'sidebar_tab_assets_media_selected'
+    })
 
   await commandStore.commands
     .find((cmd) => cmd.id === `Workspace.ToggleSidebarTab.${item.id}`)
diff --git a/src/components/sidebar/SidebarBottomPanelToggleButton.vue b/src/components/sidebar/SidebarBottomPanelToggleButton.vue
index 3a79411c41..8ed0d9ee76 100644
--- a/src/components/sidebar/SidebarBottomPanelToggleButton.vue
+++ b/src/components/sidebar/SidebarBottomPanelToggleButton.vue
@@ -23,7 +23,9 @@ const bottomPanelStore = useBottomPanelStore()
  * Toggle console bottom panel and track UI button click.
  */
 const toggleConsole = () => {
-  useTelemetry()?.trackUiButtonClicked({ button_id: 'console' })
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_bottom_panel_console_toggled'
+  })
   bottomPanelStore.toggleBottomPanel()
 }
 </script>
diff --git a/src/components/sidebar/SidebarHelpCenterIcon.vue b/src/components/sidebar/SidebarHelpCenterIcon.vue
index 9564d4de37..b8d8cea396 100644
--- a/src/components/sidebar/SidebarHelpCenterIcon.vue
+++ b/src/components/sidebar/SidebarHelpCenterIcon.vue
@@ -109,7 +109,9 @@ const sidebarLocation = computed(() =>
  * Toggle Help Center and track UI button click.
  */
 const toggleHelpCenter = () => {
-  useTelemetry()?.trackUiButtonClicked({ button_id: 'help_center' })
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_help_center_toggled'
+  })
   helpCenterStore.toggle()
 }
 
diff --git a/src/components/sidebar/SidebarShortcutsToggleButton.vue b/src/components/sidebar/SidebarShortcutsToggleButton.vue
index a1b56ac1d8..73f8cbe211 100644
--- a/src/components/sidebar/SidebarShortcutsToggleButton.vue
+++ b/src/components/sidebar/SidebarShortcutsToggleButton.vue
@@ -39,7 +39,9 @@ const tooltipText = computed(
  * Toggle keyboard shortcuts panel and track UI button click.
  */
 const toggleShortcutsPanel = () => {
-  useTelemetry()?.trackUiButtonClicked({ button_id: 'keyboard_shortcuts' })
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_shortcuts_panel_toggled'
+  })
   bottomPanelStore.togglePanel('shortcuts')
 }
 </script>
diff --git a/src/components/sidebar/SidebarTemplatesButton.vue b/src/components/sidebar/SidebarTemplatesButton.vue
index 426b0539e9..f0224cfab9 100644
--- a/src/components/sidebar/SidebarTemplatesButton.vue
+++ b/src/components/sidebar/SidebarTemplatesButton.vue
@@ -28,7 +28,9 @@ const isSmall = computed(
  * Open templates dialog from sidebar and track UI button click.
  */
 const openTemplates = () => {
-  useTelemetry()?.trackUiButtonClicked({ button_id: 'templates' })
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_templates_dialog_opened'
+  })
   useWorkflowTemplateSelectorDialog().show('sidebar')
 }
 </script>
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 19db7ab358..88d8cebce2 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -416,7 +416,9 @@ const handleHeaderTitleUpdate = (newTitle: string) => {
 }
 
 const handleEnterSubgraph = () => {
-  useTelemetry()?.trackUiButtonClicked({ button_id: 'open_subgraph' })
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'graph_node_open_subgraph_clicked'
+  })
   const graph = app.graph?.rootGraph || app.graph
   if (!graph) {
     console.warn('LGraphNode: No graph available for subgraph navigation')
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index d6852b6afe..db4202ae7f 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -113,7 +113,7 @@ export const useDialogService = () => {
       dialogComponentProps: {
         onClose: () => {
           useTelemetry()?.trackUiButtonClicked({
-            button_id: 'error_dialog_close'
+            button_id: 'error_dialog_closed'
           })
         }
       }
@@ -202,7 +202,7 @@ export const useDialogService = () => {
       dialogComponentProps: {
         onClose: () => {
           useTelemetry()?.trackUiButtonClicked({
-            button_id: 'error_dialog_close'
+            button_id: 'error_dialog_closed'
           })
         }
       }