Double

Amazing thing

This column takes 1/2 of the page

molstar = require("molstar@4.16.0/build/viewer/molstar.js")

viewerContainer = html`<div id="molstar-viewer" style="width: 100%; height: 400px;position: relative"></div>`

MolstarViewer =  {
  // Create the viewer after the container is available in the DOM
  const viewer = molstar.Viewer.create(viewerContainer, {
    layoutIsExpanded: false,
    layoutShowControls: false,
    layoutShowRemoteState: false,
    layoutShowSequence: true,
    layoutShowLog: false,
    layoutShowLeftPanel: true,
    layoutShowStructureTools: true,
    viewportShowExpand: true,
    viewportShowSelectionMode: false,
    viewportShowAnimation: true,
    enableMonomerColoring: true
  });
  return viewer;
}

Amazing thing 2

This column takes 1/2 of the page

viewerContainer2 = html`<div id="molstar-viewer" style="width: 100%; height: 400px;position: relative"></div>`

MolstarViewer2 =  {
  // Create the viewer after the container is available in the DOM
  const viewer = molstar.Viewer.create(viewerContainer2, {
    layoutIsExpanded: false,
    layoutShowControls: false,
    layoutShowRemoteState: false,
    layoutShowSequence: true,
    layoutShowLog: false,
    layoutShowLeftPanel: true,
    layoutShowStructureTools: true,
    viewportShowExpand: true,
    viewportShowSelectionMode: false,
    viewportShowAnimation: true,
    enableMonomerColoring: true
  });
  return viewer;
}