Duplicated diagram in ObservableHQ

[kevinah95]

This tool is awesome and I tried to implemented it on ObservableHQ.

But I have an issue, when I refresh the notebook cell, the diagram duplicate the information.

Please can you help me to find the reason.

[philippfromme]

This seems to be an issue with Observable, not with bpmn-js. How are you creating and tearing down the bpmn-js instance?

[kevinah95]

Here is the snippet and using a div container with canvas as id:

{
  const viewer = new bpmnjs({
    container: "#canvas",
    height: 300
  });
  
  
  async function openDiagram(bpmnXML) {
    // import diagram
    try {
      await viewer.importXML(bpmnXML);
      
      // access viewer components
      var canvas = viewer.get("canvas");
      var overlays = viewer.get("overlays");

      // zoom to fit full viewport
      canvas.zoom("fit-viewport");

      // attach an overlay to a node
      overlays.add("SCAN_OK", "note", {
        position: {
          bottom: 0,
          right: 0
        },
        html: '<div class="diagram-note">Mixed up the labels?</div>'
      });

      // add marker
      canvas.addMarker("SCAN_OK", "needs-discussion");
    } catch (err) {
      console.error("could not import BPMN 2.0 diagram", err);
    }
  }
  await openDiagram(data)
}

[philippfromme]

I’m not familiar with Observable, but you have to make sure you’re reusing the bpmn-js instance instead of creating a new one every time.

[kevinah95]

I think here is the error, Observable create new instances each time we press on run button of the cell, because it works like Jupyter notebook.