molstar/pdbe-molstar

Molstar PDBe implementation

Mol*

The goal of Mol* (/'mol-star/) is to provide a technology stack that serves as a basis for the next-generation data delivery and analysis tools for (not only) macromolecular structure data. Mol* development was jointly initiated by PDBe and RCSB PDB to combine and build on the strengths of LiteMol (developed by PDBe) and NGL (developed by RCSB PDB) viewers.

When using Mol*, please cite:

David Sehnal, Sebastian Bittrich, Mandar Deshpande, Radka Svobodová, Karel Berka, Václav Bazgier, Sameer Velankar, Stephen K Burley, Jaroslav Koča, Alexander S Rose: Mol* Viewer: modern web app for 3D visualization and analysis of large biomolecular structures, Nucleic Acids Research, 2021; https://doi.org/10.1093/nar/gkab314.

Protein Data Bank Integrations

• The pdbe-molstar library is the Mol* implementation used by EMBL-EBI data resources such as PDBe, PDBe-KB and AlphaFold DB. This implementation can be used as a JS plugin and a Web component and supports property/attribute-based easy customisation. It provides helper methods to facilitate programmatic interactions between the web application and the 3D viewer. It also provides a superposition view for overlaying all the observed ligand molecules on representative protein conformations.

• rcsb-molstar is the Mol* plugin used by RCSB PDB. The project provides additional presets for the visualization of structure alignments and structure motifs such as ligand binding sites. Furthermore, rcsb-molstar allows to interactively add or hide of (parts of) chains, as seen in the 3D Protein Feature View.

Project Structure Overview

The core of Mol* consists of these modules (see under src/):

• mol-task Computation abstraction with progress tracking and cancellation support.
• mol-data Collections (integer-based sets, interface to columns/tables, etc.)
• mol-math Math related (loosely) algorithms and data structures.
• mol-io Parsing library. Each format is parsed into an interface that corresponds to the data stored by it. Support for common coordinate, experimental/map, and annotation data formats.
• mol-model Data structures and algorithms (such as querying) for representing molecular data (including coordinate, experimental/map, and annotation data).
• mol-model-formats Data format parsers for mol-model.
• mol-model-props Common "custom properties".
• mol-script A scripting language for creating representations/scenes and querying (includes the MolQL query language).
• mol-geo Creating (molecular) geometries.
• mol-theme Theming for structure, volume and shape representations.
• mol-repr Molecular representations for structures, volumes and shapes.
• mol-gl A wrapper around WebGL.
• mol-canvas3d A low-level 3d view component. Uses mol-geo to generate geometries.
• mol-state State representation tree with state saving and automatic updates.
• mol-plugin Allow to define modular Mol* plugin instances utilizing mol-state and mol-canvas3d.
• mol-plugin-state State transformations, builders, and managers.
• mol-plugin-ui React-based user interface for the Mol* plugin. Some components of the UI are usable outside the main plugin and can be integrated into 3rd party solutions.
• mol-util Useful things that do not fit elsewhere.

Moreover, the project contains the implementation of servers, including

• servers/model A tool for accessing coordinate and annotation data of molecular structures.
• servers/volume A tool for accessing volumetric experimental data related to molecular structures.
• servers/plugin-state A basic server to store Mol* Plugin states.

The project also contains performance tests (perf-tests), examples, and cli apps (CIF to BinaryCIF converter and JSON domain annotation to CIF converter).

Previous Work

This project builds on experience from previous solutions:

• LiteMol Suite
• WebChemistry
• NGL Viewer
• MMTF
• MolQL
• PDB Component Library
• And many others (list will be continuously expanded).

Building & Running

Build:

npm install
npm run build

Build automatically on file save:

npm run watch

If working on just the viewer, npm run watch-viewer will provide shorter compile times.

Build with debug mode enabled:

DEBUG=molstar npm run watch

Debug/production mode in browsers can be turned on/off during runtime by calling setMolStarDebugMode(true/false, true/false) from the dev console.

Cleaning and forcing a full rebuild

npm run clean

Wipes the build and lib directories and .tsbuildinfo files.

npm run rebuild

Runs the cleanup script prior to building the project, forcing a full rebuild of the project.

Use these commands to resolve occassional build failures which may arise after some dependency updates. Once done, npm run build should work again. Note that full rebuilds take more time to complete.

Build for production:

NODE_ENV=production npm run build

Run

If not installed previously:

npm install -g http-server

...or a similar solution.

From the root of the project:

http-server -p PORT-NUMBER

and navigate to build/viewer

Code generation

CIF schemas

node ./lib/commonjs/cli/cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/mmcif.ts -p mmCIF
node ./lib/commonjs/cli/cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/ccd.ts -p CCD
node ./lib/commonjs/cli/cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/bird.ts -p BIRD
node ./lib/commonjs/cli/cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/cif-core.ts -p CifCore -aa

Lipid names

node lib/commonjs/cli/lipid-params -o src/mol-model/structure/model/types/lipids.ts

Ion names

node --max-old-space-size=4096 lib/commonjs/cli/chem-comp-dict/create-ions.js src/mol-model/structure/model/types/ions.ts

Saccharide names

node --max-old-space-size=4096 lib/commonjs/cli/chem-comp-dict/create-saccharides.js src/mol-model/structure/model/types/saccharides.ts

Other scripts

Create chem comp bond table

node --max-old-space-size=4096 lib/commonjs/cli/chem-comp-dict/create-table.js build/data/ccb.bcif -b

Test model server

export NODE_PATH="lib"; node build/src/servers/model/test.js

State Transformer Docs

export NODE_PATH="lib"; node build/state-docs

Convert any CIF to BinaryCIF (or vice versa)

node lib/commonjs/servers/model/preprocess -i file.cif -ob file.bcif

To see all available commands, use node lib/commonjs/servers/model/preprocess -h.

Or

node lib/commonjs/cli/cif2bcif

E.g.

node lib/commonjs/cli/cif2bcif src.cif out.bcif.gz
node lib/commonjs/cli/cif2bcif src.bcif.gz out.cif

Development

Installation

If node complains about a missing acorn peer dependency, run the following commands

npm update acorn --depth 20
npm dedupe

Editor

To get syntax highlighting for shader files add the following to Visual Code's settings files and make sure relevant extensions are installed in the editor.

"files.associations": {
    "*.glsl.ts": "glsl",
    "*.frag.ts": "glsl",
    "*.vert.ts": "glsl"
},

Publish

Prerelease

npm version prerelease # assumes the current version ends with '-dev.X'
npm publish --tag next

Release

npm version 0.X.0 # provide valid semver string
npm publish

Deploy

npm run test
npm run build
node ./scripts/deploy.js # currently updates the viewer on molstar.org/viewer

Contributing

Just open an issue or make a pull request. All contributions are welcome.

Funding

Funding sources include but are not limited to:

• RCSB PDB funding by a grant [DBI-1338415; PI: SK Burley] from the NSF, the NIH, and the US DoE
• PDBe, EMBL-EBI
• CEITEC
• EntosAI

pdbe-molstar's Issues

Local PBD file not working

I'm hosting a local version of a PDB file with changed residue numbers and only certain ligands. The file seems to open up fine on PyMol.

customData:{ url:'CleanPdb.pdb', format: 'pdb', binary:true}

I'm pathing to the correct file in the same directory, and it shows a blank viewer. I tried pathing to it through a web server and I'm having the same issue. Here's what it looks like:

select pdb value from ddl

Hi,
I am trying to use the plugin version as demoed on https://embed.plnkr.co/plunk/094fAnyWsuQVtYja.
My version is not so different since I would like to select the PDB value from a drop down list, which is working fine for the initial load, but not the following ( TypeError: Cannot read properties of undefined (reading 'props')). Any advice would be appreciated.
My version is this :

<title>PDBe Molstar - Basic</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Molstar CSS & JS -->
<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-3.0.0.css">
<script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-plugin-3.0.0.js"></script>
<style>
  #myViewer{
    float:left;
    width:300px;
    height: 300px;
    position:relative;
  }
</style>

<h4>PDBe Mol* JS Plugin Demo</h4>

<div>
    <label for='pdb-list' style='margin-right: 12px'>Select a PDB entry</label>
    <select id="pdb-list" name='pdb-list'>
        <option value='1qub' selected>1qub</option>
        <option value='2nnu'>2nnu</option>
        <option value='6v08'>6v08</option>
        <option value='6v09'>6v09</option>
        }
    </select>
</div>

<!-- Molstar container -->
<div id="myViewer"></div>
  
<script>
  var pdbList = $('#pdb-list');

  //Create plugin instance
  var viewerInstance = new PDBeMolstarPlugin();

  function loadPDBinMolStar(id) {

  //Set options (Checkout available options list in the documentation)
  var options = {
    moleculeId: id,
    hideControls: true
  }
  
  //Get element from HTML/Template to place the viewer 
  var viewerContainer = document.getElementById('myViewer');

  //Call render method to display the 3D view
  viewerInstance.render(viewerContainer, options);
}

pdbList.change(function () {
        var id = pdbList.val();

        if (id) {
      
            loadPDBinMolStar(id);
        }
    });

    pdbList.change();
</script>

Quality control of representations

Dear, PDBeurope. Please add options to control the quality of representation (especially surfaces). It would be extremely useful to me. I'm new in JS, so I'm not sure than I know how to contribute to this feature. Thank you!

[Question] Load custom data

Hi,

Is it possible to load a file as data source? I see the web component supports 'custom-data-binary' but I cannot make it work in my React code as below (no errors in console). Is there an example using custom-data-binary? Didn't find anywhere in the doc.

Many thanks.

import { Typography } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import React, { useState } from 'react'

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    height: '100%',
    alignContent: 'center',
    justifyContent: 'center'
  },
  fileSelectRoot: {
    display: 'flex',
    flexDirection: 'column',
    alignSelf: 'center'
  },
  fileSelectLabel: {
    opacity: 0.8,
    marginBottom: theme.spacing(2)
  }
}))

const Home = () => {
  const classes = useStyles()

  const [fileBinary, setFileBinary] = useState('')

  const handleFileChange = e => {
    const file = e.target.files[0]
    const reader = new FileReader()
    reader.readAsText(file)

    reader.onload = () => {
      setFileBinary(reader.result)
    }

    reader.onerror = () => {
      console.log('file error - ', reader.error)
    }
  }

  const renderFileSelect = () => (
    <div className={classes.fileSelectRoot}>
      <Typography variant='h6' className={classes.fileSelectLabel}>
        Select a file to view in MolStar
      </Typography>
      <input type='file' onChange={handleFileChange} />
    </div>
  )

  console.log('binary - ', fileBinary)

  return (
    <div className={classes.root}>
      {fileBinary ? (
        <pdbe-molstar
          custom-data-binary={fileBinary}
          custom-data-format='pdb'
        />
      ) : (
        renderFileSelect()
      )}
    </div>
  )
}

export { Home }

Hello, how to introduce as a component, like Molstar React

Internal Server Error on structure retrieval

The endpoint used by PDBE-molstar is currently down and the plugin returns error:

Access to XMLHttpRequest at 'https://www.ebi.ac.uk/pdbe/model-server/v1/2nnu/full?encoding=bcif' from origin 'https://run.plnkr.co' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

tested on the examples found at https://github.com/PDBeurope/pdbe-molstar/wiki

Hiding a part of molecule

Dear all,

Firstly, thanks again for the nice work! I am also really grateful for support and implementing features based on requests from people!

Is it possible to programmatically hide a part of a molecule (if I know which residues should be displayed, and the rest should not)?

Best regards,
Aliaksei

AlphaFold2 pLDDT coloring from B-factor fields not working

For some reason plDDT data represented in an mmCIF file alone is insufficient for coloring the structure by plDDT similar to the AlphaFold2 DB. Additionally, I can't find a guide for the proper formatting required for formatting an mmCIF file so that the alphafoldView: true will actually work.

Is there a guide or something for how to format mmCIF files so that alphafoldView: true will work?

Show interactions between custom atoms

I am showing interactions as dashed lines in my application:

  auth_asym_id: bond.chain[0],
  auth_residue_number: bond.residues,
  representation: 'interactions',
  label: "Hydrogen bond network " + i,
  representationColor: color_palette[i]

This code will find interactions between the residues in bond.residues and add dashed lines when molstar thinks there is an interaction applicable. But how can I show an interaction between atom A and B, regardless of whether molstar think there is an interaction or not?

Otherwise, it would be enough to know what cutoffs is molstar using to plot hydrogen bonds so that I can perhaps start using the same cutoffs in my method. I am finding discrepancies between what I define as a hydrogen bond and what molstar shows.

Any ideas?

what is the difference between pdbe-molstar and litemol?

programmatic access to mouse events

Hi,
I searched in docs and examples but it seems that the API offers no way to access mouse events happening in the canvas.

I would like to prevent some default click behavior (e.g. focusing on right-clicked residues) and add some custom behaviors.

While I can catch clicks happening on the canvas it is very difficult (or impossible) to know where the click happened (residue or background) and to prevent default behavior.

Is this possible with the current API? Do you plan to add some or any of these functionalities? Alternatively, do you know of any workaround that could help me?

Highlight/select on blob-ified str JSON

Hi folks,

thanks for the great tooling :) I have a bit of a custom setup whereby I get the structure (PDB; from ColabFold/AF2) as string through some API in JSON format. I managed to BLOB-ify and URL-ify the string so that the component loads it. Here's the Plunker: https://plnkr.co/edit/aoXJPfblSLSwwv1X

I'm wondering how I could select/highlight a stretch of residues, but I seem to be unable to get it right. The console reads:

index.js?9b0a:148 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'managers')
    at PDBeMolstarPlugin.eval (index.js?9b0a:148:1)
    at step (tslib.es6.js?9ab4:102:1)
    at Object.eval [as next] (tslib.es6.js?9ab4:83:46)
    at eval (tslib.es6.js?9ab4:76:1)
    at new Promise (<anonymous>)
    at Module.__awaiter (tslib.es6.js?9ab4:72:1)
    at Object.select (index.js?9b0a:136:41)
    at (index):76:29

I suppose I'm not able to "select" the right structure object, but I'm also unsure what the entity_id will be. On that note, minor one: any chance there's some options I can pass to set the name of the molecule? The "blob..." looks meh:

Thanks!! :)

loading multiple structures loses non-covalent interaction rendering. Can it be maintained?

Hi PDBe-Molstar,
Thanks for a great package. I'd like to load a protein structure (PDB), then separately a ligand structure (SDF). I'd like also to visualize the non-covalent interactions, as would be done with ligandView or by clicking on the ligand in a full single structure.

However, when loading the structures separately, the non-covalent interactions aren't visualized. Is there any way to maintain these?

Compare, for example, the ligand view of retinoic acid in 1CBS with the two loaded separately. Example ligand interactions are here - basically hydrogen bonding between the carboxylic acid and the tyrosine and arginine is of interest.

Doing the same in pdbe-molstar doesn't show the hydrogen bonding interactions, presumably because the molecules are considered separate, and not just non-bonded (see below for example).

Thanks

Example HTML follows. Note that, because I'm including the raw PDB and SDF data as plaintext blobs, it's a bit long. It's also worth noting that, when doing this, CPU usage appears pinned to ~100%.

here's a plunker

PDBe Ligand view

I'm having trouble getting the Ligand View to work

I'm using the webcomponent, using the example code on the wiki, together with the webcomponent plunk example:

<div id="myViewer">
<pdbe-molstar ligand-label-comp-id="REA" ligand-auth-asym-Id="A" ligand-auth-seq-id="200" ligand-hydrogens="true"></pdbe-molstar>
</div>

However, this does not render anything. Do I need to pass additional attributes such as molecule-id?

Adding several noncontinguos residues to visual.select

I'd like to add several residues at a time in a representation in visual.select().

According to the documentation can add a single residue, or add a set of contiguous residues that go from start_residue_number to end_residue_number. But I'd like to apply the representation to several noncontiguous residues, like residue 130, 120, and 150. Lists are not accepted.
This is the code:

var selectSections = [
            {
              struct_asym_id: 'A',
              residue_number: 130,
              color:{r:255,g:0,b:255},
              representation: 'spacefill'
            }
          ]

      viewerInstance.render(viewerContainer, options);
      viewerInstance.events.loadComplete.subscribe(() => {
                 viewerInstance.visual.select({ data: selectSections, nonSelectedColor: {r:255,g:255,b:255}});
});

Any ideas?

Thanks for the great work.

Colouring (e.g. via select) atoms

Hello,
Thank you for developing this nice tool!
I would like to ask if it is possible to colour certain atoms?

E.g., "select" function described here: https://github.com/PDBeurope/pdbe-molstar/wiki/3.-Helper-Methods#wiki-pages-box
had param called "atoms". Is it the way to colour atoms?

I attempted to colour atoms using this function and providing an array with atom IDs (e.g. ["1", "2", "3"]). But it does not seem to work. Could you tell me please what I am missing? Or there is another way of colouring atoms?

Thanks again,
Aliaksei

Support loading Molstar States?

Hi, is there a way to specify a saved Molstar Viewer state? maybe through loading a saved .molx file?

thanks

Request to support mol* version 3.x

Is there a plan to move to mol* 3.x.

There has been number of depended vulnerability fixed including one critical for our product.
We're using pdbe-components in some our scientific documentation products and pdbe-molstar is now dependend on old molstar 2.x which is e.g. transitively depended on some vulnerable packages, e.g. npm audit output:

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Critical      │ Prototype Pollution in immer                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ immer                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=9.0.6                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ 0db21d89148306569a6810721d56ee2c0dda27f423d77e0b7c823e02f63… │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ 0db21d89148306569a6810721d56ee2c0dda27f423d77e0b7c823e02f63… │
│               │ > molstar > immer                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://github.com/advisories/GHSA-33f9-j839-rf8h            │
└───────────────┴──────────────────────────────────────────────────────────────┘

where 0db21d89148306569a6810721d56ee2c0dda27f423d77e0b7c823e02f63 is our private fork of pdbe-components with fixed issue #18

Move to mol* 3.x would fix the critical issues as well as issue #18 which is already fixed in mol* 3.x

How to preserve the initial style?

Dear all,
Firstly, thanks again for the nice work! I am also really grateful for support and implementing features based on requests from people!
Below is my code，I want the initial protein structure to be presented in the "molecular-surface" form. Next, other protein structures are added to manifest themselves in the form of "spacefills".But it will all be updated to the "spacefill" form (including the initial protein structure).
` new Promise((resolve => {
viewerInstance = new PDBeMolstarPlugin();
viewerContainer = document.getElementById("pdbView");

    // console.log(resolve)
    resolve()
})).then(() => {
    optionBall = {
        customData: {
            url: "http://127.0.0.1:5000/molStar/frameIndex", format: "pdb",
        }, visualStyle: "molecular-surface",
        hideControls: true,
    }
}).then(() => {
    viewerInstance.render(viewerContainer, optionBall)
}).then(() => {
    setTimeout(() => {
        viewerInstance.visual.update({
            customData: {
                url: "http://127.0.0.1:5000/molStar/pocketIndex",
                format: 'pdb',
            },
            visualStyle: "spacefill",
        }, false)
    }, 2000)
})`

Load local PDB files programmatically

Hi, I would like to load PDB file from a local PDB file in my website, I tried this:
customData: {url: './static/uploads/pdb.pdb', format:'pdb'}
but it doesn't work.

plddt scores

Under alphafoldView, how to set plddt scores independently as context instead of having to include them in a field in a structure file?

Improve npm installation

Thanks for the great visualisation tool! While integrating it into RNAcentral I noticed that the package is published on npm but npm i pdbe-molstar is not useful because there are no pre-built dist files.

I know that the js and css files can be loaded directly from https://www.ebi.ac.uk/pdbe/pdb-component-library/ but I prefer to gzip and minify all assets on server side.

Could you please look into improving npm support? Let me know if you need more information.

Protein gets merged with ligand structure, even when they are separated by TER

I am trying to view the local .pdb structure containing protein and ligand separated by TER using the molstar JS plugin. But for a few complexes, the protein is getting merged with the ligand structure.

What could be the issue? I have used the following options, here uurl is a string which contains the URL of .pdb from localhost.

var options = {
        customData:{ url: uurl, format: 'pdb', binary:false },
        hideControls:true,
        expanded:false,
        hideExpandIcon:false,
        AnimationEffect:true,
        domainAnnotation:true,
        landscape:true}

Does the alphafoldView support only the cif file format?

Does the alphafoldView support only the cif file format?

I download a pdb file from AlphaFold DB, but the plddt colormap did not work. How to visualize pdb file with alphafoldView.

Custom color theming

How can I change the color theming of the plugin ?
I integrated the plugin with:

<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-1.2.1.css">
<script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-plugin-1.2.1.js"></script>
[...]
//Create plugin instance
var viewerInstance = new PDBeMolstarPlugin();

and it work well, but with a white background by default for example I think that the buttons colors and backgrounds are not really fitting right. I managed to change the backgrounds and colors of the first buttons:

But it is difficult and time consuming to change manually all backgrounds and colors:

Is there an "easy" way to modify all backgrounds and buttons colors in javascript for exemple ?

Thank you for your very useful work and help !

Not able to visualize protein structures which are present in my local system (in my computer) into my own html page using molstar.

Dear Sir/ma'am,
I am trying to plugin molstar into my website as a visualization tool to visualize some of the structures I have modeled on my own. When using Plugin parameters (options), i.e customData to get data from my computer and visualize it on my website, I am getting this error "GET /home/supremeleader/visualization/A0A0A0CIP3.cif" Error (404): "Not found." I have just learned javascript and website development. Can you please help me with this issue so I can visualize the modeled protein on my website using molstar. Thank you in advance.

I have been using this script from documentation to visualize it:
var options = {
customData:{url:'/home/supremeleader/visualization/A0A0A0CIP3.cif',format:'cif'}}
error: "GET /home/supremeleader/visualization/A0A0A0CIP3.cif" Error (404): "Not found"

Please let me know which option I should use and any format syntax to visualize the protein in my system in my database.

Prashant Upadhyay
PhD
Indian Institute of Technology Kanpur

Displays a subset of protein molecules

Dear all,
Firstly, thanks again for the nice work! I am also really grateful for support and implementing features based on requests from people!

The figure above shows a molecular structure, which is composed of a complete molecular data (ribbon) and cavity data (sphere).
Now, I want to use pdbe to realize it. What should I do? As shown below, they are displayed in one page.

Best regards,
Fanyin.

Adding sidechain to region changes underlying colors

Hey,
First off, thanks for your great work on making molstar easier to integrate.

I am using pdbe-molstar to visualize the side-chains at some regions in AlphaFold predictions. The problem I am facing is that the spectrum colorings of the AlphaFold confidence disappears in regions where the side-chains are displayed.

For example (before showing side chains for region)

var viewerInstance = new PDBeMolstarPlugin();

var options = {
    customData: { url: 'https://alphafold.ebi.ac.uk/files/AF-Q76EI6-F1-model_v1.cif', format: 'cif' },
    alphafoldView: true,
}

var viewerContainer = document.getElementById('myViewer');
viewerInstance.render(viewerContainer, options);

Now when I display side-chains for a small region, that region loses the AlphaFold confidence coloring

var viewerInstance = new PDBeMolstarPlugin();

var options = {
    customData: { url: 'https://alphafold.ebi.ac.uk/files/AF-Q76EI6-F1-model_v1.cif', format: 'cif' },
    alphafoldView: true,
}

var viewerContainer = document.getElementById('myViewer');
viewerInstance.render(viewerContainer, options);



viewerInstance.events.loadComplete.subscribe(() => {
    viewerInstance.visual.select({ data: [{ struct_asym_id: 'A', start_residue_number: 10, end_residue_number: 15, sideChain: true }] })
    // or
    // viewerInstance.visual.select({ data: [{ struct_asym_id: 'A', start_residue_number: 10, end_residue_number: 15, representation: 'ball-and-stick' }] })

})

The region where the side-chains are being displayed are now orange.
Is there a way to maintain the AF confidence coloring for the region in which side-chains are enable?

Or even better, can I color everything, including the side chains by AF confidence?

Thanks for your time!

Custom URL for loading density/maps/ccp4 files

I was wondering whether it is possible to load custom ccp4 files into the pdbe molstar web component.

So far we have set up the pdbe molstar web component to load custom pdb files using the custom-data-url and custom-data-format attributes. Given that these custom files do not have associated maps in the www.ebi.ac.uk repository, using the show-maps attribute does not help. We have our own .ccp4 format files that we would like to load into the component in the same way we have loaded the pdb files.

We have also tried to load these files by specifying custom-data-format='ccp4' but unfortunately it seems that is not the correct way to do it either as I get the error; Error: ccp4 not supported..

Looking at the Molstar Viewer (https://molstar.org/viewer/) there are options to load densities into the viewer from a custom url. Is it possible to use these features in the pdbe molstar web component?

Thanks in advance for your help!

show surroundings of ligand programmatically

Hi, love this library and thank you for your work.

On clicking a residue, molstar viewers zoom in to that residue, show surrounding side chains, as well as interactions such as hydrogen bonds. Is there a way to access this behaviour programmatically here?

I can see how ligandView:{label_comp_id: "LIG"} achieves a zoomed in view as well as the surroundings but, in this case, there are no H-bonds and the rest of the protein in cartoon rep goes missing. I figured I could just start from the ligandView rep, and adding back in the cartoon representation for the protein afterwards. For some reason changes this ball-and-stick side chains of the surroundings to an orange colour, which I'm guessing is from https://github.com/PDBeurope/pdbe-molstar/blob/6c00322a95a36c072a61d00a3cdc1067fa918d92/src/app/index.ts#L454

So, lacking a way to simulate a mouse click on the ligand, can I remove this orange colour?

Cheers!

Is it possible to not color protein by chain ID but uniformly by custom color?

Hello,

Thank you for this package. I'm using pdbe-molstar as a web-component and I would like to ask if it's possible to visualize a protein uniformly by a custom color provided as an argument and not by the chain ID as it's by default?

Thanks in advance

Hide non-covalent interactions

Is that possible to disable all non-covalent interactions when click a residue?

load local pdbs

Dear Madame/Sir,
Thank you very much for this library. Is there any way to load pdb structures from a static/local folder? I want to show some models I made. Best, Liviu

Individually coloring residues with visual.select()

Hi !

I'm currently integrating Mol* in a web project in which I would like to individually color the residues in protein structure based on a score associated with each residue.

As I understand the demo on helper functions, I have to create an array of selections in the following format:
{
residue_number: i,
color: score2RGB(score)
}
then give the whole list to viewerInstance.visual.select().

My issue is that if any selection in the array returns no residue, the whole select() function fails.

A specific example is PDB 5i81. If the array contains any residue with a residue number lower than 38, no coloring is done because the visual only contains residues 38 to 565.

Can I have any tip on how to circuvent this issue ? Or is there any other method to individually color residues in the protein structure ?

Best regards,
François Ancien

Show the sequence and make it hoverable

Dear all,
I would like to insert Molstar in one web project that exploits custom data, stored locally.
I am studying Wikia (https://github.com/molstar/pdbe-molstar/wiki/1.-PDBe-Molstar-as-JS-plugin_v0.1.0) but currently, I am not finding any solution to show the sequence together with the whole visualizer like in this RCSB example..
Some suggestion?

Option 'alphafoldview' is not working with PDB format

With PDBe Molstar as JS plugin, AlphaFold confidence score colouring theme for AlphaFold model (option alphafoldview) is not working if the file loaded is in PDB format. It is working with cif format.
To test:
go to url: https://embed.plnkr.co/plunk/WlRx73uuGA9EJbpn
In index.html windows:
change url with pdb extension (https://alphafold.ebi.ac.uk/files/AF-O15552-F1-model_v1.cif -> https://alphafold.ebi.ac.uk/files/AF-O15552-F1-model_v1.pdb)
change format: 'cif' -> format: 'pdb'
Protein change to gray !

How to change visualStyle/representation programmatically?

Hi, I have a website project embedding pdbe-molstar JS plugin.
I want to change visualStyle or the representation after the user clicked a button.

For example : Change 'cartoon' to 'gaussian-surface'.

Coloring chains by arbitrary values

I was wondering if PDBe molstar had support for coloring entire chains by some arbitrary value (e.g., values within b factor fields). I want to have a single chain protein and a vector of numbers of the same length that where each element corresponds to a residue within the chain. I want to color structure similar to how the AlphaFold2 plddt values are colored by specifying color stops.

Is this currently possible in the current version of PDBe molstar? If not I'd like to request it as a feature since coloring structures with values such as summed PAE would be incredibly useful.

Add support for multiple PDB files as well as SDF files

I think a worthwhile feature would be to add support for displaying multiple PDB files simultaneously as well as SDF files. For example right now I'm trying to display a protein structure as well as a ligand that binds to a specific part of that structure (SDF file format).

As of right now I wasn't able to find a way to do this with PDBe-molstar but I know this is possible using https://www.rcsb.org/3d-view.

`viewer.visual.<function>()` ignored immediately after `viewer.visual.update()`

I have a page whit an embedded viewerInstance. The page gives the user the possibility to chose the pdb structure to visualize in the viewerInstance. To show a new PDB I use the viewer.update() function which correctly fetches and visualizes a new PDB. However I also want to visualize specific chains so I would like to do viewer.visual.select() just after the new pdb has loaded: However this doesn't work:

viewerInstance.visual.update({moleculeId: pdb.id})
viewerInstance.visual.focus(...);

I noticed that the viewerInstance returns a Promise so I tried this but this also doesn't work:

viewerInstance.visual.update({moleculeId: pdb.id}).then( (d) => {
            this.viewerInstance.visual.focus(...);
          }
        );

I think I may be missing something. How am I supposed to update() to a new molecule and immediately show a specific chain or focus on a specific region?

CSS transform:scale cause molstar canvas to have incorrect size

We use the pdbe-molstar web component in our interactive documentation.
In some cases we need the whole part of the web page to be smaller, therefore, we use CSS transform: scale(0.5);transform-origin:top left;width:200% This cause the pdbe-molstar to be broken. The viewport (msp-viewport) have correct size. The canvas with molecule in white background has incorrect size (even smaller) as seen in the following screenshot:

Prepared plunker example of this error at https://plnkr.co/edit/pdmHZTULh3vUPq8e?preview

The canvas size should fit the div. This issue is present in chrome 88.0.4324.190, firefox 86.0, ms edge 88.0.705.74

Boolean settings (expanded, load-maps, pdbe-link) ignore their values

I'm experiencing an issue with some of the boolean settings for the PDBE web component

When setting the expanded attribute, when set to 'false', the returned behavior is as if it is set to 'true'. In fact, it seems like I can give it any value e.g. expanded="asdf" which results in an expanded view.

I'm using the WebComponent example with the following code:

<div id="myViewer">
    <pdbe-molstar id="pdbeMolstarComponent" molecule-id="2nnu" hide-controls="true"
        expanded="false"></pdbe-molstar>
</div>

I found the same behavior for load-maps="false"; this results in maps being loaded, and setting pdbe-link="false" has not effect.

When setting, for example hide-selection-icon="true", this does give the expected result.

I'm aware I can get the desired behavior by simply omitting for example the expanded parameter, but it would make my life easier if expanded="false" gives the non-expanded view.

Cannot open local file by using PDBe Molstar as web component

Hello,

I tried to load my own structure file in pdb format with below code. The mol* window could show normally, but fail to show the structure. (I could open the structure in PyMOL and use below path to open the file.)
In windows:
<pdbe-molstar custom-data-url="file://C:\Users\yongj\Desktop\Tox-GHH.QDT78576.pdb" bg-color-r="255" bg-color-g="255" bg-color-b="255" hide-controls="true" custom-data-format="pdb"></pdbe-molstar>

In linux:

Thanks for your help.

programmatically remove selections from view

Is it possible with the current set of endpoints to programmatically remove selected sections of a loaded structure? The hideStructure option only allow to hide a limited set of elements. I need something along the line of:

viewer.visual.select([...]).remove()

or

viewer.visual.remove([...])

Alternatively, is it possible to selectively load just some chains of a PDB? The visual.update() function takes as argument a assemblyId but I can't find a chainId or an auth_asym_id

superposition question

Hi,
i have a question about superposition. Well maybe not superposition exactly..
How can i load 2 pdb structures which are already superposed? I use gesamt for superposition, which gives me 2 files with the coordinates calculated. In NGL i can load both files with stage.LoadFile which works fine. They are both loaded and i can select both of them. But in pdbe-molstar i could not find how i can load 2 pdb files. Parameter 'customData' accepts only one file.
I found an example for superposition at: https://embed.plnkr.co/plunk/kL2PCWp9ed1U2m99, but this one is using some internal mechanisms. It seems it is doing superpose on the fly.

I use the library as JS plugin.

I would be happy for any help or hints about where should i look at :)

Thank you for your time and efforts!

Best regards
Dimitar

Serving PDB data without a server

Hi PDBe-Molstar - this repo has been really useful, so thank you.

I'd like to embed structure data into a single html file so that, for instance, I can send the visualization to a collaborator, who could view non-public structures without requiring them to open a local server hosting the PDB file. Is there some possible work-around to achieve this? Or could there be some other way to trick pdbe-molstar into thinking it's reading local datafiles via a url without actually using a server? I imagine it's possible with Molstar, but I love the simplicity of pdbe-molstar.

Thanks
Lewis

Is it possible to add plane or surface after render?

First off, I would like to thank you for the great work you do with Molstar.

Regarding my question, I am trying to differentiate between different segments of the protein structure predicted by Alphafold. I changed the colour of the selected sequence of residues as shown below.

viewerInstance.render(viewerContainer, options);
      viewerInstance.events.loadComplete.subscribe(() => {viewerInstance.visual.select({ data: [{entity_id: '1', start_residue_number: 1, end_residue_number: 25, color:{r:1,g:22,b:0}}, {entity_id: '1', start_residue_number: 26, end_residue_number: 35, color:{r:22,g:255,b:0}}]})})

However, with this method, we lose the confidence information given by Alphafold. I was wondering if it is possible to do something similar to add a plane fitting a selected group of residues or a surface covering them.

I got my inspiration from this link:

https://molstar.org/viewer/?snapshot-url=https://molstar.org/viewer-docs/tips/measurements/plane.molx&snapshot-url-type=molx

Thanks in advance.

How to addRepresentation after render

Hi, first of all: thanks for the great work, it is really nice!!

I'd like to add representations after rendering a protein.
I've seen I can use loadComplete to select after rendering, like this:

var selectSections = [
            {
              struct_asym_id: 'A',
              start_residue_number: 130,
              end_residue_number: 140,
              color:{r:255,g:0,b:255},
              sideChain: true
            }
          ]

viewerInstance.render(viewerContainer, options);
viewerInstance.events.loadComplete.subscribe(() => {
       viewerInstance.visual.select({ data: selectSections, nonSelectedColor: {r:255,g:255,b:255}});
});

But how can I specify the representation type, such as 'spacefill'?

Thanks!

Measurements in web-components/JS-plugin not available

Is there anyway to measure distances and label molecules either via JS plugin or web-component code?
I am only able to highlight molecules but I require labelling of specific atoms/residues.

Loading custom data (e.g. local .pdb file)

Hi,
I am trying to embed PDBe Molstar as a web component into HTML, as described in: https://github.com/PDBeurope/pdbe-molstar/wiki/2.-PDBe-Molstar-as-Web-component#steps-to-include-pdbe-molstar-as-a-web-component-in-a-web-application

I would like to load a local .pdb file using the custom-data-url attribute.

1. I am unable to load a local .pdb or .cif from an absolute or relative filepath using any of the provided code examples.
2. The example provided in the documentation is not currently working as the URL provided (https://www.ebi.ac.uk/pdbe/coordinates/1cbs/cartoon) points at an mmcif, although custom-data-format="pdb" is specified.