fix(analytics): #262 adds event payloads (#264)

chanzuckerberg · May 16, 2022 · be75ba1 · be75ba1
1 parent 6af6511
commit be75ba1
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 8 deletions.
diff --git a/client/src/actions/index.ts b/client/src/actions/index.ts
@@ -28,6 +28,8 @@ import { selectIsUserStateDirty } from "../selectors/global";
 import AnnoMatrix from "../annoMatrix/annoMatrix";
 import { LabelArray, LabelIndex } from "../util/dataframe";
 import { packDiffExPdu, DiffExMode, DiffExArguments } from "../util/diffexpdu";
+import { track } from "../analytics";
+import { EVENTS } from "../analytics/events";
 
 function setGlobalConfig(config: Config) {
   /**
@@ -221,7 +223,7 @@ const dispatchDiffExpErrors = (
   switch (response.status) {
     case 403:
       dispatchNetworkErrorMessageToUser(
-        "Too many cells selected for differential experesion calculation - please make a smaller selection."
+        "Too many cells selected for differential expression calculation - please make a smaller selection."
       );
       break;
     case 501:
@@ -244,6 +246,11 @@ const requestDifferentialExpression =
   (set1: LabelArray, set2: LabelArray, num_genes = 15) =>
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -- TODO: type diff exp data in genesets reducer (client/src/reducers/genesets.ts)
   async (dispatch: AppDispatch, getState: GetState) => {
+    // (thuang): For measuring performance
+    const startMs = performance.now();
+    const cellCount1 = set1.length;
+    const cellCount2 = set2.length;
+
     dispatch({ type: "request differential expression started" });
     try {
       if (!globals.API) throw new Error("API not set");
@@ -284,6 +291,13 @@ const requestDifferentialExpression =
       );
 
       if (!res.ok || res.headers.get("Content-Type") !== "application/json") {
+        track(EVENTS.EXPLORER_DIFF_EXP_BUTTON_CLICKED, {
+          cellCount1,
+          cellCount2,
+          timeToComplete: performance.now() - startMs,
+          status: "error",
+        });
+
         return dispatchDiffExpErrors(dispatch, res);
       }
 
@@ -302,12 +316,26 @@ const requestDifferentialExpression =
         );
       }
 
+      track(EVENTS.EXPLORER_DIFF_EXP_BUTTON_CLICKED, {
+        cellCount1,
+        cellCount2,
+        timeToComplete: performance.now() - startMs,
+        status: "success",
+      });
+
       /* then send the success case action through */
       return dispatch({
         type: "request differential expression success",
         data: diffexpLists,
       });
     } catch (error) {
+      track(EVENTS.EXPLORER_DIFF_EXP_BUTTON_CLICKED, {
+        cellCount1,
+        cellCount2,
+        timeToComplete: performance.now() - startMs,
+        status: "error",
+      });
+
       return dispatch({
         type: "request differential expression error",
         error,

diff --git a/client/src/analytics/events.ts b/client/src/analytics/events.ts
@@ -23,7 +23,7 @@ export enum EVENTS {
   EXPLORER_LAYOUT_CHOICE_BUTTON_CLICKED = "EXPLORER_LAYOUT_CHOICE_BUTTON_CLICKED",
   EXPLORER_LAYOUT_CHOICE_CHANGE_ITEM_CLICKED = "EXPLORER_LAYOUT_CHOICE_CHANGE_ITEM_CLICKED",
   EXPLORER_FLOATING_BUTTON_CLICKED = "EXPLORER_FLOATING_BUTTON_CLICKED",
-  EXPLORER_COLORBY_AUTHOR_CATEGORIES_BUTTON_CLICKED = "EXPLORER_COLORBY_AUTHOR_CATEGORIES_BUTTON_CLICKED",
+  EXPLORER_COLORBY_CATEGORIES_BUTTON_CLICKED = "EXPLORER_COLORBY_CATEGORIES_BUTTON_CLICKED",
   EXPLORER_COLORBY_HISTOGRAM_CONTINUOUS_BUTTON_CLICKED = "EXPLORER_COLORBY_HISTOGRAM_CONTINUOUS_BUTTON_CLICKED",
   EXPLORER_COLORBY_GENE_BUTTON_CLICKED = "EXPLORER_COLORBY_GENE_BUTTON_CLICKED",
   EXPLORER_SUGGEST_MENU_ITEM_CLICKED = "EXPLORER_SUGGEST_MENU_ITEM_CLICKED",

diff --git a/client/src/components/categorical/category/index.tsx b/client/src/components/categorical/category/index.tsx
@@ -104,9 +104,12 @@ class Category extends React.PureComponent {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
   handleColorChange = () => {
     // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
-    const { dispatch, metadataField } = this.props;
+    const { dispatch, metadataField, categoryType } = this.props;
 
-    track(EVENTS.EXPLORER_COLORBY_AUTHOR_CATEGORIES_BUTTON_CLICKED);
+    track(EVENTS.EXPLORER_COLORBY_CATEGORIES_BUTTON_CLICKED, {
+      type: categoryType,
+      category: metadataField,
+    });
 
     dispatch({
       type: "color by categorical metadata",

diff --git a/client/src/components/categorical/index.tsx b/client/src/components/categorical/index.tsx
@@ -292,6 +292,7 @@ class Categories extends React.Component<{}, State> {
                 onExpansionChange={this.onExpansionChange}
                 isExpanded={expandedCats.has(catName)}
                 createAnnoModeActive={createAnnoModeActive}
+                categoryType="standard"
               />
             ))}
           </Collapse>
@@ -308,6 +309,7 @@ class Categories extends React.Component<{}, State> {
                 onExpansionChange={this.onExpansionChange}
                 isExpanded={expandedCats.has(catName)}
                 createAnnoModeActive={createAnnoModeActive}
+                categoryType="author"
               />
             ))}
           </Collapse>

diff --git a/client/src/components/menubar/diffexpButtons.tsx b/client/src/components/menubar/diffexpButtons.tsx
@@ -6,8 +6,6 @@ import * as globals from "../../globals";
 import styles from "./menubar.css";
 import actions from "../../actions";
 import CellSetButton from "./cellSetButtons";
-import { track } from "../../analytics";
-import { EVENTS } from "../../analytics/events";
 
 // @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
 @connect((state) => ({
@@ -25,8 +23,6 @@ class DiffexpButtons extends React.PureComponent {
     // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch, differential } = this.props;
     if (differential.celllist1 && differential.celllist2) {
-      track(EVENTS.EXPLORER_DIFF_EXP_BUTTON_CLICKED);
-
       dispatch(
         actions.requestDifferentialExpression(
           differential.celllist1,