From 7ebcbc8acd5e10d48ae987100b879ef0b0509888 Mon Sep 17 00:00:00 2001
From: dextmorgn <dexxterrmorgan@proton.me>
Date: Mon, 3 Nov 2025 14:38:15 +0100
Subject: [PATCH] fix(app): remove virtualization on relations list

---
 .../graphs/details-panel/relationships.tsx    | 69 +++++--------------
 1 file changed, 18 insertions(+), 51 deletions(-)

diff --git a/flowsint-app/src/components/graphs/details-panel/relationships.tsx b/flowsint-app/src/components/graphs/details-panel/relationships.tsx
index 56c04173..02485743 100644
--- a/flowsint-app/src/components/graphs/details-panel/relationships.tsx
+++ b/flowsint-app/src/components/graphs/details-panel/relationships.tsx
@@ -4,9 +4,8 @@ import { TypeBadge } from '@/components/type-badge'
 import { Badge } from '@/components/ui/badge'
 import { useGraphStore } from '@/stores/graph-store'
 import { useQuery } from '@tanstack/react-query'
-import { useVirtualizer } from '@tanstack/react-virtual'
 import { ArrowRight } from 'lucide-react'
-import { memo, useCallback, useRef } from 'react'
+import { memo, useCallback } from 'react'
 import { GraphEdge, GraphNode } from '@/types'
 
 type Relation = {
@@ -33,16 +32,8 @@ const Relationships = memo(
       queryFn: () => sketchService.getNodeNeighbors(sketchId, nodeId)
     })
 
-    const parentRef = useRef<HTMLDivElement>(null)
     const relationships = getInlineRelationships(neighborsData?.nds || [], neighborsData?.rls || [])
 
-    const rowVirtualizer = useVirtualizer({
-      count: relationships.length,
-      getScrollElement: () => parentRef.current,
-      estimateSize: () => 40, // Estimate height of each relationship item
-      overscan: 5
-    })
-
     if (isLoading)
       return (
         <div className="flex items-center justify-center grow h-full">
@@ -51,48 +42,24 @@ const Relationships = memo(
       )
 
     return (
-      <div ref={parentRef} className="h-full overflow-auto py-3">
-        <div
-          style={{
-            height: `${rowVirtualizer.getTotalSize()}px`,
-            width: '100%',
-            position: 'relative'
-          }}
-        >
-          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-            const rel = relationships[virtualRow.index]
-            return (
-              <div
-                key={virtualRow.index}
-                style={{
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  width: '100%',
-                  height: `${virtualRow.size}px`,
-                  transform: `translateY(${virtualRow.start}px)`
-                }}
-                className="mb-1 px-3"
-              >
-                <Badge variant={'outline'} className="h-8 px-2 py-1 w-full">
-                  <div className="flex items-center gap-1 w-full min-w-0 h-full">
-                    <div className="min-w-0 flex-1 flex items-center">
-                      <RelationshipItem node={rel.source} />
-                    </div>
-                    <ArrowRight className="flex-shrink-0 opacity-60 h-4 w-4" />
-                    <div className="min-w-0 flex-1 flex items-center justify-center">
-                      <span className="opacity-60 text-xs truncate block">{rel.edge.label}</span>
-                    </div>
-                    <ArrowRight className="flex-shrink-0 opacity-60 h-4 w-4" />
-                    <div className="min-w-0 flex-1 flex items-center justify-end">
-                      <RelationshipItem node={rel.target} />
-                    </div>
-                  </div>
-                </Badge>
+      <div className="h-full overflow-auto py-3 px-3 space-y-1">
+        {relationships.map((rel, index) => (
+          <Badge key={index} variant={'outline'} className="h-8 px-2 py-1 w-full">
+            <div className="flex items-center gap-1 w-full min-w-0 h-full">
+              <div className="min-w-0 flex-1 flex items-center">
+                <RelationshipItem node={rel.source} />
               </div>
-            )
-          })}
-        </div>
+              <ArrowRight className="flex-shrink-0 opacity-60 h-4 w-4" />
+              <div className="min-w-0 flex-1 flex items-center justify-center">
+                <span className="opacity-60 text-xs truncate block">{rel.edge.label}</span>
+              </div>
+              <ArrowRight className="flex-shrink-0 opacity-60 h-4 w-4" />
+              <div className="min-w-0 flex-1 flex items-center justify-end">
+                <RelationshipItem node={rel.target} />
+              </div>
+            </div>
+          </Badge>
+        ))}
       </div>
     )
   }