GithubHelp home page GithubHelp logo

isabella232 / vscoding-sequence Goto Github PK

View Code? Open in Web Editor NEW

This project forked from molstar/vscoding-sequence

0.0 0.0 0.0 77.58 MB

VSCode Extension for interactively visualising protein structure data in the editor

License: MIT License

TypeScript 100.00%

vscoding-sequence's Introduction

VSCoding-Sequence 🧬 🧪 🔬

drawing

Version vscode last updated License: MIT

vscode downloads Downloads Trending-Weekly Trending-Monthly

VSCoding Sequence allows for visualisation of protein structures and molecular data in the editor, courtesy of the fantastic Mol*

📚 Viewer Docs | Mol* Docs

📦 Features

📥 Loading a Protein Structure from the PDB or AlphaFoldDB

Usage gif

Open the command palette (⌘ + ⇧ + p) and simply call the Start Protein Viewer command, enter a PDB accession code or (for AlphaFold structures) a UniProt Accession & away you go!

🗓️ Loading Local File(s)

Local file usage gif

Right-click on the file or selection of files in the file editor and select Launch Protein Viewer from File(s)

✅ Supported Formats

  • .pdb
  • .pdbqt
  • .mmcif
  • .gro
  • .xyz
  • .cif
  • .mol
  • .mol2
  • .sdf

📂 Loading a Local Folder

Local folder usage gif

Right-click on the folder in the file explorer and select Launch Protein Viewer from Folder

⚙️ Usage

The below is taken from the Mol* viewer docs which is based on the RCSB PDB mol* documentation thanks to the generosity of RCSB PDB and Dr. Shuchismita Dutta.

🌎 Interface

Viewer Layout

3D Canvas: This is the space where a PDB structure is displayed for manipulation in three dimensions (3D). It is located on the left side of the screen.

Toggle Menu: This menu provides users quick access to some commonly used operations for the 3D canvas. It is located towards the right side of the 3D canvas and has the following functions.

Function Description Icon
Reset Camera Centers and resets the view of the structure on the 3D canvas Rest Camera Icon
Screenshot/State Snapshot Takes an image of the structure as shown and gives options for resolution and download Screenshot.State Snapshot Icon
Controls Panel Hides/shows the Controls Panel to the right Control Panel Icon
Expanded Viewport Expands 3D canvas and Controls Panel to the full browser screen Expanded Viewport Icon
Settings/Control Info Provides settings for viewing of 3D canvas, as well as information about moving in 3D and mouse controls Settings/Control Info Icon
Selection Mode Switches from Default Mode to Selection Mode Selection Mode Icon

Sequence Panel: This menu displays the polymer sequences of macromolecules (proteins and nucleic acids) present in the uploaded PDB structures. In addition, it provides quick access to any small molecular ligands or entities present in the structure(s). It is located at the top of the screen above the 3D Canvas.

Controls Panel: This menu has the following panels for structure manipulation. It is located at the right side of the screen.

Log Panel: This panel shows various logs containing information about actions taken while viewing the structure. This is located at the bottom of the screen below the 3D Canvas.

🐭 Mouse Controls

All the interactions with the molecule(s) uploaded in Mol* require using mouse controls (in the 3D canvas). These controls allow the user to manipulate the view of structures via a variety of functions such as rotating, translating, zooming, and clipping the structures. When not specified, a “click” refers to pressing the left mouse button or tapping a single finger on a touchscreen. If an action is available for the right mouse button, it can also be completed by using the Control button + left mouse button. The general mouse controls are listed below:

  • Rotate: click the left mouse button and move. Alternatively, use the Shift button + left mouse button and drag to rotate the canvas.
  • Translate: click the right mouse button and move. Alternatively, use the Control button + the left mouse button and move. On a touchscreen device, use a two-finger drag.
  • Zoom: use the mouse wheel. On a touchpad, use a two-finger drag. On a touchscreen device, pinch two fingers.
  • Center and zoom: use the right mouse button to click onto the part of the structure you wish to focus on.
  • Clip: use the Shift button + the mouse wheel to change the clipping planes. On a touchpad, use the Shift button + a two-finger drag.

Moving the mouse over (or hovering over) any part of the 3D structure displayed in the 3D canvas, without clicking on it, will highlight it (by coloring it in magenta) according to the Picking Level currently selected. Additionally, in the lower right corner of the 3D canvas, information about the PDB ID, model number, instance, chain ID, residue number, and chain name is listed for the highlighted part of the structure.

As you interact with the structure using the mouse, Mol* contains two modes for which the behavior of a click is different. As a result, each mode enables unique operations to be performed. To switch between the two modes, use the Selection Mode icon (shaped like a cursor) that appears in the Toggle Menu. The list below summarizes Default Mode and Selection Mode.

  • Default Mode: A click on a residue (or any object in 3D) will focus on it. The focused residue and its surroundings (residues and ligands) will be displayed in a ball & stick representation. All local non-covalent interactions will be shown. To hide the surroundings, click on the target residue again.
  • Selection Mode: A click on a residue (or any object in 3D) will select it. What exactly will be selected depends on the value of the Picking Level. Selected parts of the structure will appear with a bright green tint in the 3D canvas and in the Sequence Panel. When selecting polymers with the Picking Level set to “residue,” holding the Shift key while clicking will extend the selection along the polymer from the last clicked residue on. Clicking on any point in the 3D canvas that has no atom will clear the selection.

🧲 Installation

  • The extension can be downloaded/installed from the VSCode marketplace

  • Altenatively, enter ⌘ + ⇧ + x in VSCode and search for Protein Viewer

📬 Community

Support

Need help? Please open an issue for support.

Discussion

Find me on twitter: @arian_jamasb or drop me an email: [email protected]

🌪️ Change log

0.0.8

Adds support for Mol* 3.0.2 to enable viewing of AF2 structures.

0.0.7

README Fixes.

0.0.6

Fixes README emoji shortcodes

0.0.5

  • Adds ability to launch a viewer from a selection of multiple supported files.

0.0.4

  • Adds support to open folders from explorer

0.0.3

  • Update docs & package metadata
  • Fixes issue that viewer would autorefresh and lose state when switching between views.

Adds support for additional filetypes:

  • .pdbqt
  • .mmcif
  • .gro
  • .xyz
  • .cif

Adds support for molecules:

  • .mol
  • .mol2
  • .sdf

0.0.2

  • Adds Right-click open from context menu
  • Enables opening of multiple panels
  • Adds PDB name to panel

0.0.1

Initial release!

📚 Reference

If this extension proves useful, you should cite the developers of Mol*

@article{10.1093/nar/gkab314,
    author = {Sehnal, David and Bittrich, Sebastian and Deshpande, Mandar and Svobodová, Radka and Berka, Karel and Bazgier, Václav and Velankar, Sameer and Burley, Stephen K and Koča, Jaroslav and Rose, Alexander S},
    title = "{Mol* Viewer: modern web app for 3D visualization and analysis of large biomolecular structures}",
    journal = {Nucleic Acids Research},
    volume = {49},
    number = {W1},
    pages = {W431-W437},
    year = {2021},
    month = {05},
    abstract = "{Large biomolecular structures are being determined experimentally on a daily basis using established techniques such as crystallography and electron microscopy. In addition, emerging integrative or hybrid methods (I/HM) are producing structural models of huge macromolecular machines and assemblies, sometimes containing 100s of millions of non-hydrogen atoms. The performance requirements for visualization and analysis tools delivering these data are increasing rapidly. Significant progress in developing online, web-native three-dimensional (3D) visualization tools was previously accomplished with the introduction of the LiteMol suite and NGL Viewers. Thereafter, 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). The web-native Mol* Viewer enables 3D visualization and streaming of macromolecular coordinate and experimental data, together with capabilities for displaying structure quality, functional, or biological context annotations. High-performance graphics and data management allows users to simultaneously visualise up to hundreds of (superimposed) protein structures, stream molecular dynamics simulation trajectories, render cell-level models, or display huge I/HM structures. It is the primary 3D structure viewer used by PDBe and RCSB PDB. It can be easily integrated into third-party services. Mol* Viewer is open source and freely available at https://molstar.org/.}",
    issn = {0305-1048},
    doi = {10.1093/nar/gkab314},
    url = {https://doi.org/10.1093/nar/gkab314},
    eprint = {https://academic.oup.com/nar/article-pdf/49/W1/W431/38842088/gkab314.pdf},
}

vscoding-sequence's People

Contributors

a-r-j avatar harry-hopkinson avatar

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.