Giter Site home page Giter Site logo

molstar-volseg's Introduction

License npm version Build Gitter

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:

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:

molstar-volseg's People

Contributors

aliaksei-chareshneu avatar dsehnal avatar lpravda avatar mc-crocodile avatar midlik avatar raviramos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Forkers

mc-monster

molstar-volseg's Issues

UI - Scrollable container for segmentations

WHAT: Enclose the segmentation buttons in a container with a scrollbox
image

WHY: When the list of annotations is long, I will never know whether there are annotations unless I specifically scroll down to check. Then I have to scroll back and select another segmentation, then scroll back down to check for annotations. Not fun.

Description shown in the place of name for EMD-5250

A duplicate description for the EMD-5250 entry is shown where its name "Mm-cpn deltalid with ATP" should be when loading this entry using the "EMDB SFF" functionality in the right panel. Repeated attempts at loading the entry produce the same output as the first load. Other entries that I have tested do not show this issue. This issue does not present itself when loading the EMD-5250 entry using the "AUTO" functionality in the right panel.

Attached is a screenshot of the erroneous state (left) and how it should look (right).

Description_error

Inconsistent headers in "EMDB SFF" and "AUTO" tabs

Several entries I tested have differing description heading shown in the right panel when loaded using the "AUTO" functionality than when loaded using the "EMDB SFF" functionality.

Affected entries that I discovered:

  • EMD-6338
  • EMD-1181
  • EMD-1963
  • EMD-1014

An example of a description heading shown in the "EMDB SFF" tab (left) and "AUTO" tab (right) is depicted in the attached screenshot.

I have outlined a possible solution in issue #66.

Inconsistent_headers

UI: Show version info

WHAT: add info so that users can easily and uniquely identify what they are using at any given time.

  • commit SHA
  • other useful info as soon as we actually have it (e.g., git "Release" tag v0.1 is cute but currently useless because it does not actually contain any information)

Should be in an obvious yet unintrusive location in the UI and should be copy/pastable
Note: having the info in the browser console is not enough. Too much effort to get the info. Plus, it is not the duty of our users to debug our app.

WHY: minimize chaos in testing and reporting. This way, everyone knows what they should expect when they use the app and when they try to fix issues. Additionally, it makes each snapshot self-sufficient.

Inconsistent hover-over labels

Hover-over labels that show in the lower right corner of the viewport when a user points their cursor over a segment are inconsistent between EMDB and EMPIAR entries. For EMDB entries, only "Volume" is shown there. For EMPIAR entries (more specifically for entry empiar-10070, that is, as of 17. 11. 2022, the only EMPIAR entry available in the front-end prototype), four values are shown for each segment, including the number of segments and, most importantly, its name. A screenshot comparing labels for EMDB and EMPIAR entries is attached.

I would like to suggest a few improvements to the labels:

  1. Show the segment name and its number in the hover-over label pro EMDB entries.
  2. Revise the names of values "Detail" and "Mesh" shown in the hover-over label for empiar-10070. These names are not IMHO very intuitive.

HoverDesc

Segment list not shown when loading entries using "AUTO"

No segment list is shown when loading an entry (e.g. EMD-1832) using the "AUTO" functionality in the right panel. The list is displayed when loading an entry using the "EMDB SFF" functionality.

IMHO, the simplest solution (and perhaps an intuitive one) would be to redirect the user to the "EMDB SFF" tab when loading an entry using the "AUTO" functionality. That way, the presentation functionality of the right panel would not have to be duplicated for the "AUTO" tab.

A comparison of the loading outputs in the right panel from the "AUTO" (left) and "EMDB SFF" (right) functionalities is shown in the attached screenshot.

Missing_seg_list_error

Enable molstar console

WHAT: Molstar has a console (msp-layout-bottom). Please make it visible for cellstar.
image

WHY: The console will will provide immediate feedback that something is happening or has happened successfully/failed.

Dark grey polygons on segmentation surfaces

I have discovered grey polygons on the segmentation surfaces of some of the entries. Their count ranges from just a few that are hard to spot (e.g. EMD-20293) to so numerous that they seriously hamper the look of the visualisation (e.g. EMD-2847 and EMD-6338, which are the worst offenders). A screenshot of EMD-6338 is attached below.

Affected structures in the dataset available in the Cell* front-end prototype (as of 15. 11. 2022) are:

  • EMD-2847
  • EMD-6338
  • EMD-1547
  • EMD-1963
  • EMD-1080 (inside the centre hole)
  • EMD-1014
  • EMD-1181
  • EMD-5250
  • EMD-5143 (at the "seam" of the two segments)
  • EMD-20293 (at a "seam" of two of the segments)
  • EMD-90940002 (two dark grey polygons in total)
  • EMD-90940001
  • EMD-1181002
    3JA8

UI: Loading indicator

WHAT: Add a loading indicator to communicate that the app is doing something even when the console is not printing anything

  • does not need to show the percentage, but merely that something is happening
  • can take any shape or color

WHY: It is very easy to think that the app is frozen. For example, when loading and rendering something for EMPIAR 10070 in AUTO, it takes 3-5 seconds (on my machine) to even show the "Downloading..." info.

Failure to fetch the mesh for EMPIAR-10070

The front end fails to load the mesh for the EMPIAR-10070 entry when using the "Auto" functionality to lead an EMDB/EMPIAR entry in the right panel on the screen. The State Tree in the left panel shows "[error] TypeError: Failed to fetch" under a "Mesh Server" entry. When switching to the "Meshes" functionality, however, a mesh for EMPIAR-10070 (presumably) is loaded.

The log from the console of Google Chrome is attached. The error description starts at lines 113 and 279.

147.251.21.142-1667902669039.log

Three improvements to the state tree

I would like to propose three improvements to the state tree:

  1. Two entries in the state tree probably have something to do with loading the segmentation data (blue arrows in the attached screenshot). They are, IMHO, misleading to the user and should not be visible in the production UI of Cell*.

  2. I think it would be nice if a user could change visualisation settings for all segmentations simultaneously, possibly using the "Segmentation" entry with an orange bar in the state tree. A use case for this feature is, e.g. when a user prepares a complex figure for a publication and wants to change the opacity of all segments simultaneously, while the visualised entry has a lot of segments.

  3. It would be great if the top entry of the state tree would be the id of the visualised entry (e.g. emd-1832), as is the case in Mol*.

StateTreeImprovement

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.