How to use `data-element` tag?

[elliothershberg]

Opening another issue here as I working on using this viewer.

The docs have:

data-element: The value is the id of an HTML element on the current page that has molecular data embedded in it.

Is there an example of how to use this? I'm dynamically fetching structure data, and want to pass it to the viewer.

My first attempt to use this looks like this:

<data value={structure.message} id="structure-data" />
<div
  style={{ height: 400, width: 400, position: "relative" }}
  className="viewer_3Dmoljs"
  data-element="structure-data"
  data-backgroundcolor="0xffffff"
  data-style="stick"
  data-ui="true"
></div>

Where structure.message is a string of PDB coordinates, for example:

ATOM      1  N   GLY A   1      -3.919  21.300  15.025  1.00  0.63           N  
ATOM      2  CA  GLY A   1      -5.259  20.891  14.637  1.00  0.64           C  
ATOM      3  C   GLY A   1      -5.599  19.476  15.066  1.00  0.65           C  
ATOM      4  O   GLY A   1      -4.705  18.653  15.275  1.00  0.61           O  
ATOM      5  N   PRO A   2      -6.597  18.903  16.019  1.00  0.68           N  
ATOM      6  CA  PRO A   2      -6.920  17.551  16.479  1.00  0.66           C  
ATOM      7  C   PRO A   2      -6.400  16.467  15.537  1.00  0.67           C  
ATOM      8  CB  PRO A   2      -8.450  17.548  16.522  1.00  0.61           C  
ATOM      9  O   PRO A   2      -6.418  16.645  14.316  1.00  0.64           O  

...

Not positive what the viewer is expecting here. Thank you!

[dkoes]

No, it is expecting the data to be inside the element, like in this example: https://3dmol.org/tests/auto/generate_test.cgi?test=test7

Have you considered switching to the JavaScript API given you are doing so much dynamically?

[elliothershberg]

Thanks! I've switched to the JavaScript API and have figured out most of what I need to do so far.