NXT-4374: setup analytics service

NXT-4374 (Instrumentation abstraction in modern UI)

Author: hriverahdez

org.knime.ui.js/package.json

@@ -40,7 +40,7 @@
     "@fontsource/roboto-condensed": "5.x",
     "@fontsource/roboto-mono": "5.x",
     "@knime/components": "1.45.0",
-    "@knime/hub-features": "^1.17.0",
+    "@knime/hub-features": "^1.18.1",
     "@knime/kds-components": "^0.6.1",
     "@knime/kds-styles": "^0.6.1",
     "@knime/knime-ui-table": "0.6.0",

org.knime.ui.js/pnpm-lock.yaml

@@ -0,0 +1,38 @@
+import { embeddingSDK } from "@knime/hub-features";
+
+import { canvasRendererUtils } from "@/components/workflowEditor/util/canvasRenderer";
+
+import type { AnalyticsService, TrackFn } from "./types";
+
+const noop = (...args: any[]) => {
+  if (import.meta.env.DEV) {
+    consola.trace("Analytics::DEV", ...args);
+  }
+};
+
+const noopService: AnalyticsService = { track: noop };
+
+let __analyticsService: AnalyticsService = noopService;
+
+const track: TrackFn = (eventCategory, eventData) => {
+  if (canvasRendererUtils.isSVGRenderer()) {
+    return;
+  }
+
+  const { via, ...otherData } = eventData;
+
+  embeddingSDK.guest.dispatchGenericEventToHost({
+    kind: "analytics",
+    payload: {
+      category: eventCategory,
+      name: via,
+      data: otherData,
+    },
+  });
+};
+
+export const setupAnalyticsService = () => {
+  __analyticsService = { track };
+};
+
+export const useAnalyticsService = () => ({ track: __analyticsService.track });

org.knime.ui.js/src/analytics/analytics-service.ts

@@ -0,0 +1 @@
+export * from "./analytics-service";

org.knime.ui.js/src/analytics/index.ts

@@ -0,0 +1,36 @@
+export type AnalyticEvents = {
+  node_created: {
+    via:
+      | "noderepo_dragdrop_"
+      | "noderepo_doubleclick_"
+      | "explorer_dragdrop_"
+      | "quickactionmenu_click_";
+    nodeId: string;
+    nodeType: string;
+    nodeFactoryId: string;
+  };
+
+  quickactionmenu_opened: {
+    via:
+      | "port_dragdrop_fwd"
+      | "port_dragdrop_bwd"
+      | "keyboard_shortcut_"
+      | "canvas_doubleclick_"
+      | "canvas_ctxmenu_quickaddnode";
+    nodeId?: string;
+    nodeType?: string;
+    nodePortIndex?: number;
+    connectionType?: string;
+  };
+};
+
+export type AnalyticEventNames = keyof AnalyticEvents;
+
+export type TrackFn = <K extends AnalyticEventNames>(
+  type: K,
+  payload: AnalyticEvents[K],
+) => void;
+
+export interface AnalyticsService {
+  track: TrackFn;
+}

org.knime.ui.js/src/analytics/types.ts

@@ -4,6 +4,7 @@ import { storeToRefs } from "pinia";
 
 import { SearchInput } from "@knime/components";
 
+import { useAnalyticsService } from "@/analytics";
 import type { AvailablePortTypes, NodeRelation } from "@/api/custom-types";
 import {
   AddNodeCommand,
@@ -129,7 +130,7 @@ const addNode = async (nodeTemplate: NodeTemplateWithExtendedPorts) => {
 
   // add node
   const { x, y } = canvasPosition.value;
-  await nodeInteractionsStore.addNativeNode({
+  const { newNodeId } = await nodeInteractionsStore.addNativeNode({
     position: {
       x: x - offsetX,
       y: y - offsetY,
@@ -143,6 +144,17 @@ const addNode = async (nodeTemplate: NodeTemplateWithExtendedPorts) => {
   });
 
   props.quickActionContext.closeMenu();
+
+  const node = useNodeInteractionsStore().getNodeById(newNodeId ?? "");
+
+  if (node) {
+    useAnalyticsService().track("node_created", {
+      via: "quickactionmenu_click_",
+      nodeId: node.id,
+      nodeType: node.kind,
+      nodeFactoryId: nodeFactory.className,
+    });
+  }
 };
 
 const searchEnterKey = () => {

org.knime.ui.js/src/components/nodeSearch/quickAdd/QuickAddNodeMenu.vue

@@ -2,8 +2,10 @@
 import { ref, useTemplateRef } from "vue";
 import { storeToRefs } from "pinia";
 
+import { useAnalyticsService } from "@/analytics";
 import { usePanelStore } from "@/store/panel";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import { useNodeInteractionsStore } from "@/store/workflow/nodeInteractions";
 import type {
   ComponentNodeTemplateWithExtendedPorts,
   NodeTemplateWithExtendedPorts,
@@ -95,11 +97,25 @@ const onDragEnd = (event: DragEvent) => {
   }
 };
 
-const autoAddNodeFromTemplate = (
+const autoAddNodeFromTemplate = async (
   nodeTemplate: NodeTemplateWithExtendedPorts,
 ) => {
   if (nodeTemplate.nodeFactory) {
-    addNodeWithAutoPositioning(nodeTemplate.nodeFactory);
+    const { newNodeId } = await addNodeWithAutoPositioning(
+      nodeTemplate.nodeFactory,
+    );
+
+    const node = useNodeInteractionsStore().getNodeById(newNodeId ?? "");
+
+    if (node) {
+      useAnalyticsService().track("node_created", {
+        via: "noderepo_doubleclick_",
+        nodeId: node.id,
+        nodeType: node.kind,
+        nodeFactoryId: nodeTemplate.nodeFactory.className,
+      });
+    }
+
     return;
   }
 

org.knime.ui.js/src/components/nodeTemplates/NodeTemplate/DraggableNodeTemplate.vue

@@ -1,5 +1,6 @@
 import { storeToRefs } from "pinia";
 
+import { useAnalyticsService } from "@/analytics";
 import type { NodeFactoryKey, XY } from "@/api/gateway-api/generated-api";
 import { useNodeReplacementOrInsertion } from "@/components/workflowEditor/WebGLKanvas/common/useNodeReplacementOrInsertion";
 import { useDragNearEdgePanning } from "@/components/workflowEditor/WebGLKanvas/kanvas/useDragNearEdgePanning";
@@ -215,12 +216,26 @@ export const useDragNodeIntoCanvas = () => {
       return;
     }
 
-    const addNodeAction = () => {
+    const addNodeAction = async () => {
       if (eventData.type === "node") {
-        return nodeInteractionsStore.addNativeNode({
+        const res = await nodeInteractionsStore.addNativeNode({
           position: dropPosition,
           nodeFactory: eventData.payload.nodeFactory,
         });
+
+        const node = nodeInteractionsStore.getNodeById(res.newNodeId ?? "");
+
+        if (node && res.newNodeId) {
+          const { className } = nodeInteractionsStore.getNodeFactory(node.id);
+          useAnalyticsService().track("node_created", {
+            via: "noderepo_dragdrop_",
+            nodeId: node.id,
+            nodeType: node.kind,
+            nodeFactoryId: className,
+          });
+        }
+
+        return res;
       }
 
       return nodeInteractionsStore.addComponentNode({

org.knime.ui.js/src/components/nodeTemplates/useDragNodeIntoCanvas.ts

@@ -5,7 +5,8 @@ import { useRoute } from "vue-router";
 
 import type { FileExplorerItem } from "@knime/components";
 
-import { SpaceItem } from "@/api/gateway-api/generated-api";
+import { useAnalyticsService } from "@/analytics";
+import { Node, SpaceItem } from "@/api/gateway-api/generated-api";
 import { APP_ROUTES } from "@/router/appRoutes";
 import { useApplicationStore } from "@/store/application/application";
 import { useCurrentCanvasStore } from "@/store/canvas/useCurrentCanvasStore";
@@ -163,7 +164,7 @@ export const useCustomDragPreview = (options: UseCustomDragPreviewOptions) => {
       ]);
       const position = { x, y };
 
-      const addNode = () => {
+      const addNode = async () => {
         const spaceItemReference = {
           providerId: activeSpacePath.value.spaceProviderId,
           spaceId: activeSpacePath.value.spaceId,
@@ -177,11 +178,24 @@ export const useCustomDragPreview = (options: UseCustomDragPreviewOptions) => {
             componentName: sourceItem.name,
           });
         } else {
-          return nodeInteractionStore.addNativeNode({
+          const { newNodeId } = await nodeInteractionStore.addNativeNode({
             position,
             spaceItemReference,
             nodeFactory: { className: nodeTemplateId },
           });
+
+          const node = nodeInteractionStore.getNodeById(newNodeId ?? "");
+
+          if (node) {
+            useAnalyticsService().track("node_created", {
+              via: "explorer_dragdrop_",
+              nodeId: node.id,
+              nodeFactoryId: nodeTemplateId,
+              nodeType: Node.KindEnum.Node,
+            });
+          }
+
+          return { newNodeId };
         }
       };
 

org.knime.ui.js/src/components/spaces/useCustomDragPreview.ts

@@ -11,6 +11,7 @@ import { storeToRefs } from "pinia";
 
 import { sleep } from "@knime/utils";
 
+import { useAnalyticsService } from "@/analytics";
 import { useDragNodeIntoCanvas } from "@/components/nodeTemplates";
 import { useAiQuickActionsStore } from "@/store/ai/aiQuickActions";
 import { QuickActionId } from "@/store/ai/types";
@@ -69,6 +70,10 @@ const openQuickActionMenu = (event: PointerEvent) => {
   useCanvasAnchoredComponentsStore().openQuickActionMenu({
     props: { position: { x, y } },
   });
+
+  useAnalyticsService().track("quickactionmenu_opened", {
+    via: "canvas_doubleclick_",
+  });
 };
 
 const { isPointerDownDoubleClick } = usePointerDownDoubleClick({