temp [ci skip]

Author: benfdking

vscode/extension/openapi.json

@@ -48,9 +48,7 @@ export class LineagePanel implements WebviewViewProvider, Disposable {
     })
   }
 
-  public resolveWebviewView(
-    webviewView: WebviewView,
-  ) {
+  public resolveWebviewView(webviewView: WebviewView) {
     if (this.panel) {
       webviewView = this.panel
     }
@@ -98,7 +96,10 @@ export class LineagePanel implements WebviewViewProvider, Disposable {
                 throw new Error('queryRequest is not supported')
               }
               default: {
-                console.log('Unhandled message type under vscode_callback: ', message)
+                console.log(
+                  'Unhandled message type under vscode_callback: ',
+                  message,
+                )
               }
             }
             break
@@ -111,7 +112,12 @@ export class LineagePanel implements WebviewViewProvider, Disposable {
               'sqlmesh/api',
               payload,
             )
-            console.log('response from lsp', response, 'with requestId', requestId)
+            console.log(
+              'response from lsp',
+              response,
+              'with requestId',
+              requestId,
+            )
             webviewView.webview.postMessage({
               key: 'query_response',
               payload: response,

vscode/extension/src/webviews/lineagePanel.ts

@@ -44,7 +44,6 @@
   }
 }
 
-
 @layer components {
   .scrollbar--horizontal::-webkit-scrollbar {
     height: var(--scrollbar-size);
@@ -71,5 +70,5 @@
   --color-graph-edge-secondary: blue;
   --color-graph-edge-main: red;
   --color-graph-edge-selected: green;
-  --color-graph-edge-direct: yellow; 
+  --color-graph-edge-direct: yellow;
 }

vscode/react/src/App.css

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v7.8.0 🍺
+ * Generated by orval v7.9.0 🍺
  * Do not edit manually.
  * FastAPI
  * OpenAPI spec version: 0.1.0

vscode/react/src/api/client.ts

@@ -79,16 +79,19 @@ async function fetchAPIDevelopment<T = any, B extends object = any>(
 
     // If we're in an iframe, we need to post the message to the parent window
     if (window.parent !== window) {
-      window.parent.postMessage({
-        key: 'queryRequest',
-        payload: {
-          requestId,
-          url: config.url,
-          params: config.params as any,
-          data: config.data,
-          method: config.method,
+      window.parent.postMessage(
+        {
+          key: 'queryRequest',
+          payload: {
+            requestId,
+            url: config.url,
+            params: config.params as any,
+            data: config.data,
+            method: config.method,
+          },
         },
-      }, '*')
+        '*',
+      )
       return
     }
 

vscode/react/src/api/instance.ts

@@ -102,7 +102,7 @@ function getEdges(lineage: Record<string, Lineage> = {}): Edge[] {
 
   for (const targetModelName of modelNames) {
     const targetModel = lineage[targetModelName]!
-    
+
     // @ts-ignore
     targetModel.models.forEach(sourceModelName => {
       outputEdges.push(createGraphEdge(sourceModelName, targetModelName))
@@ -189,8 +189,8 @@ function getNodeMap({
           : EnumLineageNodeModelType.cte,
     })
     const columnsCount = withColumns
-      // @ts-ignore
-      ? (models[modelName]?.columns?.length ?? 0)
+      ? // @ts-ignore
+        (models[modelName]?.columns?.length ?? 0)
       : 0
 
     const maxWidth = Math.min(
@@ -698,7 +698,10 @@ function getUpdatedNodes(
 
 function hasActiveEdge(
   activeEdges: ActiveEdges = new Map(),
-  [leftConnect, rightConnect]: [string | undefined | null, string | undefined | null],
+  [leftConnect, rightConnect]: [
+    string | undefined | null,
+    string | undefined | null,
+  ],
 ): boolean {
   if (isNil(leftConnect) && isNil(rightConnect)) return false
 

vscode/react/src/components/graph/help.ts

@@ -7,6 +7,7 @@ import { routeTree } from './routeTree.gen'
 
 import './styles.css'
 import reportWebVitals from './reportWebVitals.ts'
+import { EventBusProvider } from './utilsutils/eventBus.tsx'
 
 // Create a new router instance
 const router = createRouter({
@@ -31,7 +32,9 @@ if (rootElement && !rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement)
   root.render(
     <StrictMode>
-      <RouterProvider router={router} />
+      <EventBusProvider>
+        <RouterProvider router={router} />
+      </EventBusProvider>
     </StrictMode>,
   )
 }

vscode/react/src/main.tsx

@@ -10,8 +10,10 @@ import { ModelLineage } from '@/components/graph/ModelLineage'
 import { useVSCode } from '@/hooks/vscode'
 import React from 'react'
 import { ModelSQLMeshModel } from '@/domain/sqlmesh-model'
+import { useEventBus } from '@/utilsutils/eventBus'
 
 export function LineagePage() {
+  const { emit } = useEventBus()
   // Handle messages from VSCode extension
   React.useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
@@ -21,7 +23,7 @@ export function LineagePage() {
         switch (payload.key) {
           case 'changeFocusOnFile':
             console.log('Changing focus to file:', payload.payload.path)
-            // Implement your focus change logic here
+            emit('changeFocusedFile', { fileUri: payload.payload.path })
             break
           default:
             console.error(
@@ -92,6 +94,7 @@ export function LineageComponentFromWeb({
 }): JSX.Element {
   const vscode = useVSCode()
   function handleClickModel(id: string): void {
+    console.log('handling click', id)
     const decodedId = decodeURIComponent(id)
     const model = Object.values(models).find((m: Model) => m.fqn === decodedId)
     if (!model) {
@@ -121,53 +124,8 @@ export function LineageComponentFromWeb({
         models={models}
         showControls={false}
       >
-        {' '}
-        <UpdateLineageFocus>
-          <ModelLineage model={sqlmModel} />
-        </UpdateLineageFocus>
+        <ModelLineage model={sqlmModel} />
       </LineageFlowProvider>
     </div>
   )
 }
-
-export function UpdateLineageFocus({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  const lineageFlow = useLineageFlow()
-
-  React.useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      console.log('handleMessage in lineage page', event)
-      // Ensure the message is from VSCode
-      if (event.data && event.data.key === 'vscode_send') {
-        const payload = event.data.payload
-        switch (payload.key) {
-          case 'changeFocusOnFile':
-            console.log('Changing focus to file:', payload.payload.path)
-            lineageFlow.setMainNode('"memory"."sushi"."customers"')
-            // Add a small delay to ensure the state update is processed
-            setTimeout(() => {
-              console.log('Delayed state update confirmation')
-            }, 1000)
-            console.log('set main node', lineageFlow.mainNode)
-            // Implement your focus change logic here
-            // TODO NEED TO PASS THE FQN of the model not the path
-            break
-          default:
-            console.error(
-              'Unhandled message type in lineage page:',
-              payload.key,
-            )
-        }
-      }
-    }
-    window.addEventListener('message', handleMessage)
-    return () => {
-      window.removeEventListener('message', handleMessage)
-    }
-  }, [])
-
-  return children
-}

vscode/react/src/pages/lineage.tsx

@@ -0,0 +1,100 @@
+// event-bus.tsx
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useRef,
+  useEffect,
+  type PropsWithChildren,
+} from 'react'
+
+/**
+ * 1️⃣ List every event & its payload shape here
+ */
+export type EventMap = {
+  changeFocusedFile: {
+    fileUri: string
+  }
+}
+
+/**
+ * 2️⃣ Generic bus API — strongly–typed by EventMap
+ */
+export type EventBus<M extends Record<string, any>> = {
+  emit<K extends keyof M>(type: K, payload: M[K]): void
+  on<K extends keyof M>(type: K, handler: (payload: M[K]) => void): () => void // returns “unsubscribe”
+}
+
+function createEventBus<M extends Record<string, any>>(): EventBus<M> {
+  const listeners = new Map<keyof M, Set<(p: any) => void>>()
+
+  return {
+    emit(type, payload) {
+      listeners.get(type)?.forEach(fn => fn(payload))
+    },
+    on(type, handler) {
+      let set = listeners.get(type)
+      if (!set) {
+        set = new Set()
+        listeners.set(type, set)
+      }
+      set.add(handler)
+      // remove listener on demand
+      return () => set!.delete(handler)
+    },
+  }
+}
+
+/**
+ * 3️⃣ React Context wrapper
+ */
+const EventBusContext = createContext<EventBus<EventMap> | null>(null)
+
+export const EventBusProvider = ({ children }: PropsWithChildren<{}>) => {
+  const bus = useMemo(() => createEventBus<EventMap>(), [])
+  return (
+    <EventBusContext.Provider value={bus}>{children}</EventBusContext.Provider>
+  )
+}
+
+/**
+ * 4️⃣ Convenience hooks
+ */
+export function useEventBus() {
+  const bus = useContext(EventBusContext)
+  if (!bus) throw new Error('useEventBus must be inside <EventBusProvider>')
+  return bus
+}
+
+export function useEvent<K extends keyof EventMap>(
+  type: K,
+  handler: (payload: EventMap[K]) => void,
+) {
+  const bus = useEventBus()
+  // keep latest handler ref without resubscribing each render
+  const saved = useRef<typeof handler>(handler)
+  useEffect(() => {
+    saved.current = handler
+  })
+  useEffect(() => {
+    const unsub = bus.on(type, payload => saved.current(payload))
+    return unsub // unsubscribe on unmount
+  }, [bus, type])
+}
+
+/**
+ * 5️⃣ Example usage:
+ *
+ * // index.tsx
+ * <EventBusProvider>
+ *   <App />
+ * </EventBusProvider>
+ *
+ * // Any deep component
+ * const bus = useEventBus();
+ * bus.emit('cart:add', { productId: 'sku123', qty: 2 });
+ *
+ * useEvent('user:login', ({ id }) => {
+ *   console.log('Logged in', id);
+ * });
+ */