Python Lab: log to statsig on resize (code-dot-org#63940)

* add resize logging

* change to statsig

* log layout and bar name

Author: molly-moen

apps/src/codebridge/Workspace/Output.tsx

@@ -6,7 +6,9 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useResizable} from 'react-resizable-layout';
 
 import Console from '@cdo/apps/codebridge/Console/Console';
+import {logOnResize} from '@cdo/apps/lab2/utils/logOnResize';
 import ResizeBar from '@cdo/apps/lab2/views/components/ResizeBar';
+import {useAppSelector} from '@cdo/apps/util/reduxHooks';
 
 import CodebridgeRegistry from '../CodebridgeRegistry';
 import {MiniApps} from '../constants';
@@ -40,6 +42,7 @@ const Output: React.FunctionComponent<OutputProps> = ({
   // In vertical mode, consoleSize is the height of the console.
   // In horizontal mode, consoleSize is the width of the console.
   const [consoleSize, setConsoleSize] = useState<number | undefined>(undefined);
+  const appName = useAppSelector(state => state.lab.levelProperties?.appName);
 
   const {
     position: miniAppSize,
@@ -51,6 +54,11 @@ const Output: React.FunctionComponent<OutputProps> = ({
     min: MIN_MINI_APP_SIZE,
     max: MAX_MINI_APP_SIZE,
     containerRef: resizeContainerRef,
+    onResizeStart: () =>
+      logOnResize(appName, {
+        layout: config.activeLayout || '',
+        resizeBar: 'neighborhood',
+      }),
   });
 
   const [adjustedMiniAppSize, setAdjustedMiniAppSize] =

apps/src/lab2/utils/logOnResize.ts

@@ -0,0 +1,14 @@
+import {EVENTS, PLATFORMS} from '@cdo/apps/metrics/AnalyticsConstants';
+import analyticsReporter from '@cdo/apps/metrics/AnalyticsReporter';
+
+export const logOnResize = (
+  labType?: string,
+  payload?: Record<string, string>
+) => {
+  const fullPayload = payload ? {labType, ...payload} : {labType};
+  analyticsReporter.sendEvent(
+    EVENTS.LAB2_RESIZE_DRAG_START,
+    fullPayload,
+    PLATFORMS.STATSIG
+  );
+};

apps/src/metrics/AnalyticsConstants.js

@@ -531,6 +531,9 @@ const EVENTS = {
 
   // Sign in callout on CSF and CSC levels
   LEVEL_SIGN_IN_CALLOUT_SHOWN: 'Level Sign In Callout Shown',
+
+  // Lab2
+  LAB2_RESIZE_DRAG_START: 'Resize bar dragged in lab2',
 };
 
 const EVENT_GROUP_NAMES = {

apps/src/pythonlab/layout/HorizontalLayout.tsx

@@ -5,6 +5,7 @@ import {throttle} from 'lodash';
 import React, {useCallback, useEffect, useMemo} from 'react';
 import {useResizable} from 'react-resizable-layout';
 
+import {logOnResize} from '@cdo/apps/lab2/utils/logOnResize';
 import ResizeBar, {
   RESIZE_BAR_SIZE_PX,
 } from '@cdo/apps/lab2/views/components/ResizeBar';
@@ -41,6 +42,11 @@ const HorizontalLayout: React.FunctionComponent = () => {
     axis: 'x',
     initial: INITIAL_INFO_PANEL_WIDTH,
     min: MIN_LEFT_PANEL_WIDTH,
+    onResizeStart: () =>
+      logOnResize('pythonlab', {
+        layout: 'horizontal',
+        resizeBar: 'instructions',
+      }),
   });
   const {
     position: rawOutputHeight,
@@ -51,6 +57,8 @@ const HorizontalLayout: React.FunctionComponent = () => {
     initial: INITIAL_OUTPUT_HEIGHT,
     min: MIN_OUTPUT_HEIGHT,
     reverse: true,
+    onResizeStart: () =>
+      logOnResize('pythonlab', {layout: 'horizontal', resizeBar: 'console'}),
   });
 
   const adjustRightPanelWidth = useCallback(() => {

apps/src/pythonlab/layout/VerticalLayout.tsx

@@ -4,6 +4,7 @@ import Output from '@codebridge/Workspace/Output';
 import React, {useCallback, useEffect} from 'react';
 import {useResizable} from 'react-resizable-layout';
 
+import {logOnResize} from '@cdo/apps/lab2/utils/logOnResize';
 import ResizeBar, {
   RESIZE_BAR_SIZE_PX,
 } from '@cdo/apps/lab2/views/components/ResizeBar';
@@ -32,6 +33,8 @@ const VerticalLayout: React.FunctionComponent = () => {
     axis: 'x',
     initial: INITIAL_INFO_PANEL_WIDTH,
     min: MIN_INFO_PANEL_WIDTH,
+    onResizeStart: () =>
+      logOnResize('pythonlab', {layout: 'vertical', resizeBar: 'instructions'}),
   });
   const {
     position: rawOutputWidth,
@@ -42,6 +45,8 @@ const VerticalLayout: React.FunctionComponent = () => {
     initial: INITIAL_OUTPUT_WIDTH,
     min: MIN_OUTPUT_WIDTH,
     reverse: true,
+    onResizeStart: () =>
+      logOnResize('pythonlab', {layout: 'vertical', resizeBar: 'console'}),
   });
 
   const adjustWidths = useCallback(() => {