refactor: Enhance ForceDirectedGraph with modal support and improved …

…node display - Added functionality to open a modal with the first node's details when no node is selected. - Improved the display of the current node's index and similarity percentage with additional styling and positioning. - Enhanced user experience by providing clearer visual feedback on node selection.
bramses · Jan 18, 2025 · b4f984e · b4f984e
1 parent c43f9e6
commit b4f984e
Showing 1 changed file with 45 additions and 13 deletions.
diff --git a/src/components/ForceDirectedGraph.tsx b/src/components/ForceDirectedGraph.tsx
@@ -667,6 +667,19 @@ const ForceDirectedGraph: React.FC<ForceDirectedGraphProps> = ({
                 selectedNode.comments,
                 selectedNode.matchedCommentId,
               );
+            } else {
+              // open modal with the first node
+              const firstNode = graphNodes[0];
+              openModal(
+                firstNode.label,
+                firstNode.id,
+                firstNode.image,
+                firstNode.title,
+                firstNode.author,
+                firstNode.group,
+                firstNode.comments,
+                firstNode.matchedCommentId,
+              );
             }
           }}
         />
@@ -682,19 +695,38 @@ const ForceDirectedGraph: React.FC<ForceDirectedGraphProps> = ({
           {currentIndex !== null &&
             currentIndex >= 0 &&
             currentIndex < graphNodes.length && (
-              <div
-                style={{
-                  padding: '4px 8px',
-                  backgroundColor: 'rgba(255, 255, 255, 0.9)',
-                  borderRadius: '4px',
-                  color: getNodeColor(graphNodes[currentIndex]),
-                  zIndex: 9999,
-                  fontWeight: 'bold',
-                  marginBottom: '10px',
-                }}
-              >
-                {`< ${currentIndex + 1} / ${graphNodes.length} >`}
-              </div>
+              <>
+                <div
+                  style={{
+                    padding: '4px 8px',
+                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                    borderRadius: '4px',
+                    color: getNodeColor(graphNodes[currentIndex]),
+                    zIndex: 9999,
+                    fontWeight: 'bold',
+                    marginBottom: '10px',
+                  }}
+                >
+                  {`< ${currentIndex + 1} / ${graphNodes.length} >`}
+                </div>
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: '10px',
+                    right: '10px',
+                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                    borderRadius: '4px',
+                    color: getNodeColor(graphNodes[currentIndex]),
+                    zIndex: 9999,
+                    fontWeight: 'bold',
+                    marginBottom: '10px',
+                  }}
+                >
+                  {graphNodes[currentIndex].similarity
+                    ? `similarity: ${Math.round(graphNodes[currentIndex].similarity * 100)}%`
+                    : ''}
+                </div>
+              </>
             )}
 
           <div className="flex flex-col">