dsehnal / litemol Goto Github PK

View Code? Open in Web Editor NEW

154.0 154.0 35.0 41.08 MB

A library/plugin for handling 3D structural molecular data (not only) in the browser.

License: Other

TypeScript 45.30% JavaScript 51.05% CSS 2.56% HTML 1.10%

litemol's People

Contributors

Stargazers

Watchers

litemol's Issues

Computation/Task API support for async/await

Prior to "Bootstrap version 1.3" it was very difficult to use Computation/Task API with async/await. Moreover, Core.Computation and Bootstrap.Task were different implementations of essentially the same thing.

What if I want to highlight an amino acid in a 3D structure?

I want to control, when I click on the name of an amino acid in a drop-down list, it highlights the amino acid on the 3D structure.

name vs authName, seqNumber vs authSeqNumber, asymId vs authAsymId in queries?

For queries, in AsymIdSchema, what's the difference between name and authName, or between seqNumber and authSeqNumber? And similarly, in AsymIdSchema, there's both asymId and authAsymId.

I've seen both with/without auth* used: the Commands example uses seqNumber, and the answer to this issue #10 (comment) uses authSeqNumber and authAsymId.

Loading in PDB from JSON

I have a database of over 160,000 entries with small pdb files that are returned as a part of a JSON object. Is there any way to feed the pdb file in from the JSON object without making a file first?

2TAA - something is wrong with transformation matrices

When I open the 2TAA entry on https://webchemdev.ncbr.muni.cz/LiteMol/Viewer/ I see overlapping molecules:

(blue and beige molecules are overlapping in the center of this picture)

This entry is quite peculiar, I was checking how different viewers are displaying it.

Create and hide visual

Currently, I'm creating the visual first using a transform Transformer.Molecule.CreateVisual, and then hiding it by Command.Entity.SetVisibility, which result in the visual to appear on the screen briefly and then disappear. Is it possible to create a visual and hide it in one go?

Density display issue

Density appears when we click/select an atom. If we click on the same atom again then density disappears and keeps on toggling on selection.

PatternQuery: ResidueIdRange() with residue ids (rather than index)?

(this is an issue with PatternQuery rather than LiteMol, but I can't see a separate repo and I'm guessing they overlap...)

I would like to load a restricted set of residues based on structural domain boundaries (where a structural domain can consist of 1 or more regions of protein structure).

The PatternQuery documentation has a couple of functions that look useful:

Select individual residues by id:

ResidueIds("14 A", "15 A i:A", ... )

Select range of residues by index:

ResidueIdRange('A', 50, 100)

[NB: should this be 'ResidueIndexRange'??]

Either way - in the latter case - I presume the "index" coordinate system is based on the sequential ordering of ATOM records (or mmCIF equivalent), starting from 1? If so, this seems to be more useful as an internal coordinate system rather than for an external user (unless you can access the id to index lookup).

It would be really useful to be able to select a range based on a start and stop residue id as well as index.

e.g. selecting all residues between residues '15' and '200, insert code: A' in chain B...

something like:

ResidueIdRange('B', '15', '200A' )

ResidueIdRange('15 B', '200 B i:A' )

do you plan to implement mtz file format reading

Dear David,
thanks a lot for great work!
I've a question - since i am working with mtz image files, i've to convert it each time to ccp4 format. Do you plan to implement reading MTZ file format in litemol?

Validation hide and remove menu controls not working

Currently user has to reset scene to remove Validation annotation. The hide and remove controls in the menu are not working.

Cartoons cannot be constructred from this model/selection

I found that even if they are all pdb files, some can be displayed, some can not.

When I run the local DhaA80_0001.pdb file, I can display the result, and the file looks like this.

HEADER UNKNOWN dhaa
ATOM 1 N ILE A 4 -8.754 -16.132 -8.009 1.00 0.00 N
ATOM 2 HG22 ILE A 4 -6.941 -19.752 -7.067 1.00 0.00 H
ATOM 3 CG1 ILE A 4 -9.791 -18.984 -7.565 1.00 0.00 C
ATOM 4 H2 ILE A 4 -8.294 -15.261 -8.230 1.00 0.00 H
ATOM 5 H1 ILE A 4 -9.301 -16.392 -8.817 1.00 0.00 H
ATOM 6 C ILE A 4 -6.494 -17.081 -8.649 1.00 0.00 C
ATOM 7 HA ILE A 4 -7.450 -17.195 -6.778 1.00 0.00 H
...

My code is like this

<html>
<head>
		<!-- Complied & minified library css -->
		<link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />
		<!-- Dependencey scripts (these can be skipped if already included in page) -->
		<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
		<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>

		<!-- Complied & minified library JS -->
		<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>
</head>
<body>
	<script> 

		(function () {
		'use strict';
		angular.element(document).ready(function () {
		    angular.bootstrap(document, ['pdb.component.library']);
		});
		}());

	</script>
	
  <pdb-lite-mol pdb-id="'1'"  source-url="http://localhost:8080/DhaA80_0001.pdb" source-format="pdb" ></pdb-lite-mol>

</body>
</html>

2.When I run the local tun_cl_001_1.pdb file, it can't be displayed,and the file looks like this.

ATOM 1 H FIL T 1 4.585 -1.820 -2.756 1.41
ATOM 2 H FIL T 1 3.963 -2.073 -2.031 1.23
CONECT 1 2
ATOM 3 H FIL T 1 3.116 -2.498 -1.804 1.19
CONECT 2 3
ATOM 4 H FIL T 1 2.356 -2.813 -1.472 1.36
CONECT 3 4
ATOM 5 H FIL T 1 1.541 -2.309 -1.443 1.32
CONECT 4 5
ATOM 6 H FIL T 1 0.822 -2.077 -0.795 1.48
CONECT 5 6
ATOM 7 H FIL T 1 0.150 -1.739 -0.173 1.82
CONECT 6 7
...

My code is like this

<!DOCTYPE html>
<html>
<head>
			<!-- Complied & minified library css -->
		<link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />

		<!-- Dependencey scripts (these can be skipped if already included in page) -->
		<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
		<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>

		<!-- Complied & minified library JS -->
		<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>
</head>
<body>
	<script> 

		(function () {
		'use strict';
		angular.element(document).ready(function () {
		    angular.bootstrap(document, ['pdb.component.library']);
		});
		}());
	</script>
   <pdb-lite-mol pdb-id="'1'"  source-url="http://localhost:8080/tun_cl_001_1.pdb" source-format="pdb" ></pdb-lite-mol>

</body>
</html>

Finally prompted me "Cartoons cannot be constructred from this model/selection", I don't understand, because they are all pdb files?
Who is experiencing this problem? How to solve it? Thank you in advance, God.

Originally posted by @ye1002551506 in #29 (comment)

Set secondary structure

Is there a way to explicitly set/change secondary structures after loading a molecule?

White background issue with Safari

Safari Version 9.1 (11601.5.17.1)

Seems to work in Chrome and Firefox, but in Safari I have a black border on two sides of the viewer. It seems to change by width as well.

As soon as I've deployed a new version of the Complex Portal, I'll share a link to so you can see this in action.

Simplest way to... color/style a particular selection?

Morning - another doc request.

Given the starting point from the FAQ:

plugin.loadMolecule({
    id: '1tqn',
    url: 'https://www.ebi.ac.uk/pdbe/static/entry/1tqn_updated.cif',
    format: 'cif' // default
});

What's the simplest, stand-alone way to style a selection, e.g.

colour chain 'A' red?
display residues x,y,z as ball-and-stick?

I can do this by adjusting the code from the examples and creating my own plugin, but that's a lot of internal machinery to (sort of) understand before I can achieve what looks like it should be a fairly simple task.

Would be useful to be able to isolate simple, stand-alone JS code (i.e. when the full source is not available) for casual users to interact with their own components rather than require a full source build.

I have two pdb files locally. I want to implement two views superimposed together.

How to use code to achieve?

C-a trace instead of cartoon

Hello,

I noticed some chains in some structures are drawn using C-a trace even when cartoon visualization is selected. See, for example, 1ci6_A. Is this a bug or is trace a fallback option when cartoon cannot be drawn ?

Cheers,
David

TypeError: Cannot read property 'PropTypes' of undefined

I was using up to recently v1.0, but now with the changes you made for me I've switched to the master. I'm not sure if this is an issue for you, but I thought that you might have come across this. I'm using the viewer with Angular(2/4).

This is my class:

import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';

import LiteMol from 'litemol'
import {environment} from '../../../../../../environments/environment';

const baseURL = environment.pdb_base_url;

@Component({
  selector: 'cp-litmol-viewer',
  templateUrl: 'litmol-viewer.component.html',
  styleUrls: ['litmol-viewer.component.css']
})
export class LitmolViewerComponent implements OnInit, OnChanges {
  private _plugin: any;
  private _selectedXRef: string;

  constructor() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (this._plugin) {
      if (changes['selectedXRef']) {
        this.loadMolecule();
      }
    }
  }

  ngOnInit() {
    this._plugin = LiteMol.Plugin.create({
      target: '#litemol',
      viewportBackground: '#fbfbfb',
      layoutState: {
        hideControls: true,
        isExpanded: false
      },
      // Knowing how often and how people use LiteMol
      // gives us the motivation and data to futher improve it.
      //
      // This option is OFF by default!
      allowAnalytics: true
    });
    this.loadMolecule();
  }

  loadMolecule(): void {
    this.plugin.clear();
    this._plugin.loadMolecule({
      id: this._selectedXRef,
      url: baseURL + '/static/entry/' + this._selectedXRef.toLowerCase() + '_updated.cif',
      format: 'cif' // default
    });
  }

  get plugin(): any {
    return this._plugin;
  }

  get selectedXRef(): string {
    return this._selectedXRef;
  }

  @Input()
  set selectedXRef(value: string) {
    this._selectedXRef = value;
  }
}

For some reason, when I compile it for production I get this error:

display SNFG-shaped carbohydrates

according to this article it is possible to display SNFG-shaped carbohydrates, however how to do it is not clear. Is there documentation on this? Any help would be appreciated.

question on selecting residue

Hi David,

My LiteMol plugin centers on a specific residue which I would like to emphasize. At present, upon opening the window, the residue is shown as 'Cartoon' just as all the other residues. Once a residue is clicked, LiteMol shows a more detailed view of the residue (ball and stick).
Without someone clicking on the residue, can we move directly to the more detailed view (as if someone had clicked the residue upon opening the window)?

Bonus question: how can I set the depth fog (stronger/weaker)?

Thanks,
Bart

How do I superpose multiple structures in the same window?

Show/hide viewport controls (toolbar)

Is there a way in LiteMol to show/hide/toggle the floating toolbar (CSS class lm-viewport-controls) and/or individual buttons therein? Should I just use CSS to do that?

How to do a custom query from a local file

I am reading a pdb file from a local file. Can I do a custom query? For example, querying the 3D structure of a certain residue of the sequence？

<pdb-lite-mol pdb-id="'1cbs'" custom-query="residues?seqNumber=111" hide-controls="true" load-ed-maps="true"></pdb-lite-mol>
Reading the protein id can be done, but reading the local file can't be done. Is there any way to solve it? Thank you in advance
<pdb-lite-mol pdb-id="'1cbs'" source-url="http://localhost/pdbFile/1cbs.pdb" source-format="pdb" custom-query="residues?seqNumber=111" hide-controls="true" load-ed-maps="true"></pdb-lite-mol>

Will it be possible to use LiteMol for small crystal structures?

I'm interested in using LiteMol in a web visualization app I'm developing to replace what I currently have, namely, the JSMol app. It provides a lot of powerful functionality that I'd be interested into, but it seems very geared towards macromolecules - so for example it does not even load .cif files that are accepted by JMol, due to some difference in format. Are there any plans to expand LiteMol in this direction as well?

LiteMol in mpn package manager

As of now it seems that the "core" LiteMol is not in the npm package manager.
There are only two packages that wraps LiteMol in some way, however I think it would be useful to provide LiteMol as it is.

Is there any chance that LiteMol will make it to the npm package manager?

Using CustomTheme from Custom example to markup regions of Structures

Hi,
I'm working on highlighting arbitrary regions of structures using the CustomTheme defined in the Commands example. I've been testing my code by looking at how InterPro or Pfam entries map to structures.

I'm able to create coloured regions correctly using the CustomTheme when looking at structures such as 101m or 4hpq which are comprised of proteins but not when looking at structures containing DNA such as 10mh or 1a31. When looking at 10mh for example, I find that a small part of the DNA molecule is highlighted instead of the protein. This suggests that some aspect of the residue start and end to structure mapping hasn't worked as expected. I suspect the problem is related to how Core.Structure.Query.sequence() method is called, but I'm not really sure.

Do you have any advice on how I should construct a query for a regions of proteins in structures such as 10mh or 1a31?

At the moment I'm attempting to colour a region of 10mh as follows:

var query =Q.sequence( "1", "A", { seqNumber: 12 }, { seqNumber: 319 }, ).compile();
Let me know if you'd like any more details from me.
Regards
Matloob

Rotation state not preserved after visualization style update when only one entity is present.

Hi,

I noticed that when there is only one molecular entity* present in the structure, then when one rotates or zooms in on the structure, and then changes the visualization type (for example, from cartoon to balls and sticks), then the rotation and zoom state of the plugin resets. Not sure if this is intended behaviour, but it doesn't behave like this when multiple entities are present.

Cheers,
David

*by "molecular entity" I mean each "selection" for which the visualization type can be set separately, for example, when one loads te structure 9ant, "entities" are going to be "all residues", "interacting residues", "ligands", "unbound water". If one removes any three of these, then the the issue described above is observed for the remaining one.

Can litemol visualize the Torsional Angles in the tertiary structure of a protein?

Now,I have dihedral angle data for a protein. Can litemol visualize it?

Litemol implementation in Angular 4+ application

Can Litemol be integrated into Angular4+ applications?
I tried doing the same but got stuck into 'defining LiteMol' plugin instance. As far as I know, it might be the /// reference path from index to LiteMol-plugin which creates the runtime issue.
Please let me know if there is any way to run the FAQ section code in Angular4+ and if yes, please provide a sample repo/code.
I am new to this so might have missed some key concepts of either node/typescript/litemol. Any help will be appreciated.
This is the base code which I'm using with all the angular and html tags fulfilled:

import LiteMol from 'litemol';

export class LitemolComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {
    const plugin = LiteMol.Plugin.create({ target: '#litemol' });

    plugin.loadMolecule({
      id: '1a7f',
      url: 'https://www.ebi.ac.uk/pdbe/entry-files/download/pdb1a7f.ent',
      format: 'pdb'
  });
 }

Serialize/restore camera state for persisted scene

I can get the camera state by subscribing to Event.Visual.CameraChanged event. How do I serialize the camera state and restore it to the scene later? Basically, I'd like to persist the scene across user sessions.

EDS radius?

It looks to me that LiteMol is overextending on radius. This selection should show essentially nothing.

How to listen to event 'loaded'?

Is there an event, which tells me if the viewer has been fully loaded? If so, how do I use it?

Init from html file

Hi,

First of all, congratulations for the great job. I'm using this visualization tool and I need to load it automatically from the html page. For instance, to have an input textbox outside the tool where I can put the pdb code and after clicking a button, reload the new pdb code on the tool without reload the page. Is that possible?

On the other hand, I have another doubt: when I load a pdb with several models, I can load them one by one. Is there some way to load all of them the first time I load the molecule? For instance, the '1ARK' has 15 models and I would want to load all at the same time.

Thanks!

3D-SNFG with GLYCAM residue naming

When loading in a molecule with GLYCAM residue naming instead of common residue naming, 3D-SNFG does not work. I've attached two files of mannose, one with common naming:
MAN.pdb.gz
and one with GLYCAM naming:
0MA.pdb.gz
When loaded into the LiteMol viewer (https://www.litemol.org/Viewer/) you can see that only one will display 3D-SNFG. I see in the LiteMol-viewer.js that the GLYCAM naming is listed, but this doesn't seem to make it to the viewer.

Density maps (from PDB-REDO) do not work for all entries

Hi David,

As you are aware, I have been creating a LiteMol plugin to display a specific residue in PDB-REDO structures and maps. A working example is found here:
https://lahma.rhpc.nki.nl/litemol?&pdbid=1cbs&chain=A&resnum=15
Any other pdb entry, chain, or residue can be focused on by changing the respective parameters.

While testing I came across a few structure models where the maps do not load, e.g.:
https://lahma.rhpc.nki.nl/litemol?&pdbid=1c7h&chain=A&resnum=15

The maps load normally into Coot. Also, the map is defined in the protein area and not near the origin so displacement effects should not be a factor.
Could you offer a suggestion why this may be?

PS: from the working example you may see why we would like to play with the fog depth. If you have the time, this would be a cool feature for us but we are already quite satisfied with the current version.

Cheers,
Bart

Cavity Display Effect

Hello David, I have a question to consult you.

I want the cavity to show its atomic radius, which is similar to the shape of a pipe, but I can only show this effect by selecting VDW Balls in the controller.

I want to achieve the effect of example / Channels.

There is a data. json file in example / Channels. Is it generated with a PDB file? Should I use some method to generate the JSON file from my PDB file? To achieve the desired effect? Please give me some advice and guidance. @dsehnal Thank you.

Scrolling event

I've a request to for the scrolling behaviour of the LiteMol viewer. Currently when you scroll a long a page and courser hovers over the LiteMol viewer I get stuck in the viewer and have to move my mouse out of it.

It would be nice, if the scrolling event only actives if I stop scrolling and stay in the widget. Otherwise, on smaller screens it mights be very difficult to scroll. The guys from Reactome, had a similar problem and as their viewer takes the whole width of the page it was sometimes impossible to scroll.

Open local pdb files in LiteMol

I am a complete novice in LiteMol so sorry for this "stupid" question. I want a LiteMol viewer on my hompage and used the example here (http://embed.plnkr.co/looflQ9owiGW0m9bh0fF/). But I have one major issue:

No molecule is loaded in the viewer, and more importantly
If i have my pdb file located in a folder how do I load this specific pdb file in the viewer?

Thanks in advance.

My code is:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
    <!-- Complied & minified library css -->
    <link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />

    <!-- Dependencey scripts (these can be skipped if already included in page) -->
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>

    <!-- Complied & minified library JS -->
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>
    
    <script src="script.js"></script>
  </head>

  <body>
    <h3>LiteMol Component Demo</h3>
    
    <div class="view3d">
      <pdb-lite-mol id="litemol_1cbs" pdb-id="'1aqd'" hide-controls="true"></pdb-lite-mol>
    </div>
    
  </body>

</html>

Change default background color

Hi guys

I am using the simple code to implement LiteMol on my webpage, and it is working fine. But how can I change the default background color from black to white??
THANKS

My code

<!-- Complied & minified library css -->
<link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />


<!-- Dependencey scripts (these can be skipped if already included in page) -->
<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>

<!-- Complied & minified library JS -->
<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>

<script>
  angular.element(document).ready(function () {
      angular.bootstrap(document, ['pdb.component.library']);
  });
</script>

LiteMol Component Demo

<div class="view3d">
  <pdb-lite-mol pdb-id="''" source-url="https://www.epsdatabase.com/litemol_js/1dv9.pdb" source-format="pdb" hide-controls="true"></pdb-lite-mol>
</div>

Residue Labels

Hi David,
Thank you so much for developing litemol, it is impressive how fast it is, considering it also looks great!

I am using litemol in a (currently-in-development) website that shows the active centre of enzymes. After some fiddling, I was able to select and zoom in residues in the active centre, but I was not able to find how to label residues/ligands. Is there a way to do this?

You mentioned in a previous "issue" you were thinking about developing an easier interface. I think that would be really useful. It was challenging for me just to select a few residues and change their representation.

Anyway, great job on what is already done!
Thanks,
Antonio.

react

Hi,
this looks great! Are you planning to provide a react component for the viewer?
thanks - A.

Resize canvas after wrapper DOM element resized

Is there a way to dynamically update the webgl canvas size (not its CSS width/height) after the wrapper DOM element for LiteMol plugin is resized?

Color a given part of the protein

I would like to simple color a part of the molecule to green, and the rest to red. Lets say from residue 10-30 in the A chain to green, rest to red.

I know there is a similar question here, however that is 3 years old, and i found the explanation extremely unclear, and the codes provided there does not seem to function.

I have this protein loaded now:

plugin.loadMolecule({
            id: pdb,
            url: 'https://files.rcsb.org/download/5e0m.pdb ',
            format: 'pdb',
            ref: 'model'
        });

Carbohydrates - Update visual toolbar - VDW option error

VDW toggle throws error in update visual toolbar for Carbohydrates visual

Support for (old) 80 character PDB files?

The 80 character PDB format is officially deprecated, but lots of applications still use it (and probably will do for some time).

I can't see any obvious mention of a parser for this old format (e.g. ATOM records), but it would be really useful.

How can I add customized shapes?

What are the APIs to add customized shapes? for example, spheres with desired position, radius, color etc

How to use position relative?

Hi,

I'm trying to place the LiteMol on a HTML without React. Some div's have position absolute with margins set to 0. This behavior occludes any other widgets on my page.

The usage is too hard for me, I'm struggling at PluginSpec. What can I do to display only the viewer's area? Last question is how to draw some mesh? Or better something like Pymol's map and volume commands, semi-transparent smoothed volume colored by atom (instead of electron) density?

Problems loading my own pdb file in LiteMol

I am working on implementing the molecular viewer "LiteMol" on my html webpage. The plugin is working great when loading a pdb file from a predefined library (see second code example below), but I want to load my own pdb file located in a "litemol_js" folder (fist code example below), but it is not working. The viewer is empty. Please help???

Here is my code:

<!DOCTYPE html>
<html>

  <head>

    <!-- Complied & minified library css -->
    <link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />


    <!-- Dependencey scripts (these can be skipped if already included in page) -->
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>

    <!-- Complied & minified library JS -->
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>

    <script>
      angular.element(document).ready(function () {
          angular.bootstrap(document, ['pdb.component.library']);
      });
    </script>
    <style>
      .view3d {
        height:400px;
        width:400px;
        position:relative;
      }
    </style>
  </head>

  <body>
    <h3>LiteMol Component Demo</h3>

    <div class="view3d">
      <pdb-lite-mol pdb-id="''" source-url="https://www.epsdatabase.com/litemol_js/1dv9.pdb" source-format="pdb" hide-controls="true"></pdb-lite-mol>
    </div>

  </body>

</html>

And here is the working code when i load from the predefined library.

<!DOCTYPE html>
<html>

  <head>

    <!-- Complied & minified library css -->
    <link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />

    <!-- Dependencey scripts (these can be skipped if already included in page) -->
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>

    <!-- Complied & minified library JS -->
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>

    <script>
      angular.element(document).ready(function () {
          angular.bootstrap(document, ['pdb.component.library']);
      });
    </script>
    <style>
      .view3d {
        height:400px;
        width:400px;
        position:relative;
      }
    </style>
  </head>

  <body>
    <h3>LiteMol Component Demo</h3>

    <div class="view3d">
      <pdb-lite-mol pdb-id="''" source-url="https://www.ebi.ac.uk/pdbe/entry-files/pdb1cbs.ent" source-format="pdb" hide-controls="true"></pdb-lite-mol>
    </div>

  </body>

</html>

Can litemol read molecular data of type string, and if so, what format

Downloading electron density from specific URL

Hello,

I would like to show electron density from PDB-REDO in the LiteMol plugin on a website that we are developing, but I don't know how I can specify the URL for that.
I found in the 'Commands' example that density was loaded by the function LiteMol.Viewer.PDBe.Data.DownloadDensity() but this is unsuited for my purpose.

How can I specify the URL? And does it actually download MTZ files or density in another format?

Thanks for your help! I like the plugin a lot!

Bart

Open LiteMol Viewer programatically with parameters

Hi,

I noticed that it is possible to load data from a URL or from a file in SDF format. I would like to programatically open the viewer with the source of this data as a parameter. I would like to generate links from compounds in ChEMBL using the SDF data of the compound.

For example, I can generate a url to obtain the SDF data, something similar to this:
ftp://ftp.ebi.ac.uk/pub/databases/msd/pdbechem/files/sdf_r/AIN.sdf

Now I would like to open the viewer with this data. Something like:
https://webchemdev.ncbr.muni.cz/LiteMol/Viewer/?load_sdf_from_url=ftp://ftp.ebi.ac.uk/pub/databases/msd/pdbechem/files/sdf_r/AIN.sdf

And that would open the viewer, load the SDF data and render the molecule. Is that possible somehow?

I also tried to use the embedded element from here but it only accepts PBD IDs.

Thanks

dsehnal / litemol Goto Github PK

litemol's People

Contributors

Stargazers

Watchers

Forkers

litemol's Issues

LiteMol Component Demo

Recommend Projects

Recommend Topics

Recommend Org