mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-12 00:20:15 +00:00
feat(telemetry): add tracking for sidebar, run menu, dialogs, subgraphs, settings and credits (#6511)
Summary - Add comprehensive telemetry for key UI interactions using existing telemetry hooks (cloud-enabled, no-op in OSS): Sidebar and top-level - Node library button: `node_library` - Model library button: `model_library` - Workflows button: `workflows` - Assets/Media button: `assets` - Templates button: `templates` - Keyboard Shortcuts: `keyboard_shortcuts` - Console: `console` - Help Center: `help_center` - Settings (from Comfy logo menu): `settings_menu` Floating canvas menu - Minimap toggle: `minimap_toggle` - Hide links toggle: `hide_links` Run button and queue - Run button handle (drag): `run_button_handle` - Run mode selection: `run_instant`, `run_on_change` - Queue multiple: `queue_multiple` fires on each run when batch count > 1 (moved from batch-count-change to run-time, per guidance) Error dialogs - Close (X/mask/ESC): `error_dialog_close` via dialog onClose - Show report: `error_show_report` - Help fix this: `error_help_fix_this` - Find issues: `error_find_issues` Nodes / Subgraphs - Selection toolbox “Node info”: `node_info` - Enter subgraph (node header enter): `open_subgraph` - Subgraph breadcrumb navigation: `subgraph_breadcrumb_item` and `subgraph_breadcrumb_root` Settings / Credits / Search - Settings menu button (under Comfy logo): `settings_menu` - Purchase credits (Settings > Credits panel): tracked via existing `trackAddApiCreditButtonClicked` - Purchase credits (Avatar popover Top Up): tracked via existing `trackAddApiCreditButtonClicked` - Debounced search telemetry already present for node search and template filters; left as-is Notes and answers - Error dialog onClose: only fires when the dialog actually closes (X, mask, ESC, or programmatic close). “Show report” and “Help fix this” do not close the dialog; they each emit their own events. - Telemetry is behind the cloud provider; calls are optional (`useTelemetry()?.…`). OSS builds send nothing. Open questions / follow-ups - Primary Run button click: today cloud-only `trackRunButton` exists; we can also emit a UI-level `run` click (`UI_BUTTON_CLICKED` style) alongside it if desired. Confirm preference and I can add it. - Subgraph usage richness: if we want structured analytics (e.g., action, depth, subgraph id, node count), I can add a dedicated provider method and include richer metadata at enter/breadcrumb. - Optional parity: track the Comfy menu’s “Browse Templates” item in addition to the sidebar Templates button. Quality - Ran `pnpm lint:fix` and `pnpm typecheck`; both pass locally. Implementation details - All handlers refactored to named functions where needed; used `void` for intentionally unawaited async calls per lint rules. - Event names kept consistent in `button_id` strings; happy to align to a different naming scheme if you prefer. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6511-feat-telemetry-add-tracking-for-sidebar-run-menu-dialogs-subgraphs-settings-and-cre-29e6d73d365081a1b8b4fdfbbf40e18b) by [Unito](https://www.unito.io) --------- Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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,26 @@ onMounted(() => {
|
||||
canvasStore.initScaleSync()
|
||||
})
|
||||
|
||||
/**
|
||||
* Track minimap toggle button click and execute the command.
|
||||
*/
|
||||
const onMinimapToggleClick = () => {
|
||||
useTelemetry()?.trackUiButtonClicked({
|
||||
button_id: 'graph_menu_minimap_toggle_clicked'
|
||||
})
|
||||
void commandStore.execute('Comfy.Canvas.ToggleMinimap')
|
||||
}
|
||||
|
||||
/**
|
||||
* Track hide/show links button click and execute the command.
|
||||
*/
|
||||
const onLinkVisibilityToggleClick = () => {
|
||||
useTelemetry()?.trackUiButtonClicked({
|
||||
button_id: 'graph_menu_hide_links_toggle_clicked'
|
||||
})
|
||||
void commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
canvasStore.cleanupScaleSync()
|
||||
})
|
||||
|
||||
@@ -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,17 @@
|
||||
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: 'selection_toolbox_node_info_opened'
|
||||
})
|
||||
toggleHelp()
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user