diff --git a/js/src/components/lineage/NodeView.tsx b/js/src/components/lineage/NodeView.tsx index 4ccbd74a..45b1f9ce 100644 --- a/js/src/components/lineage/NodeView.tsx +++ b/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) diff --git a/js/src/components/lineage/PreviewChangeView.tsx b/js/src/components/lineage/PreviewChangeView.tsx index f8209af4..4f790c12 100644 --- a/js/src/components/lineage/PreviewChangeView.tsx +++ b/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 }); }} > {/* */} diff --git a/js/src/lib/api/track.ts b/js/src/lib/api/track.ts index 5e5d0cea..b8d07fe7 100644 --- a/js/src/lib/api/track.ts +++ b/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); +} diff --git a/js/src/lib/hooks/useFeedbackCollectionToast.tsx b/js/src/lib/hooks/useFeedbackCollectionToast.tsx index 2d0578e3..4ab3ea02 100644 --- a/js/src/lib/hooks/useFeedbackCollectionToast.tsx +++ b/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 && ( - + {externalLinkText} )} @@ -113,6 +120,9 @@ export function useFeedbackCollectionToast(options: { }} externalLink={externalLink} externalLinkText={externalLinkText} + onClickLink={() => { + onFeedbackSubmit("link"); + }} />