refactor(reactflowUtils.ts): import additional utility functions and update function calls to match new function names

fix(reactflowUtils.ts): update mergeNodeTemplates function to include truncated display name and extracted id in template key
feat(utils.ts): add utility functions to extract id from long id and truncate display name

src/frontend/src/utils/reactflowUtils.ts

@@ -25,7 +25,7 @@ import {
   unselectAllNodesType,
   updateEdgesHandleIdsType,
 } from "../types/utils/reactflowUtils";
-import { toNormalCase, toTitleCase, truncateLongId } from "./utils";
+import { extractIdFromLongId, toNormalCase, toTitleCase, truncateDisplayName, truncateLongId } from "./utils";
 const uid = new ShortUniqueId({ length: 5 });
 
 export function cleanEdges({
@@ -567,13 +567,12 @@ export function mergeNodeTemplates({
           } else {
             template[key + "_" + node.id].display_name =
             //data id already has the node name on it
-              truncateLongId(node.data.id) +
-              " - " +
-              (nodeTemplate[key].display_name
-                ? nodeTemplate[key].display_name
-                : nodeTemplate[key].name
-                ? toTitleCase(nodeTemplate[key].name)
-                : toTitleCase(key));
+            (nodeTemplate[key].display_name
+              ? nodeTemplate[key].display_name
+              : nodeTemplate[key].name
+              ? toTitleCase(nodeTemplate[key].name)
+              : toTitleCase(key)) + " - "+ truncateDisplayName(node.data.node?.display_name!) +"-" +
+              extractIdFromLongId(node.data.id)
           }
         }
       });

src/frontend/src/utils/utils.ts

@@ -439,6 +439,19 @@ export function truncateLongId(id: string): string {
   return id;
 }
 
+export function extractIdFromLongId(id: string): string {
+  let [_,newId] = id.split("-");
+  return newId;
+}
+
+export function truncateDisplayName(name: string): string {
+  if (name.length>15){
+    name = name.slice(0,10);
+    name += "...";
+  }
+  return name;
+}
+
 export function tabsArray(codes: string[], method: number) {
   if (!method) return;
   if (method === 0) {