2f:T1ca6,{ // 1. Define your specific sites to highlight const mySites =[25, 40, 186, 204, 506, 508, 517, 564, 572, 747, 1167, 1203] // Define your two new unique sites here const uniqueSite1 = 685; // S1/S2 const uniqueSite2 = 866; // S2' // 2. Setup the container const container = html`

`; yield container; const stage = new NGL.Stage(container, { backgroundColor: "white" }); const file = await FileAttachment("9H3J.pdb").blob(); const component = await stage.loadFile(file, { ext: "pdb" }); // 3. Define your Domain Map Color Scheme (Filtered to Chain A) const domainScheme = NGL.ColormakerRegistry.addSelectionScheme([ ["#FF5733", "16-298 and :A"], // Domain 1 (Orange) NTD ["#33FF57", "311-608 and :A"], // Domain 2 (Green) S1-RBD ["#900C3F", "685 and :A"], // Domain 3 (Blue) S1/S2 cleavage domain ["#3357FF", "866 and :A"], // Domain 4 (Yellow) S2 domain //["#900C3F", "1294-1316 and :A"], // Domain 5 (Maroon) TM region ["#CCCCCC", ":A"] // Fallback for unmapped regions on Chain A (Light Gray) ]); // 4. Render the base structure using the domain colors component.addRepresentation("ribbon", { sele: ":A", color: domainScheme, opacity: 0.8 }); // 5. Overlay your specific sites as a Red Surface const selectionString = `(${mySites.join(" or ")}) and :A`; component.addRepresentation("surface", { sele: selectionString, color: "red", opacity: 1.0 }); // 5b. Overlay the two new unique sites with their own colors component.addRepresentation("surface", { sele: `${uniqueSite1} and :A`, color: "blue", // Change to any color or hex code you want opacity: 1.0 }); component.addRepresentation("surface", { sele: `${uniqueSite2} and :A`, color: "purple", // Change to any color or hex code you want opacity: 1.0 }); // 6. Center and cleanup stage.autoView(); invalidation.then(() => stage.dispose()); } // { // // 1. Define your specific sites to highlight // const mySites =[25, 40, 186, 204, 506, 508, 517, 564, 572, 747, 1167, 1203] // // 2. Setup the container // const container = html`

`; // yield container; // const stage = new NGL.Stage(container, { backgroundColor: "white" }); // const file = await FileAttachment("9H3J.pdb").blob(); // const component = await stage.loadFile(file, { ext: "pdb" }); // // 3. Define your Domain Map Color Scheme (Filtered to Chain A) // const domainScheme = NGL.ColormakerRegistry.addSelectionScheme([ // ["#FF5733", "16-298 and :A"], // Domain 1 (Orange) NTD // ["#33FF57", "311-608 and :A"], // Domain 2 (Green) S1-RBD // ["#900C3F", "685 and :A"], // Domain 3 (Blue) S1/S2 cleavage domain // ["#3357FF", "866 and :A"], // Domain 4 (Yellow) S2 domain // //["#900C3F", "1294-1316 and :A"],// Domain 5 (Maroon) TM region // ["#CCCCCC", ":A"] // Fallback for unmapped regions on Chain A (Light Gray) // ]); // // 4. Render the base structure using the domain colors // component.addRepresentation("ribbon", { // sele: ":A", // color: domainScheme, // opacity: 0.8 // Slightly transparent so the surface stands out nicely // }); // // 5. Overlay your specific sites as a Red Surface // const selectionString = `(${mySites.join(" or ")}) and :A`; // component.addRepresentation("surface", { // sele: selectionString, // color: "red", // opacity: 1.0 // }); // // 6. Center and cleanup // stage.autoView(); // invalidation.then(() => stage.dispose()); // } // { // // 1. Define your data inside the cell // const mySites =[25, 40, 186, 204, 506, 508, 517, 564, 572, 747, 1167, 1203] // // 2. Setup the container // const container = html`

`; // yield container; // const stage = new NGL.Stage(container, { backgroundColor: "white" }); // const file = await FileAttachment("9H3J.pdb").blob(); // const component = await stage.loadFile(file, { ext: "pdb" }); // // 3. Add base structure (Filtered to Chain A only) // component.addRepresentation("ribbon", { // sele: ":A", // colorScheme: "chainindex" // }); // // 4. Highlight your specific sites (Filtered to Chain A only) // // This targets the specific residues ONLY if they are on Chain A // const selectionString = `(${mySites.join(" or ")}) and :A`; // component.addRepresentation("surface", { // sele: selectionString, // color: "red" // }); // // (Optional) Custom scheme if you want specific colors within Chain A // const myScheme = NGL.ColormakerRegistry.addSelectionScheme([ // ["#1a3a5f", ":A"] // ]); // component.addRepresentation("ribbon", { // sele: ":A", // color: myScheme, // opacity: 0.8 // }); // // 5. Center and cleanup // stage.autoView(); // invalidation.then(() => stage.dispose()); // } // { // // 1. Define your data inside the cell // const mySites = [25, 40, 186, 204, 506, 508, 517, 564, 572, 747, 1167, 1203]; // // 2. Setup the container // const container = html`

`; // yield container; // const stage = new NGL.Stage(container, { backgroundColor: "white" }); // //const file = await FileAttachment("sm009_white_footed_mouse_queens_nyc.pdb").blob(); // const file = await FileAttachment("9H3J.pdb").blob(); // const component = await stage.loadFile(file, { ext: "pdb" }); // // 3. Add base structure // component.addRepresentation("ribbon", { // colorScheme: "chainindex", // Automatically colors each monomer differently // //opacity: 0.1 // }); // // 4. Highlight your specific sites // const selectionString = mySites.join(" or "); // component.addRepresentation("spacefill", { // sele: selectionString, // color: "red" // }); // const myScheme = NGL.ColormakerRegistry.addSelectionScheme([ // ["#1a3a5f", ":A"], // Deep Navy Blue // ["orange", ":B"], // Dark Teal // ["#004d40", ":B"], // Dark Teal // ["#424242", ":C"], // Charcoal Grey // // ["purple", "*"] // Very dark default #212121 // ]); // component.addRepresentation("ribbon", { // color: myScheme, // opacity: 0.8 // Higher opacity makes the dark colors richer // }); // // 5. Center and cleanup // stage.autoView(); // invalidation.then(() => stage.dispose()); // } // { // // 1. Setup the container // const container = html`

`; // yield container; // const stage = new NGL.Stage(container, { backgroundColor: "white" }); // // 2. Load directly from RCSB (e.g., PDB ID "6VXX" for a spike trimer) // const pdbId = "9H3J"; // const url = 'https://www.rcsb.org/structure/9H3J'; // const component = await stage.loadFile(url, { // ext: "pdb", // defaultAssembly: "BU1" // }); // // 3. Add representations // component.addRepresentation("cartoon", { color: "lightgrey", opacity: 0.5 }); // const mySites = [25, 40, 186, 204, 506, 508, 517, 564, 572, 747, 1167, 1203]; // const selectionString = mySites.join(" or "); // component.addRepresentation("spacefill", { // sele: selectionString, // color: "red" // }); // // 4. Finalize view // stage.autoView(); // invalidation.then(() => stage.dispose()); // }30:[{"id":"30f7740247c076fb2bb780dd7819a285ce904003bdc05cc826bca356ff9040902fb3aa277207549edf3c614f2da9140cca7798d62aac481930e5d9bc61eb9a1a","href":"https://static.observableusercontent.com/files/30f7740247c076fb2bb780dd7819a285ce904003bdc05cc826bca356ff9040902fb3aa277207549edf3c614f2da9140cca7798d62aac481930e5d9bc61eb9a1a","name":"sm009_white_footed_mouse_queens_nyc.pdb","type":"application/octet-stream","lastModified":1770406406605.334,"size":853601},{"id":"5ac122b6d227430fb5bd98b6c72028e6593aad3d1b7187f561cd2e01c34674f900e72e1a1e12ab2cb8a1966fd422401d168295851d394ceec9401fb4492db230","href":"https://static.observableusercontent.com/files/5ac122b6d227430fb5bd98b6c72028e6593aad3d1b7187f561cd2e01c34674f900e72e1a1e12ab2cb8a1966fd422401d168295851d394ceec9401fb4492db230","name":"9H3J.pdb","type":"application/octet-stream","lastModified":1778166542966.267,"size":2435589}] 2d:{"title":"Spike monomer of sm009 WFM PDB with positively selected sites mapped","cells":[{"id":0,"value":"# Spike monomer of sm009 WFM PDB with positively selected sites mapped","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"NGL = require(\"ngl@2.0.0-dev.37/dist/ngl.js\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}