chore: DP#7155 Update analytics Part 1 (#1041)

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-93a60f26
+        tag: sha-174a2b45
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/src/actions/controls.ts

@@ -0,0 +1,38 @@
+import { Action, ActionCreator } from "redux";
+import { ThunkAction } from "redux-thunk";
+import { AppDispatch, GetState, RootState } from "../reducers";
+import {
+  isColorByHistogramColorMode,
+  trackColorByCategoryExpand,
+  trackColorByHistogramExpandCategory,
+} from "../analytics";
+
+export const toggleCategoryExpansion: ActionCreator<
+  ThunkAction<
+    Promise<void>,
+    RootState,
+    never,
+    Action<"controls category expansion change">
+  >
+> =
+  (category: string, isExpanding: boolean) =>
+  async (dispatch: AppDispatch, getState: GetState) => {
+    dispatch({
+      type: "controls category expansion change",
+      category,
+    });
+
+    const {
+      colors: { colorMode },
+    } = getState();
+
+    trackColorByCategoryExpand(
+      colorMode === "color by categorical metadata",
+      isExpanding
+    );
+
+    trackColorByHistogramExpandCategory(
+      isColorByHistogramColorMode(colorMode),
+      isExpanding
+    );
+  };

client/src/actions/selection.ts

@@ -1,4 +1,6 @@
 import { vec2 } from "gl-matrix";
+import { track } from "../analytics";
+import { EVENTS } from "../analytics/events";
 
 /*
 Action creators for selection
@@ -245,6 +247,8 @@ export const graphLassoEndAction =
       polygon,
       graphId,
     });
+
+    track(EVENTS.EXPLORER_LASSO);
   };
 
 /*

client/src/analytics/events.ts

@@ -16,7 +16,7 @@ export enum EVENTS {
   EXPLORER_RESET_SUBSET_BUTTON_CLICKED = "EXPLORER_RESET_SUBSET_BUTTON_CLICKED",
   EXPLORER_MODE_LASSO_BUTTON_CLICKED = "EXPLORER_MODE_LASSO_BUTTON_CLICKED",
   EXPLORER_MODE_PAN_ZOOM_BUTTON_CLICKED = "EXPLORER_MODE_PAN_ZOOM_BUTTON_CLICKED",
-  EXPLORER_CENTROID_LABEL_TOGGLE_BUTTON_CLICKED = "EXPLORER_CENTROID_LABEL_TOGGLE_BUTTON_CLICKED",
+  EXPLORER_SHOW_LABELS = "EXPLORER_SHOW_LABELS",
   EXPLORER_VISUALIZATION_SETTINGS_BUTTON_CLICKED = "EXPLORER_VISUALIZATION_SETTINGS_BUTTON_CLICKED",
   EXPLORER_UNDO_BUTTON_CLICKED = "EXPLORER_UNDO_BUTTON_CLICKED",
   EXPLORER_REDO_BUTTON_CLICKED = "EXPLORER_REDO_BUTTON_CLICKED",
@@ -60,6 +60,14 @@ export enum EVENTS {
   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",
+  EXPLORER_COLORBY_CATEGORY_EXPAND = "EXPLORER_COLORBY_CATEGORY_EXPAND",
+  EXPLORER_COLORBY_CATEGORY_HIGHLIGHT_HISTOGRAM = "EXPLORER_COLORBY_CATEGORY_HIGHLIGHT_HISTOGRAM",
+  EXPLORER_COLORBY_CATEGORY_CHANGE_EMBEDDING = "EXPLORER_COLORBY_CATEGORY_CHANGE_EMBEDDING",
+  EXPLORER_COLORBY_HISTOGRAM_EXPAND_CATEGORY = "EXPLORER_COLORBY_HISTOGRAM_EXPAND_CATEGORY",
+  EXPLORER_COLORBY_HISTOGRAM_HIGHLIGHT_HISTOGRAM = "EXPLORER_COLORBY_HISTOGRAM_HIGHLIGHT_HISTOGRAM",
+  EXPLORER_COLORBY_HISTOGRAM_CHANGE_EMBEDDING = "EXPLORER_COLORBY_HISTOGRAM_CHANGE_EMBEDDING",
+  EXPLORER_LASSO = "EXPLORER_LASSO",
+  EXPLORER_LASSO_CHANGE_EMBEDDING = "EXPLORER_LASSO_CHANGE_EMBEDDING",
 
   WMG_CLICK_NAV = "WMG_CLICK_NAV",
   COLLECTIONS_CLICK_NAV = "COLLECTIONS_CLICK_NAV",

client/src/analytics/index.ts

@@ -1,4 +1,5 @@
 import { EVENTS } from "./events";
+import { type GetState } from "../reducers";
 
 declare global {
   interface Window {
@@ -12,9 +13,90 @@ declare global {
 export function track(event: EVENTS, props?: Record<string, unknown>): void {
   const options = props ? { props } : undefined;
 
+  /**
+   * (thuang): Log analytics events for debugging purposes
+   * Please comment out before committing
+   */
+  // console.log("track", event, options);
+
   try {
     window.plausible(event, options);
   } catch (error) {
     console.error(error);
   }
 }
+
+export function trackColorByCategoryExpand(
+  isColorByCategory: boolean,
+  isAnyCategoryExpanded: boolean
+): void {
+  if (!isColorByCategory || !isAnyCategoryExpanded) return;
+
+  track(EVENTS.EXPLORER_COLORBY_CATEGORY_EXPAND);
+}
+
+export function trackColorByCategoryHighlightHistogram(
+  isColorByCategory: boolean,
+  isAnyHistogramHighlighted: boolean
+): void {
+  if (!isColorByCategory || !isAnyHistogramHighlighted) return;
+
+  track(EVENTS.EXPLORER_COLORBY_CATEGORY_HIGHLIGHT_HISTOGRAM);
+}
+
+export function trackColorByHistogramExpandCategory(
+  isColorByHistogram: boolean,
+  isAnyCategoryExpanded: boolean
+): void {
+  if (!isColorByHistogram || !isAnyCategoryExpanded) return;
+
+  track(EVENTS.EXPLORER_COLORBY_HISTOGRAM_EXPAND_CATEGORY);
+}
+
+export function thunkTrackColorByHistogramExpandCategoryFromColorByHistogram() {
+  return async (_: unknown, getState: GetState) => {
+    const {
+      colors: { colorMode },
+      controls: { expandedCategories },
+    } = getState();
+
+    trackColorByHistogramExpandCategory(
+      isColorByHistogramColorMode(colorMode),
+      expandedCategories.length > 0
+    );
+  };
+}
+
+export function trackColorByHistogramHighlightHistogram(
+  isColorByHistogram: boolean,
+  isAnyHistogramHighlighted: boolean
+): void {
+  if (!isColorByHistogram || !isAnyHistogramHighlighted) return;
+
+  track(EVENTS.EXPLORER_COLORBY_HISTOGRAM_HIGHLIGHT_HISTOGRAM);
+}
+
+export function thunkTrackColorByHistogramHighlightHistogramFromColorByHistogram() {
+  return async (_: unknown, getState: GetState) => {
+    const {
+      colors: { colorMode },
+      continuousSelection,
+    } = getState();
+
+    trackColorByHistogramHighlightHistogram(
+      isColorByHistogramColorMode(colorMode),
+      Object.keys(continuousSelection).length > 0
+    );
+  };
+}
+
+/**
+ * (thuang): Amanda wants to treat both continuous metadata and gene expression
+ * as color by histogram color mode in analytics events.
+ */
+export function isColorByHistogramColorMode(colorMode: string | null): boolean {
+  return (
+    colorMode === "color by continuous metadata" ||
+    colorMode === "color by expression"
+  );
+}

client/src/components/brushableHistogram/analytics.ts

@@ -0,0 +1,18 @@
+import { track } from "../../analytics";
+import { EVENTS } from "../../analytics/events";
+import { GetState } from "../../reducers";
+
+export function thunkTrackColorByContinuousHistogram() {
+  return (_: unknown, getState: GetState) => {
+    const {
+      colors: { colorMode },
+    } = getState();
+
+    const isColorByContinuousHistogram =
+      colorMode === "color by continuous metadata";
+
+    if (!isColorByContinuousHistogram) return;
+
+    track(EVENTS.EXPLORER_COLORBY_HISTOGRAM_CONTINUOUS_BUTTON_CLICKED);
+  };
+}

client/src/components/brushableHistogram/header.tsx

@@ -2,8 +2,6 @@ import React, { useCallback } from "react";
 import { Button, ButtonGroup, Tooltip, Icon } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 import * as globals from "../../globals";
-import { EVENTS } from "../../analytics/events";
-import { track } from "../../analytics";
 
 const HistogramHeader = React.memo(
   ({
@@ -41,7 +39,6 @@ const HistogramHeader = React.memo(
       */
 
     const memoizedColorByCallback = useCallback(() => {
-      track(EVENTS.EXPLORER_COLORBY_HISTOGRAM_CONTINUOUS_BUTTON_CLICKED);
       onColorByClick(fieldId, isObs);
     }, [fieldId, isObs, onColorByClick]);
 

client/src/components/brushableHistogram/index.tsx

@@ -12,12 +12,20 @@ import HistogramFooter from "./footer";
 import StillLoading from "./loading";
 import ErrorLoading from "./error";
 import { Dataframe } from "../../util/dataframe";
-import { track } from "../../analytics";
+import {
+  isColorByHistogramColorMode,
+  track,
+  trackColorByCategoryHighlightHistogram,
+  thunkTrackColorByHistogramExpandCategoryFromColorByHistogram,
+  trackColorByHistogramHighlightHistogram,
+  thunkTrackColorByHistogramHighlightHistogramFromColorByHistogram,
+} from "../../analytics";
 import { EVENTS } from "../../analytics/events";
 import { AppDispatch, RootState } from "../../reducers";
 import { AnnoMatrixClipView } from "../../annoMatrix/views";
 import { Query } from "../../annoMatrix/query";
 import { Field } from "../../common/types/schema";
+import { thunkTrackColorByContinuousHistogram } from "./analytics";
 
 const MARGIN = {
   LEFT: 10, // Space for 0 tick label on X axis
@@ -55,6 +63,7 @@ interface StateProps {
   continuousSelectionRange: RootState["continuousSelection"][string];
   isColorAccessor: boolean;
   singleContinuousValues: RootState["singleContinuousValue"]["singleContinuousValues"];
+  colorMode: RootState["colors"]["colorMode"];
 }
 interface DispatchProps {
   dispatch: AppDispatch;
@@ -82,6 +91,7 @@ const mapStateToProps = (
       state.colors.colorAccessor === field &&
       state.colors.colorMode !== "color by categorical metadata",
     singleContinuousValues: state.singleContinuousValue.singleContinuousValues,
+    colorMode: state.colors.colorMode,
   };
 };
 class HistogramBrush extends React.PureComponent<BrushableHistogramProps> {
@@ -101,6 +111,16 @@ class HistogramBrush extends React.PureComponent<BrushableHistogramProps> {
     } else {
       dispatch(actions.requestSingleGeneExpressionCountsForColoringPOST(field));
     }
+
+    /**
+     * (thuang): Must be dispatched AFTER the actions above, as the `colorMode`
+     * only changes after the above actions are completed.
+     */
+    dispatch(thunkTrackColorByContinuousHistogram());
+    dispatch(thunkTrackColorByHistogramExpandCategoryFromColorByHistogram());
+    dispatch(
+      thunkTrackColorByHistogramHighlightHistogramFromColorByHistogram()
+    );
   });
 
   // @ts-expect-error ts-migrate(6133) FIXME: 'selection' is declared but its value is never rea... Remove this comment to see the full error message
@@ -146,8 +166,14 @@ class HistogramBrush extends React.PureComponent<BrushableHistogramProps> {
     ) =>
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
     async () => {
-      const { dispatch, field, isObs, isUserDefined, isGeneSetSummary } =
-        this.props;
+      const {
+        dispatch,
+        field,
+        isObs,
+        isUserDefined,
+        isGeneSetSummary,
+        colorMode,
+      } = this.props;
       const minAllowedBrushSize = 10;
       const smallAmountToAvoidInfiniteLoop = 0.1;
 
@@ -204,7 +230,24 @@ class HistogramBrush extends React.PureComponent<BrushableHistogramProps> {
       await dispatch(
         actions.selectContinuousMetadataAction(type, query, range, otherProps)
       );
-      track(EVENTS.EXPLORER_SELECT_HISTOGRAM);
+
+      /**
+       * (thuang): Analytics requirement to ONLY track the event when the user
+       * selects a histogram and NOT when it is deselected.
+       */
+      if (type === "continuous metadata histogram end") {
+        track(EVENTS.EXPLORER_SELECT_HISTOGRAM);
+      }
+
+      trackColorByCategoryHighlightHistogram(
+        colorMode === "color by categorical metadata",
+        type === "continuous metadata histogram end"
+      );
+
+      trackColorByHistogramHighlightHistogram(
+        isColorByHistogramColorMode(colorMode),
+        type === "continuous metadata histogram end"
+      );
     };
 
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.

client/src/components/categorical/category/analytics.ts

@@ -0,0 +1,31 @@
+import {
+  trackColorByCategoryExpand,
+  trackColorByCategoryHighlightHistogram,
+} from "../../../analytics";
+import { GetState } from "../../../reducers";
+
+export function thunkTrackColorByCategoryExpand(isColorByCategory: boolean) {
+  return (_: unknown, getState: GetState) => {
+    const {
+      controls: { expandedCategories },
+    } = getState();
+
+    trackColorByCategoryExpand(
+      isColorByCategory,
+      expandedCategories.length > 0
+    );
+  };
+}
+
+export function thunkTrackColorByCategoryHighlightHistogram(
+  isColorByCategory: boolean
+) {
+  return (_: unknown, getState: GetState) => {
+    const { continuousSelection } = getState();
+
+    trackColorByCategoryHighlightHistogram(
+      isColorByCategory,
+      Object.keys(continuousSelection).length > 0
+    );
+  };
+}