mirror of
https://github.com/molstar/molstar.git
synced 2026-06-04 13:30:24 +08:00
46af7d03bf
* MVSX format provider * MVS: Integration examples * MVS: drag-and-drop support for MVSX * MVS: support for URL param mvs-format=mvsx * MVS: docs for MVSX * MVS: mvs-render supports MVSX * Update README
112 lines
5.2 KiB
HTML
112 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!-- Replace "latest" by the specific version you want to use, e.g. "4.0.0" -->
|
|
<script src="https://cdn.jsdelivr.net/npm/molstar@latest/build/viewer/molstar.js"></script>
|
|
<!-- Replace "latest" by the specific version you want to use, e.g. "4.0.0" -->
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/molstar@latest/build/viewer/molstar.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Integration of Mol* with MolViewSpec Extension</h1>
|
|
<p>
|
|
This page demonstrates several methods to integrate Mol* Viewer in a web page and use MolViewSpec functionality.
|
|
See the source HTML to see the actual code.
|
|
</p>
|
|
|
|
|
|
<h2>Method 1: Get MVS view from a server and pass to the viewer</h2>
|
|
<p>
|
|
The recommended method is to serve the MVS view files by your server (either as static files or generated by the
|
|
server on-demand) and call the <code>loadMvsFromUrl</code> method to retrieve and load them.
|
|
This example uses a MVS view file from the address specified in the <code>sourceUrl</code> variable.
|
|
If the MVS view file contains relative references, they will be resolved as relative to <code>sourceUrl</code>.
|
|
</p>
|
|
|
|
<div id="viewer1" style="position: relative; width: 500px; height: 500px;"></div>
|
|
<script>
|
|
const sourceUrl = 'https://raw.githubusercontent.com/molstar/molstar/master/examples/mvs/1h9t_domain_labels.mvsj';
|
|
molstar.Viewer.create('viewer1', { layoutIsExpanded: false, layoutShowControls: false })
|
|
.then(viewer => viewer.loadMvsFromUrl(sourceUrl, 'mvsj'));
|
|
</script>
|
|
|
|
|
|
<p>
|
|
A variation of this method uses <code>molstar.PluginExtensions.mvs.loadMVS</code> instead of
|
|
<code>loadMvsFromUrl</code> and allows replacing the MVS view after it has been loaded.
|
|
</p>
|
|
|
|
<div id="viewer1b" style="position: relative; width: 500px; height: 500px;"></div>
|
|
<button onclick="loadView1();">View 1</button>
|
|
<button onclick="loadView2();">View 2</button>
|
|
<script>
|
|
let theViewer;
|
|
function load(viewer, url, replace) {
|
|
fetch(url)
|
|
.then(response => response.text())
|
|
.then(text => molstar.PluginExtensions.mvs.MVSData.fromMVSJ(text))
|
|
.then(mvsData => molstar.PluginExtensions.mvs.loadMVS(viewer.plugin, mvsData, { sourceUrl: url, sanityChecks: true, replaceExisting: replace }));
|
|
}
|
|
function loadView1() {
|
|
load(theViewer, 'https://raw.githubusercontent.com/molstar/molstar/master/examples/mvs/1cbs.mvsj', true);
|
|
}
|
|
function loadView2() {
|
|
load(theViewer, 'https://raw.githubusercontent.com/molstar/molstar/master/examples/mvs/1cbs-focus.mvsj', true);
|
|
}
|
|
molstar.Viewer.create('viewer1b', { layoutIsExpanded: false, layoutShowControls: false })
|
|
.then(viewer => {
|
|
theViewer = viewer;
|
|
loadView1();
|
|
});
|
|
</script>
|
|
|
|
|
|
<h2>Method 2: Construct MVS view on frontend and pass to the viewer</h2>
|
|
<p>
|
|
Another option is to utilize the MVS builder provided by the extension to build the view on frontend and then
|
|
pass it to the viewer. This example builds the view in plain JavaScript, directly in a <script> tag in
|
|
HTML. However, for a better developer experience consider writing the code in TypeScript.
|
|
If the built MVS view contains relative references, they will be resolved as relative to the URL of this HTML
|
|
page.
|
|
</p>
|
|
|
|
<div id="viewer2" style="position: relative; width: 500px; height: 500px;"></div>
|
|
<script>
|
|
// Build an ad-hoc MVS view
|
|
const builder = molstar.PluginExtensions.mvs.MVSData.createBuilder();
|
|
const structure = builder
|
|
.download({ url: 'https://www.ebi.ac.uk/pdbe/entry-files/1cbs.bcif' })
|
|
.parse({ format: 'bcif' })
|
|
.modelStructure({});
|
|
structure
|
|
.component({ selector: 'polymer' })
|
|
.representation({ type: 'cartoon' })
|
|
.color({ color: 'green' });
|
|
structure
|
|
.component({ selector: 'ligand' })
|
|
.label({ text: 'Retinoic acid' })
|
|
.focus({})
|
|
.representation({ type: 'ball_and_stick' })
|
|
.color({ color: '#cc3399' });
|
|
const mvsData = builder.getState();
|
|
|
|
// Initialize viewer and load MVSJ
|
|
const mvsj = molstar.PluginExtensions.mvs.MVSData.toMVSJ(mvsData);
|
|
molstar.Viewer.create('viewer2', { layoutIsExpanded: false, layoutShowControls: false })
|
|
.then(viewer => viewer.loadMvsData(mvsj, 'mvsj'));
|
|
|
|
// // Alternative initialization and loading (avoids encoding and again decoding the data, allows changing the view by using `replaceExisting: true`):
|
|
// molstar.Viewer.create('viewer2', { layoutIsExpanded: false, layoutShowControls: false })
|
|
// .then(viewer => molstar.PluginExtensions.mvs.loadMVS(viewer.plugin, mvsData, { sourceUrl: undefined, sanityChecks: true, replaceExisting: false }));
|
|
</script>
|
|
|
|
|
|
<p>
|
|
Again, there is variation with using <code>molstar.PluginExtensions.mvs.loadMVS</code> instead of
|
|
<code>loadMvsData</code>.
|
|
</p>
|
|
|
|
</body>
|
|
|
|
</html> |