feat: add tracking and custom param label (#3902)

* add tracking and custom param label

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx

@@ -2,6 +2,7 @@ import useHandleNodeClass from "@/CustomNodes/hooks/use-handle-node-class";
 import { usePostTemplateValue } from "@/controllers/API/queries/nodes/use-post-template-value";
 import {
   CustomParameterComponent,
+  CustomParameterLabel,
   getCustomParameterTitle,
 } from "@/customization/components/custom-parameter";
 import { useEffect, useRef } from "react";
@@ -104,42 +105,50 @@ export default function NodeInputField({
     >
       {displayHandle && Handle}
       <div className="flex w-full flex-col gap-2">
-        <div className="flex w-full items-center truncate text-sm">
-          {proxy ? (
-            <ShadTooltip content={<span>{proxy.id}</span>}>
-              {
-                <span>
-                  {getCustomParameterTitle({ title, nodeId: data.id })}
-                </span>
-              }
-            </ShadTooltip>
-          ) : (
-            <div className="flex gap-2">
-              <span>
+        <div className="flex w-full items-center justify-between text-sm">
+          <div className="flex w-full items-center truncate">
+            {proxy ? (
+              <ShadTooltip content={<span>{proxy.id}</span>}>
                 {
                   <span>
                     {getCustomParameterTitle({ title, nodeId: data.id })}
                   </span>
                 }
-              </span>
-            </div>
-          )}
-          <span className={(required ? "ml-2 " : "") + "text-status-red"}>
-            {required ? "*" : ""}
-          </span>
-          <div className="">
-            {info !== "" && (
-              <ShadTooltip content={<NodeInputInfo info={info} />}>
-                {/* put div to avoid bug that does not display tooltip */}
-                <div className="cursor-help">
-                  <IconComponent
-                    name="Info"
-                    className="relative bottom-px ml-1.5 h-3 w-4"
-                  />
-                </div>
               </ShadTooltip>
+            ) : (
+              <div className="flex gap-2">
+                <span>
+                  {
+                    <span>
+                      {getCustomParameterTitle({ title, nodeId: data.id })}
+                    </span>
+                  }
+                </span>
+              </div>
             )}
+            <span className={(required ? "ml-2 " : "") + "text-status-red"}>
+              {required ? "*" : ""}
+            </span>
+            <div className="">
+              {info !== "" && (
+                <ShadTooltip content={<NodeInputInfo info={info} />}>
+                  {/* put div to avoid bug that does not display tooltip */}
+                  <div className="cursor-help">
+                    <IconComponent
+                      name="Info"
+                      className="relative bottom-px ml-1.5 h-3 w-4"
+                    />
+                  </div>
+                </ShadTooltip>
+              )}
+            </div>
           </div>
+          <CustomParameterLabel
+            name={name}
+            nodeId={data.id}
+            templateValue={data.node?.template[name]}
+            nodeClass={data.node!}
+          />
         </div>
 
         {data.node?.template[name] !== undefined && (

src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx

@@ -1,4 +1,5 @@
 import { usePostTemplateValue } from "@/controllers/API/queries/nodes/use-post-template-value";
+import { track } from "@/customization/utils/analytics";
 import useAlertStore from "@/stores/alertStore";
 import useFlowStore from "@/stores/flowStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
@@ -45,6 +46,8 @@ const useHandleOnNewValue = ({
     const newNode = cloneDeep(node);
     const template = newNode.template;
 
+    track("Component Edited", { nodeId });
+
     if (!template) {
       setErrorData({ title: "Template not found in the component" });
       return;

src/frontend/src/customization/components/custom-parameter.tsx

@@ -47,3 +47,17 @@ export function getCustomParameterTitle({
 }) {
   return title;
 }
+
+export function CustomParameterLabel({
+  name,
+  nodeId,
+  templateValue,
+  nodeClass,
+}: {
+  name: string;
+  nodeId: string;
+  templateValue: any;
+  nodeClass: APIClassType;
+}) {
+  return <></>;
+}

src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx

@@ -20,7 +20,7 @@ export default function NewFlowCardComponent() {
         addFlow().then((id) => {
           navigate(`/flow/${id}${folderId ? `/folder/${folderId}` : ""}`);
         });
-        track("New Flow Created: Blank Flow");
+        track("New Flow Created", { template: "Blank Flow" });
       }}
       className="h-64 w-80 cursor-pointer bg-background pt-4"
       data-testid="blank-flow"

src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx

@@ -145,7 +145,7 @@ export default function UndrawCardComponent({
         addFlow({ flow }).then((id) => {
           navigate(`/flow/${id}/folder/${folderIdUrl}`);
         });
-        track(`New Flow Created: ${flow.name} Template`);
+        track("New Flow Created", { template: `${flow.name} Template` });
       }}
       className="h-64 w-80 cursor-pointer bg-background pt-4"
     >

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -259,6 +259,12 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
       takeSnapshot();
+      if (lastSelection.edges?.length) {
+        track("Component Connection Deleted");
+      }
+      if (lastSelection.nodes?.length) {
+        track("Component Deleted");
+      }
       deleteNode(lastSelection.nodes.map((node) => node.id));
       deleteEdge(lastSelection.edges.map((edge) => edge.id));
     }
@@ -341,7 +347,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
           event.dataTransfer.getData(datakey!),
         );
 
-        track(`Component Added: ${data.node?.display_name}`);
+        track("Component Added", { componentType: data.node?.display_name });
 
         const newId = getNodeId(data.type);
 

src/frontend/src/stores/flowStore.ts

@@ -2,6 +2,7 @@ import {
   BROKEN_EDGES_WARNING,
   componentsToIgnoreUpdate,
 } from "@/constants/constants";
+import { track } from "@/customization/utils/analytics";
 import { brokenEdgeMessage } from "@/utils/utils";
 import { cloneDeep, zip } from "lodash";
 import {
@@ -271,6 +272,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           : !nodeId.includes(node.id),
       ),
     );
+    track("Component Deleted", { nodeId });
   },
   deleteEdge: (edgeId) => {
     get().setEdges(
@@ -280,6 +282,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           : !edgeId.includes(edge.id),
       ),
     );
+    track("Component Connection Deleted", { edgeId });
   },
   paste: (selection, position) => {
     if (