mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-13 17:10:06 +00:00
feat: track app mode entry and shared workflow loading (#9720)
## Summary - Track entering app mode from template URL (`source: template_url`) and default view dialog (`source: default_view_dialog`) - Tag shared workflow loads with `openSource: 'shared'` instead of defaulting to `'unknown'` - Rename telemetry event from `app:toggle_linear_mode` to `app:app_mode_opened` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9720-feat-track-app-mode-entry-and-shared-workflow-loading-31f6d73d365081af8c6ae3247a50cf3f) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -26,17 +26,24 @@ import { refAutoReset } from '@vueuse/core'
|
||||
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import Input from '@/components/ui/input/Input.vue'
|
||||
import { useAppMode } from '@/composables/useAppMode'
|
||||
import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
|
||||
const { url } = defineProps<{
|
||||
url: string
|
||||
}>()
|
||||
|
||||
const { copyToClipboard } = useCopyToClipboard()
|
||||
const { isAppMode } = useAppMode()
|
||||
const copied = refAutoReset(false, 2000)
|
||||
|
||||
async function handleCopy() {
|
||||
await copyToClipboard(url)
|
||||
copied.value = true
|
||||
useTelemetry()?.trackShareFlow({
|
||||
step: 'link_copied',
|
||||
source: isAppMode.value ? 'app_mode' : 'graph_mode'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -167,7 +167,9 @@ import type {
|
||||
import { useWorkflowShareService } from '@/platform/workflow/sharing/services/workflowShareService'
|
||||
import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
|
||||
import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
|
||||
import { useAppMode } from '@/composables/useAppMode'
|
||||
import { useFeatureFlags } from '@/composables/useFeatureFlags'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
import { appendJsonExt } from '@/utils/formatUtil'
|
||||
import { cn } from '@/utils/tailwindUtil'
|
||||
|
||||
@@ -182,6 +184,11 @@ const publishDialog = useComfyHubPublishDialog()
|
||||
const shareService = useWorkflowShareService()
|
||||
const workflowStore = useWorkflowStore()
|
||||
const workflowService = useWorkflowService()
|
||||
const { isAppMode } = useAppMode()
|
||||
|
||||
function getShareSource() {
|
||||
return isAppMode.value ? 'app_mode' : ('graph_mode' as const)
|
||||
}
|
||||
|
||||
type DialogState = 'loading' | 'unsaved' | 'ready' | 'shared' | 'stale'
|
||||
type DialogMode = 'shareLink' | 'publishToHub'
|
||||
@@ -298,6 +305,10 @@ async function refreshDialogState() {
|
||||
|
||||
if (!workflow || workflow.isTemporary || workflow.isModified) {
|
||||
dialogState.value = 'unsaved'
|
||||
useTelemetry()?.trackShareFlow({
|
||||
step: 'save_prompted',
|
||||
source: getShareSource()
|
||||
})
|
||||
if (workflow) {
|
||||
workflowName.value = stripJsonExtension(workflow.filename)
|
||||
}
|
||||
@@ -379,6 +390,10 @@ const {
|
||||
)
|
||||
dialogState.value = 'shared'
|
||||
acknowledged.value = false
|
||||
useTelemetry()?.trackShareFlow({
|
||||
step: 'link_created',
|
||||
source: getShareSource()
|
||||
})
|
||||
|
||||
return result
|
||||
},
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import ShareWorkflowDialogContent from '@/platform/workflow/sharing/components/ShareWorkflowDialogContent.vue'
|
||||
import { useAppMode } from '@/composables/useAppMode'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
import { useDialogService } from '@/services/dialogService'
|
||||
import { useDialogStore } from '@/stores/dialogStore'
|
||||
import { useWorkflowStore } from '../../management/stores/workflowStore'
|
||||
@@ -13,6 +15,7 @@ export function useShareDialog() {
|
||||
const dialogStore = useDialogStore()
|
||||
const { pruneLinearData } = useAppModeStore()
|
||||
const workflowStore = useWorkflowStore()
|
||||
const { isAppMode } = useAppMode()
|
||||
|
||||
function hide() {
|
||||
dialogStore.closeDialog({ key: DIALOG_KEY })
|
||||
@@ -51,7 +54,15 @@ export function useShareDialog() {
|
||||
share()
|
||||
}
|
||||
|
||||
function getShareSource() {
|
||||
return isAppMode.value ? 'app_mode' : ('graph_mode' as const)
|
||||
}
|
||||
|
||||
function showShareDialog() {
|
||||
useTelemetry()?.trackShareFlow({
|
||||
step: 'dialog_opened',
|
||||
source: getShareSource()
|
||||
})
|
||||
dialogService.showLayoutDialog({
|
||||
key: DIALOG_KEY,
|
||||
component: ShareWorkflowDialogContent,
|
||||
|
||||
@@ -164,7 +164,8 @@ describe('useSharedWorkflowUrlLoader', () => {
|
||||
{ nodes: [] },
|
||||
true,
|
||||
true,
|
||||
'Test Workflow'
|
||||
'Test Workflow',
|
||||
{ openSource: 'shared_url' }
|
||||
)
|
||||
expect(mockRouterReplace).toHaveBeenCalledWith({ query: {} })
|
||||
expect(preservedQueryMocks.clearPreservedQuery).toHaveBeenCalledWith(
|
||||
@@ -360,7 +361,8 @@ describe('useSharedWorkflowUrlLoader', () => {
|
||||
expect.anything(),
|
||||
true,
|
||||
true,
|
||||
'Open shared workflow'
|
||||
'Open shared workflow',
|
||||
{ openSource: 'shared_url' }
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -138,7 +138,9 @@ export function useSharedWorkflowUrlLoader() {
|
||||
const nonOwnedAssets = payload.assets.filter((a) => !a.in_library)
|
||||
|
||||
try {
|
||||
await app.loadGraphData(payload.workflowJson, true, true, workflowName)
|
||||
await app.loadGraphData(payload.workflowJson, true, true, workflowName, {
|
||||
openSource: 'shared_url'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(
|
||||
'[useSharedWorkflowUrlLoader] Failed to load workflow graph:',
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import { clearPreservedQuery } from '@/platform/navigation/preservedQueryManager'
|
||||
import { PRESERVED_QUERY_NAMESPACES } from '@/platform/navigation/preservedQueryNamespaces'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
||||
|
||||
import { useTemplateWorkflows } from './useTemplateWorkflows'
|
||||
@@ -121,6 +122,7 @@ export function useTemplateUrlLoader() {
|
||||
})
|
||||
} else if (modeParam === 'linear') {
|
||||
// Set linear mode after successful template load
|
||||
useTelemetry()?.trackEnterLinear({ source: 'template_url' })
|
||||
canvasStore.linearMode = true
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
Reference in New Issue
Block a user