Cannot interact with the plot (dragging, or rotate)

[hanliu0119]

Here is the code example: const Mol2Viewer = ({ mol2Data }) => { const stage = useRef(null); const nglContainer = useRef(null);

useEffect(() => { stage.current = new NGL.Stage(nglContainer.current); NGL.autoLoad("data:chemical/x-mol2," + mol2Data).then(function(comp) { var repr = comp.addRepresentation("ball+stick"); comp.autoView(); stage.current.add(comp); });

return () => {
  // On component unmount
  stage.current.dispose();
};

}, [mol2Data]);

return ( <div ref={nglContainer} style={{ width: '600px', height: '400px' }}/> );

[ppillot]

Not sure what's wrong with this code. If this is related to the component mounting/unmounting several times, it's possible that React is calling the cleaning function and stage.dispose() does not do a complete cleanup. I would suggest to add the following to the cleanup function before stage.dispose()

stage.viewer.wrapper.remove(); // div wrapper generated by NGL. Might hide the next mounted stages if not removed
stage.viewer.renderer.forceContextLoss(); // avoids running out of WebGL contexts

[hanliu0119]

it actually works when I replace "stage.dispose()" with "stage.viewer.wrapper.remove();", don't know why but it works :)

[ppillot]

Cool! This means that a previous div element is covering up the new one and intercepting any mouse action. We actually should add that cleanup in the dispose code.