Add visualizer node lifecycle animations and snap-back physics

jsflax · claude · jsflax · commit b277130d329a · 2026-02-16T23:09:23.000-05:00
Golden-orange arrival glow for new memories, red-to-black death
glow for deleted memories, and rubber-band snap-back on drag release.
Reduced alpha reheat values to minimize disruption from topology changes.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/Sources/MemoryVisualizer/ForceSimulation.swift b/Sources/MemoryVisualizer/ForceSimulation.swift
@@ -71,9 +71,28 @@ final class ForceSimulation: ObservableObject {
     func unpinNode(_ id: Int64) {
         guard let i = idToIndex[id] else { return }
         pinned[i] = false
-        forceAge = 0  // apply stored forces at full strength for immediate snap-back
+
+        // Rubber-band snap: compute velocity impulse toward connected-neighbor centroid
+        var homeX: CGFloat = 0, homeY: CGFloat = 0, count: CGFloat = 0
+        for (si, ti) in edgeIndices {
+            if si == i { homeX += x[ti]; homeY += y[ti]; count += 1 }
+            else if ti == i { homeX += x[si]; homeY += y[si]; count += 1 }
+        }
+        if count > 0 {
+            homeX /= count; homeY /= count
+            let dx = homeX - x[i], dy = homeY - y[i]
+            let dist = sqrt(dx * dx + dy * dy)
+            if dist > 1 {
+                // Target ~80% of distance in initial impulse: v₀ / (1-damping) ≈ 0.8*dist
+                let snapSpeed = min(dist * 0.2, 50)
+                vx[i] = (dx / dist) * snapSpeed
+                vy[i] = (dy / dist) * snapSpeed
+            }
+        }
+
+        forceAge = 0
         if !tickInFlight {
-            dispatchForceComputation()  // get fresh forces for the new unpinned state
+            dispatchForceComputation()
         }
     }
 
@@ -139,7 +158,7 @@ final class ForceSimulation: ObservableObject {
         nodeTopic[id] = topic
         prevTopicGroup = topicGroup
 
-        alpha = max(alpha, 0.4)
+        alpha = max(alpha, 0.05)
         topologyVersion &+= 1
         rebuildPositions()
     }
@@ -179,7 +198,7 @@ final class ForceSimulation: ObservableObject {
         nodeTopic.removeValue(forKey: id)
         prevTopicGroup = topicGroup
 
-        alpha = max(alpha, 0.4)
+        alpha = max(alpha, 0.05)
         topologyVersion &+= 1
         rebuildPositions()
     }
@@ -188,14 +207,14 @@ final class ForceSimulation: ObservableObject {
         guard let si = idToIndex[sourceId], let ti = idToIndex[targetId] else { return }
         if edgeIndices.contains(where: { $0 == (si, ti) }) { return }
         edgeIndices.append((si, ti))
-        alpha = max(alpha, 0.3)
+        alpha = max(alpha, 0.03)
         topologyVersion &+= 1
     }
 
     func removeEdge(from sourceId: Int64, to targetId: Int64) {
         guard let si = idToIndex[sourceId], let ti = idToIndex[targetId] else { return }
         edgeIndices.removeAll { $0 == (si, ti) }
-        alpha = max(alpha, 0.2)
+        alpha = max(alpha, 0.03)
         topologyVersion &+= 1
     }
 
@@ -321,7 +340,7 @@ final class ForceSimulation: ObservableObject {
         // Reheat simulation if topology or topic groupings changed
         let topicGroupsChanged = topicGroup != prevTopicGroup
         if topologyChanged || topicGroupsChanged {
-            alpha = max(alpha, topologyChanged ? 0.4 : 0.3)
+            alpha = max(alpha, topologyChanged ? 0.05 : 0.03)
             prevTopicGroup = topicGroup
         }
 
@@ -391,7 +410,6 @@ final class ForceSimulation: ObservableObject {
     private struct SimState: Sendable {
         let n: Int
         let x: [CGFloat], y: [CGFloat]
-        let pinned: [Bool]
         let projectGroup: [Int], topicGroup: [Int]
         let edgeIndices: [(Int, Int)]
         let topicProjectGroup: [Int]
@@ -417,7 +435,7 @@ final class ForceSimulation: ObservableObject {
 
         let state = SimState(
             n: n, x: x, y: y,
-            pinned: pinned, projectGroup: projectGroup,
+            projectGroup: projectGroup,
             topicGroup: topicGroup, edgeIndices: edgeIndices,
             topicProjectGroup: topicProjectGroup,
             alpha: alpha, center: center,
@@ -452,7 +470,6 @@ final class ForceSimulation: ObservableObject {
         let n = s.n
         let x = s.x.map(Double.init)
         let y = s.y.map(Double.init)
-        let pinned = s.pinned
         let projectGroup = s.projectGroup, topicGroup = s.topicGroup
         let alpha = Double(s.alpha)
 
diff --git a/Sources/MemoryVisualizer/GraphCanvas.swift b/Sources/MemoryVisualizer/GraphCanvas.swift
@@ -46,6 +46,15 @@ struct EdgeData {
     let relation: String
 }
 
+struct DyingNode {
+    let id: Int64
+    let position: CGPoint
+    let project: String
+    let isHub: Bool
+    let importance: Int
+    let startTime: Date
+}
+
 // MARK: - Perf tracking (writable from Canvas closure)
 
 private final class PerfStats: @unchecked Sendable {
@@ -67,6 +76,8 @@ struct GraphCanvas: View {
     let edges: [EdgeData]
     let hubs: Set<Int64>
     let glowingNodes: [Int64: Date]
+    let newNodes: [Int64: Date]
+    let dyingNodes: [Int64: DyingNode]
     let searchMatchIds: Set<Int64>
     let isSearchActive: Bool
     let viewport: ViewportState
@@ -157,6 +168,8 @@ struct GraphCanvas: View {
             simulation.tick()
             let needsRedraw = simulation.isActive
             || !glowingNodes.isEmpty
+            || !newNodes.isEmpty
+            || !dyingNodes.isEmpty
             || viewport.draggedNode != nil
             || viewport.isAnimatingPan
             || (isSearchActive && !searchMatchIds.isEmpty)
@@ -531,6 +544,24 @@ struct GraphCanvas: View {
             if ri > 0 { recallIntensities[node.id] = ri }
         }
 
+        // Precompute arrival (new node) intensities — golden-orange glow
+        var arrivalIntensities: [Int64: CGFloat] = [:]
+        for node in allOrdered {
+            guard let arrivalTime = newNodes[node.id] else { continue }
+            let elapsed = now.timeIntervalSince(arrivalTime)
+            let fadeIn: CGFloat = 0.5, hold: CGFloat = 2.0, fadeOut: CGFloat = 3.0
+            let total = fadeIn + hold + fadeOut
+            let ai: CGFloat
+            if elapsed < Double(fadeIn) {
+                let t = CGFloat(elapsed) / fadeIn; ai = t * t
+            } else if elapsed < Double(fadeIn + hold) {
+                ai = 1.0
+            } else if elapsed < Double(total) {
+                let t = 1.0 - (CGFloat(elapsed) - fadeIn - hold) / fadeOut; ai = t * t
+            } else { ai = 0 }
+            if ai > 0 { arrivalIntensities[node.id] = ai }
+        }
+
         // Pass 0: Bloom halos behind all nodes
         for node in allOrdered {
             guard let pos = positions[node.id] else { continue }
@@ -540,6 +571,15 @@ struct GraphCanvas: View {
             let isSelected = pk == selectedNode
             let searchMatched = isSearchActive && searchMatchIds.contains(pk)
 
+            if let ai = arrivalIntensities[pk] {
+                let pulse = 1.0 + sin(Double(frameCount) * 0.06) * 0.2 * ai
+                let bloomRadius = (radius + 24) * pulse
+                let bloomRect = CGRect(
+                    x: pos.x - bloomRadius, y: pos.y - bloomRadius,
+                    width: bloomRadius * 2, height: bloomRadius * 2
+                )
+                context.fill(Circle().path(in: bloomRect), with: .color(Color(red: 1.0, green: 0.7, blue: 0.2).opacity(0.35 * ai)))
+            }
             if let ri = recallIntensities[pk] {
                 let pulse = 1.0 + sin(Double(frameCount) * 0.08) * 0.15 * ri
                 let bloomRadius = (radius + 20) * pulse
@@ -606,7 +646,14 @@ struct GraphCanvas: View {
             let baseLineWidth: CGFloat = isSelected ? 3 : (isHub ? 2.5 : 1)
             context.fill(Circle().path(in: rect), with: .color(color.opacity(nodeOpacity)))
             context.stroke(Circle().path(in: rect), with: .color(baseStroke.opacity(baseStrokeOpacity)), lineWidth: baseLineWidth)
-            // Overlay hot white-blue blended by recallIntensity (fades smoothly)
+            // Overlay golden-orange for newly arrived nodes (fades to project color)
+            let ai = arrivalIntensities[pk] ?? 0
+            if ai > 0 {
+                let golden = Color(red: 1.0, green: 0.7, blue: 0.2)
+                context.fill(Circle().path(in: rect), with: .color(golden.opacity(0.8 * ai)))
+                context.stroke(Circle().path(in: rect), with: .color(Color(red: 1.0, green: 0.8, blue: 0.3).opacity(0.9 * ai)), lineWidth: 2)
+            }
+            // Overlay hot white-blue blended by recallIntensity (fades smoothly, takes priority over arrival)
             if ri > 0 {
                 let hotWhite = Color(red: 0.9, green: 0.95, blue: 1.0)
                 context.fill(Circle().path(in: rect), with: .color(hotWhite.opacity(0.85 * ri)))
@@ -635,6 +682,48 @@ struct GraphCanvas: View {
             }
         }
 
+        // --- Pass 1a: Dying nodes (ghost rendering — red to black fade-out) ---
+        for (_, dying) in dyingNodes {
+            let pos = dying.position
+            let importance = max(1, dying.importance)
+            let radius = baseRadius * (dying.isHub ? hubScale : 1.0) * (1.0 + CGFloat(importance - 1) * 0.08)
+            let elapsed = now.timeIntervalSince(dying.startTime)
+            let flashIn: CGFloat = 0.3, hold: CGFloat = 1.2, fadeOut: CGFloat = 1.5
+            let total = flashIn + hold + fadeOut
+            guard elapsed < Double(total) else { continue }
+
+            let di: CGFloat // death intensity
+            if elapsed < Double(flashIn) {
+                let t = CGFloat(elapsed) / flashIn; di = t * t
+            } else if elapsed < Double(flashIn + hold) {
+                di = 1.0
+            } else {
+                let t = 1.0 - (CGFloat(elapsed) - flashIn - hold) / fadeOut; di = t * t
+            }
+
+            // Shrink during fade-out phase
+            let shrink: CGFloat = elapsed > Double(flashIn + hold)
+                ? 1.0 - (1.0 - di) * 0.5
+                : 1.0
+            let r = radius * shrink
+
+            // Red bloom halo
+            let pulse = 1.0 + sin(Double(frameCount) * 0.1) * 0.2 * di
+            let bloomRadius = (r + 20) * pulse
+            let bloomRect = CGRect(
+                x: pos.x - bloomRadius, y: pos.y - bloomRadius,
+                width: bloomRadius * 2, height: bloomRadius * 2
+            )
+            context.fill(Circle().path(in: bloomRect), with: .color(Color(red: 0.9, green: 0.15, blue: 0.1).opacity(0.4 * di)))
+
+            // Node fill: blend from red → dark/black
+            let rect = CGRect(x: pos.x - r, y: pos.y - r, width: r * 2, height: r * 2)
+            let darkening = elapsed > Double(flashIn) ? min(1.0, (CGFloat(elapsed) - flashIn) / (hold + fadeOut)) : 0.0
+            let red = Color(red: 0.9 * (1.0 - darkening * 0.8), green: 0.15 * (1.0 - darkening), blue: 0.1 * (1.0 - darkening))
+            context.fill(Circle().path(in: rect), with: .color(red.opacity(di)))
+            context.stroke(Circle().path(in: rect), with: .color(Color(red: 1.0, green: 0.2, blue: 0.1).opacity(0.7 * di)), lineWidth: 2)
+        }
+
         // --- Pass 1b: Topic centroid labels ---
         if labelVisible(tier: .topic, scale: viewport.scale) {
             for group in topicGroups {
diff --git a/Sources/MemoryVisualizer/GraphOverlays.swift b/Sources/MemoryVisualizer/GraphOverlays.swift
@@ -607,6 +607,8 @@ struct MinimapView: View {
     let filteredNodes: [NodeData]
     let hubs: Set<Int64>
     let glowingNodes: [Int64: Date]
+    let newNodes: [Int64: Date]
+    let dyingNodes: [Int64: DyingNode]
     let simulation: ForceSimulation
     let viewport: ViewportState
     let viewportSize: CGSize
@@ -659,7 +661,7 @@ struct MinimapView: View {
         .shadow(color: .black.opacity(isFloating ? 0.5 : 0), radius: 12)
         .onHover { isHovered = $0 }
         .onReceive(timer) { _ in
-            if simulation.isActive || !glowingNodes.isEmpty {
+            if simulation.isActive || !glowingNodes.isEmpty || !newNodes.isEmpty || !dyingNodes.isEmpty {
                 frameCount &+= 1
             }
         }
@@ -676,10 +678,11 @@ struct MinimapView: View {
             let mapScale = min(size.width / bounds.width, size.height / bounds.height)
 
             let glows = glowingNodes
+            let arrivals = newNodes
             let now = Date()
             struct MiniDot {
                 let mx: CGFloat; let my: CGFloat; let dotSize: CGFloat
-                let color: Color; let ri: CGFloat
+                let color: Color; let ri: CGFloat; let ai: CGFloat
             }
             var dots: [MiniDot] = []
             let dotScale: CGFloat = min(size.width, size.height) / 120 // scale dots proportionally
@@ -703,9 +706,29 @@ struct MinimapView: View {
                         let t = 1.0 - (CGFloat(elapsed) - fadeIn - hold) / fadeOut; ri = t * t
                     } else { ri = 0 }
                 } else { ri = 0 }
-                dots.append(MiniDot(mx: mx, my: my, dotSize: dotSize, color: color, ri: ri))
+                let ai: CGFloat
+                if let arrivalTime = arrivals[node.id] {
+                    let elapsed = now.timeIntervalSince(arrivalTime)
+                    let fadeIn: CGFloat = 0.5, hold: CGFloat = 2.0, fadeOut: CGFloat = 3.0
+                    let total = fadeIn + hold + fadeOut
+                    if elapsed < Double(fadeIn) {
+                        let t = CGFloat(elapsed) / fadeIn; ai = t * t
+                    } else if elapsed < Double(fadeIn + hold) {
+                        ai = 1.0
+                    } else if elapsed < Double(total) {
+                        let t = 1.0 - (CGFloat(elapsed) - fadeIn - hold) / fadeOut; ai = t * t
+                    } else { ai = 0 }
+                } else { ai = 0 }
+                dots.append(MiniDot(mx: mx, my: my, dotSize: dotSize, color: color, ri: ri, ai: ai))
             }
 
+            // Arrival bloom (golden-orange)
+            for d in dots where d.ai > 0 {
+                let bloomSize = d.dotSize + 8
+                let bloomRect = CGRect(x: d.mx - bloomSize / 2, y: d.my - bloomSize / 2, width: bloomSize, height: bloomSize)
+                context.fill(Circle().path(in: bloomRect), with: .color(Color(red: 1.0, green: 0.7, blue: 0.2).opacity(0.45 * d.ai)))
+            }
+            // Recall bloom (white-blue)
             for d in dots where d.ri > 0 {
                 let bloomSize = d.dotSize + 6
                 let bloomRect = CGRect(x: d.mx - bloomSize / 2, y: d.my - bloomSize / 2, width: bloomSize, height: bloomSize)
@@ -715,12 +738,46 @@ struct MinimapView: View {
             for d in dots {
                 let rect = CGRect(x: d.mx - d.dotSize / 2, y: d.my - d.dotSize / 2, width: d.dotSize, height: d.dotSize)
                 context.fill(Circle().path(in: rect), with: .color(d.color.opacity(0.8)))
+                if d.ai > 0 {
+                    let golden = Color(red: 1.0, green: 0.7, blue: 0.2)
+                    context.fill(Circle().path(in: rect), with: .color(golden.opacity(0.8 * d.ai)))
+                }
                 if d.ri > 0 {
                     let hotWhite = Color(red: 0.9, green: 0.95, blue: 1.0)
                     context.fill(Circle().path(in: rect), with: .color(hotWhite.opacity(0.85 * d.ri)))
                 }
             }
 
+            // Dying node ghosts (red to black fade-out)
+            let dying = dyingNodes
+            for (_, ghost) in dying {
+                let elapsed = now.timeIntervalSince(ghost.startTime)
+                let flashIn: CGFloat = 0.3, hold: CGFloat = 1.2, fadeOutD: CGFloat = 1.5
+                let total = flashIn + hold + fadeOutD
+                guard elapsed < Double(total) else { continue }
+                let di: CGFloat
+                if elapsed < Double(flashIn) {
+                    let t = CGFloat(elapsed) / flashIn; di = t * t
+                } else if elapsed < Double(flashIn + hold) {
+                    di = 1.0
+                } else {
+                    let t = 1.0 - (CGFloat(elapsed) - flashIn - hold) / fadeOutD; di = t * t
+                }
+                let mx = (ghost.position.x - bounds.minX) * mapScale
+                let my = (ghost.position.y - bounds.minY) * mapScale
+                let dotSize: CGFloat = (ghost.isHub ? 4 : 2.5) * dotScale
+                // Red bloom
+                let bloomSize = dotSize + 8
+                let bloomRect = CGRect(x: mx - bloomSize / 2, y: my - bloomSize / 2, width: bloomSize, height: bloomSize)
+                context.fill(Circle().path(in: bloomRect), with: .color(Color(red: 0.9, green: 0.15, blue: 0.1).opacity(0.5 * di)))
+                // Red-to-dark dot
+                let darkening = elapsed > Double(flashIn) ? min(1.0, (CGFloat(elapsed) - flashIn) / (hold + fadeOutD)) : 0.0
+                let r = dotSize * (elapsed > Double(flashIn + hold) ? 1.0 - (1.0 - di) * 0.5 : 1.0)
+                let rect = CGRect(x: mx - r / 2, y: my - r / 2, width: r, height: r)
+                let red = Color(red: 0.9 * (1.0 - darkening * 0.8), green: 0.15 * (1.0 - darkening), blue: 0.1 * (1.0 - darkening))
+                context.fill(Circle().path(in: rect), with: .color(red.opacity(di)))
+            }
+
             let vpWorldX = -viewport.offset.x / viewport.scale
             let vpWorldY = -viewport.offset.y / viewport.scale
             let vpWorldW = viewportSize.width / viewport.scale
diff --git a/Sources/MemoryVisualizer/GraphView.swift b/Sources/MemoryVisualizer/GraphView.swift
