diff --git a/client/src/actions/embedding.ts b/client/src/actions/embedding.ts index 3e8b21056..362762801 100644 --- a/client/src/actions/embedding.ts +++ b/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)); }; diff --git a/client/src/analytics/events.ts b/client/src/analytics/events.ts index 20058690a..966f32fcb 100644 --- a/client/src/analytics/events.ts +++ b/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", diff --git a/client/src/components/embedding/index.tsx b/client/src/components/embedding/index.tsx index 2313e0c12..ca17f22d6 100644 --- a/client/src/components/embedding/index.tsx +++ b/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 ): Promise => { - 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 ( diff --git a/client/src/components/graph/graph.tsx b/client/src/components/graph/graph.tsx index dffd08f35..302e1391f 100644 --- a/client/src/components/graph/graph.tsx +++ b/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 { @@ -550,8 +552,15 @@ class Graph extends React.Component { } 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 { 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" }); } diff --git a/client/src/components/graph/types.ts b/client/src/components/graph/types.ts index 172dc8d2c..d6563a211 100644 --- a/client/src/components/graph/types.ts +++ b/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 {