molstar · Simard302 · Jun 11, 2024 · Jun 11, 2024
diff --git a/readme.md b/readme.md
@@ -45,6 +45,7 @@ npm run watch
 ## Examples and SandBoxes
 - Selections
   - [Ligand with surrounding](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/selection/select_ligand_and_surroundings)
+  - [Language Selections](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/selection/select_from_language)
 - Representation
   - [Create representations](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/representation/create_representations)
   - [Set transparency on selection](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/representation/transparency_using_selection)

diff --git a/selection/select_from_language/index.html b/selection/select_from_language/index.html
@@ -0,0 +1,14 @@
+<html>
+  <head>
+    <title>Mol* Gallery</title>
+    <meta charset="UTF-8" />
+  </head>
+
+  <body style="font-family: sans-serif; height: 100%; width: 100%; margin: 0;">
+    <div id="app" style="height: 100%;width: 100%;">
+      <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
+    </div>
+
+    <script src="src/index.ts"></script>
+  </body>
+</html>
diff --git a/selection/select_from_language/package.json b/selection/select_from_language/package.json
@@ -0,0 +1,24 @@
+{
+    "name": "molstar-typescript-example",
+    "version": "1.0.0",
+    "description": "Molstar and TypeScript example starter project",
+    "main": "index.html",
+    "scripts": {
+      "start": "parcel index.html",
+      "build": "parcel build index.html"
+    },
+    "dependencies": {
+      "parcel-bundler": "1.12.5",
+      "molstar": "4.3.0"
+    },
+    "devDependencies": {
+      "typescript": "4.4.4"
+    },
+    "resolutions": {
+      "@babel/preset-env": "7.13.8"
+    },
+    "keywords": [
+      "typescript",
+      "molstar"
+    ]
+  }
diff --git a/selection/select_from_language/src/common/init.ts b/selection/select_from_language/src/common/init.ts
@@ -0,0 +1,19 @@
+import { PluginContext } from "molstar/lib/mol-plugin/context";
+import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
+
+export async function createRootViewer() {
+  const viewport = document.getElementById("app") as HTMLDivElement;
+  const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+
+  const plugin = new PluginContext(DefaultPluginSpec());
+  await plugin.init();
+
+  if (!plugin.initViewer(canvas, viewport)) {
+    viewport.innerHTML = "Failed to init Mol*";
+    throw new Error("init failed");
+  }
+  //@ts-ignore
+  window["molstar"] = plugin;
+
+  return plugin;
+}
diff --git a/selection/select_from_language/src/index.ts b/selection/select_from_language/src/index.ts
@@ -0,0 +1,62 @@
+import { Queries, QueryContext, StructureProperties, StructureSelection } from "molstar/lib/mol-model/structure";
+import { createRootViewer } from "./common/init";
+import { setStructureOverpaint } from "molstar/lib/mol-plugin-state/helpers/structure-overpaint";
+import {Script} from "molstar/lib/mol-script/script";
+import { StructureSelectionQuery } from "molstar/lib/mol-plugin-state/helpers/structure-selection-query";
+import { Color } from "molstar/lib/mol-util/color";
+
+async function init() {
+    // Create viewer
+    const plugin = await createRootViewer();
+
+    // Download PDB
+    const fileData = await plugin.builders.data.download(
+        { url: "https://models.rcsb.org/4hhb.bcif", isBinary: true }
+    );
+
+    // Load PDB and create representation
+    const trajectory = await plugin.builders.structure.parseTrajectory(fileData, "mmcif");
+    const presetStateObjects = await plugin.builders.structure.hierarchy.applyPreset(trajectory, "default");
+
+    if (!presetStateObjects) {
+        throw new Error("Structure not loaded");
+    }
+
+    // Get Structure object from the structure stateObject selector.
+    // The Structure object contains properties and accessors to the underlying molecular data such as chains, residues, atoms, etc.
+    const struct = presetStateObjects.structure.data!;
+
+    // Get the StructureRef object from the Structure object. The StructureRef object is the
+    // part of the state that represents the structure. We use it to access the structure's components
+    // generated from the default preset.
+    const structRef = plugin.managers.structure.hierarchy.findStructure(struct)!;
+
+    // Here we build 3 scripts using PyMOL, VMD, and JMOL
+    const pymolScript = Script('chain A and hetatm', 'pymol');  // Select HETATM and chain A with PyMOL
+    const vmdScript = Script('chain B and hetero', 'vmd');      // Select HETATM and chain B with VMD
+    const jmolScript = Script(':C and hetero', 'jmol');         // Select HETATM and chain C with Jmol
+
+    // Highlight each of the selections with a different color
+    const selectionColors = [
+        {// PyMOL
+            color: Color(0xff0000),
+            script: pymolScript
+        },
+        { // VMD
+            color: Color(0x00ff00),
+            script: vmdScript
+        },
+        { // Jmol
+            color: Color(0x0000ff),
+            script: jmolScript
+        }
+    ];
+    for (const {color, script} of selectionColors) {
+        // Convert the script to a Loci object on the current structure
+        const loci = Script.toLoci(script, struct);
+        // Use the setStructureOverpaint helper to highlight the selection with the specified color
+        // Need to use await otherwise only the latest overpaint will be applied
+        await setStructureOverpaint(plugin, structRef.components, color, async (s) => loci);
+    }
+}
+init();
diff --git a/selection/select_from_language/tsconfig.json b/selection/select_from_language/tsconfig.json
@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+      "strict": true,
+      "module": "commonjs",
+      "jsx": "preserve",
+      "esModuleInterop": true,
+      "sourceMap": true,
+      "allowJs": true,
+      "lib": [
+        "es6",
+        "dom"
+      ],
+      "rootDir": "src",
+      "moduleResolution": "node"
+    }
+  }