feat: add new track in ui

Author: longxiaofei

app/package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
+    "@segment/analytics-next": "^1.69.0",
     "autoprefixer": "^10.3.5",
     "buffer": "^6.0.3",
     "class-variance-authority": "^0.7.0",

app/src/components/codeExportModal/index.tsx

@@ -12,6 +12,7 @@ import commonStore from "@/store/common";
 import { darkModeContext } from "@/store/context";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { tracker } from "@/utils/tracker";
 
 import { usePythonCode } from "./usePythonCode";
 
@@ -108,6 +109,7 @@ const CodeExport: React.FC<ICodeExport> = observer((props) => {
                                 <Button
                                     onClick={() => {
                                         copyToCliboard(JSON.stringify(visSpec, null, 2));
+                                        tracker.track("click", {"entity": "copy_code_button"});
                                     }}
                                 >
                                     Copy to Clipboard

app/src/components/uploadChartModal/index.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import type { IGWHandler } from "@kanaries/graphic-walker/interfaces";
 import type { VizSpecStore } from '@kanaries/graphic-walker/store/visualSpecStore'
 import { chartToWorkflow } from "@kanaries/graphic-walker"
+import { tracker } from "@/utils/tracker";
 
 import communicationStore from "../../store/communication";
 import commonStore from "../../store/common";
@@ -86,6 +87,7 @@ const UploadChartModal: React.FC<IUploadChartModal> = observer((props) => {
     const onClick = async () => {
         if (uploading) return;
         setUploading(true);
+        tracker.track("click", {"entity": "upload_chart_button"});
 
         const visSpec = props.storeRef.current?.exportCode()!;
         try {

app/src/components/uploadSpecModal/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import type { VizSpecStore } from '@kanaries/graphic-walker/store/visualSpecStore'
 import { chartToWorkflow } from "@kanaries/graphic-walker/utils/workflow";
+import { tracker } from "@/utils/tracker";
 
 import communicationStore from "../../store/communication";
 import commonStore from "../../store/common";
@@ -43,6 +44,7 @@ const UploadSpecModal: React.FC<IUploadSpecModal> = observer((props) => {
 
     const onClick = async () => {
         if (uploading) return;
+        tracker.track("click", {"entity": "upload_spec_to_cloud_button"});
         setUploading(true);
 
         try {
@@ -66,6 +68,7 @@ const UploadSpecModal: React.FC<IUploadSpecModal> = observer((props) => {
     }
 
     const saveSpecToLocal = () => {
+        tracker.track("click", {"entity": "save_spec_to_local_file_button"});
         const visSpec = props.storeRef.current?.exportCode();
         const configObj = {
             config: visSpec,
@@ -96,7 +99,10 @@ const UploadSpecModal: React.FC<IUploadSpecModal> = observer((props) => {
             <div className="grid h-full grid-rows-2 gap-6 lg:grid-cols-2 lg:grid-rows-1">
                 <button
                     className={"flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent"}
-                    onClick={() => {setContentType("upload")}}
+                    onClick={() => {
+                        setContentType("upload");
+                        tracker.track("click", {"entity": "select_upload_spec_to_cloud_button"});
+                    }}
                 >
                     <div className="flex items-center justify-center h-[160px] w-full">
                         <span className="font-semibold">upload as cloud file</span>

app/src/index.tsx

@@ -15,7 +15,7 @@ import { loadDataSource, postDataService, finishDataService, getDatasFromKernelB
 import commonStore from "./store/common";
 import { initJupyterCommunication, initHttpCommunication } from "./utils/communication";
 import communicationStore from "./store/communication"
-import { setConfig, checkUploadPrivacy } from './utils/userConfig';
+import { setConfig } from './utils/userConfig';
 import CodeExportModal from './components/codeExportModal';
 import type { IPreviewProps, IChartPreviewProps } from './components/preview';
 import { Preview, ChartPreview } from './components/preview';
@@ -26,6 +26,7 @@ import { getSaveTool, hidePreview } from './tools/saveTool';
 import { getExportTool } from './tools/exportTool';
 import { getExportDataframeTool } from './tools/exportDataframe';
 import { formatExportedChartDatas } from "./utils/save";
+import { tracker } from "@/utils/tracker";
 import Notification from "./notify"
 import initDslParser from "@kanaries/gw-dsl-parser";
 import {
@@ -165,7 +166,11 @@ const ExploreApp: React.FC<IAppProps & {initChartFlag: boolean}> = (props) => {
 
     useEffect(() => {
         commonStore.setShowCloudTool(props.showCloudTool);
-        if (userConfig) setConfig(userConfig);
+        tracker.setUserId(props.hashcode ?? "");
+        if (userConfig) {
+            setConfig(userConfig);
+            tracker.setOpen(userConfig.privacy === "events");
+        };
     }, []);
 
     useEffect(() => {

app/src/tools/exportDataframe.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import communicationStore from "../store/communication"
 import commonStore from '../store/common';
+import { tracker } from "@/utils/tracker";
 
 import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
 import { Loader2 } from "lucide-react"
@@ -37,6 +38,8 @@ export function getExportDataframeTool(
     const onClick = async () => {
         if (exporting) return;
         setExporting(true);
+        tracker.track("click", {"entity": "export_dataframe_icon"});
+
         try {
             if (props.parseDslType === "server") {
                 await communicationStore.comm?.sendMsg("export_dataframe_by_payload", {

app/src/tools/exportTool.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { tracker } from "@/utils/tracker";
 import { CodeBracketSquareIcon } from '@heroicons/react/24/outline';
 
 import type { ToolbarButtonItem } from "@kanaries/graphic-walker/components/toolbar/toolbar-button"
@@ -8,10 +9,14 @@ import type { ToolbarButtonItem } from "@kanaries/graphic-walker/components/tool
 export function getExportTool(
     setExportOpen: React.Dispatch<React.SetStateAction<boolean>>
 ) : ToolbarButtonItem {
+    const onClick = () => {
+        setExportOpen(true);
+        tracker.track("click", {"entity": "export_code_icon"});
+    }
     return {
         key: "export_pygwalker_code",
         label: "export_code",
         icon: (iconProps?: any) => <CodeBracketSquareIcon {...iconProps} />,
-        onClick: () => { setExportOpen(true); }
+        onClick
     }
 }

app/src/tools/loginTool.tsx

@@ -3,6 +3,7 @@ import communicationStore from "../store/communication"
 import commonStore from '../store/common';
 import { formatExportedChartDatas } from "../utils/save"
 import { checkUploadPrivacy } from '../utils/userConfig';
+import { tracker } from "@/utils/tracker";
 
 import { chartToWorkflow } from "@kanaries/graphic-walker"
 import { DocumentTextIcon } from '@heroicons/react/24/outline';
@@ -60,9 +61,10 @@ export function getSaveTool(
         }, 500);
     }
 
-    const onClick = async () => {
+    const onClick = async (where: string) => {
         if (saving) return;
         setSaving(true);
+        tracker.track("click", {"entity": `save_${where}`, "spec_type": props.specType})
 
         // if exportChart is undefined, it means that the chart is not reload, so we think dont need to save.
         if (gwRef.current?.exportChart === undefined) {
@@ -109,14 +111,19 @@ export function getSaveTool(
         }
     }
 
+    const onClickUpload = () => {
+        commonStore.setUploadChartModalOpen(true);
+        tracker.track("click", {"entity": "save_icon_form_upload", "spec_type": props.specType});
+    }
+
     useEffect(() => {
         let locker = false;
         document.addEventListener("keydown", (event) => {
             if ((event.metaKey || event.ctrlKey) && event.key === 's') {
                 event.preventDefault();
                 if (locker) return;
                 locker = true;
-                onClick().then(() => {
+                onClick("from_keyboard").then(() => {
                     locker = false;
                 });
             }
@@ -132,16 +139,16 @@ export function getSaveTool(
         },
         form: (
             <div className='flex flex-col'>
-                <Button variant="ghost" aria-label="save spec" onClick={onClick}>
+                <Button variant="ghost" aria-label="save spec" onClick={() => onClick("icon_form_save")}>
                     save spec
                 </Button>
                 {showUploadButton && (
-                    <Button variant="ghost" aria-label="upload chart" onClick={() => {commonStore.setUploadChartModalOpen(true)}}>
+                    <Button variant="ghost" aria-label="upload chart" onClick={onClickUpload}>
                         upload chart
                     </Button>
                 )}
             </div>
         ),
-        onClick: onClick,
+        onClick: () => onClick("icon"),
     }
 }

app/src/tools/saveTool.tsx

@@ -0,0 +1,33 @@
+import { AnalyticsBrowser } from '@segment/analytics-next'
+
+
+const initTracker = () => {
+    var userId = "";
+    var open = false;
+    var analytics;
+
+    const setUserId = (id: string) => {
+        userId = id;
+    };
+
+    const setOpen = (value: boolean) => {
+        if (value) {
+            analytics = AnalyticsBrowser.load({ writeKey: '9gxTNvl6Pl4WaZ5aymeHEBqNN8K4Op0U' })
+        }
+        open = value;
+    }
+
+    const track = (eventName: string, data: any) => {
+        if (open) {
+            analytics.track(eventName, {...data, userId})
+        }
+    };
+
+    return {
+        setUserId,
+        setOpen,
+        track
+    }
+}
+
+export const tracker = initTracker();