feat(app): Mixpanel Analytics for Camera (#19974)

# Overview

This PR enables mixpanel tracking for 
We will track
- Camera enablement & settings
- Photo usage
- Live feed usage
- Photo access and management

## Test Plan and Hands on Testing

- View analytics of robots in office on mixpanel

## Changelog


## Review requests

- Ensure I am not missing any spots in the code base where a camera
action can be set.
- How do I get livestream open duration time?

## Risk assessment

low

Author: rclarke0

app/src/organisms/Desktop/Devices/HistoricalProtocolRunDrawer.tsx

@@ -39,7 +39,11 @@ import {
 
 import { LegacyOffsetVector } from '/app/molecules/LegacyOffsetVector'
 import { downloadFile } from '/app/organisms/Desktop/Devices/utils'
-import { useIsFlex } from '/app/redux-resources/robots'
+import {
+  SOURCE_RUN_RECORD,
+  useCameraAnalytics,
+} from '/app/redux-resources/analytics/'
+import { useIsFlex, useRobotType } from '/app/redux-resources/robots'
 import { useRunGeneratedDataFiles } from '/app/resources/dataFiles/useRunGeneratedDataFiles'
 import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 
@@ -67,8 +71,9 @@ export function HistoricalProtocolRunDrawer(
       (a, b) =>
         new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
     ) ?? []
-  const totalOutputFileCount =
-    outputFileIds.jpeg.length + outputFileIds.csv.length
+  const totalImageFileCount = outputFileIds.jpeg.length
+  const totalOutputFileCount = totalImageFileCount + outputFileIds.csv.length
+
   const runCsvFileIds =
     'runTimeParameters' in run
       ? run.runTimeParameters.reduce<string[]>((acc, parameter) => {
@@ -379,6 +384,11 @@ function ImagesFileDataRow({
   robotName: string
 }): JSX.Element {
   const { t } = useTranslation('run_details')
+  const robotType = useRobotType(robotName)
+  const { reportPhotoAccessUsage } = useCameraAnalytics({
+    source: SOURCE_RUN_RECORD,
+    robotType: robotType,
+  })
   const { data: imagesZipFile, isLoading } = useAllRunImagesRaw(run.id)
   const runTimestamp = format(new Date(run.createdAt), 'M/d/yy_HH:mm:ss')
   const buildImagesZipName = (): string =>
@@ -418,6 +428,9 @@ function ImagesFileDataRow({
           onClick={() => {
             if (imagesZipFile != null) {
               downloadFile(imagesZipFile, buildImagesZipName())
+              reportPhotoAccessUsage({
+                action: 'downloadZip',
+              })
             }
           }}
         >

app/src/organisms/Desktop/Devices/HistoricalProtocolRunOverflowMenu.tsx

@@ -42,7 +42,11 @@ import { getModalPortalEl } from '/app/App/portal'
 import { Divider } from '/app/atoms/structure'
 import { useRunControls } from '/app/organisms/RunTimeControl'
 import { useTrackProtocolRunEvent } from '/app/redux-resources/analytics'
-import { useRobot } from '/app/redux-resources/robots'
+import {
+  SOURCE_RUN_RECORD,
+  useCameraAnalytics,
+} from '/app/redux-resources/analytics/'
+import { useRobot, useRobotType } from '/app/redux-resources/robots'
 import {
   ANALYTICS_PROTOCOL_PROCEED_TO_RUN,
   ANALYTICS_PROTOCOL_RUN_ACTION,
@@ -159,9 +163,10 @@ function MenuDropdown(props: MenuDropdownProps): JSX.Element {
   )
   const { deleteRun, isLoading: isDeletingImages } = useDeleteRunMutation()
   const robot = useRobot(robotName)
+  const robotType = useRobotType(robotName)
+
   const robotSerialNumber =
     robot?.health?.robot_serial ?? robot?.serverHealth?.serialNumber ?? null
-
   const handleResetClick: MouseEventHandler<HTMLButtonElement> = (e): void => {
     e.preventDefault()
     e.stopPropagation()
@@ -189,12 +194,19 @@ function MenuDropdown(props: MenuDropdownProps): JSX.Element {
       onClose()
     })
   }
-
+  const { reportPhotoAccessUsage } = useCameraAnalytics({
+    source: SOURCE_RUN_RECORD,
+    robotType: robotType,
+  })
   const onClearRunImages: MouseEventHandler<HTMLButtonElement> = e => {
     handleDeleteRunImagesModal({ onDeleteRunImages })
     e.preventDefault()
     e.stopPropagation()
     closeOverflowMenu(e)
+
+    reportPhotoAccessUsage({
+      action: 'delete',
+    })
   }
 
   return (

app/src/organisms/Desktop/Devices/Peripherals/CameraCard.tsx

@@ -18,6 +18,11 @@ import systemCameraFlex from '/app/assets/images/system_camera_flex.png'
 import systemCameraOT2 from '/app/assets/images/system_camera_ot2.png'
 import { useCameraUsageSettings } from '/app/local-resources/images/hooks/useCameraUsageSettings'
 import { CameraControls } from '/app/organisms/Desktop/Camera/CameraControls'
+import {
+  SOURCE_ROBOT_SETTINGS,
+  useCameraAnalytics,
+} from '/app/redux-resources/analytics/'
+import { useRobotType } from '/app/redux-resources/robots'
 import { useFeatureFlag } from '/app/redux/config'
 import { useCurrentRunId } from '/app/resources/runs'
 
@@ -43,7 +48,7 @@ export function CameraCard({
   }
 
   const runId = useCurrentRunId()
-
+  const robotType = useRobotType(robotName)
   const doesRunExist = runId != null
 
   const cardOverflowWrapperRef = useOnClickOutside<HTMLDivElement>({
@@ -52,12 +57,29 @@ export function CameraCard({
     },
   })
 
-  const { isCameraEnabled, toggleCameraEnabled } = useCameraUsageSettings()
+  const {
+    isCameraEnabled,
+    toggleCameraEnabled,
+    isLiveVideoEnabled,
+    isRecoveryCaptureEnabled,
+  } = useCameraUsageSettings()
 
   const toggleControls = (): void => {
     setShowControls(!showControls)
   }
 
+  const { reportCameraEnablementSettings } = useCameraAnalytics({
+    source: SOURCE_ROBOT_SETTINGS,
+    robotType,
+  })
+  const handleToggleCamera = (): void => {
+    toggleCameraEnabled()
+    reportCameraEnablementSettings({
+      cameraEnabled: !isCameraEnabled,
+      liveFeedEnabled: isLiveVideoEnabled,
+      recoveryCaptureEnabled: isRecoveryCaptureEnabled,
+    })
+  }
   const navigateToUsageSettings = (): void => {
     navigate(`/devices/${robotName}/robot-settings/camera`)
   }
@@ -103,7 +125,7 @@ export function CameraCard({
         >
           <CameraCardOverflowMenu
             cameraEnabled={isCameraEnabled}
-            toggleCameraEnabled={toggleCameraEnabled}
+            handleToggleCamera={handleToggleCamera}
             toggleControls={toggleControls}
             navigateToUsageSettings={navigateToUsageSettings}
           />
@@ -120,12 +142,12 @@ export function CameraCard({
 
 function CameraCardOverflowMenu({
   cameraEnabled,
-  toggleCameraEnabled,
+  handleToggleCamera,
   toggleControls,
   navigateToUsageSettings,
 }: {
   cameraEnabled: boolean
-  toggleCameraEnabled: () => void
+  handleToggleCamera: () => void
   toggleControls: () => void
   navigateToUsageSettings: () => void
 }): JSX.Element {
@@ -135,7 +157,7 @@ function CameraCardOverflowMenu({
   return (
     <div className={styles.card_overflow_menu_container}>
       <div className={styles.card_overflow_menu_content_container}>
-        <MenuItem onClick={toggleCameraEnabled}>
+        <MenuItem onClick={handleToggleCamera}>
           {cameraEnabled ? t('disable_camera') : t('enable_camera')}
         </MenuItem>
         {cameraControlsEnabled && (

app/src/organisms/Desktop/Devices/Peripherals/__tests__/CameraCard.test.tsx

@@ -21,6 +21,7 @@ vi.mock('/app/organisms/Desktop/Camera/CameraControls')
 vi.mock('/app/local-resources/images/hooks/useCameraUsageSettings')
 vi.mock('/app/resources/runs')
 vi.mock('/app/redux/config')
+vi.mock('/app/redux/discovery/selectors')
 
 const mockNavigate = vi.fn()
 vi.mock('react-router-dom', async () => {

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunCamera/ImageGalleryContainer/GalleryContainerOverflowMenu.tsx

@@ -13,6 +13,11 @@ import {
 import { useAllRunImagesRaw } from '@opentrons/react-api-client'
 
 import { downloadFile } from '/app/organisms/Desktop/Devices/utils'
+import {
+  SOURCE_RUN_RECORD,
+  useCameraAnalytics,
+} from '/app/redux-resources/analytics/'
+import { useRobotType } from '/app/redux-resources/robots'
 
 import styles from './gallery.module.css'
 
@@ -39,6 +44,12 @@ export function GalleryContainerOverflowMenu({
   const [isPendingDownload, setIsPendingDownload] = useState(false)
   const { data: imagesZipFile, isLoading } = useAllRunImagesRaw(runId)
 
+  const robotType = useRobotType(robotName)
+
+  const { reportPhotoAccessUsage } = useCameraAnalytics({
+    source: SOURCE_RUN_RECORD,
+    robotType,
+  })
   const formattedRunTs = format(new Date(runTimestamp), 'M/d/yy_HH:mm:ss')
   const buildImagesZipName = (): string =>
     `${robotName}_${protocolName}_${formattedRunTs}_${t('images')}.zip`
@@ -51,6 +62,9 @@ export function GalleryContainerOverflowMenu({
     } else {
       setIsPendingDownload(true)
     }
+    reportPhotoAccessUsage({
+      action: 'downloadZip',
+    })
   }
 
   if (imagesZipFile != null && isPendingDownload) {

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunCamera/ImageGalleryContainer/GalleryItemOverflowMenu.tsx

@@ -8,6 +8,11 @@ import {
 } from '@opentrons/components'
 
 import { GalleryItemErrorModal } from '/app/organisms/Desktop/Devices/ProtocolRun/ProtocolRunCamera/ImageGalleryContainer/GalleryItemErrorModal'
+import {
+  SOURCE_RUN_RECORD,
+  useCameraAnalytics,
+} from '/app/redux-resources/analytics/'
+import { useRobotType } from '/app/redux-resources/robots'
 
 import styles from './gallery.module.css'
 
@@ -39,14 +44,21 @@ export function GalleryItemOverflowMenu({
   } = useMenuHandleClickOutside()
 
   const isErroredCommand = currentCommand?.error != null
+  const robotType = useRobotType(robotName)
+  const { reportPhotoAccessUsage } = useCameraAnalytics({
+    source: SOURCE_RUN_RECORD,
+    robotType,
+  })
 
   const onDownloadImage = (): void => {
     setShowOverflowMenu(false)
     const a = document.createElement('a')
     a.download = imageFilename
     a.href = imagePath ?? ''
     a.click()
-
+    reportPhotoAccessUsage({
+      action: 'download',
+    })
     a.remove()
   }
 

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunCamera/LaunchLivestreamBtn.tsx

@@ -4,17 +4,32 @@ import { useDispatch } from 'react-redux'
 import { Icon, SecondaryButton } from '@opentrons/components'
 import { useHost } from '@opentrons/react-api-client'
 
+import {
+  SOURCE_RUN_RECORD,
+  useCameraAnalytics,
+} from '/app/redux-resources/analytics/'
 import { cameraStreamOpenAction } from '/app/redux/shell'
 
 import styles from './runcamera.module.css'
 
-export function LaunchLivestreamBtn({ runId }: { runId: string }): JSX.Element {
-  const { t } = useTranslation(['run_details', 'branded'])
+import type { RobotType } from '@opentrons/shared-data'
+
+export function LaunchLivestreamBtn({
+  runId,
+  robotType,
+}: {
+  runId: string
+  robotType: RobotType
+}): JSX.Element {
+  const { t } = useTranslation('run_details')
   const dispatch = useDispatch()
   const host = useHost()
   const isLaunchCameraEnabled =
     host?.robotName != null && host?.hostname != null
-
+  const { reportLiveFeedUsage } = useCameraAnalytics({
+    source: SOURCE_RUN_RECORD,
+    robotType,
+  })
   const handleOpenCameraStream = (): void => {
     dispatch(
       cameraStreamOpenAction(
@@ -24,6 +39,9 @@ export function LaunchLivestreamBtn({ runId }: { runId: string }): JSX.Element {
         t('branded:livestream_window_title') as string
       )
     )
+    reportLiveFeedUsage({
+      runId: runId,
+    })
   }
 
   return (

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunCamera/__tests__/LaunchLivestreamBtn.test.tsx

@@ -22,9 +22,12 @@ vi.mock('react-redux', async () => {
 vi.mock('@opentrons/react-api-client')
 
 const render = () => {
-  return renderWithProviders(<LaunchLivestreamBtn runId="MOCK-RUN-ID" />, {
-    i18nInstance: i18n,
-  })
+  return renderWithProviders(
+    <LaunchLivestreamBtn runId="MOCK-RUN-ID" robotType="OT-3 Standard" />,
+    {
+      i18nInstance: i18n,
+    }
+  )
 }
 
 describe('LaunchLivestreamBtn', () => {

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunCamera/index.tsx

@@ -71,7 +71,7 @@ export function ProtocolRunCamera({
         {!isTerminalRunStatus(runStatus) &&
         isCameraEnabled &&
         showLivestreamBtn ? (
-          <LaunchLivestreamBtn runId={runId} />
+          <LaunchLivestreamBtn runId={runId} robotType={robotType} />
         ) : null}
       </div>
       <Divider width="100%" />

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/ActionButton/hooks/useActionButtonProperties.ts

@@ -11,6 +11,11 @@ import { useAddCameraSettingsToRunMutation } from '@opentrons/react-api-client'
 
 import { useIsHeaterShakerInProtocol } from '/app/organisms/ModuleCard/hooks'
 import { useTrackProtocolRunEvent } from '/app/redux-resources/analytics'
+import {
+  SOURCE_RUN_RECORD,
+  useCameraAnalytics,
+} from '/app/redux-resources/analytics/'
+import { useRobotType } from '/app/redux-resources/robots'
 import {
   ANALYTICS_PROTOCOL_PROCEED_TO_RUN,
   ANALYTICS_PROTOCOL_RUN_ACTION,
@@ -72,6 +77,11 @@ export function useActionButtonProperties({
   const { t } = useTranslation(['run_details', 'shared'])
   const { play, pause, reset } = protocolRunControls
   const { trackProtocolRunEvent } = useTrackProtocolRunEvent(runId, robotName)
+  const robotType = useRobotType(robotName)
+  const { reportCameraEnablementSettings } = useCameraAnalytics({
+    source: SOURCE_RUN_RECORD,
+    robotType: robotType,
+  })
   const isHeaterShakerInProtocol = useIsHeaterShakerInProtocol()
   const isHeaterShakerShaking = isAnyHeaterShakerShaking(attachedModules)
   const trackEvent = useTrackEvent()
@@ -99,6 +109,12 @@ export function useActionButtonProperties({
           ? robotAnalyticsData
           : {},
     })
+    const { enabled, recoveryEnabled, liveStreamEnabled } = runCameraSettings
+    reportCameraEnablementSettings({
+      cameraEnabled: enabled,
+      liveFeedEnabled: liveStreamEnabled,
+      recoveryCaptureEnabled: recoveryEnabled,
+    })
   }
 
   if (isProtocolNotReady) {
@@ -142,6 +158,7 @@ export function useActionButtonProperties({
       else if (!areCameraPreferencesConfirmed) {
         const { enabled, recoveryEnabled, liveStreamEnabled } =
           runCameraSettings
+
         addCameraSettingsToRun(
           {
             runId,