Skip to main content

I have created a Lucidchart package that contains custom UI, shapes and data connectors.  I have added a button to the right panel that successfully triggers a long running task in Azure. In my current implementation, the button is pressed and the task is of course triggered async 

Once the long running task is complete, is there a way for my web server to notify Lucid that the long running task is complete?  What are some approaches you might recommend?

Should my extension poll a database table for the state of the task?

Alternatively, is there a way for me to register a endpoint that my web server could call and then the extension or data connector could receive that notification that the registered endpoint has been called and then run some code?

Thanks, Dan

Hey Dan,

Great question. I think the best way to handle this would be using an asynchronous data connector action. The flow would be something like:

  1. User does something in your extension that triggers the flow
  2. Extension calls “editorClient.performDataAction(...)” and sets the “asynchronous” parameter of the function to true
  3. Data connector receives the request, kicks off the long running process and waits for it to complete
  4. Data connector receives some notification that the process has completed and uses the `action.client.update(...)` function to send a data update to the Lucid document
  5. If you want your extension to run some code after that happens, you can use `editorClient.awaitDataImport(...)` to wait for that update to come through and then you can run whatever functionality you want.

Our Todoist example does this sort of a flow, it gets kicked off here: https://github.com/lucidsoftware/sample-lucid-extensions/blob/main/todoist/editorextensions/todoist/src/todoistcardintegration.ts#L212

And the data connector sends the data back to the document here: https://github.com/lucidsoftware/sample-lucid-extensions/blob/main/todoist/dataconnectors/todoist/utils/uploadtasks.ts#L19

And finally we await the data showing up here: https://github.com/lucidsoftware/sample-lucid-extensions/blob/main/todoist/editorextensions/todoist/src/todoistcardintegration.ts#L214

 

Hopefully that gets the ball rolling, let me know if you have any other questions / bump into things along the way!


In #4, how does the “Data connector receives some notification that the process has completed”

Would i potentially poll database table here?  Or is there a better alternative?


I think polling is a valid strategy. An alternative could be to have the data connector keep a websocket open with the server running the long running job and use the websocket to send the completion back.

 

How long are you expecting these processes to take?


I would say each simulation can take anywhere from 10 seconds to 10 minutes.  There are so many variables that impact how long it will take.


I think if they're gonna take 10 minutes the data connector route will time out, in that case it will probably be easiest to manage this mostly from your iFrame (I believe at one point you were iFraming a react/angular app, is that still true?):

  1. Kick off the process from your extension by sending a network request to the server where the long running process runs using either `editorClient.oauthXhr` or by having your iFrame send the network request.
  2. Have your iFrame poll the server periodically to get the current status of the job. You could alternatively establish the websocket between your iFrame and the server to get the update pushed back to you without polling.
  3. When the iFrame detects the simulation is complete and the data is ready, fetch the data and then pass a message to the extension with the data, and have the extension draw whatever shapes you want on the canvas (we have a tutorial that does this third step here: https://developer.lucid.co/docs/data-visualization)

 


Reply