update edge styles, add label to modal

waldiez · Jan 19, 2025 · 6e91f9b · 6e91f9b
1 parent 1ce0284
commit 6e91f9b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 41 deletions.
diff --git a/src/waldiez/containers/edges/main.tsx b/src/waldiez/containers/edges/main.tsx
@@ -181,42 +181,3 @@ const WaldiezEdgeCommon = (props: WaldiezEdgeProps) => {
         </>
     );
 };
-
-/*
-<div className="edge-position">
-                                {edgeNumber === "0" ? (
-                                    <GoAlert size={16} className="edge-position-warning-icon" />
-                                ) : (
-                                    edgeNumber
-                                )}
-                            </div>
- <div className="edge-body">
-    <textarea
-        placeholder="Enter a description"
-        value={data.description}
-        rows={1}
-        data-testid={`edge-${id}-description`}
-        onChange={onDescriptionChange}
-    />
-</div>
-<div className="edge-footer edge-actions">
-    <div
-        title="Delete"
-        role="button"
-        onClick={onDelete}
-        className="delete-edge clickable"
-        data-testid={`delete-edge-${id}`}
-    >
-        <FaTrashAlt />
-    </div>
-    <div
-        title="Edit"
-        role="button"
-        className="open-edge-modal clickable"
-        data-testid={`open-edge-modal-${id}`}
-        onClick={onOpenModal}
-    >
-        <FaGear />
-    </div>
-</div>
-*/
diff --git a/src/waldiez/containers/edges/modal/tabs/basic/hooks/useWaldiezEdgeBasicTab.ts b/src/waldiez/containers/edges/modal/tabs/basic/hooks/useWaldiezEdgeBasicTab.ts
@@ -7,6 +7,9 @@ export const useWaldiezEdgeBasicTab = (props: WaldiezEdgeBasicTabProps) => {
     const onDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         onDataChange({ description: e.target.value });
     };
+    const onLabelChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onDataChange({ label: e.target.value });
+    };
     const onClearHistoryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         onDataChange({ clearHistory: e.target.checked });
     };
@@ -85,6 +88,7 @@ export const useWaldiezEdgeBasicTab = (props: WaldiezEdgeBasicTabProps) => {
         summaryRoleValue,
         summaryRoleLabel,
         currentSelectedChatType,
+        onLabelChange,
         onDescriptionChange,
         onClearHistoryChange,
         onMaxTurnsChange,

diff --git a/src/waldiez/containers/edges/modal/tabs/basic/main.tsx b/src/waldiez/containers/edges/modal/tabs/basic/main.tsx
@@ -1,4 +1,4 @@
-import { InfoLabel, NumberInput, Select } from "@waldiez/components";
+import { InfoLabel, NumberInput, Select, TextInput } from "@waldiez/components";
 import { useWaldiezEdgeBasicTab } from "@waldiez/containers/edges/modal/tabs/basic/hooks";
 import { WaldiezEdgeBasicTabProps } from "@waldiez/containers/edges/modal/tabs/basic/types";
 
@@ -12,6 +12,7 @@ export const WaldiezEdgeBasicTab = (props: WaldiezEdgeBasicTabProps) => {
         summaryRoleValue,
         summaryRoleLabel,
         currentSelectedChatType,
+        onLabelChange,
         onDescriptionChange,
         onClearHistoryChange,
         onMaxTurnsChange,
@@ -41,6 +42,12 @@ export const WaldiezEdgeBasicTab = (props: WaldiezEdgeBasicTabProps) => {
             )}
             {edgeType !== "swarm" && (
                 <>
+                    <TextInput
+                        label="Label:"
+                        value={data.label}
+                        onChange={onLabelChange}
+                        dataTestId={`edge-${edgeId}-label-input`}
+                    />
                     <label>Description:</label>
                     <textarea
                         rows={2}

diff --git a/src/waldiez/store/edge.ts b/src/waldiez/store/edge.ts
@@ -12,6 +12,7 @@ import {
     edgeCommonStyle,
     getNewEdge,
     getNewEdgeConnectionProps,
+    getNewEdgeName,
     getNewEdgeNodes,
     resetEdgeOrders,
     resetEdgePositions,
@@ -218,6 +219,13 @@ export class WaldiezEdgeStore implements IWaldiezEdgeStore {
         if (!color) {
             return false;
         }
+        const oldLabel = oldEdge.data?.label;
+        if (
+            oldEdge.data &&
+            oldLabel === `${oldSourceNode.data.agentType} => ${oldTargetNode.data.agentType}`
+        ) {
+            oldEdge.data.label = getNewEdgeName(newSourceNode, newTargetNode);
+        }
         this.set({
             edges: [
                 ...this.get().edges.map(edge => {

diff --git a/src/waldiez/store/utils/edge.ts b/src/waldiez/store/utils/edge.ts
@@ -38,7 +38,7 @@ export const getNewEdgeNodes = (allNodes: Node[], source: string, target: string
         targetNode,
     };
 };
-const getNewEdgeName = (sourceNode: Node, targetNode: Node) => {
+export const getNewEdgeName = (sourceNode: Node, targetNode: Node) => {
     const sourceLabel = (sourceNode.data.label as string).slice(0, 15);
     const targetLabel = (targetNode.data.label as string).slice(0, 15);
     const edgeName = `${sourceLabel} => ${targetLabel}`;