From 66d47fb022cb174b4f0cb66d8b124cc4e0c55892 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Sat, 24 Jan 2026 16:50:22 +0100
Subject: [PATCH] Fix duplicate label selection and add label wrapping

Label selection fix:
- Prevent duplicate labels when creating a label that already exists
- Check if label is already selected before adding to selection

Label wrapping improvements:
- Labels now wrap within a 200px container to prevent nodes growing too large
- LabelBadge updated to only truncate when maxWidth is explicitly provided
- Labels display full text without individual truncation
- Applies to both CustomNode and CustomEdge components

Note: Some overlap may occur with circular shapes - accepted for now.
---
 src/components/Common/LabelBadge.tsx | 8 ++++----
 src/components/Edges/CustomEdge.tsx  | 3 +--
 src/components/Nodes/CustomNode.tsx  | 3 +--
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/Common/LabelBadge.tsx b/src/components/Common/LabelBadge.tsx
index 332b860..b99e5ef 100644
--- a/src/components/Common/LabelBadge.tsx
+++ b/src/components/Common/LabelBadge.tsx
@@ -6,7 +6,7 @@ import { getContrastColor } from '../../utils/colorUtils';
  * Features:
  * - Pill-shaped design
  * - Auto-contrast text color
- * - Truncation with ellipsis
+ * - Optional truncation with ellipsis (if maxWidth is provided)
  * - Tooltip on hover (via title attribute)
  */
 
@@ -17,7 +17,7 @@ interface Props {
   size?: 'sm' | 'md';
 }
 
-const LabelBadge = ({ name, color, maxWidth = '120px', size = 'sm' }: Props) => {
+const LabelBadge = ({ name, color, maxWidth, size = 'sm' }: Props) => {
   const textColor = getContrastColor(color);
 
   const sizeClasses = size === 'sm'
@@ -26,11 +26,11 @@ const LabelBadge = ({ name, color, maxWidth = '120px', size = 'sm' }: Props) =>
 
   return (
     <span
-      className={`inline-block rounded-full font-medium whitespace-nowrap overflow-hidden text-ellipsis ${sizeClasses}`}
+      className={`inline-block rounded-full font-medium whitespace-nowrap ${maxWidth ? 'overflow-hidden text-ellipsis' : ''} ${sizeClasses}`}
       style={{
         backgroundColor: color,
         color: textColor,
-        maxWidth,
+        ...(maxWidth && { maxWidth }),
       }}
       title={name}
     >
diff --git a/src/components/Edges/CustomEdge.tsx b/src/components/Edges/CustomEdge.tsx
index 8457ee5..201ba42 100644
--- a/src/components/Edges/CustomEdge.tsx
+++ b/src/components/Edges/CustomEdge.tsx
@@ -226,7 +226,7 @@ const CustomEdge = ({
               </div>
             )}
             {data?.labels && data.labels.length > 0 && (
-              <div className="flex flex-wrap gap-1 justify-center">
+              <div className="flex flex-wrap gap-1 justify-center" style={{ maxWidth: '200px' }}>
                 {data.labels.map((labelId) => {
                   const labelConfig = labels.find((l) => l.id === labelId);
                   if (!labelConfig) return null;
@@ -235,7 +235,6 @@ const CustomEdge = ({
                       key={labelId}
                       name={labelConfig.name}
                       color={labelConfig.color}
-                      maxWidth="80px"
                       size="sm"
                     />
                   );
diff --git a/src/components/Nodes/CustomNode.tsx b/src/components/Nodes/CustomNode.tsx
index 8b76947..4075a55 100644
--- a/src/components/Nodes/CustomNode.tsx
+++ b/src/components/Nodes/CustomNode.tsx
@@ -266,7 +266,7 @@ const CustomNode = ({ data, selected }: NodeProps<Actor>) => {
 
           {/* Labels */}
           {data.labels && data.labels.length > 0 && (
-            <div className="flex flex-wrap gap-1 justify-center mt-2">
+            <div className="flex flex-wrap gap-1 justify-center mt-2" style={{ maxWidth: '200px' }}>
               {data.labels.map((labelId) => {
                 const labelConfig = labels.find((l) => l.id === labelId);
                 if (!labelConfig) return null;
@@ -275,7 +275,6 @@ const CustomNode = ({ data, selected }: NodeProps<Actor>) => {
                     key={labelId}
                     name={labelConfig.name}
                     color={labelConfig.color}
-                    maxWidth="80px"
                     size="sm"
                   />
                 );