chore: side by side analytics

.infra/rdev/values.yaml

@@ -1,5 +1,5 @@
 services:
   explorer:
     image:
-      tag: sha-6a4bee02
+      tag: sha-a5b576b2
     replicaCount: 1

client/src/actions/embedding.ts

@@ -9,6 +9,8 @@ import type { AppDispatch, GetState, RootState } from "../reducers";
 import { _setEmbeddingSubset } from "../util/stateManager/viewStackHelpers";
 import { Field } from "../common/types/schema";
 import * as globals from "../globals";
+import { track } from "../analytics";
+import { EVENTS } from "../analytics/events";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
 async function _switchEmbedding(
@@ -109,6 +111,11 @@ export const swapLayoutChoicesAction: ActionCreator<
     const mainLayoutChoice = layoutChoice.current;
     const sideLayoutChoice = panelEmbedding.layoutChoice.current;
 
+    track(EVENTS.EXPLORER_SBS_SWAPPED, {
+      main_embedding: mainLayoutChoice,
+      window_embedding: sideLayoutChoice,
+    });
+
     await dispatch(layoutChoiceAction(mainLayoutChoice, true));
     await dispatch(layoutChoiceAction(sideLayoutChoice, false));
   };

client/src/analytics/events.ts

@@ -56,6 +56,10 @@ export enum EVENTS {
   EXPLORER_RE_CENTER_EMBEDDING = "EXPLORER_RE_CENTER_EMBEDDING",
   EXPLORER_ZOOMED = "EXPLORER_ZOOMED",
   EXPLORER_PANNED = "EXPLORER_PANNED",
+  EXPLORER_SBS_SELECTED = "EXPLORER_SBS_SELECTED",
+  EXPLORER_SBS_SWAPPED = "EXPLORER_SBS_SWAPPED",
+  EXPLORER_SBS_SIDE_WINDOW_EMBEDDING_CLICKED = "EXPLORER_SBS_SIDE_WINDOW_EMBEDDING_CLICKED",
+  EXPLORER_SBS_SIDE_WINDOW_EMBEDDING_SELECTED = "EXPLORER_SBS_SIDE_WINDOW_EMBEDDING_SELECTED",
 
   WMG_CLICK_NAV = "WMG_CLICK_NAV",
   COLLECTIONS_CLICK_NAV = "COLLECTIONS_CLICK_NAV",

client/src/components/embedding/index.tsx

@@ -66,15 +66,24 @@ const Embedding = (props: Props) => {
   const isSpatial = getFeatureFlag(FEATURES.SPATIAL);
 
   const handleLayoutChoiceClick = (): void => {
-    track(EVENTS.EXPLORER_EMBEDDING_CLICKED);
+    track(
+      isSidePanel
+        ? EVENTS.EXPLORER_SBS_SIDE_WINDOW_EMBEDDING_CLICKED
+        : EVENTS.EXPLORER_EMBEDDING_CLICKED
+    );
   };
 
   const handleLayoutChoiceChange = async (
     e: FormEvent<HTMLInputElement>
   ): Promise<void> => {
-    track(EVENTS.EXPLORER_EMBEDDING_SELECTED, {
-      embedding: e.currentTarget.value,
-    });
+    track(
+      isSidePanel
+        ? EVENTS.EXPLORER_SBS_SIDE_WINDOW_EMBEDDING_SELECTED
+        : EVENTS.EXPLORER_EMBEDDING_SELECTED,
+      {
+        embedding: e.currentTarget.value,
+      }
+    );
 
     await dispatch(
       actions.layoutChoiceAction(e.currentTarget.value, isSidePanel)
@@ -85,6 +94,16 @@ const Embedding = (props: Props) => {
     dispatch({
       type: "toggle panel embedding",
     });
+
+    /**
+     * (thuang): Product requirement to only track when the side panel goes from
+     * closed to open.
+     */
+    if (!sideIsOpen) {
+      track(EVENTS.EXPLORER_SBS_SELECTED, {
+        embedding: layoutChoice.current,
+      });
+    }
   };
 
   return (

client/src/components/graph/graph.tsx

@@ -84,6 +84,8 @@ const mapStateToProps = (state: RootState, ownProps: OwnProps): StateProps => ({
   mountCapture: state.controls.mountCapture,
   imageUnderlay: state.controls.imageUnderlay,
   config: state.config,
+  isSidePanelOpen: state.panelEmbedding.open,
+  sidePanelLayoutChoice: state.panelEmbedding.layoutChoice,
 });
 
 class Graph extends React.Component<GraphProps, GraphState> {
@@ -550,8 +552,15 @@ class Graph extends React.Component<GraphProps, GraphState> {
   }
 
   async handleImageDownload(regl: GraphState["regl"]) {
-    const { dispatch, screenCap, mountCapture, layoutChoice, colors } =
-      this.props;
+    const {
+      dispatch,
+      screenCap,
+      mountCapture,
+      layoutChoice,
+      colors,
+      isSidePanelOpen,
+      sidePanelLayoutChoice,
+    } = this.props;
 
     if (!this.reglCanvas || !screenCap || !regl || this.isDownloadingImage) {
       return;
@@ -638,9 +647,17 @@ class Graph extends React.Component<GraphProps, GraphState> {
         if (categoricalLegendImageURI) {
           downloadImage(categoricalLegendImageURI);
         }
-        track(EVENTS.EXPLORER_DOWNLOAD_COMPLETE, {
-          embedding: layoutChoice.current,
-        });
+
+        track(
+          EVENTS.EXPLORER_DOWNLOAD_COMPLETE,
+          isSidePanelOpen
+            ? {
+                embedding: layoutChoice.current,
+                side_by_side: sidePanelLayoutChoice?.current,
+              }
+            : { embedding: layoutChoice.current }
+        );
+
         dispatch({ type: "graph: screencap end" });
       }
 

client/src/components/graph/types.ts

@@ -59,6 +59,8 @@ export interface StateProps {
   mountCapture: RootState["controls"]["mountCapture"];
   imageUnderlay: RootState["controls"]["imageUnderlay"];
   config: RootState["config"];
+  isSidePanelOpen: RootState["panelEmbedding"]["open"];
+  sidePanelLayoutChoice: RootState["panelEmbedding"]["layoutChoice"];
 }
 
 export interface OwnProps {