[Desktop] Add install screen stepper change metrics (#2261)

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": {

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",

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>
 

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')
           }
         };`
       }