3Dmol.js Bug - data-ui=true Impacts on Selection

Q

Why is the default style done after removing data-ui="true" in the embedded 3Dmol viewer?

✍: FYIcenter.com

A

There seems to be code bug in the 3Dmol.js library. Here is an HTML code example, Embedded-Viewer-data-ui-Bug.html, that contains 2 embedded viewers: one with data-ui="true" and the other without data-ui="true":

<html>
<body>
<p>Without data-ui=true</p>
<div style="width: 400px; height: 400px; position: relative;"
  class="viewer_3Dmoljs"
  data-pdb="1YCR"
  data-select1='chain:A' data-style1='cartoon:color=spectrum'
  data-select2='chain:B' data-style2='stick'
></div>

<p>With data-ui=true</p>
<div style="width: 400px; height: 400px; position: relative;"
  class="viewer_3Dmoljs"
  data-pdb="1YCR"
  data-select1='chain:A' data-style1='cartoon:color=spectrum'
  data-select2='chain:B' data-style2='stick'
  data-ui="true"
></div>

<script src="/3Dmol-min.js"></script>
</body></html>

This example HTML code will displays the same protein in two DIV elements:

Embedded 3Dmol Viewer - data-ui=true Bug
Embedded 3Dmol Viewer - data-ui=true Bug

As you can see, when UI components are turned on, the default style of "line" is applied to the default selection of "all".

 

⇒ Load Data by URL into Embedded 3Dmol Viewer

⇐ Multiple Selections with Embedded 3Dmol Viewer

⇑ Using Embedded 3Dmol Viewer

⇑⇑ 3Dmol.js FAQ

2023-02-03, 1679🔥, 0💬