refactor(tabsContext.tsx): update the logic for modifying the sourceHandle property of edges in the TabsProvider component

The previous implementation used string manipulation to modify the sourceHandle property, but it has been refactored to use JSON parsing and stringifying for better readability and maintainability. The sourceHandle property is now parsed into an object, and the baseClasses property is updated by concatenating it with the values from the template's "base_classes" property. The modified sourceHandle object is then stringified and assigned back to the edge.sourceHandle property.

src/frontend/src/contexts/tabsContext.tsx

@@ -195,11 +195,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   ) {
     flow.data.edges.forEach((edge) => {
       if (edge.source === node.id) {
-        edge.sourceHandle = edge.sourceHandle
-          .split("|")
-          .slice(0, 2)
-          .concat(template["base_classes"])
-          .join("|");
+        let sourceHandleObject: sourceHandleType = JSON.parse(
+          edge.sourceHandle
+        );
+        sourceHandleObject.baseClasses = sourceHandleObject.baseClasses.concat(
+          template["base_classes"]
+        );
+        edge.sourceHandle = JSON.stringify(sourceHandleObject);
       }
     });
   }