fix: minor fixes

services/frontend/src/components/Canvas/ServiceNode.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { truncateStr } from "../../utils";
 import { IServiceNodeItem, CallbackFunction } from "../../types";
 import eventBus from "../../events/eventBus";
 import { Popover } from "./Popover";
@@ -54,12 +55,17 @@ export default function ServiceNode(props: INodeProps) {
       )}
       <div className="node-label w-full py-2 px-4">
         <>
-          <div className="text-sm font-semibold overflow-x-hidden">
+          {node.canvasConfig.service_name && (
-            {node.canvasConfig.service_name}
+            <div className="text-sm font-semibold overflow-x-hidden">
-          </div>
+              {truncateStr(node.canvasConfig.service_name, 10)}
-          <div className="text-xs text-gray-500 overflow-x-hidden">
+            </div>
-            {node.serviceConfig.container_name}
+          )}
-          </div>
+
+          {node.serviceConfig.container_name && (
+            <div className="text-xs text-gray-500 overflow-x-hidden">
+              {truncateStr(node.serviceConfig.container_name, 10)}
+            </div>
+          )}
         </>
       </div>
     </div>

services/frontend/src/components/Canvas/VolumeNode.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { truncateStr } from "../../utils";
 import { IVolumeNodeItem, CallbackFunction } from "../../types";
 import eventBus from "../../events/eventBus";
 import { Popover } from "./Popover";
@@ -54,9 +55,11 @@ export default function VolumeNode(props: INodeProps) {
       )}
       <div className="node-label w-full py-2 px-4">
         <>
-          <div className="text-xs text-gray-500 overflow-x-hidden">
+          {node.volumeConfig.name && (
-            {node.volumeConfig.name}
+            <div className="text-sm font-semibold overflow-x-hidden">
-          </div>
+              {truncateStr(node.volumeConfig.name, 10)}
+            </div>
+          )}
         </>
       </div>
     </div>

services/frontend/src/components/Modal/Network/index.tsx

@@ -71,9 +71,7 @@ const ModalNetwork = (props: IModalNetworkProps) => {
 
             <Formik
               initialValues={{
-                initialValues: {
+                ...topLevelNetworkConfigInitialValues(),
-                  ...topLevelNetworkConfigInitialValues()
-                },
                 key: "volume",
                 type: "VOLUME",
                 inputs: [],

services/frontend/src/components/Project/index.tsx

@@ -245,9 +245,9 @@ export default function Project() {
 
     if (existingIndex !== -1) {
       _connections.splice(existingIndex, 1);
+      setConnections(_connections);
+      stateConnectionsRef.current = _connections;
     }
-
-    setConnections(_connections);
   };
 
   const onConnectionAttached = (data: any) => {