feat(spatial): analytics (#974)

client/src/analytics/events.ts

@@ -20,8 +20,9 @@ export enum EVENTS {
   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",
-  EXPLORER_LAYOUT_CHOICE_BUTTON_CLICKED = "EXPLORER_LAYOUT_CHOICE_BUTTON_CLICKED",
-  EXPLORER_LAYOUT_CHOICE_CHANGE_ITEM_CLICKED = "EXPLORER_LAYOUT_CHOICE_CHANGE_ITEM_CLICKED",
+  EXPLORER_DOWNLOAD_COMPLETE = "EXPLORER_DOWNLOAD_COMPLETE",
+  EXPLORER_EMBEDDING_CLICKED = "EXPLORER_EMBEDDING_CLICKED",
+  EXPLORER_EMBEDDING_SELECTED = "EXPLORER_EMBEDDING_SELECTED",
   EXPLORER_FLOATING_BUTTON_CLICKED = "EXPLORER_FLOATING_BUTTON_CLICKED",
   EXPLORER_COLORBY_CATEGORIES_BUTTON_CLICKED = "EXPLORER_COLORBY_CATEGORIES_BUTTON_CLICKED",
   EXPLORER_COLORBY_HISTOGRAM_CONTINUOUS_BUTTON_CLICKED = "EXPLORER_COLORBY_HISTOGRAM_CONTINUOUS_BUTTON_CLICKED",
@@ -50,6 +51,10 @@ export enum EVENTS {
   EXPLORER_ADD_GENE_AND_SELECT_HISTOGRAM = "EXPLORER_ADD_GENE_AND_SELECT_HISTOGRAM",
   EXPLORER_SELECT_HISTOGRAM = "EXPLORER_SELECT_HISTOGRAM",
   EXPLORER_GENE_INFO_BUTTON_CLICKED = "EXPLORER_GENE_INFO_BUTTON_CLICKED",
+  EXPLORER_IMAGE_SELECT = "EXPLORER_IMAGE_SELECT",
+  EXPLORER_IMAGE_DESELECT = "EXPLORER_IMAGE_DESELECT",
+  EXPLORER_RE_CENTER_EMBEDDING = "EXPLORER_RE_CENTER_EMBEDDING",
+
   WMG_CLICK_NAV = "WMG_CLICK_NAV",
   COLLECTIONS_CLICK_NAV = "COLLECTIONS_CLICK_NAV",
   CENSUS_DOCUMENTATION_CLICK_NAV = "CENSUS_DOCUMENTATION_CLICK_NAV",

client/src/components/embedding/index.tsx

@@ -30,13 +30,15 @@ type Props = RootState;
 }))
 class Embedding extends React.PureComponent<Props> {
   handleLayoutChoiceClick = (): void => {
-    track(EVENTS.EXPLORER_LAYOUT_CHOICE_BUTTON_CLICKED);
+    track(EVENTS.EXPLORER_EMBEDDING_CLICKED);
   };
 
   handleLayoutChoiceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { dispatch, imageUnderlay } = this.props;
 
-    track(EVENTS.EXPLORER_LAYOUT_CHOICE_CHANGE_ITEM_CLICKED);
+    track(EVENTS.EXPLORER_EMBEDDING_SELECTED, {
+      embedding: e.currentTarget.value,
+    });
 
     dispatch(actions.layoutChoiceAction(e.currentTarget.value));
     if (

client/src/components/graph/graph.tsx

@@ -54,6 +54,8 @@ import { THROTTLE_MS } from "../../util/constants";
 import { GraphProps, GraphState } from "./types";
 import { isSpatialMode, shouldShowOpenseadragon } from "../../common/selectors";
 import { fetchDeepZoomImageFailed } from "../../actions/config";
+import { track } from "../../analytics";
+import { EVENTS } from "../../analytics/events";
 
 interface GraphAsyncProps {
   positions: Float32Array;
@@ -387,6 +389,7 @@ class Graph extends React.Component<GraphProps, GraphState> {
   };
 
   handleGoHome = () => {
+    track(EVENTS.EXPLORER_RE_CENTER_EMBEDDING);
     const { camera } = this.state;
 
     camera?.goHome(this.openseadragon);
@@ -621,7 +624,9 @@ class Graph extends React.Component<GraphProps, GraphState> {
         if (categoricalLegendImageURI) {
           downloadImage(categoricalLegendImageURI);
         }
-
+        track(EVENTS.EXPLORER_DOWNLOAD_COMPLETE, {
+          embedding: layoutChoice.current,
+        });
         dispatch({ type: "graph: screencap end" });
       }
 

client/src/components/menubar/index.tsx

@@ -435,6 +435,11 @@ class MenuBar extends React.PureComponent<{}, State> {
                   intent={imageUnderlay ? "primary" : "none"}
                   active={imageUnderlay}
                   onClick={() => {
+                    track(
+                      imageUnderlay
+                        ? EVENTS.EXPLORER_IMAGE_SELECT
+                        : EVENTS.EXPLORER_IMAGE_DESELECT
+                    );
                     dispatch({
                       type: "toggle image underlay",
                       toggle: !imageUnderlay,