fix imported updates also broadcast to other clients

api/controllers/console/app/online_user.py

@@ -140,10 +140,10 @@ def handle_collaboration_event(sid, data):
     return {"msg": "event_broadcasted"}
 
 
-@sio.on("graph_update")
-def handle_graph_update(sid, data):
+@sio.on("graph_event")
+def handle_graph_event(sid, data):
     """
-    Handle graph updates - simple broadcast relay.
+    Handle graph events - simple broadcast relay.
     """
     mapping = redis_client.get(f"ws_sid_map:{sid}")
 

web/app/components/workflow/collaboration/manage.ts

@@ -1,13 +1,13 @@
 import { LoroDoc } from 'loro-crdt'
 import { isEqual } from 'lodash-es'
-import { useWebSocketStore } from '../store/websocket-store'
+import { type WebSocketInstance, useWebSocketStore } from '../store/websocket-store'
 import type { Edge, Node } from '../types'
 
 class LoroSocketIOProvider {
-  private doc: any
-  private socket: any
+  private doc: LoroDoc
+  private socket: WebSocketInstance
 
-  constructor(socket: any, doc: any) {
+  constructor(socket: WebSocketInstance, doc: LoroDoc) {
     this.socket = socket
     this.doc = doc
     this.setupEventListeners()
@@ -15,9 +15,9 @@ class LoroSocketIOProvider {
 
   private setupEventListeners() {
     this.doc.subscribe((event: any) => {
-      if (event.origin !== 'remote') {
+      if (event.by === 'local') {
         const update = this.doc.export({ mode: 'update' })
-        this.socket.emit('graph_update', update)
+        this.socket.emit('graph_event', update)
       }
     })
 
@@ -59,9 +59,9 @@ class CollaborationManager {
       console.log('nodesMap', event)
       if (event.by === 'import') {
         requestAnimationFrame(() => {
-          const { setNodes } = reactFlowStore.getState()
+          const { setNodes: reactFlowSetNodes } = reactFlowStore.getState()
           const updatedNodes = Array.from(this.nodesMap.values())
-          setNodes(updatedNodes)
+          reactFlowSetNodes(updatedNodes)
         })
       }
     })
@@ -69,9 +69,9 @@ class CollaborationManager {
     this.edgesMap?.subscribe((event: any) => {
       if (event.by === 'import') {
         requestAnimationFrame(() => {
-          const { setEdges } = reactFlowStore.getState()
+          const { setEdges: reactFlowSetEdges } = reactFlowStore.getState()
           const updatedEdges = Array.from(this.edgesMap.values())
-          setEdges(updatedEdges)
+          reactFlowSetEdges(updatedEdges)
         })
       }
     })

web/app/components/workflow/store/websocket-store.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 import { connectOnlineUserWebSocket } from '@/service/demo/online-user'
 
-type WebSocketInstance = ReturnType<typeof connectOnlineUserWebSocket>
+export type WebSocketInstance = ReturnType<typeof connectOnlineUserWebSocket>
 
 type WebSocketStore = {
   socket: WebSocketInstance | null
@@ -35,7 +35,7 @@ export const useWebSocketStore = create<WebSocketStore>((set, get) => ({
             try {
               handler(update)
             }
- catch (error) {
+            catch (error) {
               console.error(`Error in collaboration event handler for ${update.type}:`, error)
             }
           })