From 5af1ae048ba84a89cf086a43eab210f4a7927800 Mon Sep 17 00:00:00 2001
From: gtarpenning <griffin.tarpenning@wandb.com>
Date: Fri, 31 Jan 2025 16:04:44 -0800
Subject: [PATCH 1/2] chore(ui): add analytic event to metrics chart views

---
 .../Browse3/pages/CallsPage/CallsCharts.tsx   | 26 ++++++++++++++++++-
 .../src/integrations/analytics/userEvents.ts  | 25 ++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx
index 0519dd2161d4..ebfc4f75bc61 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx
@@ -1,7 +1,8 @@
 import {GridFilterModel, GridSortModel} from '@mui/x-data-grid-pro';
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 
 import {MOON_400} from '../../../../../../common/css/color.styles';
+import * as userEvents from '../../../../../../integrations/analytics/userEvents';
 import {IconInfo} from '../../../../../Icon';
 import {WaveLoader} from '../../../../../Loaders/WaveLoader';
 import {Tailwind} from '../../../../../Tailwind';
@@ -114,6 +115,29 @@ export const CallsCharts = ({
     columns
   );
 
+  const [callsQueryStartTime, setCallsQueryStartTime] = useState<number | null>(
+    null
+  );
+  const sentEvent = useRef(false);
+  useEffect(() => {
+    if (sentEvent.current) {
+      return;
+    }
+    if (calls.loading) {
+      const startTime = Date.now();
+      setCallsQueryStartTime(startTime);
+    } else if (!calls.loading && callsQueryStartTime !== null) {
+      const endTime = Date.now();
+      const latency = endTime - callsQueryStartTime;
+      userEvents.metricsPlotsViewed({
+        entity,
+        project,
+        latency,
+      });
+      sentEvent.current = true;
+    }
+  }, [calls.loading, callsQueryStartTime, entity, project]);
+
   const chartData = useMemo(() => {
     if (calls.loading || !calls.result || calls.result.length === 0) {
       return {latency: [], errors: [], requests: []};
diff --git a/weave-js/src/integrations/analytics/userEvents.ts b/weave-js/src/integrations/analytics/userEvents.ts
index 8655a272208b..dab079773339 100644
--- a/weave-js/src/integrations/analytics/userEvents.ts
+++ b/weave-js/src/integrations/analytics/userEvents.ts
@@ -145,3 +145,28 @@ export const callTreeCellClicked = makeTrackEvent<
     };
   }
 >('Weave call tree cell clicked');
+
+export const metricsPlotsViewed = makeTrackEvent<
+  {
+    entity: string;
+    project: string;
+    latency: number;
+  },
+  {
+    _description: `User viewed metrics plots`;
+    _location: '';
+    _motivation: 'Used for tracking metrics plots';
+    entity: {
+      description: 'Entity of call';
+      exampleValues: ['my-entity'];
+    };
+    project: {
+      description: 'Project of call';
+      exampleValues: ['my-project'];
+    };
+    latency: {
+      description: 'Latency of calls stream query (ms)';
+      exampleValues: [1000, 500];
+    };
+  }
+>('Weave metrics plots viewed');

From 301c8ee9c6ca324eb9c53f3ba7ed8199fbca5754 Mon Sep 17 00:00:00 2001
From: gtarpenning <griffin.tarpenning@wandb.com>
Date: Fri, 31 Jan 2025 17:20:14 -0800
Subject: [PATCH 2/2] review comments -- refactor

---
 .../Browse3/pages/CallsPage/CallsCharts.tsx   | 57 ++++++++++++-------
 1 file changed, 35 insertions(+), 22 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx
index ebfc4f75bc61..ab61f67b34aa 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx
@@ -115,28 +115,7 @@ export const CallsCharts = ({
     columns
   );
 
-  const [callsQueryStartTime, setCallsQueryStartTime] = useState<number | null>(
-    null
-  );
-  const sentEvent = useRef(false);
-  useEffect(() => {
-    if (sentEvent.current) {
-      return;
-    }
-    if (calls.loading) {
-      const startTime = Date.now();
-      setCallsQueryStartTime(startTime);
-    } else if (!calls.loading && callsQueryStartTime !== null) {
-      const endTime = Date.now();
-      const latency = endTime - callsQueryStartTime;
-      userEvents.metricsPlotsViewed({
-        entity,
-        project,
-        latency,
-      });
-      sentEvent.current = true;
-    }
-  }, [calls.loading, callsQueryStartTime, entity, project]);
+  useFireAnalyticsForMetricsPlotsViewed(entity, project, calls.loading);
 
   const chartData = useMemo(() => {
     if (calls.loading || !calls.result || calls.result.length === 0) {
@@ -212,3 +191,37 @@ export const CallsCharts = ({
     </Tailwind>
   );
 };
+
+/**
+ * Fires an analytics event when the metrics plots are viewed.
+ * This is used to track the usage and latency of the metrics plots.
+ * Only fires once when opened.
+ */
+const useFireAnalyticsForMetricsPlotsViewed = (
+  entity: string,
+  project: string,
+  loading: boolean
+) => {
+  const [callsQueryStartTime, setCallsQueryStartTime] = useState<number | null>(
+    null
+  );
+  const sentEvent = useRef(false);
+  useEffect(() => {
+    if (sentEvent.current) {
+      return;
+    }
+    if (loading) {
+      const startTime = Date.now();
+      setCallsQueryStartTime(startTime);
+    } else if (!loading && callsQueryStartTime !== null) {
+      const endTime = Date.now();
+      const latency = endTime - callsQueryStartTime;
+      userEvents.metricsPlotsViewed({
+        entity,
+        project,
+        latency,
+      });
+      sentEvent.current = true;
+    }
+  }, [loading, callsQueryStartTime, entity, project]);
+};