From 1695e66a5ba3e3a3d454f8f6d6b5cd905922ea6e Mon Sep 17 00:00:00 2001
From: "J.C. Zhong" <jianchengzhong@pinterest.com>
Date: Fri, 6 Jan 2023 22:19:20 +0000
Subject: [PATCH] add search resutls view events

---
 .../webapp/components/Search/SearchOverview.tsx  | 16 ++++++++++++++--
 querybook/webapp/lib/analytics.ts                |  9 ++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/querybook/webapp/components/Search/SearchOverview.tsx b/querybook/webapp/components/Search/SearchOverview.tsx
index 4d98844bf..9f30f675e 100644
--- a/querybook/webapp/components/Search/SearchOverview.tsx
+++ b/querybook/webapp/components/Search/SearchOverview.tsx
@@ -1,6 +1,6 @@
 import { isEmpty } from 'lodash';
 import moment from 'moment';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import CreatableSelect from 'react-select/creatable';
 
@@ -16,7 +16,7 @@ import {
 } from 'const/search';
 import { useShallowSelector } from 'hooks/redux/useShallowSelector';
 import { useTrackView } from 'hooks/useTrackView';
-import { trackClick } from 'lib/analytics';
+import { trackClick, trackView } from 'lib/analytics';
 import { titleize } from 'lib/utils';
 import { getCurrentEnv } from 'lib/utils/query-string';
 import {
@@ -112,6 +112,18 @@ export const SearchOverview: React.FC<ISearchOverviewProps> = ({
     const results = resultByPage[currentPage] || [];
     const isLoading = !!searchRequest;
 
+    // Log search results
+    useEffect(() => {
+        if (!isLoading && !!searchString.length && !!results.length) {
+            const elementType = SearchTypeToElementType[searchType];
+            trackView(ComponentType.SEARCH_MODAL, elementType, {
+                search: searchString,
+                results: results.map((r) => r.id),
+                page: currentPage,
+            });
+        }
+    }, [isLoading, searchString, results]);
+
     const dispatch = useDispatch();
     const handleUpdateSearchString = React.useCallback(
         (searchStringParam: string) => {
diff --git a/querybook/webapp/lib/analytics.ts b/querybook/webapp/lib/analytics.ts
index 648d47d86..cd2b691ca 100644
--- a/querybook/webapp/lib/analytics.ts
+++ b/querybook/webapp/lib/analytics.ts
@@ -1,6 +1,7 @@
 import {
     AnalyticsEvent,
     ComponentType,
+    ElementType,
     EventData,
     EventType,
 } from 'const/analytics';
@@ -23,10 +24,16 @@ const track = (eventType: EventType, eventData: EventData) => {
     });
 };
 
-export const trackView = (component?: ComponentType) => {
+export const trackView = (
+    component?: ComponentType,
+    element?: ElementType,
+    aux?: object
+) => {
     const eventData = {
         path: location.pathname,
         component,
+        element,
+        aux,
     };
     track(EventType.VIEW, eventData);
 };