fix: dont show description in node visualization

src/components/Nodes/CustomNode.tsx

@@ -1,10 +1,13 @@
-import { memo, useMemo } from 'react';
+import { memo, useMemo } from "react";
-import { Handle, Position, NodeProps, useStore } from 'reactflow';
+import { Handle, Position, NodeProps, useStore } from "reactflow";
-import { useGraphStore } from '../../stores/graphStore';
+import { useGraphStore } from "../../stores/graphStore";
-import { useSearchStore } from '../../stores/searchStore';
+import { useSearchStore } from "../../stores/searchStore";
-import { getContrastColor, adjustColorBrightness } from '../../utils/colorUtils';
+import {
-import { getIconComponent } from '../../utils/iconUtils';
+  getContrastColor,
-import type { ActorData } from '../../types';
+  adjustColorBrightness,
+} from "../../utils/colorUtils";
+import { getIconComponent } from "../../utils/iconUtils";
+import type { ActorData } from "../../types";
 
 /**
  * CustomNode - Represents an actor in the constellation graph
@@ -27,13 +30,15 @@ const CustomNode = ({ data, selected }: NodeProps<ActorData>) => {
 
   // Find the node type configuration
   const nodeTypeConfig = nodeTypes.find((nt) => nt.id === data.type);
-  const nodeColor = nodeTypeConfig?.color || '#6b7280';
+  const nodeColor = nodeTypeConfig?.color || "#6b7280";
-  const nodeLabel = nodeTypeConfig?.label || 'Unknown';
+  const nodeLabel = nodeTypeConfig?.label || "Unknown";
   const IconComponent = getIconComponent(nodeTypeConfig?.icon);
 
   // Determine text color based on background
   const textColor = getContrastColor(nodeColor);
-  const borderColor = selected ? adjustColorBrightness(nodeColor, -20) : nodeColor;
+  const borderColor = selected
+    ? adjustColorBrightness(nodeColor, -20)
+    : nodeColor;
 
   // Show handles when selected or when connecting
   const showHandles = selected || isConnecting;
@@ -49,8 +54,8 @@ const CustomNode = ({ data, selected }: NodeProps<ActorData>) => {
     // Check search text match
     if (searchText.trim()) {
       const searchLower = searchText.toLowerCase();
-      const label = data.label?.toLowerCase() || '';
+      const label = data.label?.toLowerCase() || "";
-      const description = data.description?.toLowerCase() || '';
+      const description = data.description?.toLowerCase() || "";
       const typeName = nodeLabel.toLowerCase();
 
       return (
@@ -61,11 +66,19 @@ const CustomNode = ({ data, selected }: NodeProps<ActorData>) => {
     }
 
     return true;
-  }, [searchText, visibleActorTypes, data.type, data.label, data.description, nodeLabel]);
+  }, [
+    searchText,
+    visibleActorTypes,
+    data.type,
+    data.label,
+    data.description,
+    nodeLabel,
+  ]);
 
   // Determine if filters are active
-  const hasActiveFilters = searchText.trim() !== '' ||
+  const hasActiveFilters =
-    Object.values(visibleActorTypes).some(v => v === false);
+    searchText.trim() !== "" ||
+    Object.values(visibleActorTypes).some((v) => v === false);
 
   // Calculate opacity based on match status
   const nodeOpacity = hasActiveFilters && !isMatch ? 0.2 : 1.0;
@@ -76,20 +89,20 @@ const CustomNode = ({ data, selected }: NodeProps<ActorData>) => {
       className={`
         px-4 py-3 rounded-lg shadow-md min-w-[120px]
         transition-all duration-200
-        ${selected ? 'shadow-xl' : 'shadow-md'}
+        ${selected ? "shadow-xl" : "shadow-md"}
       `}
       style={{
         backgroundColor: nodeColor,
-        borderWidth: '3px', // Keep consistent border width
+        borderWidth: "3px", // Keep consistent border width
-        borderStyle: 'solid',
+        borderStyle: "solid",
         borderColor: borderColor,
         color: textColor,
         opacity: nodeOpacity,
         boxShadow: selected
           ? `0 0 0 3px ${nodeColor}40` // Add outer glow when selected (40 = ~25% opacity)
           : isHighlighted
-          ? `0 0 0 3px ${nodeColor}80, 0 0 12px ${nodeColor}60` // Highlight glow for search matches
+            ? `0 0 0 3px ${nodeColor}80, 0 0 12px ${nodeColor}60` // Highlight glow for search matches
-          : undefined,
+            : undefined,
       }}
     >
       {/* Connection handles - shown only when selected or connecting */}
@@ -157,7 +170,10 @@ const CustomNode = ({ data, selected }: NodeProps<ActorData>) => {
       <div className="space-y-1">
         {/* Icon (if available) */}
         {IconComponent && (
-          <div className="flex justify-center mb-1" style={{ color: textColor, fontSize: '2rem' }}>
+          <div
+            className="flex justify-center mb-1"
+            style={{ color: textColor, fontSize: "2rem" }}
+          >
             <IconComponent />
           </div>
         )}
@@ -177,19 +193,6 @@ const CustomNode = ({ data, selected }: NodeProps<ActorData>) => {
         >
           {nodeLabel}
         </div>
-
-        {/* Description (if available) */}
-        {data.description && (
-          <div
-            className="text-xs text-center opacity-60 pt-2 mt-1 border-t"
-            style={{
-              color: textColor,
-              borderColor: `${textColor}40`, // 40 is hex for ~25% opacity
-            }}
-          >
-            {data.description}
-          </div>
-        )}
       </div>
     </div>
   );