feat(app): add mixpanel track envet for sizes

add mixpanel track envet for sizes

close AUTH-2527

Author: koji

app/src/organisms/Desktop/ProtocolVisualization/VisualizerContainer/index.tsx

@@ -15,6 +15,7 @@ import { Controls } from '/app/organisms/Desktop/ProtocolVisualization/Controls'
 import { DeckView } from '/app/organisms/Desktop/ProtocolVisualization/DeckView'
 import {
   ANALYTICS_LAUNCH_PROTOCOL_VISUALIZATION_SPOTLIGHT_WINDOW,
+  ANALYTICS_NOTIFICATION_PROTOCOL_VISUALIZATION_VIEWPORT_SIZES,
   useTrackEvent,
 } from '/app/redux/analytics'
 import {
@@ -59,6 +60,7 @@ export function VisualizerContainer(
   const createdDate = new Date(analysisOutput.createdAt)
   const completedProtocolAnalysis = useMostRecentCompletedAnalysis(runId)
   const trackEvent = useTrackEvent()
+  const trackEventRef = useRef(trackEvent)
   const analysis = completedProtocolAnalysis ?? analysisOutput
   const { commands, robotType, liquids } = analysis
   const [isPlaying, setIsPlaying] = useState<boolean>(false)
@@ -90,6 +92,12 @@ export function VisualizerContainer(
     rightWidthRef.current = rightWidth
   }, [rightWidth])
 
+  // Note: This useEffect is used to update the trackEventRef.current with the trackEvent prop.
+  // This prevents sending duplicate events when the trackEvent prop changes.
+  useEffect(() => {
+    trackEventRef.current = trackEvent
+  }, [trackEvent])
+
   // temporarily filter out loadCommands and home commands for the PV MVP
   const filteredCommands = commands.filter(
     command =>
@@ -281,6 +289,20 @@ export function VisualizerContainer(
     }
   }, [dispatch, protocolKey])
 
+  useEffect(() => {
+    return () => {
+      trackEventRef.current({
+        name: ANALYTICS_NOTIFICATION_PROTOCOL_VISUALIZATION_VIEWPORT_SIZES,
+        properties: {
+          'Window Width': window.innerWidth,
+          'Window Height': window.innerHeight,
+          'Left Column Width': leftWidthRef.current,
+          'Right Column Width': rightWidthRef.current,
+        },
+      })
+    }
+  }, [])
+
   return (
     <div ref={containerRef} className={styles.layout_container}>
       {/* Left Column is resizable */}

app/src/redux/analytics/constants.ts

@@ -46,10 +46,16 @@ export const ANALYTICS_ODD_APP_ERROR = 'oddError'
 export const ANALYTICS_DESKTOP_APP_ERROR = 'desktopAppError'
 export const ANALYTICS_NOTIFICATION_PORT_BLOCK_ERROR =
   'notificationPortBlockError'
+
+/**
+ * Protocol Visualization Analytics
+ */
 export const ANALYTICS_LAUNCH_PROTOCOL_VISUALIZATION =
   'launchProtocolVisualization'
 export const ANALYTICS_LAUNCH_PROTOCOL_VISUALIZATION_SPOTLIGHT_WINDOW =
   'launchProtocolVisualizationSpotlightWindow'
+export const ANALYTICS_NOTIFICATION_PROTOCOL_VISUALIZATION_VIEWPORT_SIZES =
+  'notificationProtocolVisualizationViewportSizes'
 
 const ANALYTICS_PROTOCOL_PROCEED_BUTTON_TEXT = [
   ANALYTICS_PROCEED_TO_CAMERA_SETUP_STEP,