Skip to content

Instantly share code, notes, and snippets.

@Anindyadeep

Anindyadeep/gist:e689bcb294ac0d956f416cfbefb71212

Created April 22, 2025 15:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Anindyadeep/e689bcb294ac0d956f416cfbefb71212 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Anindyadeep/e689bcb294ac0d956f416cfbefb71212 to your computer and use it in GitHub Desktop.
Download ZIP
molstar instruction
Raw
gistfile1.txt
Format: HTML
max tokens
50000
All Extensions
Base path: root
±17015 tokens
Copy
API
Add to README
Other Tools
├── .gitignore
├── IO
├── load_file
│ ├── index.html
│ ├── package.json
│ ├── src
│ │ ├── common
│ │ │ └── init.ts
│ │ └── index.ts
│ └── tsconfig.json
└── save_session
│ ├── index.html
│ ├── package.json
│ ├── src
│ ├── common
│ │ └── init.ts
│ └── index.ts
│ └── tsconfig.json
├── LICENSE
├── assets
├── codesandbox_download.png
└── codesandbox_overview.jpg
├── camera
└── move_camera
│ ├── index.html
│ ├── package.json
│ ├── src
│ ├── common
│ │ └── init.ts
│ └── index.ts
│ └── tsconfig.json
├── coloring
└── color_a_selection
│ ├── index.html
│ ├── package.json
│ ├── src
│ ├── common
│ │ └── init.ts
│ └── index.ts
│ └── tsconfig.json
├── default
├── index.html
├── package.json
├── src
│ ├── common
│ │ └── init.ts
│ └── index.ts
└── tsconfig.json
├── prebuilt_examples
├── gallery
│ ├── example.html
│ ├── js
│ │ └── gallery.js
│ └── representations
│ │ ├── create_representations.html
│ │ └── create_representations.js
├── package.json
└── src
│ ├── index.ts
│ └── viewer.ts
├── readme.md
├── representation
├── create_representations
│ ├── index.html
│ ├── package.json
│ ├── src
│ │ ├── common
│ │ │ └── init.ts
│ │ └── index.ts
│ └── tsconfig.json
├── delete_representations
│ ├── index.html
│ ├── package.json
│ ├── src
│ │ ├── common
│ │ │ └── init.ts
│ │ └── index.ts
│ └── tsconfig.json
├── transparency_using_selection
│ ├── index.html
│ ├── package.json
│ ├── src
│ │ ├── common
│ │ │ └── init.ts
│ │ └── index.ts
│ └── tsconfig.json
├── update_representations
│ ├── index.html
│ ├── package.json
│ ├── src
│ │ ├── common
│ │ │ └── init.ts
│ │ └── index.ts
│ └── tsconfig.json
└── visibility_using_tags
│ ├── index.html
│ ├── package.json
│ ├── src
│ ├── common
│ │ └── init.ts
│ └── index.ts
│ └── tsconfig.json
└── selection
└── select_ligand_and_surroundings
├── index.html
├── package.json
├── src
├── common
│ └── init.ts
└── index.ts
└── tsconfig.json
## /.gitignore:
1 | node_modules/
2 | debug.log
3 | npm-debug.log
4 | .cache
5 | dist
6 | .DS_Store
7 | package-lock.json
---
## /IO/load_file/index.html:
1 | <html>
2 | <head>
3 | <title>Mol\* Gallery</title>
4 | <meta charset="UTF-8" />
5 | </head>
6 |
7 | <body style="font-family: sans-serif; height: 100%; width: 100%; margin: 0;">
8 | <label>Load: </label><input type='file' id='load'/>
9 | <div id="app" style="height: 100%;width: 100%;">
10 | <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
11 | </div>
12 |
13 | <script src="src/index.ts"></script>
14 | </body>
15 | </html>
16 |
---
## /IO/load_file/package.json:
1 | {
2 | "name": "molstar-typescript-example",
3 | "version": "1.0.0",
4 | "description": "Molstar and TypeScript example starter project",
5 | "main": "index.html",
6 | "scripts": {
7 | "start": "parcel index.html",
8 | "build": "parcel build index.html"
9 | },
10 | "dependencies": {
11 | "parcel-bundler": "1.12.5",
12 | "molstar": "4.3.0"
13 | },
14 | "devDependencies": {
15 | "typescript": "4.4.4"
16 | },
17 | "resolutions": {
18 | "@babel/preset-env": "7.13.8"
19 | },
20 | "keywords": [
21 | "typescript",
22 | "molstar"
23 | ]
24 | }
---
## /IO/load_file/src/common/init.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
3 |
4 | export async function createRootViewer() {
5 | const viewport = document.getElementById("app") as HTMLDivElement;
6 | const canvas = document.getElementById("canvas") as HTMLCanvasElement;
7 |
8 | const plugin = new PluginContext(DefaultPluginSpec());
9 | await plugin.init();
10 |
11 | if (!plugin.initViewer(canvas, viewport)) {
12 | viewport.innerHTML = "Failed to init Mol\*";
13 | throw new Error("init failed");
14 | }
15 | //@ts-ignore
16 | window["molstar"] = plugin;
17 |
18 | return plugin;
19 | }
20 |
---
## /IO/load_file/src/index.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { OpenFiles } from "molstar/lib/mol-plugin-state/actions/file";
3 | import { createRootViewer } from "./common/init";
4 | import { Asset } from "molstar/lib/mol-util/assets";
5 |
6 | async function init() {
7 | // Create viewer
8 | const plugin = await createRootViewer();
9 |
10 | // Set up save/load buttons and events for with and without assets
11 | document.getElementById('load')!.oninput = (e) => loadFile(plugin, e);
12 | }
13 | init();
14 |
15 | async function loadFile(plugin: PluginContext, event: Event) {
16 | // Get the input element
17 | const input = event.target as HTMLInputElement;
18 | // If there are no files, return
19 | if (!input.files || input.files.length === 0) return;
20 |
21 | // Convert the FileList into Asset.File[] for the plugin
22 | const files = Array.from(input.files);
23 | const assetFiles = files.map(f => Asset.File(f));
24 |
25 | // Create a task to OpenFiles
26 | const task = plugin.state.data.applyAction(OpenFiles, {
27 | files: assetFiles, // AssetFiles from input
28 | format: {
29 | name: 'auto', // Format of the file can be autodetermined (.pdb, .cif, etc.)
30 | params: {} // No special parameters
31 | },
32 | visuals: true // Create the visual representations
33 | })
34 |
35 | // Run the task to OpenFiles
36 | plugin.runTask(task)
37 | }
---
## /IO/load_file/tsconfig.json:
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "commonjs",
5 | "jsx": "preserve",
6 | "esModuleInterop": true,
7 | "sourceMap": true,
8 | "allowJs": true,
9 | "lib": [
10 | "es6",
11 | "dom"
12 | ],
13 | "rootDir": "src",
14 | "moduleResolution": "node"
15 | }
16 | }
---
## /IO/save_session/index.html:
1 | <html>
2 | <head>
3 | <title>Mol\* Gallery</title>
4 | <meta charset="UTF-8" />
5 | </head>
6 |
7 | <body style="font-family: sans-serif; height: 100%; width: 100%; margin: 0;">
8 | <label>Save Snapshot (with Assets): </label><button id="saveAssets">Download</button>
9 | <br>
10 | <label>Load Snapshot (with Assets): </label><input type='file' id='loadAssets' accept=".molx"/>
11 | <br>
12 | <label>Save Snapshot (without Assets): </label><button id="saveNoAssets">Download</button>
13 | <br>
14 | <label>Load Snapshot (without Assets): </label><input type='file' id='loadNoAssets' accept=".molj"/>
15 | <div id="app" style="height: 100%;width: 100%;">
16 | <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
17 | </div>
18 |
19 | <script src="src/index.ts"></script>
20 | </body>
21 | </html>
22 |
---
## /IO/save_session/package.json:
1 | {
2 | "name": "molstar-typescript-example",
3 | "version": "1.0.0",
4 | "description": "Molstar and TypeScript example starter project",
5 | "main": "index.html",
6 | "scripts": {
7 | "start": "parcel index.html",
8 | "build": "parcel build index.html"
9 | },
10 | "dependencies": {
11 | "parcel-bundler": "1.12.5",
12 | "molstar": "4.3.0"
13 | },
14 | "devDependencies": {
15 | "typescript": "4.4.4"
16 | },
17 | "resolutions": {
18 | "@babel/preset-env": "7.13.8"
19 | },
20 | "keywords": [
21 | "typescript",
22 | "molstar"
23 | ]
24 | }
---
## /IO/save_session/src/common/init.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
3 |
4 | export async function createRootViewer() {
5 | const viewport = document.getElementById("app") as HTMLDivElement;
6 | const canvas = document.getElementById("canvas") as HTMLCanvasElement;
7 |
8 | const plugin = new PluginContext(DefaultPluginSpec());
9 | await plugin.init();
10 |
11 | if (!plugin.initViewer(canvas, viewport)) {
12 | viewport.innerHTML = "Failed to init Mol\*";
13 | throw new Error("init failed");
14 | }
15 | //@ts-ignore
16 | window["molstar"] = plugin;
17 |
18 | return plugin;
19 | }
20 |
---
## /IO/save_session/src/index.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { createRootViewer } from "./common/init";
3 | import { download } from "molstar/lib/mol-util/download";
4 |
5 | async function init() {
6 | // Create viewer
7 | const plugin = await createRootViewer();
8 |
9 | // Download PDB
10 | const fileData = await plugin.builders.data.download(
11 | { url: "https://models.rcsb.org/4hhb.bcif", isBinary: true }
12 | );
13 |
14 | // Load PDB and create representation
15 | const trajectory = await plugin.builders.structure.parseTrajectory(fileData, "mmcif");
16 | await plugin.builders.structure.hierarchy.applyPreset(trajectory, "default");
17 |
18 | // Set up save/load buttons and events for with and without assets
19 | // Assets refer to the files used to initially load the data (in this case a .bcif from the RCSB)
20 |
21 | // If you save with assets (.molx), you can load the session without having to re-download the data
22 | document.getElementById('saveAssets')!.onclick = (e) => saveState(plugin, 'molx');
23 | document.getElementById('loadAssets')!.oninput = (e) => loadState(plugin, e);
24 | // If you save without assets (.molj), you will need to either keep the existing assets
25 | // in the viewer or load them prior to loading the session
26 | document.getElementById('saveNoAssets')!.onclick = (e) => saveState(plugin, 'molj');
27 | document.getElementById('loadNoAssets')!.onchange = (e) => loadState(plugin, e);
28 | }
29 | init();
30 |
31 | async function saveState(plugin: PluginContext, type: 'molx' | 'molj') {
32 | // Here we serialize the snapshot into a Blob
33 | // There is also the helper command `PluginCommands.State.Snapshots.DownloadToFile`
34 | // which is more high-level but does not let you set the file name
35 | const data = await plugin.managers.snapshot.serialize({type})
36 |
37 | // Next, we download the Blob and give it a filename
38 | download(data, `state.${type}`);
39 | }
40 |
41 | async function loadState(plugin: PluginContext, event: Event) {
42 | // Get the input element
43 | const input = event.target as HTMLInputElement;
44 | // If there are no files, return
45 | if (!input.files || input.files.length === 0) return;
46 |
47 | // Here we open the snapshot from the file
48 | // There is also the helper command `PluginCommands.State.Snapshots.OpenFile`
49 | // which does the same thing.
50 | await plugin.managers.snapshot.open(input.files[0]);
51 | }
---
## /IO/save_session/tsconfig.json:
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "commonjs",
5 | "jsx": "preserve",
6 | "esModuleInterop": true,
7 | "sourceMap": true,
8 | "allowJs": true,
9 | "lib": [
10 | "es6",
11 | "dom"
12 | ],
13 | "rootDir": "src",
14 | "moduleResolution": "node"
15 | }
16 | }
---
## /LICENSE:
1 | The MIT License
2 |
3 | Copyright (c) 2024 - now, Mol\* contributors
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
---
## /assets/codesandbox_download.png:
https://raw.githubusercontent.com/molstar/example-gallery/de81d32145e02f1f351ea966111ff0cab2e4178f/assets/codesandbox_download.png
---
## /assets/codesandbox_overview.jpg:
https://raw.githubusercontent.com/molstar/example-gallery/de81d32145e02f1f351ea966111ff0cab2e4178f/assets/codesandbox_overview.jpg
---
## /camera/move_camera/index.html:
1 | <html>
2 | <head>
3 | <title>Mol\* Gallery</title>
4 | <meta charset="UTF-8" />
5 | </head>
6 |
7 | <body style="font-family: sans-serif; height: 100%; width: 100%; margin: 0;">
8 | <button id="panLeft">Pan Left (-X)</button>
9 | <button id="panRight">Pan Right (+X)</button>
10 | <button id="rotUp">Rotate Up (+Pitch)</button>
11 | <button id="rotDown">Rotate Down (-Pitch)</button>
12 | <button id="zoomIn">Zoom In (+Zoom)</button>
13 | <button id="zoomOut">Zoom Out (-Zoom)</button>
14 | <button id="reset">Reset</button>
15 | <div id="app" style="height: 100%;width: 100%;">
16 | <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
17 | </div>
18 |
19 | <script src="src/index.ts"></script>
20 | </body>
21 | </html>
22 |
---
## /camera/move_camera/package.json:
1 | {
2 | "name": "molstar-typescript-example",
3 | "version": "1.0.0",
4 | "description": "Molstar and TypeScript example starter project",
5 | "main": "index.html",
6 | "scripts": {
7 | "start": "parcel index.html",
8 | "build": "parcel build index.html"
9 | },
10 | "dependencies": {
11 | "parcel-bundler": "1.12.5",
12 | "molstar": "4.3.0"
13 | },
14 | "devDependencies": {
15 | "typescript": "4.4.4"
16 | },
17 | "resolutions": {
18 | "@babel/preset-env": "7.13.8"
19 | },
20 | "keywords": [
21 | "typescript",
22 | "molstar"
23 | ]
24 | }
---
## /camera/move_camera/src/common/init.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
3 |
4 | export async function createRootViewer() {
5 | const viewport = document.getElementById("app") as HTMLDivElement;
6 | const canvas = document.getElementById("canvas") as HTMLCanvasElement;
7 |
8 | const plugin = new PluginContext(DefaultPluginSpec());
9 | await plugin.init();
10 |
11 | if (!plugin.initViewer(canvas, viewport)) {
12 | viewport.innerHTML = "Failed to init Mol\*";
13 | throw new Error("init failed");
14 | }
15 | //@ts-ignore
16 | window["molstar"] = plugin;
17 |
18 | return plugin;
19 | }
20 |
---
## /camera/move_camera/src/index.ts:
1 | import { Camera } from "molstar/lib/mol-canvas3d/camera";
2 | import { createRootViewer } from "./common/init";
3 | import { Quat, Vec3 } from "molstar/lib/mol-math/linear-algebra";
4 |
5 | async function init() {
6 | // Create viewer
7 | const plugin = await createRootViewer();
8 |
9 | // Download mmCIF
10 | const fileData = await plugin.builders.data.download(
11 | { url: "https://models.rcsb.org/4hhb.bcif", isBinary: true }
12 | );
13 |
14 | // Load mmCIF and create representation
15 | const trajectory = await plugin.builders.structure.parseTrajectory(fileData, "mmcif");
16 | await plugin.builders.structure.hierarchy.applyPreset(trajectory, "default");
17 |
18 | if (!plugin.canvas3d) {
19 | throw new Error("Canvas3D not available")
20 | }
21 | // Get camera from plugin
22 | const camera = plugin.canvas3d.camera;
23 |
24 | // Add onclick to buttons
25 | // Use the camera manager's reset method to reset the camera position
26 | document.getElementById('reset')!.onclick = () => plugin.managers.camera.reset();
27 | // Use a custom function to pan the camera
28 | document.getElementById('panLeft')!.onclick = () => panCameraX(camera, -10)
29 | document.getElementById('panRight')!.onclick = () => panCameraX(camera, 10)
30 | // Use a custom function to zoom the camera
31 | document.getElementById('zoomIn')!.onclick = () => zoomCamera(camera, -10)
32 | document.getElementById('zoomOut')!.onclick = () => zoomCamera(camera, 10)
33 | // Use a custom function to pitch the camera
34 | document.getElementById('rotDown')!.onclick = () => pitchCamera(camera, -15)
35 | document.getElementById('rotUp')!.onclick = () => pitchCamera(camera, 15)
36 | }
37 | init();
38 |
39 | function panCameraX(camera: Camera, distance: number){
40 | // Create a translation vector with `distance` as the x component
41 | const translation = Vec3.create(distance, 0, 0);
42 |
43 | // Apply the translation to the camera target
44 | // We move the camera target and the camera position will follow automatically
45 | Vec3.add(camera.target, camera.target, translation);
46 | }
47 |
48 | function zoomCamera(camera: Camera, percentage: number){
49 | // Initialize delta vector to set camera position at the end
50 | const dEye = Vec3();
51 | // Calculate the current position from the target to the camera
52 | Vec3.sub(dEye, camera.position, camera.target);
53 | // Calculate factor to scale the eye vector
54 | const factor = 1.0 + percentage/100
55 | Vec3.scale(dEye, dEye, factor);
56 | // Set the new position of the camera using the delta vector
57 | Vec3.add(camera.position, camera.target, dEye);
58 | }
59 |
60 | function pitchCamera(camera: Camera, angleDeg: number){
61 | // Convert the angle from degrees to radians
62 | const angleRad = angleDeg \* Math.PI / 180;
63 |
64 | // First initialize vectors and matrices to perform calculations
65 | const quat = Quat(); // Quaternion to store the rotation
66 | const dir = Vec3(); // Direction vector for axis of rotation;
67 | const dEye = Vec3(); // Final delta vector to set camera position at the end
68 |
69 | // Calculate the current position from the target to the camera
70 | Vec3.sub(dEye, camera.position, camera.target);
71 | // Calculate the axis of rotation to pitch up
72 | Vec3.cross(dir, dEye, camera.up);
73 | Vec3.normalize(dir, dir);
74 | // Set the rotation axis angle in the quaternion
75 | Quat.setAxisAngle(quat, dir, angleRad);
76 | // Apply the quaternion transformation to the eye AND the up vector
77 | Vec3.transformQuat(dEye, dEye, quat);
78 | Vec3.transformQuat(camera.up, camera.up, quat);
79 | // Set the new position of the camera using the delta vector
80 | Vec3.add(camera.position, camera.target, dEye);
81 |
82 | }
---
## /camera/move_camera/tsconfig.json:
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "commonjs",
5 | "jsx": "preserve",
6 | "esModuleInterop": true,
7 | "sourceMap": true,
8 | "allowJs": true,
9 | "lib": [
10 | "es6",
11 | "dom"
12 | ],
13 | "rootDir": "src",
14 | "moduleResolution": "node"
15 | }
16 | }
---
## /coloring/color_a_selection/index.html:
1 | <html>
2 | <head>
3 | <title>Mol\* Gallery</title>
4 | <meta charset="UTF-8" />
5 | </head>
6 |
7 | <body style="font-family: sans-serif; height: 100%; width: 100%; margin: 0;">
8 | <div id="app" style="height: 100%;width: 100%;">
9 | <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
10 | </div>
11 |
12 | <script src="src/index.ts"></script>
13 | </body>
14 | </html>
15 |
---
## /coloring/color_a_selection/package.json:
1 | {
2 | "name": "molstar-typescript-example",
3 | "version": "1.0.0",
4 | "description": "Molstar and TypeScript example starter project",
5 | "main": "index.html",
6 | "scripts": {
7 | "start": "parcel index.html",
8 | "build": "parcel build index.html"
9 | },
10 | "dependencies": {
11 | "parcel-bundler": "1.12.5",
12 | "molstar": "4.3.0"
13 | },
14 | "devDependencies": {
15 | "typescript": "4.4.4"
16 | },
17 | "resolutions": {
18 | "@babel/preset-env": "7.13.8"
19 | },
20 | "keywords": [
21 | "typescript",
22 | "molstar"
23 | ]
24 | }
---
## /coloring/color_a_selection/src/common/init.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
3 |
4 | export async function createRootViewer() {
5 | const viewport = document.getElementById("app") as HTMLDivElement;
6 | const canvas = document.getElementById("canvas") as HTMLCanvasElement;
7 |
8 | const plugin = new PluginContext(DefaultPluginSpec());
9 | await plugin.init();
10 |
11 | if (!plugin.initViewer(canvas, viewport)) {
12 | viewport.innerHTML = "Failed to init Mol\*";
13 | throw new Error("init failed");
14 | }
15 | //@ts-ignore
16 | window["molstar"] = plugin;
17 |
18 | return plugin;
19 | }
20 |
---
## /coloring/color_a_selection/src/index.ts:
1 | import { StructureSelectionQueries, StructureSelectionQuery } from "molstar/lib/mol-plugin-state/helpers/structure-selection-query";
2 | import { Queries, QueryContext, StructureProperties, StructureSelection } from "molstar/lib/mol-model/structure"
3 | import { setStructureOverpaint } from "molstar/lib/mol-plugin-state/helpers/structure-overpaint";
4 | import { Color } from "molstar/lib/mol-util/color";
5 | import { createRootViewer } from "./common/init";
6 |
7 | async function init() {
8 | // Create viewer
9 | const plugin = await createRootViewer();
10 |
11 | // Download PDB
12 | const fileData = await plugin.builders.data.download(
13 | { url: "https://models.rcsb.org/4hhb.bcif", isBinary: true }
14 | );
15 |
16 | // Load PDB and create representation
17 | const trajectory = await plugin.builders.structure.parseTrajectory(fileData, "mmcif");
18 | const presetStateObjects = await plugin.builders.structure.hierarchy.applyPreset(trajectory, "default");
19 |
20 | if (!presetStateObjects) {
21 | throw new Error("Structure not loaded");
22 | }
23 |
24 | // Get Structure object from the structure stateObject selector.
25 | // The Structure object contains properties and accessors to the underlying molecular data such as chains, residues, atoms, etc.
26 | const struct = presetStateObjects.structure.data!;
27 |
28 | // Get the StructureRef object from the Structure object. The StructureRef object is the
29 | // part of the state that represents the structure. We use it to access the structure's components
30 | // generated from the default preset.
31 | const structRef = plugin.managers.structure.hierarchy.findStructure(struct)!;
32 |
33 | // Select all ligands using prebuilt query
34 | const ctx = new QueryContext(struct)
35 | const ligandSelection = StructureSelectionQueries.ligand.query(ctx);
36 |
37 | // Convert the StructureSelection into a Loci
38 | const loci = StructureSelection.toLociWithSourceUnits(ligandSelection);
39 |
40 | const color = Color(0xFF0000); // 0xFF0000 is RGB for red
41 | // The helper takes care of updating the plugin state by iterating through
42 | // each representation for each component based on the loci
43 | setStructureOverpaint(plugin, structRef.components, color, async (s) => loci)
44 | }
45 | init();
---
## /coloring/color_a_selection/tsconfig.json:
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "commonjs",
5 | "jsx": "preserve",
6 | "esModuleInterop": true,
7 | "sourceMap": true,
8 | "allowJs": true,
9 | "lib": [
10 | "es6",
11 | "dom"
12 | ],
13 | "rootDir": "src",
14 | "moduleResolution": "node"
15 | }
16 | }
---
## /default/index.html:
1 | <html>
2 | <head>
3 | <title>Mol\* Gallery</title>
4 | <meta charset="UTF-8" />
5 | </head>
6 |
7 | <body style="font-family: sans-serif; height: 100%; width: 100%; margin: 0;">
8 | <div id="app" style="height: 100%;width: 100%;">
9 | <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
10 | </div>
11 |
12 | <script src="src/index.ts"></script>
13 | </body>
14 | </html>
15 |
---
## /default/package.json:
1 | {
2 | "name": "molstar-typescript-example",
3 | "version": "1.0.0",
4 | "description": "Molstar and TypeScript example starter project",
5 | "main": "index.html",
6 | "scripts": {
7 | "start": "parcel index.html",
8 | "build": "parcel build index.html"
9 | },
10 | "dependencies": {
11 | "parcel-bundler": "1.12.5",
12 | "molstar": "4.3.0"
13 | },
14 | "devDependencies": {
15 | "typescript": "4.4.4"
16 | },
17 | "resolutions": {
18 | "@babel/preset-env": "7.13.8"
19 | },
20 | "keywords": [
21 | "typescript",
22 | "molstar"
23 | ]
24 | }
---
## /default/src/common/init.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
3 |
4 | export async function createRootViewer() {
5 | const viewport = document.getElementById("app") as HTMLDivElement;
6 | const canvas = document.getElementById("canvas") as HTMLCanvasElement;
7 |
8 | const plugin = new PluginContext(DefaultPluginSpec());
9 | await plugin.init();
10 |
11 | if (!plugin.initViewer(canvas, viewport)) {
12 | viewport.innerHTML = "Failed to init Mol\*";
13 | throw new Error("init failed");
14 | }
15 | //@ts-ignore
16 | window["molstar"] = plugin;
17 |
18 | return plugin;
19 | }
20 |
---
## /default/src/index.ts:
1 | import { createRootViewer } from "./common/init";
2 |
3 | async function init() {
4 | // Create viewer
5 | const plugin = await createRootViewer();
6 |
7 | // Download PDB
8 | const fileData = await plugin.builders.data.download(
9 | { url: "https://models.rcsb.org/4hhb.bcif", isBinary: true }
10 | );
11 |
12 | // Load PDB and create representation
13 | const trajectory = await plugin.builders.structure.parseTrajectory(fileData, "mmcif");
14 | await plugin.builders.structure.hierarchy.applyPreset(trajectory, "default");
15 | }
16 | init();
---
## /default/tsconfig.json:
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "commonjs",
5 | "jsx": "preserve",
6 | "esModuleInterop": true,
7 | "sourceMap": true,
8 | "allowJs": true,
9 | "lib": [
10 | "es6",
11 | "dom"
12 | ],
13 | "rootDir": "src",
14 | "moduleResolution": "node"
15 | }
16 | }
---
## /prebuilt_examples/gallery/example.html:
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="utf-8" />
5 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
6 | <title>Mol\* Gallery</title>
7 | </head>
8 | <body>
9 | <script type="text/javascript" src="./js/gallery.js"></script>
10 | <script type="text/javascript">
11 | async function init() {
12 | const plugin = await molstarGallery.createRootViewer();
13 |
14 | const data = await plugin.builders.data.download(
15 | { url: "https://models.rcsb.org/4hhb.bcif", isBinary: true }
16 | );
17 |
18 | const trajectory = await plugin.builders.structure.parseTrajectory(data, "mmcif");
19 | await plugin.builders.structure.hierarchy.applyPreset(trajectory, "default");
20 | }
21 | init();
22 | </script>
23 | </body>
24 | </html>
---
## /prebuilt_examples/gallery/representations/create_representations.html:
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="utf-8" />
5 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
6 | <title>Mol\* Gallery</title>
7 | </head>
8 | <body>
9 | <script type="text/javascript" src="../js/gallery.js"></script>
10 | <script type="text/javascript" src="./create_representations.js"></script>
11 | </body>
12 | </html>
---
## /prebuilt_examples/gallery/representations/create_representations.js:
1 | const { createRootViewer, StructureSelectionQueries } = molstarGallery
2 |
3 | async function init() {
4 | // plugin initialization logic bundled for usage in CodePen. Returns a PluginContext
5 | const plugin = await createRootViewer();
6 |
7 | // The `builders` namespace contains a set of helper functions to create and manipulate structures, representations, etc.
8 | // which gets attached to the plugin context as a tree of state objects.
9 | // Here we expose how to explicitly build the hierarchy of state objects to make representations:
10 | // -> data
11 | // -> trajectory
12 | // -> model
13 | // -> structure
14 | // -> (component)
15 | // -> representation
16 | // - data: raw data source (content of a file, string or binary data)
17 | // - trajectory: parsed data source. May contain multiple frames (models)
18 | // - model: a single frame of a trajectory (by default the 1st frame)
19 | // - structure: an object that represents a molecular structure inferred from a model (e.g. atoms, residues, chains as defined in an assembly)
20 | // - component: the result of applying a transform to a structure. Here, a subset of a structure specified using a selection.
21 | // Representations can be built from structures or components.
22 |
23 | const data = await plugin.builders.data.download({
24 | url: "https://models.rcsb.org/5ee7.bcif",
25 | isBinary: true,
26 | });
27 |
28 | const trajectory = await plugin.builders.structure.parseTrajectory(
29 | data,
30 | "mmcif"
31 | );
32 |
33 | const model = await plugin.builders.structure.createModel(trajectory);
34 |
35 | const structure = await plugin.builders.structure.createStructure(model);
36 |
37 | // ******\*\*\******* Adding representations ******\*\*\*******
38 |
39 | // "Noodle" like representation of the protein backbone to showcase `type` and `typeParams`
40 | await plugin.builders.structure.representation.addRepresentation(
41 | structure, // we pass a structure StateObject to apply the representation on the whole structure
42 | {
43 | type: "cartoon",
44 | typeParams: { aspectRatio: 1, sizeFactor: 0.5 }, // typeParams are applicable to the representation type (here: `cartoon`)
45 | color: "sequence-id",
46 | },
47 | { tag: "my-noodle-representation" } // tag is optional, but useful for later reference
48 | );
49 |
50 | // Ball-and-stick representation of the whole structure to showcase `color` and `colorParams`
51 | await plugin.builders.structure.representation.addRepresentation(
52 | structure,
53 | {
54 | type: "ball-and-stick",
55 | color: "element-symbol",
56 | colorParams: { // colorParams are applicable to the color scheme (here: `element-symbol`)
57 | carbonColor: { name: "element-symbol", params: {} } // By default carbon atoms are colored by chain, here we override it to be colored by element symbol
58 | },
59 | },
60 | { tag: "hehe" }
61 | );
62 |
63 | // Spacefill representation of a subset (aromatic rings), using a component
64 | // A component is a state object selector that derives from a structure state object by applying a transform (here a selection)
65 | const component =
66 | await plugin.builders.structure.tryCreateComponentFromSelection(
67 | structure,
68 | StructureSelectionQueries.aromaticRing, // Predefined selection query for aromatic rings
69 | "aromatic-ring" // Key
70 | );
71 | await plugin.builders.structure.representation.addRepresentation(
72 | component?.cell, // `component.cell` is a structure StateObject. `component` is a structure StateObjectSelector
73 | {
74 | type: "spacefill",
75 | typeParams: { sizeFactor: 0.5 },
76 | color: "hydrophobicity",
77 | colorParams: { scale: "DGwoct" },
78 | }
79 | );
80 |
81 |
82 | }
83 | init();
84 |
---
## /prebuilt_examples/package.json:
1 | {
2 | "name": "molstar-gallery",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "scripts": {
6 | "build": "esbuild src/index.ts --bundle --outfile=./gallery/js/gallery.js --global-name=molstarGallery",
7 | "watch": "esbuild src/index.ts --bundle --outfile=./gallery/js/gallery.js --global-name=molstarGallery --watch"
8 | },
9 | "author": "Mol* Contributors",
10 | "contributors": [
11 | "David Sehnal <[email protected]>"
12 | ],
13 | "license": "MIT",
14 | "description": "A helper package for Mol* Example Gallery",
15 | "devDependencies": {
16 | "esbuild": "0.21.4"
17 | },
18 | "dependencies": {
19 | "molstar": "^4.3.0"
20 | }
21 | }
---
## /prebuilt_examples/src/index.ts:
1 | export \* from './viewer';
2 |
3 | // Export all functions/namespaces/... used by the examples
4 | export { StateTransform } from 'molstar/lib/mol-state';
5 | export { StructureSelectionQueries } from 'molstar/lib/mol-plugin-state/helpers/structure-selection-query';
6 |
---
## /prebuilt_examples/src/viewer.ts:
1 | import { DefaultPluginSpec, PluginSpec } from 'molstar/lib/mol-plugin/spec';
2 | import { PluginContext } from 'molstar/lib/mol-plugin/context';
3 |
4 | export async function initViewer(element: string | HTMLDivElement, options?: { spec?: PluginSpec }) {
5 | const parent = typeof element === 'string' ? document.getElementById(element)! as HTMLDivElement : element;
6 | const canvas = document.createElement('canvas') as HTMLCanvasElement;
7 | parent.appendChild(canvas);
8 |
9 | const spec = options?.spec ?? DefaultPluginSpec();
10 |
11 | const plugin = new PluginContext(spec);
12 | await plugin.init();
13 |
14 | plugin.initViewer(canvas, parent);
15 |
16 | return plugin;
17 | }
18 |
19 | export async function createRootViewer(options?: { spec?: PluginSpec }) {
20 | const root = document.createElement('div') as HTMLDivElement;
21 | Object.assign(root.style, {
22 | position: 'absolute',
23 | inset: '40px',
24 | outline: '1px dotted #ccc',
25 | });
26 | document.body.appendChild(root);
27 | return initViewer(root, options);
28 | }
---
## /readme.md:
1 | Mol* Example Gallery
2 | ====================
3 | This repository serves as a guide to help developers understand and utilize the Mol* code effectively. This gallery aims to provide clear, concise, and practical examples.
4 |
5 | ## Getting Started
6 | To get started with the Mol* gallery examples, you can try them out in [CodeSandbox](codesandbox.io), run them locally, or use a prebuilt example.
7 |
8 | ### CodeSandbox
9 | ![CodeSanbox!](assets/codesandbox_overview.jpg)
10 |
11 | From a browser, use one of the links below to open a code example in CodeSandbox. This web-application executes the package scripts in a virtual machine to create the application bundle and serve it online, in a preview tab.
12 |
13 | The code example can be downloaded as a zip file and executed locally (cf.infra).
14 | ![Download zip file!](assets/codesandbox_download.png)
15 |
16 | You can also sign-in to CodeSandbox and edit the code online using a VS-code interface with code hints and an automatic preview of the changes. Your changes can be saved to your own account.
17 |
18 | ### Locally
19 | From the terminal, navigate to the root of an example directory (ex: `./default/`). This directory must contain a `package.json` file. Execute the following commands
20 | `sh
21 | # install dependencies
22 | npm install
23 | # run the bundler and start the local development server.
24 | npm run start
25 | `
26 | Once the development server has started and return a local url for the preview.
27 |
28 | ### Prebuilt
29 | These examples rely on a prebuilt bundle js file that exports the functions required to make the example work. This technique enables standalone HTML pages that can
30 | be run directly from the local file system. The js script content can also be used directly in online editors such as CodePen that can not build bundles.
31 | - See `prebuilt_examples/gallery/example.html` for basic usage
32 | - To expose other functions from Mol*, make changes to the `prebuilt_examples/src` folder, and rebuild the supporting library using
33 | `sh
34 | # install dependencies
35 | npm install
36 | # build the gallery.js file
37 | npm run build
38 | # or watch for development
39 | npm run watch
40 | `
41 | - For usage in CodePen, use https://www.jsdelivr.com for `prebuilt_examples/gallery/js/index.js` with `Add External Script`:
42 | - https://cdn.jsdelivr.net/gh/molstar/example-gallery/prebuilt_examples/gallery/js/gallery.js
43 | - [Minimal example](https://codepen.io/dsehnal/pen/rNgyGZm)
44 |
45 | ## Examples and SandBoxes
46 | - Selections
47 | - [Ligand with surrounding](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/selection/select_ligand_and_surroundings)
48 | - Representation
49 | - [Create representations](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/representation/create_representations)
50 | - [Delete representations](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/representation/delete_representations)
51 | - [Update representations](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/representation/update_representations)
52 | - [Set transparency on selection](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/representation/transparency_using_selection)
53 | - [Set visibility using tags](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/representation/visibility_using_tags)
54 | - Camera
55 | - [Move camera](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/camera/move_camera)
56 | - Coloring
57 | - [Color a selection](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/coloring/color_a_selection)
58 | - IO
59 | - [Load file](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/io/load_file)
60 | - [Save session](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/io/save_session)
61 | - [Default](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/default)
62 |
63 | ## Prebuilt Examples and CodePens
64 | - Minimal example
65 | - [Minimal example](https://codepen.io/dsehnal/pen/rNgyGZm)
66 | - Representation
67 | - [Create representations](https://codepen.io/papillot/pen/NWVjLWj?editors=0010)
---
## /representation/create_representations/index.html:
1 | <html>
2 | <head>
3 | <title>Mol\* Gallery</title>
4 | <meta charset="UTF-8" />
5 | </head>
6 |
7 | <body style="font-family: sans-serif; height: 100%; width: 100%; margin: 0;">
8 | <div id="app" style="height: 100%;width: 100%;">
9 | <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
10 | </div>
11 |
12 | <script src="src/index.ts"></script>
13 | </body>
14 | </html>
15 |
---
## /representation/create_representations/package.json:
1 | {
2 | "name": "molstar-typescript-example",
3 | "version": "1.0.0",
4 | "description": "Molstar and TypeScript example starter project",
5 | "main": "index.html",
6 | "scripts": {
7 | "start": "parcel index.html",
8 | "build": "parcel build index.html"
9 | },
10 | "dependencies": {
11 | "parcel-bundler": "1.12.5",
12 | "molstar": "4.3.0"
13 | },
14 | "devDependencies": {
15 | "typescript": "4.4.4"
16 | },
17 | "resolutions": {
18 | "@babel/preset-env": "7.13.8"
19 | },
20 | "keywords": [
21 | "typescript",
22 | "molstar"
23 | ]
24 | }
---
## /representation/create_representations/src/common/init.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
3 |
4 | export async function createRootViewer() {
5 | const viewport = document.getElementById("app") as HTMLDivElement;
6 | const canvas = document.getElementById("canvas") as HTMLCanvasElement;
7 |
8 | const plugin = new PluginContext(DefaultPluginSpec());
9 | await plugin.init();
10 |
11 | if (!plugin.initViewer(canvas, viewport)) {
12 | viewport.innerHTML = "Failed to init Mol\*";
13 | throw new Error("init failed");
14 | }
15 | //@ts-ignore
16 | window["molstar"] = plugin;
17 |
18 | return plugin;
19 | }
20 |
---
## /representation/create_representations/src/index.ts:
1 | import { StructureSelectionQueries } from "molstar/lib/mol-plugin-state/helpers/structure-selection-query";
2 | import { createRootViewer } from "./common/init";
3 |
4 | async function init() {
5 | // Create Viewer. Returns a PluginContext
6 | const plugin = await createRootViewer();
7 |
8 | // The `builders` namespace contains a set of helper functions to create and manipulate structures, representations, etc.
9 | // which gets attached to the plugin context as a tree of state objects.
10 | // Here we expose how to explicitly build the hierarchy of state objects to make representations:
11 | // -> data
12 | // -> trajectory
13 | // -> model
14 | // -> structure
15 | // -> (component)
16 | // -> representation
17 | // - data: raw data source (content of a file, string or binary data)
18 | // - trajectory: parsed data source. May contain multiple frames (models)
19 | // - model: a single frame of a trajectory (by default the 1st frame)
20 | // - structure: an object that represents a molecular structure inferred from a model (e.g. atoms, residues, chains as defined in an assembly)
21 | // - component: the result of applying a transform to a structure. Here, a subset of a structure specified using a selection.
22 | // Representations can be built from structures or components.
23 |
24 | const data = await plugin.builders.data.download({
25 | url: "https://models.rcsb.org/5ee7.bcif",
26 | isBinary: true,
27 | });
28 |
29 | const trajectory = await plugin.builders.structure.parseTrajectory(
30 | data,
31 | "mmcif"
32 | );
33 |
34 | const model = await plugin.builders.structure.createModel(trajectory);
35 |
36 | const structure = await plugin.builders.structure.createStructure(model);
37 |
38 | // ******\*\*\******* Adding representations ******\*\*\*******
39 |
40 | // "Noodle" like representation of the protein backbone to showcase `type` and `typeParams`
41 | await plugin.builders.structure.representation.addRepresentation(
42 | structure, // we pass a structure StateObject to apply the representation on the whole structure
43 | {
44 | type: "cartoon",
45 | typeParams: { aspectRatio: 1, sizeFactor: 0.5 }, // typeParams are applicable to the representation type (here: `cartoon`)
46 | color: "sequence-id",
47 | },
48 | { tag: "my-noodle-representation" } // tag is optional, but useful for later reference
49 | );
50 |
51 | // Ball-and-stick representation of the whole structure to showcase `color` and `colorParams`
52 | await plugin.builders.structure.representation.addRepresentation(
53 | structure,
54 | {
55 | type: "ball-and-stick",
56 | color: "element-symbol",
57 | colorParams: { // colorParams are applicable to the color scheme (here: `element-symbol`)
58 | carbonColor: { name: "element-symbol", params: {} } // By default carbon atoms are colored by chain, here we override it to be colored by element symbol
59 | },
60 | },
61 | { tag: "hehe" }
62 | );
63 |
64 | // Spacefill representation of a subset (aromatic rings), using a component
65 | // A component is a state object selector that derives from a structure state object by applying a transform (here a selection)
66 | const component =
67 | await plugin.builders.structure.tryCreateComponentFromSelection(
68 | structure,
69 | StructureSelectionQueries.aromaticRing, // Predefined selection query for aromatic rings
70 | "aromatic-ring" // Key
71 | );
72 |
73 | if (!component?.cell) {
74 | throw new Error("Failed to create component from selection");
75 | }
76 |
77 | await plugin.builders.structure.representation.addRepresentation(
78 | component.cell, // `component.cell` is a structure StateObject. `component` is a structure StateObjectSelector
79 | {
80 | type: "spacefill",
81 | typeParams: { sizeFactor: 0.5 },
82 | color: "hydrophobicity",
83 | colorParams: { scale: "DGwoct" },
84 | }
85 | );
86 |
87 | }
88 | init();
---
## /representation/create_representations/tsconfig.json:
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "commonjs",
5 | "jsx": "preserve",
6 | "esModuleInterop": true,
7 | "sourceMap": true,
8 | "allowJs": true,
9 | "lib": [
10 | "es6",
11 | "dom"
12 | ],
13 | "rootDir": "src",
14 | "moduleResolution": "node"
15 | }
16 | }
---
## /representation/delete_representations/index.html:
1 | <html>
2 | <head>
3 | <title>Mol\* Gallery</title>
4 | <meta charset="UTF-8" />
5 | </head>
6 |
7 | <body style="font-family: sans-serif; height: 100%; width: 100%; margin: 0;">
8 | <button id="createRep">Create</button>
9 | <button id="deleteRep">Delete</button>
10 | <div id="app" style="height: 100%;width: 100%;">
11 | <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
12 | </div>
13 |
14 | <script src="src/index.ts"></script>
15 | </body>
16 | </html>
17 |
---
## /representation/delete_representations/package.json:
1 | {
2 | "name": "molstar-typescript-example",
3 | "version": "1.0.0",
4 | "description": "Molstar and TypeScript example starter project",
5 | "main": "index.html",
6 | "scripts": {
7 | "start": "parcel index.html",
8 | "build": "parcel build index.html"
9 | },
10 | "dependencies": {
11 | "parcel-bundler": "1.12.5",
12 | "molstar": "4.3.0"
13 | },
14 | "devDependencies": {
15 | "typescript": "4.4.4"
16 | },
17 | "resolutions": {
18 | "@babel/preset-env": "7.13.8"
19 | },
20 | "keywords": [
21 | "typescript",
22 | "molstar"
23 | ]
24 | }
---
## /representation/delete_representations/src/common/init.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
3 |
4 | export async function createRootViewer() {
5 | const viewport = document.getElementById("app") as HTMLDivElement;
6 | const canvas = document.getElementById("canvas") as HTMLCanvasElement;
7 |
8 | const plugin = new PluginContext(DefaultPluginSpec());
9 | await plugin.init();
10 |
11 | if (!plugin.initViewer(canvas, viewport)) {
12 | viewport.innerHTML = "Failed to init Mol\*";
13 | throw new Error("init failed");
14 | }
15 | //@ts-ignore
16 | window["molstar"] = plugin;
17 |
18 | return plugin;
19 | }
20 |
---
## /representation/delete_representations/src/index.ts:
1 | import { createRootViewer } from "./common/init";
2 | import { PluginContext } from "molstar/lib/mol-plugin/context";
3 | import { StateObjectRef } from "molstar/lib/mol-state/object";
4 | import { PluginStateObject } from "molstar/lib/mol-plugin-state/objects";
5 | import { StateSelection } from "molstar/lib/mol-state";
6 |
7 | async function init() {
8 | // Create viewer
9 | const plugin = await createRootViewer();
10 |
11 | // Download mmCIF
12 | const fileData = await plugin.builders.data.download(
13 | { url: "https://models.rcsb.org/4hhb.bcif", isBinary: true }
14 | );
15 |
16 | // Load mmCIF and create representation
17 | const trajectory = await plugin.builders.structure.parseTrajectory(fileData, "mmcif");
18 | const presetStateObjects = await plugin.builders.structure.hierarchy.applyPreset(trajectory, "default");
19 |
20 | if (!presetStateObjects) {
21 | throw new Error("Structure not loaded");
22 | }
23 |
24 | // Get Structure object from the structure stateObject selector.
25 | // The Structure object contains properties and accessors to the underlying molecular data such as chains, residues, atoms, etc.
26 | const structSO = presetStateObjects.structure;
27 |
28 | // We will use this tag to keep track of which representations we want to delete
29 | const tag = 'my-representation'
30 |
31 | // Set the onclick functions for the create and delete representation buttons
32 | document.getElementById("createRep")!.onclick = async () => createRepresentation(plugin, structSO, tag);
33 | document.getElementById("deleteRep")!.onclick = async () => deleteRepresentation(plugin, tag);
34 |
35 | }
36 | init();
37 |
38 | async function createRepresentation(plugin: PluginContext, structure: StateObjectRef<PluginStateObject.Molecule.Structure>, tag: string) {
39 | // "Noodle" like representation of the protein backbone to showcase `type` and `typeParams`
40 | await plugin.builders.structure.representation.addRepresentation(
41 | structure, // we pass a structure StateObject to apply the representation on the whole structure
42 | {
43 | type: "cartoon",
44 | typeParams: { aspectRatio: 1, sizeFactor: 0.5 }, // typeParams are applicable to the representation type (here: `cartoon`)
45 | color: "sequence-id",
46 | },
47 | { tag } // tag will be used to find
48 | );
49 | }
50 |
51 | async function deleteRepresentation(plugin: PluginContext, tag: string) {
52 | // Create a new StateBuilder from the plugin
53 | // We will use this to make changes (deletions) and then commit them
54 | const builder = plugin.build();
55 | // Find all StateObjects with our tag
56 | const representations = StateSelection.findWithAllTags(
57 | builder.getTree(), // Get the StateTree to search
58 | builder.toRoot().ref, // Get the root of the tree to search from
59 | new Set([tag]) // Set the list of tags the objects need to have
60 | );
61 | // For each representation found, make a change in the builder to delete them
62 | representations.forEach(rep => builder.delete(rep.ref));
63 | // Commit the builder's changes to the current plugin state
64 | builder.commit();
65 | }
---
## /representation/delete_representations/tsconfig.json:
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "commonjs",
5 | "jsx": "preserve",
6 | "esModuleInterop": true,
7 | "sourceMap": true,
8 | "allowJs": true,
9 | "lib": [
10 | "es6",
11 | "dom"
12 | ],
13 | "rootDir": "src",
14 | "moduleResolution": "node"
15 | }
16 | }
---
## /representation/transparency_using_selection/index.html:
1 | <html>
2 | <head>
3 | <title>Mol\* Gallery</title>
4 | <meta charset="UTF-8" />
5 | </head>
6 |
7 | <body style="font-family: sans-serif; height: 100%; width: 100%; margin: 0;">
8 | <div id="app" style="height: 100%;width: 100%;">
9 | <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
10 | </div>
11 |
12 | <script src="src/index.ts"></script>
13 | </body>
14 | </html>
15 |
---
## /representation/transparency_using_selection/package.json:
1 | {
2 | "name": "molstar-typescript-example",
3 | "version": "1.0.0",
4 | "description": "Molstar and TypeScript example starter project",
5 | "main": "index.html",
6 | "scripts": {
7 | "start": "parcel index.html",
8 | "build": "parcel build index.html"
9 | },
10 | "dependencies": {
11 | "parcel-bundler": "1.12.5",
12 | "molstar": "4.3.0"
13 | },
14 | "devDependencies": {
15 | "typescript": "4.4.4"
16 | },
17 | "resolutions": {
18 | "@babel/preset-env": "7.13.8"
19 | },
20 | "keywords": [
21 | "typescript",
22 | "molstar"
23 | ]
24 | }
---
## /representation/transparency_using_selection/src/common/init.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
3 |
4 | export async function createRootViewer() {
5 | const viewport = document.getElementById("app") as HTMLDivElement;
6 | const canvas = document.getElementById("canvas") as HTMLCanvasElement;
7 |
8 | const plugin = new PluginContext(DefaultPluginSpec());
9 | await plugin.init();
10 |
11 | if (!plugin.initViewer(canvas, viewport)) {
12 | viewport.innerHTML = "Failed to init Mol\*";
13 | throw new Error("init failed");
14 | }
15 | //@ts-ignore
16 | window["molstar"] = plugin;
17 |
18 | return plugin;
19 | }
20 |
---
## /representation/transparency_using_selection/src/index.ts:
1 | import { createRootViewer } from "./common/init";
2 | import { setStructureTransparency } from "molstar/lib/mol-plugin-state/helpers/structure-transparency";
3 | import { Queries, QueryContext, StructureProperties, StructureSelection } from "molstar/lib/mol-model/structure";
4 |
5 | async function init() {
6 | // Create viewer
7 | const plugin = await createRootViewer();
8 |
9 | // Download mmCIF
10 | const fileData = await plugin.builders.data.download(
11 | { url: "https://models.rcsb.org/4hhb.bcif", isBinary: true }
12 | );
13 |
14 | // Load mmCIF and create representation
15 | const trajectory = await plugin.builders.structure.parseTrajectory(fileData, "mmcif");
16 | const presetStateObjects = await plugin.builders.structure.hierarchy.applyPreset(trajectory, "default");
17 |
18 | if (!presetStateObjects) {
19 | throw new Error("Structure not loaded");
20 | }
21 |
22 | // Get Structure object from the structure stateObject selector.
23 | // The Structure object contains properties and accessors to the underlying molecular data such as chains, residues, atoms, etc.
24 | const struct = presetStateObjects.structure.data!;
25 |
26 | // Get the StructureRef object from the Structure object. The StructureRef object is the
27 | // part of the state that represents the structure. We use it to access the structure's components
28 | // generated from the default preset.
29 | const structRef = plugin.managers.structure.hierarchy.findStructure(struct)!;
30 |
31 | // Create a selection for chains A and B
32 |
33 | // A query defines the logic to select elements based on a predicate.
34 | // The predicate is executed from a generator which updates the current element (here, an atom)
35 | // in the query context, at each iteration. The predicate returns true if the element should be selected.
36 | const query = Queries.generators.chains({
37 | chainTest: ctx => {
38 | const chainName = StructureProperties.chain.label_asym_id(ctx.element);
39 | return chainName === 'A' || chainName === 'B';
40 | }
41 | })
42 |
43 | const ctx = new QueryContext(struct);
44 | const selection = query(ctx);
45 |
46 | // Convert the StructureSelection into a Loci
47 | const loci = StructureSelection.toLociWithSourceUnits(selection);
48 |
49 | const transparency = 1; // 0 is fully opaque, 1 is fully transparent
50 | // The helper takes care of updating the plugin state for each component based on the loci
51 | setStructureTransparency(plugin, structRef.components, transparency, async (s) => loci)
52 | }
53 | init();
---
## /representation/transparency_using_selection/tsconfig.json:
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "commonjs",
5 | "jsx": "preserve",
6 | "esModuleInterop": true,
7 | "sourceMap": true,
8 | "allowJs": true,
9 | "lib": [
10 | "es6",
11 | "dom"
12 | ],
13 | "rootDir": "src",
14 | "moduleResolution": "node"
15 | }
16 | }
---
## /representation/update_representations/index.html:
1 | <html>
2 | <head>
3 | <title>Mol\* Gallery</title>
4 | <meta charset="UTF-8" />
5 | </head>
6 |
7 | <body style="font-family: sans-serif; height: 100%; width: 100%; margin: 0; display: flex; flex-direction: column;">
8 | <div style="margin: 20px auto">
9 | <button id="byres">Color by residue</button>
10 | <button id="bypos">Color by position</button>
11 | <button id="bychain">Color by chain</button>
12 | </div>
13 | <div style="flex: 1 1 auto; padding: 0 40px 40px">
14 | <div id="app" style="outline: 1px dotted #ccc">
15 | <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
16 | </div>
17 | </div>
18 | <script src="src/index.ts"></script>
19 | </body>
20 | </html>
21 |
---
## /representation/update_representations/package.json:
1 | {
2 | "name": "molstar-typescript-example",
3 | "version": "1.0.0",
4 | "description": "Molstar and TypeScript example starter project",
5 | "main": "index.html",
6 | "scripts": {
7 | "start": "parcel index.html",
8 | "build": "parcel build index.html"
9 | },
10 | "dependencies": {
11 | "parcel-bundler": "1.12.5",
12 | "molstar": "4.3.0"
13 | },
14 | "devDependencies": {
15 | "typescript": "4.4.4"
16 | },
17 | "resolutions": {
18 | "@babel/preset-env": "7.13.8"
19 | },
20 | "keywords": [
21 | "typescript",
22 | "molstar"
23 | ]
24 | }
---
## /representation/update_representations/src/common/init.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
3 |
4 | export async function createRootViewer() {
5 | const viewport = document.getElementById("app") as HTMLDivElement;
6 | const canvas = document.getElementById("canvas") as HTMLCanvasElement;
7 |
8 | const plugin = new PluginContext(DefaultPluginSpec());
9 | await plugin.init();
10 |
11 | if (!plugin.initViewer(canvas, viewport)) {
12 | viewport.innerHTML = "Failed to init Mol\*";
13 | throw new Error("init failed");
14 | }
15 | //@ts-ignore
16 | window["molstar"] = plugin;
17 |
18 | return plugin;
19 | }
20 |
---
## /representation/update_representations/src/index.ts:
1 | import { createRootViewer } from "./common/init";
2 | import { StateSelection, StateTransform } from "molstar/lib/mol-state";
3 | import { createStructureRepresentationParams } from "molstar/lib/mol-plugin-state/helpers/structure-representation-params";
4 |
5 | const byres = document.getElementById("byres")!;
6 | const bychain = document.getElementById("bychain")!;
7 | const bypos = document.getElementById("bypos")!;
8 |
9 | async function init() {
10 | // Create Viewer. Returns a PluginContext
11 | const plugin = await createRootViewer();
12 |
13 | // Download data as mmCIF
14 | const fileData = await plugin.builders.data.download({
15 | url: "https://models.rcsb.org/5ee7.bcif",
16 | isBinary: true,
17 | });
18 |
19 | // Load mmCIF and create trajectory -> model -> structure -> representation
20 | const trajectorySO = await plugin.builders.structure.parseTrajectory(
21 | fileData,
22 | "mmcif"
23 | );
24 |
25 | const modelSO = await plugin.builders.structure.createModel(trajectorySO);
26 |
27 | // Structure StateObject Selector (object from the state tree that represents the structure)
28 | const structureSO = await plugin.builders.structure.createStructure(modelSO);
29 | // Structure object contains properties and accessors to the underlying molecular data such as chains, residues, atoms, etc.
30 | const structure = structureSO.data!;
31 |
32 | const representationSO = await plugin.builders.structure.representation.addRepresentation(
33 | structureSO, // we pass a structure StateObject Selector to apply the representation on the whole structure
34 | {
35 | type: "cartoon",
36 | color: "chain-id",
37 | },
38 | { tag: "my-cartoon" } // tag is optional. It is used in some examples to retrieve the representation from the state tree.
39 | );
40 |
41 | // Color by chain
42 | // In this example the `ref` string for the representation is found back from the state tree using
43 | // the tag that was set at creation time.
44 | bychain.addEventListener("click", async () => {
45 | const newParams = createStructureRepresentationParams(plugin, structure, { color: "chain-id" });
46 | const reprRef = StateSelection.findTagInSubtree(plugin.state.data.tree, StateTransform.RootRef, "my-cartoon");
47 |
48 | if (!reprRef) throw new Error("Representation not found");
49 |
50 | const builder = plugin.build(); // Create a new StateBuilder
51 | builder.to(reprRef).update(newParams) // Update the new state tree where the state object reference is
52 | builder.commit() // Apply all the changes to the current plugin state.
53 | });
54 |
55 | // Color by position
56 | // In this example the representation object to update is found back from the state tree using a state
57 | // selector function which takes a tag as argument. This returns a sequence of state cells because there
58 | // can be multiple matches when using the `select` method.
59 | bypos.addEventListener("click", () => {
60 | const newParams = createStructureRepresentationParams(plugin, structureSO.data, { color: "sequence-id" });
61 | const repr = plugin.state.data.select(StateSelection.Generators.root.subtree().withTag("my-cartoon"));
62 |
63 | const builder = plugin.build(); // Create a new state builder
64 | for (const r of repr) {
65 | builder.to(r).update(newParams); // Update the new state tree where each representation is found
66 | }
67 | builder.commit(); // Apply all the changes to the current plugin state.
68 | });
69 |
70 |
71 | // Color by residue name
72 | // In this example, the Representation StateObjectSelector is used directly as the target of the update.
73 | byres.addEventListener("click", () => {
74 | const newParams = createStructureRepresentationParams(plugin, structure, { color: "residue-name" });
75 |
76 | const builder = plugin.build(); // Create a new state builder
77 | builder.to(representationSO).update(newParams); // Update the representation in the new state tree
78 | builder.commit(); // Apply all the changes to the current plugin state.
79 |
80 | // Because a StateObject selector has an update method which by default returns a new StateBuilder,
81 | // the same statement can be written as a one-liner:
82 | // `representationSO.update(newParams).commit();`
83 | });
84 |
85 | }
86 | init();
---
## /representation/update_representations/tsconfig.json:
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "commonjs",
5 | "jsx": "preserve",
6 | "esModuleInterop": true,
7 | "sourceMap": true,
8 | "allowJs": true,
9 | "lib": [
10 | "es6",
11 | "dom"
12 | ],
13 | "rootDir": "src",
14 | "moduleResolution": "node"
15 | }
16 | }
---
## /representation/visibility_using_tags/index.html:
1 | <html>
2 | <head>
3 | <title>Mol\* Gallery</title>
4 | <meta charset="UTF-8" />
5 | </head>
6 |
7 | <body style="font-family: sans-serif; height: 100%; width: 100%; margin: 0;">
8 | <input type="checkbox" id="toggleWater" checked>Show Water</input>
9 | <div id="app" style="height: 100%;width: 100%;">
10 | <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
11 | </div>
12 |
13 | <script src="src/index.ts"></script>
14 | </body>
15 | </html>
16 |
---
## /representation/visibility_using_tags/package.json:
1 | {
2 | "name": "molstar-typescript-example",
3 | "version": "1.0.0",
4 | "description": "Molstar and TypeScript example starter project",
5 | "main": "index.html",
6 | "scripts": {
7 | "start": "parcel index.html",
8 | "build": "parcel build index.html"
9 | },
10 | "dependencies": {
11 | "parcel-bundler": "1.12.5",
12 | "molstar": "4.3.0"
13 | },
14 | "devDependencies": {
15 | "typescript": "4.4.4"
16 | },
17 | "resolutions": {
18 | "@babel/preset-env": "7.13.8"
19 | },
20 | "keywords": [
21 | "typescript",
22 | "molstar"
23 | ]
24 | }
---
## /representation/visibility_using_tags/src/common/init.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
3 |
4 | export async function createRootViewer() {
5 | const viewport = document.getElementById("app") as HTMLDivElement;
6 | const canvas = document.getElementById("canvas") as HTMLCanvasElement;
7 |
8 | const plugin = new PluginContext(DefaultPluginSpec());
9 | await plugin.init();
10 |
11 | if (!plugin.initViewer(canvas, viewport)) {
12 | viewport.innerHTML = "Failed to init Mol\*";
13 | throw new Error("init failed");
14 | }
15 | //@ts-ignore
16 | window["molstar"] = plugin;
17 |
18 | return plugin;
19 | }
20 |
---
## /representation/visibility_using_tags/src/index.ts:
1 | import { createRootViewer } from "./common/init";
2 | import { setStructureTransparency } from "molstar/lib/mol-plugin-state/helpers/structure-transparency";
3 | import { Queries, QueryContext, StructureProperties, StructureSelection } from "molstar/lib/mol-model/structure";
4 | import { StateSelection } from "molstar/lib/mol-state/state/selection";
5 | import { PluginContext } from "molstar/lib/mol-plugin/context";
6 | import { setSubtreeVisibility } from "molstar/lib/mol-plugin/behavior/static/state";
7 |
8 | async function init() {
9 | // Create viewer
10 | const plugin = await createRootViewer();
11 |
12 | // Download PDB
13 | const fileData = await plugin.builders.data.download(
14 | { url: "https://models.rcsb.org/4hhb.bcif", isBinary: true }
15 | );
16 |
17 | // Load PDB and create representation
18 | const trajectory = await plugin.builders.structure.parseTrajectory(fileData, "mmcif");
19 | await plugin.builders.structure.hierarchy.applyPreset(trajectory, "default");
20 |
21 | // Retrieve the checkbox element
22 | const checkbox = document.getElementById('toggleWater')! as HTMLInputElement;
23 | // Add a click event listener to the checkbox for toggling water visibility
24 | checkbox.addEventListener('click', () => {
25 | toggleWater(plugin, !checkbox.checked);
26 | })
27 | }
28 | init();
29 |
30 | function toggleWater(plugin: PluginContext, hide: boolean){
31 | // Find all structure components with the water structure component tag
32 | const waterComponentTag = 'structure-component-static-water'; // Tag generated by StructureRepresentationPresetProvider
33 | const structComponentRef = StateSelection.findTagInSubtree(
34 | plugin.state.data.tree, // The state tree
35 | plugin.state.data.tree.root.ref, // The root ref of the state tree
36 | waterComponentTag // The tag to search for
37 | );
38 | if (!structComponentRef) return; // if no structure components are found, return
39 |
40 | // Set the visibility of each structure component and any StateObjects in its subtree (including representations)
41 | setSubtreeVisibility(plugin.state.data, structComponentRef, hide)
42 | }
---
## /representation/visibility_using_tags/tsconfig.json:
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "commonjs",
5 | "jsx": "preserve",
6 | "esModuleInterop": true,
7 | "sourceMap": true,
8 | "allowJs": true,
9 | "lib": [
10 | "es6",
11 | "dom"
12 | ],
13 | "rootDir": "src",
14 | "moduleResolution": "node"
15 | }
16 | }
---
## /selection/select_ligand_and_surroundings/index.html:
1 | <html>
2 | <head>
3 | <title>Mol\* Gallery</title>
4 | <meta charset="UTF-8" />
5 | </head>
6 |
7 | <body style="font-family: sans-serif; height: 100%; width: 100%; margin: 0;">
8 | <div id="app" style="height: 100%;width: 100%;">
9 | <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
10 | </div>
11 |
12 | <script src="src/index.ts"></script>
13 | </body>
14 | </html>
15 |
---
## /selection/select_ligand_and_surroundings/package.json:
1 | {
2 | "name": "molstar-typescript-example",
3 | "version": "1.0.0",
4 | "description": "Molstar and TypeScript example starter project",
5 | "main": "index.html",
6 | "scripts": {
7 | "start": "parcel index.html",
8 | "build": "parcel build index.html"
9 | },
10 | "dependencies": {
11 | "parcel-bundler": "1.12.5",
12 | "molstar": "4.3.0"
13 | },
14 | "devDependencies": {
15 | "typescript": "4.4.4"
16 | },
17 | "resolutions": {
18 | "@babel/preset-env": "7.13.8"
19 | },
20 | "keywords": [
21 | "typescript",
22 | "molstar"
23 | ]
24 | }
---
## /selection/select_ligand_and_surroundings/src/common/init.ts:
1 | import { PluginContext } from "molstar/lib/mol-plugin/context";
2 | import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
3 |
4 | export async function createRootViewer() {
5 | const viewport = document.getElementById("app") as HTMLDivElement;
6 | const canvas = document.getElementById("canvas") as HTMLCanvasElement;
7 |
8 | const plugin = new PluginContext(DefaultPluginSpec());
9 | await plugin.init();
10 |
11 | if (!plugin.initViewer(canvas, viewport)) {
12 | viewport.innerHTML = "Failed to init Mol\*";
13 | throw new Error("init failed");
14 | }
15 | //@ts-ignore
16 | window["molstar"] = plugin;
17 |
18 | return plugin;
19 | }
20 |
---
## /selection/select_ligand_and_surroundings/src/index.ts:
1 | import { StructureSelectionQueries, StructureSelectionQuery } from "molstar/lib/mol-plugin-state/helpers/structure-selection-query";
2 | import { MolScriptBuilder as MS } from 'molstar/lib/mol-script/language/builder';
3 | import { createRootViewer } from "./common/init";
4 |
5 | async function init() {
6 | // Create viewer
7 | const plugin = await createRootViewer();
8 |
9 | // Download PDB
10 | const fileData = await plugin.builders.data.download(
11 | { url: "https://models.rcsb.org/4hhb.bcif", isBinary: true }
12 | );
13 |
14 | // Load PDB and create representation
15 | const trajectory = await plugin.builders.structure.parseTrajectory(fileData, "mmcif");
16 | await plugin.builders.structure.hierarchy.applyPreset(trajectory, "default");
17 |
18 | // Query all ligands using prebuilt query
19 | const ligandExp = StructureSelectionQueries.ligand.expression;
20 | // Using MolScript, build a new expression to include surroundings of each ligand
21 | const expression = MS.struct.modifier.includeSurroundings({
22 | 0: ligandExp,
23 | radius: 4.5,
24 | 'as-whole-residues': true
25 | });
26 | // Create a new selection from the expression
27 | // And use the selection manager to add the SelectionQuery to the current selection
28 | plugin.managers.structure.selection.fromSelectionQuery('add', StructureSelectionQuery('ligand-and-surroundings-1', expression))
29 | }
30 | init();
---
## /selection/select_ligand_and_surroundings/tsconfig.json:
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "commonjs",
5 | "jsx": "preserve",
6 | "esModuleInterop": true,
7 | "sourceMap": true,
8 | "allowJs": true,
9 | "lib": [
10 | "es6",
11 | "dom"
12 | ],
13 | "rootDir": "src",
14 | "moduleResolution": "node"
15 | }
16 | }
---
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment