Modernize graph visualization with gradients and straight edges

Author: ToWhiD073

src/components/GraphVisualizer.jsx

@@ -9,31 +9,40 @@ export const GraphVisualizer = () => {
 
   const styledNodes = useMemo(() => {
     return nodes.map(node => {
-      let backgroundColor = '#f0f0f0';
-      let color = 'black';
+      let background, borderColor, boxShadow;
+      let color = 'white';
 
       if (traversalState.visited.has(node.id)) {
-        backgroundColor = '#52c41a'; // Green for visited
-        color = 'white';
+        background = 'linear-gradient(135deg, #52c41a, #389e0d)';
+        borderColor = '#389e0d';
+        boxShadow = '0 4px 12px rgba(82, 196, 26, 0.4)';
       } else if (traversalState.current === node.id) {
-        backgroundColor = '#1890ff'; // Blue for current
-        color = 'white';
+        background = 'linear-gradient(135deg, #1890ff, #096dd9)';
+        borderColor = '#096dd9';
+        boxShadow = '0 4px 12px rgba(24, 144, 255, 0.4)';
+      } else {
+        background = 'linear-gradient(135deg, #ffffff, #f0f0f0)';
+        borderColor = '#d9d9d9';
+        boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
+        color = '#333';
       }
 
       return {
         ...node,
         style: {
-          backgroundColor,
+          background,
           color,
-          border: '2px solid #d9d9d9',
+          border: `3px solid ${borderColor}`,
           borderRadius: '50%',
-          width: 40,
-          height: 40,
+          width: 35,
+          height: 35,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           fontSize: '12px',
-          fontWeight: 'bold'
+          fontWeight: '600',
+          boxShadow,
+          transition: 'all 0.3s ease'
         }
       };
     });
@@ -42,26 +51,63 @@ export const GraphVisualizer = () => {
   const styledEdges = useMemo(() => {
     return edges.map(edge => ({
       ...edge,
+      type: 'straight',
       style: {
-        stroke: traversalState.currentEdge === edge.id ? '#ff4d4f' : '#d9d9d9',
-        strokeWidth: traversalState.currentEdge === edge.id ? 3 : 2
+        stroke: traversalState.currentEdge === edge.id ? '#ff4d4f' : '#8c8c8c',
+        strokeWidth: traversalState.currentEdge === edge.id ? 4 : 2,
+        strokeDasharray: traversalState.currentEdge === edge.id ? '0' : '0',
+        filter: traversalState.currentEdge === edge.id ? 'drop-shadow(0 2px 4px rgba(255, 77, 79, 0.3))' : 'none'
+      },
+      labelStyle: {
+        fontSize: '11px',
+        fontWeight: '600',
+        fill: '#666',
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        padding: '2px 6px',
+        borderRadius: '4px'
       }
     }));
   }, [edges, traversalState.currentEdge]);
 
   if (nodes.length === 0) {
     return (
-      <Card title="Graph Visualization">
-        <div style={{ height: 400, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <Card 
+        title="Graph Visualization" 
+        style={{ 
+          borderRadius: '12px',
+          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.1)'
+        }}
+      >
+        <div style={{ 
+          height: 400, 
+          display: 'flex', 
+          alignItems: 'center', 
+          justifyContent: 'center',
+          background: 'linear-gradient(135deg, #f5f7fa, #c3cfe2)',
+          borderRadius: '8px',
+          color: '#666',
+          fontSize: '16px'
+        }}>
           Please input a graph to visualize
         </div>
       </Card>
     );
   }
 
   return (
-    <Card title="Graph Visualization">
-      <div style={{ height: 400 }}>
+    <Card 
+      title="Graph Visualization" 
+      style={{ 
+        borderRadius: '12px',
+        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.1)'
+      }}
+    >
+      <div style={{ 
+        height: 400, 
+        borderRadius: '8px',
+        overflow: 'hidden',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+      }}>
         <ReactFlow
           nodes={styledNodes}
           edges={styledEdges}
@@ -70,8 +116,19 @@ export const GraphVisualizer = () => {
           nodesConnectable={false}
           elementsSelectable={false}
         >
-          <Background />
-          <Controls />
+          <Background 
+            color="rgba(255, 255, 255, 0.2)"
+            gap={20}
+            size={1}
+          />
+          <Controls 
+            style={{
+              background: 'rgba(255, 255, 255, 0.9)',
+              borderRadius: '8px',
+              border: 'none',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
+            }}
+          />
         </ReactFlow>
       </div>
     </Card>