Merge pull request #2 from ahmed-dj/main

[Features] - adds support to open a selection of files

Author: a-r-j

README.md

@@ -20,6 +20,12 @@ Simply call the `Start Protein Viewer command`, enter a PDB accession code & awa
 
 Right-click on the `.pdb` file in the file editor and select `Launch Protein Viewer from File`
 
+### Loading a Local Folder
+
+![Local folder usage gif](img/local_folder.gif)
+
+Right-click on the folder in the file explorer and select `Launch Protein Viewer from Folder`
+
 **Supported Formats**
 
 * `.pdb`

out/extension.js

@@ -43,10 +43,11 @@
     "chemistry",
     "cheminformatics",
     "computational chemistry"
-	],
+  ],
   "activationEvents": [
     "onCommand:protein-viewer.start",
-    "onCommand:protein-viewer.activateFromFile"
+    "onCommand:protein-viewer.activateFromFile",
+    "onCommand:protein-viewer.activateFromFolder"
   ],
   "main": "./out/extension.js",
   "contributes": {
@@ -58,16 +59,27 @@
       {
         "command": "protein-viewer.activateFromFile",
         "title": "Launch Protein Viewer from File"
+      },
+      {
+        "command": "protein-viewer.activateFromFolder",
+        "title": "Launch Protein Viewer from Folder"
       }
     ],
     "menus": {
-      "explorer/context": [{
+      "explorer/context": [
+        {
           "when": "resourceExtname == .pdb || resourceExtname == .PDB || resourceExtname == .mol2 || resourceExtname == .MOL2 || resourceExtname == .sdf || resourceExtname == .SDF || resourceExtname == .mmCIF || resourceExtname == .mmcif || resourceExtname == .Mol || resourceExtname == .mol || resourceExtname == .MOL || resourceExtname == .xyz || resourceExtname == .XYZ || resourceExtname == .ent || resourceExtname == .ENT || resourceExtname == .pdbqt || resourceExtname == .PDBQT || resourceExtname == .cif || resourceExtname == .CIF || resourceExtname == .mcif || resourceExtname == .MCIF || resourceExtname == .gro || resourceExtname == .GRO",
           "command": "protein-viewer.activateFromFile",
           "group": "navigation"
-      }]
-  }
-},
+        },
+        {
+          "when": "explorerResourceIsFolder",
+          "command": "protein-viewer.activateFromFolder",
+          "group": "navigation"
+        }
+      ]
+    }
+  },
   "scripts": {
     "vscode:prepublish": "npm run compile",
     "compile": "tsc -p ./",
@@ -92,4 +104,4 @@
   "dependencies": {
     "molstar": "^2.4.1"
   }
-}
+}

out/panels/ProteinViewerPanel.js

@@ -13,13 +13,20 @@ export function activate(context: vscode.ExtensionContext) {
 		});
 	});
 
-	const activateFromFile = vscode.commands.registerCommand("protein-viewer.activateFromFile", (file_uri: vscode.Uri)  => {
-		ProteinViewerPanel.renderFromFile(context.extensionUri, file_uri);
+	const activateFromFile = vscode.commands.registerCommand("protein-viewer.activateFromFile", (file_uri: vscode.Uri) => {
+		ProteinViewerPanel.renderFromFiles(context.extensionUri, [file_uri]);
+	});
+
+	const activateFromFolder = vscode.commands.registerCommand("protein-viewer.activateFromFolder", (folder_uri: vscode.Uri) => {
+		vscode.workspace.findFiles(`${vscode.workspace.asRelativePath(folder_uri)}/*.pdb`).then((files_uri) => {
+			ProteinViewerPanel.renderFromFiles(context.extensionUri, files_uri)
+		});
 	});
 
 	//context.subscriptions.push(...[helloCommand, activateFromFile]);
 	context.subscriptions.push(helloCommand);
 	context.subscriptions.push(activateFromFile);
+	context.subscriptions.push(activateFromFolder);
 }
 
 // this method is called when your extension is deactivated

package.json

@@ -5,15 +5,15 @@ export class ProteinViewerPanel {
   private readonly _panel: vscode.WebviewPanel;
   private _disposables: vscode.Disposable[] = [];
 
-  private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, accession: string | undefined, clickedFile: vscode.Uri | undefined) {
+  private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, accession: string | undefined, clickedFiles: vscode.Uri[] | undefined) {
     this._panel = panel;
     this._panel.onDidDispose(this.dispose, null, this._disposables);
     if (accession != undefined) {
       this._panel.webview.html = this._getWebviewContent(panel.webview, extensionUri, accession);
     };
 
-    if (clickedFile != undefined) {
-      this._panel.webview.html = this._getWebviewContentForFile(panel.webview, extensionUri, clickedFile);
+    if (clickedFiles != undefined) {
+      this._panel.webview.html = this._getWebviewContentForFiles(panel.webview, extensionUri, clickedFiles);
     };
 
   }
@@ -26,18 +26,17 @@ export class ProteinViewerPanel {
     });
 
     ProteinViewerPanel.currentPanel = new ProteinViewerPanel(panel, extensionUri, accession, undefined);
-    }
+  }
 
-  public static renderFromFile(extensionUri: vscode.Uri, clickedFile: vscode.Uri) {
-      const fname = clickedFile.path.split('/').pop();
-      const windowName = "Protein Viewer - " + fname;
-      const panel = vscode.window.createWebviewPanel("proteinviewer", windowName, vscode.ViewColumn.One, {
-        enableScripts: true,
-        retainContextWhenHidden: true
-      });
+  public static renderFromFiles(extensionUri: vscode.Uri, clickedFiles: vscode.Uri[]) {
+    const fnames = clickedFiles.map((clickedFile) => clickedFile.path.split('/').pop());
+    const windowName = "Protein Viewer - " + fnames.join(" - ");
+    const panel = vscode.window.createWebviewPanel("proteinviewer", windowName, vscode.ViewColumn.One, {
+      enableScripts: true,
+      retainContextWhenHidden: true
+    });
 
-      ProteinViewerPanel.currentPanel = new ProteinViewerPanel(panel, extensionUri, undefined, clickedFile);
-    //}
+    ProteinViewerPanel.currentPanel = new ProteinViewerPanel(panel, extensionUri, undefined, clickedFiles);
   }
 
   public dispose() {
@@ -102,16 +101,19 @@ export class ProteinViewerPanel {
     `;
   }
 
-  private _getWebviewContentForFile(webview: vscode.Webview, extensionUri: vscode.Uri, clickedFile: vscode.Uri) {
-    //console.log(clickedFile);
-
+  private _getWebviewContentForFiles(webview: vscode.Webview, extensionUri: vscode.Uri, clickedFiles: vscode.Uri[]) {
     const cssUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'node_modules', 'molstar', 'build/viewer', 'molstar.css'));
     const jsUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'node_modules', 'molstar', 'build/viewer', 'molstar.js'));
-    const pdb_contents = webview.asWebviewUri(clickedFile);
-    const extension = clickedFile.path.split('.').pop();
-
-    console.log(pdb_contents);
-    console.log(extension);
+    const pdbContents = clickedFiles.map((clickedFile) => webview.asWebviewUri(clickedFile));
+    const extensions = clickedFiles.map((clickedFile) => clickedFile.path.split('.').pop());
+    let loadCommands: String[] = [];
+    for (let i = 0; i < pdbContents.length; i++) {
+      const pdbContent = pdbContents[i];
+      const extension = extensions[i];
+      loadCommands.push(
+        `viewer.loadStructureFromUrl('${pdbContent}', format='${extension}');`
+      );
+    }
     // Tip: Install the es6-string-html VS Code extension to enable code highlighting below
     return /*html*/ `
     <!DOCTYPE html>
@@ -149,7 +151,7 @@ export class ProteinViewerPanel {
                     pdbProvider: 'rcsb',
                     emdbProvider: 'rcsb',
                 });
-                viewer.loadStructureFromUrl('${pdb_contents}', format='${extension}');
+                ${loadCommands.join("")}
                 // viewer.loadAllModelsOrAssemblyFromUrl('https://cs.litemol.org/5ire/full', 'mmcif', false, { representationParams: { theme: { globalName: 'operator-name' } } })
             </script>
         </body>