[Feature] Add telemetry for preview change

js/src/components/lineage/NodeView.tsx

@@ -46,6 +46,7 @@ import { is } from "date-fns/locale";
 import { run } from "node:test";
 import { DisableTooltipMessages } from "@/constants/tooltipMessage";
 import { PreviewChangeView } from "./PreviewChangeView";
+import { trackPreviewChange } from "@/lib/api/track";
 
 interface NodeViewProps {
   node: LineageGraphNode;
@@ -154,6 +155,7 @@ export function NodeView({ node, onCloseNode }: NodeViewProps) {
                     );
                   }
                   onPreviewChangeOpen();
+                  trackPreviewChange({ action: "explore", node: node.name });
                 }}
               >
                 Preview Change (Experiment)

js/src/components/lineage/PreviewChangeView.tsx

@@ -33,6 +33,10 @@ import { useFeedbackCollectionToast } from "@/lib/hooks/useFeedbackCollectionToa
 import { VscFeedback } from "react-icons/vsc";
 import { localStorageKeys } from "@/lib/api/localStorageKeys";
 import { useRecceQueryContext } from "@/lib/hooks/RecceQueryContext";
+import {
+  trackPreviewChange,
+  trackPreviewChangeFeedback,
+} from "@/lib/api/track";
 
 interface PreviewChangeViewProps {
   isOpen: boolean;
@@ -148,7 +152,6 @@ export function PreviewChangeView({
   const queryFn = async () => {
     const sqlTemplate = modifiedCode;
     const runFn = submitQueryDiff;
-    console.log(primaryKeys);
     const params: QueryParams = {
       current_model: current?.name || "",
       primary_keys: primaryKeys,
@@ -164,19 +167,39 @@ export function PreviewChangeView({
   };
   const { mutate: runQuery, isPending } = useMutation({
     mutationFn: queryFn,
+    onSuccess(data, variables) {
+      if (data.error) {
+        trackPreviewChange({
+          action: "run",
+          node: current?.name,
+          status: "failure",
+        });
+      } else {
+        trackPreviewChange({
+          action: "run",
+          node: current?.name,
+          status: "success",
+        });
+      }
+    },
   });
   const { feedbackToast, closeToast } = useFeedbackCollectionToast({
     feedbackId: localStorageKeys.previewChangeFeedbackID,
     description: "Enjoy preview change?",
+
     onFeedbackSubmit: (feedback: string) => {
       switch (feedback) {
         case "like":
-          console.log("Like");
-          // TODO: track feedback result
+          trackPreviewChangeFeedback({ feedback: "like", node: current?.name });
           break;
         case "dislike":
-          console.log("Dislike");
-          // TODO: track feedback result
+          trackPreviewChangeFeedback({
+            feedback: "dislike",
+            node: current?.name,
+          });
+          break;
+        case "link":
+          trackPreviewChangeFeedback({ feedback: "form", node: current?.name });
           break;
         default:
           console.log("Not support feedback type");
@@ -196,6 +219,7 @@ export function PreviewChangeView({
         onRunResultClose();
         clearRunResult();
         closeToast();
+        trackPreviewChange({ action: "close", node: current?.name });
       }}
     >
       {/* <ModalOverlay /> */}

js/src/lib/api/track.ts

@@ -39,3 +39,22 @@ interface HistoryActionProps {
 export function trackHistoryAction(props: HistoryActionProps) {
   amplitude.track("[Web] history_action", props);
 }
+
+interface PreviewChangeProps {
+  action: "explore" | "run" | "close";
+  node?: string;
+  status?: "success" | "failure";
+}
+
+export function trackPreviewChange(props: PreviewChangeProps) {
+  amplitude.track("[Experiment] preview_change", props);
+}
+
+interface PreviewChangeFeedbackProps {
+  feedback: "like" | "dislike" | "form";
+  node?: string;
+}
+
+export function trackPreviewChangeFeedback(props: PreviewChangeFeedbackProps) {
+  amplitude.track("[Experiment] preview_change", props);
+}

js/src/lib/hooks/useFeedbackCollectionToast.tsx

@@ -14,12 +14,14 @@ function ReactionFeedback({
   description,
   onLike,
   onDislike,
+  onClickLink,
   externalLink,
   externalLinkText,
 }: {
   description: string;
   onLike: () => void;
   onDislike: () => void;
+  onClickLink: () => void;
   externalLink?: string;
   externalLinkText?: string;
 }) {
@@ -48,7 +50,12 @@ function ReactionFeedback({
         onClick={onDislike}
       />
       {externalLink && externalLinkText && (
-        <Link href={externalLink} isExternal textDecoration="underline">
+        <Link
+          href={externalLink}
+          isExternal
+          textDecoration="underline"
+          onClick={onClickLink}
+        >
           {externalLinkText}
         </Link>
       )}
@@ -113,6 +120,9 @@ export function useFeedbackCollectionToast(options: {
                 }}
                 externalLink={externalLink}
                 externalLinkText={externalLinkText}
+                onClickLink={() => {
+                  onFeedbackSubmit("link");
+                }}
               />
               <CloseButton onClick={onClose} />
             </HStack>