remove fitting to last n commits as it is breaking selecting the last commit, fix unknown

Author: Ademfcan

components/git-visualizer.tsx

@@ -221,7 +221,9 @@ export function GitVisualizer({
           width: 14,
           height: 14,
           "border-width": 0,
-          "overlay-opacity": 0,
+          "overlay-opacity": 0.001,
+          "overlay-padding": 3,
+          "overlay-color": "transparent",
         },
       },
       {
@@ -291,7 +293,7 @@ export function GitVisualizer({
 
     // Configure static interaction settings
     cy.boxSelectionEnabled(false);
-    // cy.autoungrabify(true);
+    cy.autoungrabify(true);
     cy.userZoomingEnabled(true);
     cy.userPanningEnabled(true);
 
@@ -349,38 +351,29 @@ export function GitVisualizer({
       }
     };
   };
-  // Handle node click events in an effect
+
   useEffect(() => {
     const cy = cyRef.current;
     if (!cy) return;
 
     const handleNodeTap = (evt: cytoscape.EventObject) => {
       const node = evt.target;
       const id = node.id();
-
-      console.log(evt.target);
-
-      setSelectedId(id);
-      evt.cy.elements().unselect();
-      node.select();
-
-      // This `commits` is from the current render, so it is always up-to-date.
       const commit = commits.find((c) => c.id === id);
       if (commit) {
         onCommitSelect(commit);
       }
     };
 
-    // Register the event listener
     cy.on("tap", "node", handleNodeTap);
 
-    // Cleanup: remove the listener when the component unmounts or `commits` changes
     return () => {
+      // Cleanup function removes the old listener
       if (cy && !cy.destroyed()) {
         cy.off("tap", "node", handleNodeTap);
       }
     };
-  }, [commits, onCommitSelect]); // Dependency array is key!
+  }, [commits, onCommitSelect]);
 
   // Cleanup cytoscape reference on unmount
   useEffect(() => {
@@ -400,15 +393,16 @@ export function GitVisualizer({
       if (!cy) return;
       try {
         cy.resize();
-        const recentIds = commits.slice(undefined, 10).map((c) => c.id);
-        const recentNodes =
-          recentIds.length > 0
-            ? cy.getElementById(recentIds[0])
-            : cy.collection();
-        for (let i = 1; i < recentIds.length; i++) {
-          recentNodes.merge(cy.getElementById(recentIds[i]));
-        }
-        cy.fit(recentNodes.nonempty() ? recentNodes : undefined, 30);
+        // const recentIds = commits.slice(undefined, 10).map((c) => c.id);
+        // const recentNodes =
+        //   recentIds.length > 0
+        //     ? cy.getElementById(recentIds[0])
+        //     : cy.collection();
+        // for (let i = 1; i < recentIds.length; i++) {
+        //   recentNodes.merge(cy.getElementById(recentIds[i]));
+        // }
+        // cy.fit(recentNodes.nonempty() ? recentNodes : undefined, 30);
+        cy.fit(undefined, 30);
       } catch (error) {
         console.warn("Resize error:", error);
       }
@@ -440,15 +434,16 @@ export function GitVisualizer({
           // Fit with padding if still mounted
           if (cyRef.current === liveCy) {
             // After layout, fit to last 10 commits for focused view
-            const recentIds = commits.slice(undefined, 10).map((c) => c.id);
-            const recentNodes =
-              recentIds.length > 0
-                ? liveCy.getElementById(recentIds[0])
-                : liveCy.collection();
-            for (let i = 1; i < recentIds.length; i++) {
-              recentNodes.merge(liveCy.getElementById(recentIds[i]));
-            }
-            liveCy.fit(recentNodes.nonempty() ? recentNodes : undefined, 30);
+            // const recentIds = commits.slice(undefined, 10).map((c) => c.id);
+            // const recentNodes =
+            //   recentIds.length > 0
+            //     ? liveCy.getElementById(recentIds[0])
+            //     : liveCy.collection();
+            // for (let i = 1; i < recentIds.length; i++) {
+            //   recentNodes.merge(liveCy.getElementById(recentIds[i]));
+            // }
+            // liveCy.fit(recentNodes.nonempty() ? recentNodes : undefined, 30);
+            liveCy.fit(undefined, 30);
           }
         }
       } catch {
@@ -503,7 +498,6 @@ export function GitVisualizer({
         stylesheet={stylesheet as any}
         layout={layout as any}
         style={{ width: "100%", height: "100%" }}
-        wheelSensitivity={0.2}
       />
       {(isLoading || loading) && commits.length > 0 && (
         <div className="absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-sm text-sm text-muted-foreground">