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,7 +105,8 @@ 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">
+        <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>}>
                 {
@@ -141,6 +143,13 @@ export default function NodeInputField({
               )}
             </div>
           </div>
+          <CustomParameterLabel
+            name={name}
+            nodeId={data.id}
+            templateValue={data.node?.template[name]}
+            nodeClass={data.node!}
+          />
+        </div>
 
         {data.node?.template[name] !== undefined && (
           <CustomParameterComponent

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 (