Skip to content

MolViewSpec extension in Mol* - Integration in web pages

This page demonstrates several methods to integrate Mol* Viewer in a web page and use MolViewSpec functionality.

Example 1

Get MVS view from a server and pass to the viewer

The recommended method is to serve the MVS files from your server (either as static files or generated by the server on-demand) and call the loadMvsFromUrl method to retrieve and load them. This example uses a MVS file from the address specified in the sourceUrl variable. If the MVS view file contains relative references, they will be resolved as relative to sourceUrl.

<!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>
        <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>
    </body>
</html>

Result:

Example 2

Replace MVS view after loading

A variation of the first example is to molstar.PluginExtensions.mvs.loadMVS instead of loadMvsFromUrl. This allows replacing the MVS view after it has been loaded.

<!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>
        <div id="viewer2" style="position: relative; width: 500px; height: 500px;"></div>
        <button class="button" onclick="loadView1();">View 1</button>
        <button class="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('viewer2', { layoutIsExpanded: false, layoutShowControls: false })
                .then(viewer => {
                    theViewer = viewer;
                    loadView1();
                });
        </script>
    </body>
</html>

Result:

Example 3

Construct MVS view on frontend and pass to the viewer

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.

<!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>
        <div id="viewer3" 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
            molstar.Viewer
                .create('viewer3', { layoutIsExpanded: false, layoutShowControls: false })
                .then(viewer => molstar.PluginExtensions.mvs.loadMVS(viewer.plugin, mvsData, { sourceUrl: undefined, sanityChecks: true, replaceExisting: false }));
        </script>
    </body>
</html>

Result: