feat: Add tracking for explore actions and user interactions

js/src/components/lineage/LineageViewContextMenu.tsx

@@ -4,6 +4,13 @@ import { BiArrowFromBottom, BiArrowToBottom } from "react-icons/bi";
 import { FaRegDotCircle } from "react-icons/fa";
 import SetupConnectionPopover from "@/components/app/SetupConnectionPopover";
 import { SubmitRunTrackProps } from "@/lib/api/runs";
+import {
+  EXPLORE_ACTION,
+  EXPLORE_SOURCE,
+  LINEAGE_SELECTION_ACTION,
+  trackExploreAction,
+  trackLineageSelection,
+} from "@/lib/api/track";
 import { formatSelectColumns } from "@/lib/formatSelect";
 import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
 import { useRecceActionContext } from "@/lib/hooks/RecceActionContext";
@@ -278,6 +285,13 @@ export const ModelNodeContextMenu = ({
       itemIcon: <Icon as={rowCountAndRowCountRun.icon} />,
       isDisabled: isQueryDisabled,
       action: () => {
+        trackExploreAction({
+          action: singleEnv
+            ? EXPLORE_ACTION.ROW_COUNT
+            : EXPLORE_ACTION.ROW_COUNT_DIFF,
+          source: EXPLORE_SOURCE.LINEAGE_VIEW_CONTEXT_MENU,
+          node_count: 1,
+        });
         runAction(
           singleEnv ? "row_count" : "row_count_diff",
           { node_names: [modelNode.name] },
@@ -296,6 +310,13 @@ export const ModelNodeContextMenu = ({
       isDisabled: isQueryDisabled,
       action: () => {
         const columns = Array.from(getNodeColumnSet(node.id));
+        trackExploreAction({
+          action: singleEnv
+            ? EXPLORE_ACTION.PROFILE
+            : EXPLORE_ACTION.PROFILE_DIFF,
+          source: EXPLORE_SOURCE.LINEAGE_VIEW_CONTEXT_MENU,
+          node_count: 1,
+        });
         runAction(
           singleEnv ? "profile" : "profile_diff",
           { model: modelNode.name, columns },
@@ -313,6 +334,11 @@ export const ModelNodeContextMenu = ({
         isDisabled: isQueryDisabled,
         action: () => {
           const columns = Array.from(getNodeColumnSet(node.id));
+          trackExploreAction({
+            action: EXPLORE_ACTION.VALUE_DIFF,
+            source: EXPLORE_SOURCE.LINEAGE_VIEW_CONTEXT_MENU,
+            node_count: 1,
+          });
           runAction(
             "value_diff",
             { model: modelNode.name, columns },
@@ -334,27 +360,39 @@ export const ModelNodeContextMenu = ({
       label: "Select Parent Nodes",
       itemIcon: <BiArrowFromBottom />,
       action: () => {
+        trackLineageSelection({
+          action: LINEAGE_SELECTION_ACTION.SELECT_PARENT_NODES,
+        });
         selectParentNodes(node.id, 1);
       },
     });
     menuItems.push({
       label: "Select Child Nodes",
       itemIcon: <BiArrowToBottom />,
       action: () => {
+        trackLineageSelection({
+          action: LINEAGE_SELECTION_ACTION.SELECT_CHILD_NODES,
+        });
         selectChildNodes(node.id, 1);
       },
     });
     menuItems.push({
       label: "Select All Upstream Nodes",
       itemIcon: <BiArrowFromBottom />,
       action: () => {
+        trackLineageSelection({
+          action: LINEAGE_SELECTION_ACTION.SELECT_ALL_UPSTREAM,
+        });
         selectParentNodes(node.id);
       },
     });
     menuItems.push({
       label: "Select All Downstream Nodes",
       itemIcon: <BiArrowToBottom />,
       action: () => {
+        trackLineageSelection({
+          action: LINEAGE_SELECTION_ACTION.SELECT_ALL_DOWNSTREAM,
+        });
         selectChildNodes(node.id);
       },
     });
@@ -400,6 +438,11 @@ export const ColumnNodeContextMenu = ({
   };
 
   const handleProfileDiff = () => {
+    trackExploreAction({
+      action: EXPLORE_ACTION.PROFILE_DIFF,
+      source: EXPLORE_SOURCE.LINEAGE_VIEW_CONTEXT_MENU,
+      node_count: 1,
+    });
     runAction(
       "profile_diff",
       { model: modelNode.name, columns: [column] },
@@ -408,6 +451,11 @@ export const ColumnNodeContextMenu = ({
   };
 
   const handleHistogramDiff = () => {
+    trackExploreAction({
+      action: EXPLORE_ACTION.HISTOGRAM_DIFF,
+      source: EXPLORE_SOURCE.LINEAGE_VIEW_CONTEXT_MENU,
+      node_count: 1,
+    });
     runAction(
       "histogram_diff",
       { model: modelNode.name, column_name: column, column_type: columnType },
@@ -416,6 +464,11 @@ export const ColumnNodeContextMenu = ({
   };
 
   const handleTopkDiff = () => {
+    trackExploreAction({
+      action: EXPLORE_ACTION.TOP_K_DIFF,
+      source: EXPLORE_SOURCE.LINEAGE_VIEW_CONTEXT_MENU,
+      node_count: 1,
+    });
     runAction(
       "top_k_diff",
       { model: modelNode.name, column_name: column, k: 50 },
@@ -424,6 +477,11 @@ export const ColumnNodeContextMenu = ({
   };
 
   const handleValueDiff = () => {
+    trackExploreAction({
+      action: EXPLORE_ACTION.VALUE_DIFF,
+      source: EXPLORE_SOURCE.LINEAGE_VIEW_CONTEXT_MENU,
+      node_count: 1,
+    });
     runAction(
       "value_diff",
       { model: modelNode.name, columns: [column] },

js/src/components/lineage/NodeView.tsx

@@ -19,7 +19,12 @@ import SetupConnectionPopover from "@/components/app/SetupConnectionPopover";
 import { Tooltip } from "@/components/ui/tooltip";
 import { DisableTooltipMessages } from "@/constants/tooltipMessage";
 import { createSchemaDiffCheck } from "@/lib/api/schemacheck";
-import { trackPreviewChange } from "@/lib/api/track";
+import {
+  EXPLORE_ACTION,
+  EXPLORE_SOURCE,
+  trackExploreAction,
+  trackPreviewChange,
+} from "@/lib/api/track";
 import { formatSelectColumns } from "@/lib/formatSelect";
 import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
 import { useRecceActionContext } from "@/lib/hooks/RecceActionContext";
@@ -63,13 +68,23 @@ export function NodeView({ node, onCloseNode }: NodeViewProps) {
   const { isActionAvailable } = useLineageGraphContext();
 
   const refetchRowCount = () => {
+    trackExploreAction({
+      action: EXPLORE_ACTION.ROW_COUNT,
+      source: EXPLORE_SOURCE.SCHEMA_ROW_COUNT_BUTTON,
+      node_count: 1,
+    });
     runAction(
       "row_count",
       { node_names: [node.data.name] },
       { showForm: false, showLast: false },
     );
   };
   const refetchRowCountDiff = () => {
+    trackExploreAction({
+      action: EXPLORE_ACTION.ROW_COUNT_DIFF,
+      source: EXPLORE_SOURCE.SCHEMA_ROW_COUNT_BUTTON,
+      node_count: 1,
+    });
     runAction(
       "row_count_diff",
       { node_names: [node.data.name] },
@@ -257,6 +272,11 @@ function SingleEnvironmentMenuButton({
                   fontSize="14px"
                   disabled={isAddedOrRemoved}
                   onClick={() => {
+                    trackExploreAction({
+                      action: EXPLORE_ACTION.PROFILE,
+                      source: EXPLORE_SOURCE.NODE_SIDEBAR_SINGLE_ENV,
+                      node_count: 1,
+                    });
                     runAction(
                       "profile",
                       {
@@ -435,6 +455,11 @@ function ExploreChangeMenuButton({
                       isAddedOrRemoved || featureToggles.disableDatabaseQuery
                     }
                     onClick={() => {
+                      trackExploreAction({
+                        action: EXPLORE_ACTION.PROFILE_DIFF,
+                        source: EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
+                        node_count: 1,
+                      });
                       runAction(
                         "profile_diff",
                         {
@@ -457,6 +482,11 @@ function ExploreChangeMenuButton({
                       isAddedOrRemoved || featureToggles.disableDatabaseQuery
                     }
                     onClick={() => {
+                      trackExploreAction({
+                        action: EXPLORE_ACTION.VALUE_DIFF,
+                        source: EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
+                        node_count: 1,
+                      });
                       runAction(
                         "value_diff",
                         {
@@ -478,6 +508,11 @@ function ExploreChangeMenuButton({
                       isAddedOrRemoved || featureToggles.disableDatabaseQuery
                     }
                     onClick={() => {
+                      trackExploreAction({
+                        action: EXPLORE_ACTION.TOP_K_DIFF,
+                        source: EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
+                        node_count: 1,
+                      });
                       runAction(
                         "top_k_diff",
                         { model: node.data.name, column_name: "", k: 50 },
@@ -497,6 +532,11 @@ function ExploreChangeMenuButton({
                       isAddedOrRemoved || featureToggles.disableDatabaseQuery
                     }
                     onClick={() => {
+                      trackExploreAction({
+                        action: EXPLORE_ACTION.HISTOGRAM_DIFF,
+                        source: EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
+                        node_count: 1,
+                      });
                       runAction(
                         "histogram_diff",
                         {

js/src/components/lineage/useMultiNodesAction.ts

@@ -4,6 +4,11 @@ import { createLineageDiffCheck } from "@/lib/api/lineagecheck";
 import { RowCountDiffParams, RowCountParams } from "@/lib/api/rowcount";
 import { cancelRun, submitRun, waitRun } from "@/lib/api/runs";
 import { createSchemaDiffCheck } from "@/lib/api/schemacheck";
+import {
+  EXPLORE_ACTION,
+  EXPLORE_SOURCE,
+  trackExploreAction,
+} from "@/lib/api/track";
 import { ValueDiffParams } from "@/lib/api/valuediff";
 import { useRecceActionContext } from "@/lib/hooks/RecceActionContext";
 import { ActionState } from "./LineageViewContext";
@@ -196,6 +201,12 @@ export const useMultiNodesAction = (
   };
 
   const runRowCount = async () => {
+    trackExploreAction({
+      action: EXPLORE_ACTION.ROW_COUNT,
+      source: EXPLORE_SOURCE.LINEAGE_VIEW_TOP_BAR,
+      node_count: nodes.length,
+    });
+
     const nodeNames = [];
     for (const node of nodes) {
       if (node.data.resourceType !== "model") {
@@ -225,6 +236,12 @@ export const useMultiNodesAction = (
   };
 
   const runRowCountDiff = async () => {
+    trackExploreAction({
+      action: EXPLORE_ACTION.ROW_COUNT_DIFF,
+      source: EXPLORE_SOURCE.LINEAGE_VIEW_TOP_BAR,
+      node_count: nodes.length,
+    });
+
     const nodeNames = [];
     for (const node of nodes) {
       if (node.data.resourceType !== "model") {
@@ -254,6 +271,12 @@ export const useMultiNodesAction = (
   };
 
   const runValueDiff = async () => {
+    trackExploreAction({
+      action: EXPLORE_ACTION.VALUE_DIFF,
+      source: EXPLORE_SOURCE.LINEAGE_VIEW_TOP_BAR,
+      node_count: nodes.length,
+    });
+
     await submitRunsPerNodes("value_diff", (node) => {
       const primaryKey = node.data.data.current?.primary_key;
       if (!primaryKey) {

js/src/components/lineage/useValueDiffAlertDialog.tsx

@@ -8,6 +8,11 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import React, { useCallback, useRef, useState } from "react";
+import {
+  EXPLORE_ACTION,
+  EXPLORE_FORM_EVENT,
+  trackExploreActionForm,
+} from "@/lib/api/track";
 
 function useValueDiffAlertDialog() {
   const { open, onOpen, onClose } = useDisclosure();
@@ -28,11 +33,19 @@ function useValueDiffAlertDialog() {
   );
 
   const handleConfirm = () => {
+    trackExploreActionForm({
+      action: EXPLORE_ACTION.VALUE_DIFF,
+      event: EXPLORE_FORM_EVENT.EXECUTE,
+    });
     resolvePromise?.(true);
     onClose();
   };
 
   const handleCancel = () => {
+    trackExploreActionForm({
+      action: EXPLORE_ACTION.VALUE_DIFF,
+      event: EXPLORE_FORM_EVENT.CANCEL,
+    });
     resolvePromise?.(false);
     onClose();
   };

js/src/components/run/RunModal.tsx

@@ -10,9 +10,14 @@ import {
   Popover,
   Portal,
 } from "@chakra-ui/react";
-import { ComponentType, useState } from "react";
+import { ComponentType, useRef, useState } from "react";
 import { IconInfo } from "@/components/icons";
 import { RunFormParamTypes, RunType } from "@/components/run/registry";
+import {
+  EXPLORE_FORM_EVENT,
+  isExploreAction,
+  trackExploreActionForm,
+} from "@/lib/api/track";
 import { Run } from "@/lib/api/types";
 import { RunFormProps } from "./types";
 
@@ -53,11 +58,23 @@ export const RunModal = ({
   const [hovered, setHovered] = useState(false);
   const [isReadyToExecute, setIsReadyToExecute] = useState(false);
   const documentationUrl = getDocumentationUrl(type);
+  const executeClicked = useRef(false);
+
+  const handleClose = () => {
+    if (!executeClicked.current && isExploreAction(type)) {
+      trackExploreActionForm({
+        action: type,
+        event: EXPLORE_FORM_EVENT.CANCEL,
+      });
+    }
+    executeClicked.current = false; // Reset for next open
+    onClose();
+  };
 
   return (
     <Dialog.Root
       open={isOpen}
-      onOpenChange={onClose}
+      onOpenChange={handleClose}
       size="xl"
       scrollBehavior="inside"
     >
@@ -143,6 +160,13 @@ export const RunModal = ({
                   disabled={!isReadyToExecute}
                   colorPalette="blue"
                   onClick={() => {
+                    executeClicked.current = true;
+                    if (isExploreAction(type)) {
+                      trackExploreActionForm({
+                        action: type,
+                        event: EXPLORE_FORM_EVENT.EXECUTE,
+                      });
+                    }
                     onExecute(type, params as RunFormParamTypes);
                   }}
                 >