chore: add context logging for chart cell & list page (#1496)

* chore: add context logging for chart cell * add list page view
pinterest · Sep 25, 2024 · 7f132ae · 7f132ae
1 parent 161b986
commit 7f132ae
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/querybook/webapp/components/Board/BoardWrapper.tsx b/querybook/webapp/components/Board/BoardWrapper.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
 
+import { ComponentType } from 'const/analytics';
 import { useBoardPath } from 'hooks/ui/useBoardPath';
+import { useTrackView } from 'hooks/useTrackView';
 
 import { Board } from './Board';
 
 export const BoardWrapper: React.FunctionComponent = () => {
+    useTrackView(ComponentType.LIST_PAGE);
     const boardPath = useBoardPath();
     const boardId = boardPath[boardPath.length - 1];
 

diff --git a/querybook/webapp/components/DataDocChartCell/DataDocChartCell.tsx b/querybook/webapp/components/DataDocChartCell/DataDocChartCell.tsx
@@ -3,8 +3,10 @@ import React from 'react';
 
 import { QueryExecutionPicker } from 'components/ExecutionPicker/QueryExecutionPicker';
 import { StatementExecutionPicker } from 'components/ExecutionPicker/StatementExecutionPicker';
+import { ComponentType, ElementType } from 'const/analytics';
 import { IDataChartCellMeta } from 'const/datadoc';
 import { useChartSource } from 'hooks/chart/useChartSource';
+import { trackClick } from 'lib/analytics';
 import { transformData } from 'lib/chart/chart-data-transformation';
 import { getDataTransformationOptions } from 'lib/chart/chart-meta-processing';
 import { QueryExecutionResource } from 'resource/queryExecution';
@@ -228,7 +230,13 @@ export const DataDocChartCell = React.memo<IProps>(
                     <div className="flex-row">
                         <TextButton
                             title="Config Chart"
-                            onClick={() => setShowChartComposer(true)}
+                            onClick={() => {
+                                trackClick({
+                                    component: ComponentType.DATADOC_CHART_CELL,
+                                    element: ElementType.CHART_CONFIG_BUTTON,
+                                });
+                                setShowChartComposer(true);
+                            }}
                             size="small"
                             className="mr8"
                         />

diff --git a/querybook/webapp/components/DataDocChartCell/DataDocChartComposer.tsx b/querybook/webapp/components/DataDocChartCell/DataDocChartComposer.tsx
@@ -8,6 +8,7 @@ import Select from 'react-select';
 import { QueryExecutionPicker } from 'components/ExecutionPicker/QueryExecutionPicker';
 import { StatementExecutionPicker } from 'components/ExecutionPicker/StatementExecutionPicker';
 import { StatementResultTable } from 'components/StatementResultTable/StatementResultTable';
+import { ComponentType, ElementType } from 'const/analytics';
 import { ColorPalette } from 'const/chartColors';
 import { IDataChartCellMeta } from 'const/datadoc';
 import {
@@ -29,6 +30,7 @@ import {
 } from 'const/dataDocChart';
 import { StatementExecutionResultSizes } from 'const/queryResultLimit';
 import { useChartSource } from 'hooks/chart/useChartSource';
+import { trackClick } from 'lib/analytics';
 import { transformData } from 'lib/chart/chart-data-transformation';
 import { mapMetaToFormVals } from 'lib/chart/chart-meta-processing';
 import {
@@ -1046,7 +1048,13 @@ const DataDocChartComposerComponent: React.FunctionComponent<
                 {isEditable ? (
                     <div className="DataDocChartComposer-button">
                         <SoftButton
-                            onClick={() => handleSubmit()}
+                            onClick={() => {
+                                trackClick({
+                                    component: ComponentType.DATADOC_CHART_CELL,
+                                    element: ElementType.CHART_SAVE_BUTTON,
+                                });
+                                handleSubmit();
+                            }}
                             title="Save"
                             fullWidth
                             pushable={false}

diff --git a/querybook/webapp/const/analytics.ts b/querybook/webapp/const/analytics.ts
@@ -16,11 +16,13 @@ export enum ComponentType {
     DATADOC_PAGE = 'DATADOC_PAGE',
     ADHOC_QUERY = 'ADHOC_QUERY',
     DATADOC_QUERY_CELL = 'DATADOC_QUERY_CELL',
+    DATADOC_CHART_CELL = 'DATADOC_CHART_CELL',
     RIGHT_SIDEBAR = 'RIGHT_SIDEBAR',
     TABLE_DETAIL_VIEW = 'TABLE_DETAIL_VIEW',
     TABLE_NAVIGATOR_SEARCH = 'TABLE_NAVIGATOR_SEARCH',
     AI_ASSISTANT = 'AI_ASSISTANT',
     SURVEY = 'SURVEY',
+    LIST_PAGE = 'LIST_PAGE',
 }
 
 export enum ElementType {
@@ -88,6 +90,10 @@ export enum ElementType {
     RESULT_EXPORT_BUTTON = 'RESULT_EXPORT_BUTTON',
     INSERT_SNIPPET_BUTTON = 'INSERT_SNIPPET_BUTTON',
 
+    // Chart Cell
+    CHART_CONFIG_BUTTON = 'CHART_CONFIG_BUTTON',
+    CHART_SAVE_BUTTON = 'CHART_SAVE_BUTTON',
+
     // Table detail view
     OVERVIEW_TABLE_TAB = 'OVERVIEW_TABLE_TAB',
     COLUMNS_TABLE_TAB = 'COLUMNS_TABLE_TAB',