feat(vscode): work on rerender on save

[ci skip]

Author: benfdking

examples/sushi/models/customer_revenue_by_day.sql

@@ -30,7 +30,8 @@ SELECT
   o.customer_id::INT AS customer_id, /* Customer id */
   SUM(ot.total)::DOUBLE AS revenue, /* Revenue from orders made by this customer */
   MAX(0) AS "country code", /* Customer country code, used for testing spaces */
-  o.event_date::DATE AS event_date /* Date */
+  o.event_date::DATE AS event_date /* Date */,
+  o.event_date::DATE AS event_d /* Date */
 FROM sushi.orders AS o
 LEFT JOIN order_total AS ot
   ON o.id = ot.order_id AND o.event_date = ot.event_date

vscode/extension/src/commands/renderModel.ts

@@ -4,6 +4,15 @@ import { isErr } from '@bus/result'
 import { RenderModelEntry } from '../lsp/custom'
 import { RenderedModelProvider } from '../providers/renderedModelProvider'
 
+const DEBOUNCE_DELAY = 500 // milliseconds - balanced for responsiveness without overwhelming the server
+
+// Track associations between source documents and their rendered views
+const sourceToRenderedMap = new Map<string, { uri: vscode.Uri; modelName: string; documentUri: string }>()
+// Track file watchers
+const fileWatchers = new Map<string, vscode.Disposable>()
+// Track active render operations to prevent overlapping requests
+const activeRenders = new Map<string, { inProgress: boolean; lastRequestTime: number }>()
+
 export function renderModel(
   lspClient?: LSPClient,
   renderedModelProvider?: RenderedModelProvider,
@@ -104,5 +113,109 @@ export function renderModel(
 
     // Explicitly set the language mode to SQL for syntax highlighting
     await vscode.languages.setTextDocumentLanguage(document, 'sql')
+
+    // Store the association between source and rendered view
+    sourceToRenderedMap.set(documentUri, {
+      uri: uri,
+      modelName: selectedModel.name,
+      documentUri: documentUri
+    })
+
+    // Set up a file watcher if not already watching this file
+    if (!fileWatchers.has(documentUri)) {
+      // Create a debounced update function to avoid too many rapid updates
+      let updateTimeout: NodeJS.Timeout | undefined
+      let consecutiveErrors = 0
+      const debouncedUpdate = () => {
+        if (updateTimeout) {
+          clearTimeout(updateTimeout)
+        }
+        
+        updateTimeout = setTimeout(() => {
+          // Get the stored association
+          const association = sourceToRenderedMap.get(documentUri)
+          if (!association) return
+
+          // Check if there's already a render in progress
+          const renderState = activeRenders.get(documentUri)
+          if (renderState?.inProgress) {
+            // Skip this update if one is already in progress
+            return
+          }
+
+          // Mark render as in progress
+          activeRenders.set(documentUri, { inProgress: true, lastRequestTime: Date.now() })
+
+          // Re-render the model
+          void (async () => {
+            try {
+              const result = await lspClient.call_custom_method('sqlmesh/render_model', {
+                textDocumentUri: documentUri,
+              })
+
+              if (isErr(result)) {
+                consecutiveErrors++
+                console.error(`Failed to re-render model: ${result.error}`)
+                
+                // Show error message after 3 consecutive failures
+                if (consecutiveErrors >= 3) {
+                  vscode.window.showWarningMessage(
+                    `Model rendering is experiencing issues. Check the SQLMesh output for details.`
+                  )
+                  consecutiveErrors = 0 // Reset counter after showing message
+                }
+                return
+              }
+
+              // Reset error counter on success
+              consecutiveErrors = 0
+
+              // Find the model with the same name
+              const model = result.value.models?.find(m => m.name === association.modelName)
+              if (model) {
+                // Update the content in the provider
+                renderedModelProvider.updateRenderedModel(association.uri, model.rendered_query)
+              }
+            } finally {
+              // Mark render as complete
+              activeRenders.set(documentUri, { inProgress: false, lastRequestTime: Date.now() })
+            }
+          })()
+        }, DEBOUNCE_DELAY)
+      }
+
+      // Watch for changes to the source document
+      const watcher = vscode.workspace.onDidChangeTextDocument(event => {
+        if (event.document.uri.toString(true) === documentUri) {
+          debouncedUpdate()
+        }
+      })
+
+      fileWatchers.set(documentUri, watcher)
+    }
+
+    // Clean up watcher when the rendered document is closed
+    const closeListener: vscode.Disposable = vscode.workspace.onDidCloseTextDocument(closedDoc => {
+      if (closedDoc.uri.toString() === uri.toString()) {
+        const watcher = fileWatchers.get(documentUri)
+        if (watcher) {
+          watcher.dispose()
+          fileWatchers.delete(documentUri)
+        }
+        sourceToRenderedMap.delete(documentUri)
+        activeRenders.delete(documentUri)
+        closeListener.dispose()
+      }
+    })
   }
 }
+
+// Export a function to clean up watchers when extension is deactivated
+export function disposeRenderModelWatchers(): void {
+  fileWatchers.forEach((watcher) => {
+    watcher.dispose()
+  })
+  fileWatchers.clear()
+  sourceToRenderedMap.clear()
+  activeRenders.clear()
+}

vscode/extension/src/extension.ts

@@ -12,7 +12,7 @@ import { AuthenticationProviderTobikoCloud } from './auth/auth'
 import { signOut } from './commands/signout'
 import { signIn } from './commands/signin'
 import { signInSpecifyFlow } from './commands/signinSpecifyFlow'
-import { renderModel } from './commands/renderModel'
+import { renderModel, disposeRenderModelWatchers } from './commands/renderModel'
 import { isErr } from '@bus/result'
 import {
   handleNotSginedInError,
@@ -170,6 +170,9 @@ export async function activate(context: vscode.ExtensionContext) {
 
 // This method is called when your extension is deactivated
 export async function deactivate() {
+  // Clean up render model watchers
+  disposeRenderModelWatchers()
+  
   if (lspClient) {
     await lspClient.dispose()
   }

vscode/extension/src/providers/renderedModelProvider.ts

@@ -40,6 +40,14 @@ export class RenderedModelProvider
     return uri
   }
 
+  /**
+   * Update existing rendered model content
+   */
+  updateRenderedModel(uri: vscode.Uri, content: string): void {
+    this.renderedModels.set(uri.toString(), content)
+    this._onDidChange.fire(uri)
+  }
+
   /**
    * Get the URI scheme for rendered models
    */