From 37abdbe35d5d6c0f56988b28359b877ae736bef0 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Wed, 15 Jan 2025 19:27:05 -0500
Subject: [PATCH] [Desktop] Add install screen stepper change metrics (#2261)

---
 package-lock.json         |  8 ++++----
 package.json              |  2 +-
 src/views/InstallView.vue | 18 ++++++++++++++++--
 vite.electron.config.mts  |  6 +++++-
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 22dcc6fe1..83d18fee4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "GPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-        "@comfyorg/comfyui-electron-types": "^0.4.7",
+        "@comfyorg/comfyui-electron-types": "^0.4.8",
         "@comfyorg/litegraph": "^0.8.60",
         "@primevue/themes": "^4.0.5",
         "@sentry/vue": "^8.48.0",
@@ -1936,9 +1936,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/comfyui-electron-types": {
-      "version": "0.4.7",
-      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.4.7.tgz",
-      "integrity": "sha512-APC3C4VZOo9W6h0xiAGxnsU9iNp3T8rN9w/5KmOCI0GUoKtKg5U2OaicTmnMwcDSQe5Jxflmej53GyJ1nH9oRw==",
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.4.8.tgz",
+      "integrity": "sha512-fQfLHKgJxlmrt/97jqGk5tnwDCuTNo0zvL/iV8mfJAQ0VsvztCx5xbzo0f3EtN5cDVi811OYr2hLScKZAA0+PQ==",
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
diff --git a/package.json b/package.json
index 77ef8edf2..59fd40f77 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.4.7",
+    "@comfyorg/comfyui-electron-types": "^0.4.8",
     "@comfyorg/litegraph": "^0.8.60",
     "@primevue/themes": "^4.0.5",
     "@sentry/vue": "^8.48.0",
diff --git a/src/views/InstallView.vue b/src/views/InstallView.vue
index bed5a83c1..422116768 100644
--- a/src/views/InstallView.vue
+++ b/src/views/InstallView.vue
@@ -6,7 +6,7 @@
     <Stepper
       class="h-full p-8 2xl:p-16"
       value="0"
-      @update:value="setHighestStep"
+      @update:value="handleStepChange"
     >
       <StepList class="select-none">
         <Step value="0">
@@ -137,6 +137,14 @@ const allowMetrics = ref(true)
 /** Forces each install step to be visited at least once. */
 const highestStep = ref(0)
 
+const handleStepChange = (value: string | number) => {
+  setHighestStep(value)
+
+  electronAPI().Config.trackEvent('install_stepper_change', {
+    step: value
+  })
+}
+
 const setHighestStep = (value: string | number) => {
   const int = typeof value === 'number' ? value : parseInt(value, 10)
   if (!isNaN(int) && int > highestStep.value) highestStep.value = int
@@ -167,8 +175,14 @@ onMounted(async () => {
   if (!electron) return
 
   const detectedGpu = await electron.Config.getDetectedGpu()
-  if (detectedGpu === 'mps' || detectedGpu === 'nvidia')
+  if (detectedGpu === 'mps' || detectedGpu === 'nvidia') {
     device.value = detectedGpu
+  }
+
+  electronAPI().Config.trackEvent('install_stepper_change', {
+    step: '0',
+    gpu: detectedGpu
+  })
 })
 </script>
 
diff --git a/vite.electron.config.mts b/vite.electron.config.mts
index 821919758..469f0414a 100644
--- a/vite.electron.config.mts
+++ b/vite.electron.config.mts
@@ -57,7 +57,11 @@ const mockElectronAPI: Plugin = {
           changeTheme: () => {},
           Config: {
             setWindowStyle: () => {},
-            getWindowStyle: () => Promise.resolve('default')
+            getWindowStyle: () => Promise.resolve('default'),
+            trackEvent: (event_name, event_data) => {
+              console.log('trackEvent', event_name, event_data)
+            },
+            getDetectedGpu: () => Promise.resolve('nvidia')
           }
         };`
       }