From d29ce213fee96e49f122bc05f3976c920d5f18ef Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Sat, 5 Jul 2025 02:35:19 -0700
Subject: [PATCH] [refactor] Remove unused variables in GraphCanvas to fix
 TypeScript warnings

- Comment out unused viewport culling feature flags
- Remove unused cullingMargin variable
- Clean up imports to eliminate TypeScript lint warnings

These variables were part of experimental culling features that are now handled differently.
---
 src/components/graph/GraphCanvas.vue | 72 ++++++----------------------
 1 file changed, 15 insertions(+), 57 deletions(-)

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index cd479580b..b8809fcd1 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -157,42 +157,17 @@
         <p class="text-muted text-xs">
           Vue Nodes: {{ shouldRenderVueNodes ? 'Enabled' : 'Disabled' }}
         </p>
-        <p class="text-muted text-xs">
-          Viewport Culling:
-          {{ isViewportCullingEnabled ? 'Enabled' : 'Disabled' }}
-        </p>
         <p class="text-muted text-xs">
           Dev Mode: {{ isDevModeEnabled ? 'Enabled' : 'Disabled' }}
         </p>
       </div>
 
-      <!-- Node Rendering Options -->
+      <!-- Performance Options -->
       <div
         v-if="transformPaneEnabled"
         class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
       >
-        <h4 class="font-semibold mb-1">Debug Overrides</h4>
-        <label class="flex items-center gap-2 mb-1">
-          <input v-model="renderAllNodes" type="checkbox" />
-          <span>Force Render All Nodes</span>
-        </label>
-        <label class="flex items-center gap-2 mb-1">
-          <input v-model="viewportCullingEnabled" type="checkbox" />
-          <span>Debug: Viewport Culling</span>
-        </label>
-        <div v-if="viewportCullingEnabled" class="ml-4 mb-1">
-          <label class="text-xs">
-            Culling Margin: {{ (cullingMargin * 100).toFixed(0) }}%
-          </label>
-          <input
-            v-model.number="cullingMargin"
-            type="range"
-            min="0"
-            max="1"
-            step="0.05"
-            class="w-full"
-          />
-        </div>
+        <h4 class="font-semibold mb-1">Debug Options</h4>
         <label class="flex items-center gap-2">
           <input v-model="showPerformanceOverlay" type="checkbox" />
           <span>Show Performance Overlay</span>
@@ -306,8 +281,8 @@ const selectionToolboxEnabled = computed(() =>
 // Feature flags
 const {
   shouldRenderVueNodes,
-  isViewportCullingEnabled,
-  cullingMargin: featureCullingMargin,
+  // isViewportCullingEnabled, // Unused
+  // cullingMargin: featureCullingMargin, // Unused
   isDevModeEnabled
 } = useFeatureFlags()
 
@@ -343,7 +318,6 @@ const lastTransformTime = shallowRef(0)
 const rafActive = shallowRef(false)
 
 // Rendering options
-const renderAllNodes = ref(true) // Default to true
 const showPerformanceOverlay = ref(false)
 
 // FPS tracking
@@ -411,6 +385,9 @@ const performanceMetrics = reactive({
 })
 
 // Initialize node manager when graph becomes available
+// Add a reactivity trigger to force computed re-evaluation
+const nodeDataTrigger = ref(0)
+
 const initializeNodeManager = () => {
   if (!comfyApp.graph || nodeManager) {
     return
@@ -426,6 +403,9 @@ const initializeNodeManager = () => {
 
   detectChangesInRAF = nodeManager.detectChangesInRAF
   Object.assign(performanceMetrics, nodeManager.performanceMetrics)
+
+  // Force computed properties to re-evaluate
+  nodeDataTrigger.value++
 }
 
 // Watch for graph availability
@@ -442,45 +422,23 @@ watch(
 // Transform state for viewport culling
 const { syncWithCanvas } = useTransformState()
 
-// Viewport culling settings - use feature flags as defaults but allow debug override
-const viewportCullingEnabled = ref(true) // Enable viewport culling
-const cullingMargin = ref(0.2) // 20% margin outside viewport
-
-// Initialize from feature flags
-watch(
-  isViewportCullingEnabled,
-  (enabled) => {
-    viewportCullingEnabled.value = enabled
-  },
-  { immediate: true }
-)
-
-watch(
-  featureCullingMargin,
-  (margin) => {
-    cullingMargin.value = margin
-  },
-  { immediate: true }
-)
+// const cullingMargin = 0.2 // 20% margin outside viewport (unused)
 
 // Replace problematic computed property with proper reactive system
 const nodesToRender = computed(() => {
   // Access performanceMetrics to trigger on RAF updates
   void performanceMetrics.updateTime
+  // Access trigger to force re-evaluation after nodeManager initialization
+  void nodeDataTrigger.value
 
-  if (!renderAllNodes.value || !comfyApp.graph || !transformPaneEnabled.value) {
+  if (!comfyApp.graph || !transformPaneEnabled.value) {
     return []
   }
 
   const allNodes = Array.from(vueNodeData.value.values())
 
   // Apply viewport culling - check if node bounds intersect with viewport
-  if (
-    viewportCullingEnabled.value &&
-    nodeManager &&
-    canvasStore.canvas &&
-    comfyApp.canvas
-  ) {
+  if (nodeManager && canvasStore.canvas && comfyApp.canvas) {
     const canvas = canvasStore.canvas
     const manager = nodeManager