index.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  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. <link rel="icon" href="./favicon.ico" type="image/x-icon">
  7. <title>RCSB PDB Mol* Viewer</title>
  8. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. #viewer {
  15. position: absolute;
  16. left: 5%;
  17. top: 100px;
  18. min-width: 90%;
  19. height: 85%;
  20. }
  21. .msp-layout-expanded {
  22. z-index: 10;
  23. }
  24. #menu {
  25. position: absolute;
  26. left: 5%;
  27. top: 20px;
  28. }
  29. #menu > select {
  30. width: 200px;
  31. }
  32. </style>
  33. <link rel="stylesheet" type="text/css" href="rcsb-molstar.css" />
  34. <script type="text/javascript" src="./rcsb-molstar.js"></script>
  35. </head>
  36. <body>
  37. <div id="viewer"></div>
  38. <script>
  39. function getQueryParam(id) {
  40. var a = new RegExp(id + '=([^&#=]*)', 'i')
  41. var m = a.exec(window.location.search)
  42. return m ? decodeURIComponent(m[1]) : undefined
  43. }
  44. var isEmbedded = getQueryParam('embedded') === '1';
  45. var pdbId = getQueryParam('pdbId')
  46. var url = getQueryParam('url')
  47. var _props = getQueryParam('props')
  48. var props = _props && JSON.parse(_props)
  49. var _loadPdbIds = getQueryParam('loadPdbIds')
  50. var loadPdbIds = _loadPdbIds && JSON.parse(_loadPdbIds)
  51. // create an instance of the plugin
  52. var viewer = new rcsbMolstar.Viewer('viewer', {
  53. showImportControls: !pdbId,
  54. showExportControls: true,
  55. showSessionControls: !pdbId,
  56. layoutShowLog: !pdbId,
  57. layoutShowControls: !isEmbedded,
  58. showMembraneOrientationPreset: true
  59. })
  60. // load pdbId or url
  61. if (pdbId) viewer.loadPdbId(pdbId, props)
  62. else if (loadPdbIds) viewer.loadPdbIds(loadPdbIds);
  63. else if (url) viewer.loadUrl(url, props)
  64. </script>
  65. <div id="menu">
  66. <h2> RCSB PDB Mol* Viewer - Test Page</h2>
  67. Examples
  68. <select id="examples" onchange="loadExample(parseInt(this.value))">
  69. <option value=''></option>
  70. </select>
  71. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  72. Clear
  73. <button style="padding: 3px;" onclick="viewer.clear()">all</button>
  74. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  75. Superposed
  76. <button style="padding: 3px;" onclick="superposed()">3PQR | 1U19</button>
  77. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  78. Ligand Focus on wrong assembly
  79. <button style="padding: 3px" onclick="ligandAssembly()">5RLA</button>
  80. </div>
  81. <script>
  82. function loadExample(index) {
  83. var e = examples[index]
  84. viewer.loadPdbId(e.id, e.props)
  85. }
  86. var examples = [
  87. {
  88. id: '1CRN',
  89. info: 'small: only polymer',
  90. props: {
  91. kind: 'validation'
  92. }
  93. },
  94. {
  95. id: '3CUP',
  96. info: 'small',
  97. props: {
  98. kind: 'density'
  99. }
  100. },
  101. {
  102. id: '6JI7',
  103. info: 'small: NMR structure with RCI'
  104. },
  105. {
  106. id: '3PQR',
  107. info: 'medium: polymer, carbs, ligands',
  108. props: {
  109. kind: 'feature',
  110. assemblyId: '2',
  111. target: {
  112. label_comp_id: 'RET'
  113. }
  114. }
  115. },
  116. {
  117. id: '1NMR',
  118. info: 'medium: nmr models',
  119. props: {
  120. kind: 'standard',
  121. modelIndex: 2
  122. }
  123. },
  124. {
  125. id: '4HHB',
  126. info: 'medium: classic, lots of validation geometry problems',
  127. props: {
  128. kind: 'standard',
  129. assemblyId: '1'
  130. }
  131. },
  132. {
  133. id: '1A6D',
  134. info: 'medium: dihedral symmetry (D8)',
  135. props: {
  136. kind: 'symmetry',
  137. assemblyId: '1',
  138. symmetryIndex: 1
  139. }
  140. },
  141. {
  142. id: '1LTI',
  143. info: 'medium: local symmetry (C5)'
  144. },
  145. {
  146. id: '1QO1',
  147. info: 'medium: C-alpha only, local symmetries (C10, C3)'
  148. },
  149. {
  150. id: '6V9Q',
  151. info: 'medium: local symmetries (H, C2)'
  152. },
  153. {
  154. id: '6R6B',
  155. info: 'medium: local symmetries (H x2)'
  156. },
  157. {
  158. id: '2VTU',
  159. info: 'medium: octahedral symmetry (O)'
  160. },
  161. {
  162. id: '4NWP',
  163. info: 'medium: tetrahedral symmetry (T)'
  164. },
  165. {
  166. id: '1RB8',
  167. info: 'medium-large: small virus capsid, icosahedral symmetry (I)'
  168. },
  169. {
  170. id: '6QVK',
  171. info: 'large: The cryo-EM structure of bacteriophage phi29 prohead (C5)'
  172. },
  173. {
  174. id: '5Y6P',
  175. info: 'large: Structure of the phycobilisome from the red alga Griffithsia pacifica'
  176. },
  177. {
  178. id: '6O2S',
  179. info: 'large: Deacetylated Microtubules (H)'
  180. },
  181. {
  182. id: '5MQ7',
  183. info: 'large: Structure of AaLS-13'
  184. },
  185. {
  186. id: '5IV5',
  187. info: 'large: Cryo-electron microscopy structure of the hexagonal pre-attachment T4 baseplate-tail tube complex'
  188. },
  189. {
  190. id: '3JC8',
  191. info: 'large: Architectural model of the type IVa pilus machine in a piliated state'
  192. },
  193. {
  194. id: '4V99',
  195. info: 'large: The Crystallographic Structure of Panicum Mosaic Virus'
  196. },
  197. {
  198. id: '3J3Q',
  199. info: 'large: Atomic-level structure of the entire HIV-1 capsid'
  200. },
  201. {
  202. id: '6NCL',
  203. info: 'large: Near-atomic structure of icosahedrally averaged PBCV-1 capsid'
  204. },
  205. {
  206. id: '6EKC',
  207. info: 'large: Crystal structure of the BSD2 homolog of Arabidopsis thaliana bound to the octameric assembly of RbcL from Thermosynechococcus elongatus'
  208. },
  209. {
  210. id: '1M4X',
  211. info: 'large: PBCV-1 virus capsid, quasi-atomic model'
  212. },
  213. {
  214. id: '4V5A',
  215. info: 'large: Structure of the Ribosome Recycling Factor bound to the Thermus thermophilus 70S ribosome with mRNA, ASL-Phe and tRNA-fMet'
  216. },
  217. {
  218. id: '4UDF',
  219. info: 'large: STRUCTURAL BASIS OF HUMAN PARECHOVIRUS NEUTRALIZATION BY HUMAN MONOCLONAL ANTIBODIES'
  220. },
  221. {
  222. id: '6J5K',
  223. info: 'Cryo-EM structure of the mammalian ATP synthase tetramer bound with inhibitory protein IF1'
  224. },
  225. {
  226. id: '6RVV',
  227. info: 'Structure of left-handed protein cage consisting of 24 eleven-membered ring proteins held together by gold (I) bridges.'
  228. },
  229. {
  230. id: '6EK5',
  231. info: 'Near-atomic resolution structure of a plant geminivirus determined by electron cryo-microscopy'
  232. },
  233. {
  234. id: '4V93',
  235. info: 'Fitted coordinates for Lumbricus terrestris hemoglobin cryo-EM complex'
  236. },
  237. {
  238. id: '5VLZ',
  239. info: 'Backbone model for phage Qbeta capsid'
  240. },
  241. {
  242. id: '5XTI',
  243. info: 'Cryo-EM architecture of human respiratory chain megacomplex-I2III2IV2'
  244. },
  245. {
  246. id: '6BY7',
  247. info: 'Folding DNA into a lipid-conjugated nano-barrel for controlled reconstitution of membrane proteins'
  248. },
  249. {
  250. id: '6C50',
  251. info: 'Cross-alpha Amyloid-like Structure alphaAmS'
  252. },
  253. {
  254. id: '6K3I',
  255. info: 'Salmonella hook in curved state - 66 subunit models'
  256. },
  257. {
  258. id: '1UNO',
  259. info: 'Crystal structure of a d,l-alternating peptide. Double-starnded helix from beta-sheets.'
  260. },
  261. {
  262. id: '1GRM',
  263. info: 'REFINEMENT OF THE SPATIAL STRUCTURE OF THE GRAMICIDIN A TRANSMEMBRANE ION-CHANNEL. Single-starnded helix from beta-sheet. NMR structure.'
  264. },
  265. {
  266. id: '1B5F',
  267. info: 'oligosaccharide: NATIVE CARDOSIN A FROM CYNARA CARDUNCULUS L.',
  268. props: {
  269. kind: 'feature',
  270. target: {
  271. label_asym_id: 'E'
  272. }
  273. }
  274. },
  275. {
  276. id: '1BRR',
  277. info: 'membrane: X-RAY STRUCTURE OF THE BACTERIORHODOPSIN TRIMER/LIPID COMPLEX with ANVIL membrane prediction',
  278. props: {
  279. kind: 'membrane'
  280. }
  281. },
  282. {
  283. id: '3SN6',
  284. info: 'membrane: Crystal structure of the beta2 adrenergic receptor-Gs protein complex with ANVIL membrane prediction',
  285. props: {
  286. kind: 'membrane'
  287. }
  288. },
  289. {
  290. id: '1SQX',
  291. info: 'membrane + assembly: Crystal Structure Analysis of Bovine Bc1 with Stigmatellin A',
  292. props: {
  293. kind: 'membrane',
  294. assemblyId: '1'
  295. }
  296. },
  297. {
  298. id: '6WJC',
  299. info: 'ligand validation: Muscarinic acetylcholine receptor 1 - muscarinic toxin 7 complex: Focus + Density',
  300. props: {
  301. kind: 'feature-density',
  302. target: {
  303. label_asym_id: 'D',
  304. auth_seq_id: 502
  305. }
  306. }
  307. }
  308. ];
  309. var examplesSelect = document.getElementById('examples');
  310. for (var i = 0, il = examples.length; i < il; ++i) {
  311. var e = examples[i]
  312. var option = document.createElement('option')
  313. Object.assign(option, { text: '[' + e.id + '] ' + e.info, value: i })
  314. examplesSelect.appendChild(option)
  315. }
  316. //
  317. function superposed() {
  318. viewer.clear()
  319. .then(function() {
  320. return viewer.loadPdbId('3pqr', { kind: 'standard', assemblyId: '1' })
  321. })
  322. .then(function() {
  323. return viewer.loadPdbId('1u19', { kind: 'standard', assemblyId: '1' }, [
  324. -0.67160917400372, 0.28222298510688404, 0.6850488398834855, 0,
  325. 0.13262098666685063, 0.9554691407700946, -0.26361033961856695, 0,
  326. -0.7289399153866256, -0.08619120567473626, -0.6791305379047228, 0,
  327. -7.602670654900173, -30.317901981509067, 24.605855585357773, 1
  328. ])
  329. })
  330. .then(function() {
  331. viewer.resetCamera(0)
  332. });
  333. }
  334. function ligandAssembly() {
  335. viewer.clear()
  336. .then(function() {
  337. // UR7 is not present in assembly 1
  338. return viewer.loadPdbId('5RL9', { kind: 'feature', assemblyId: '1', target: { label_comp_id: 'UR7' } });
  339. });
  340. }
  341. </script>
  342. </body>
  343. </html>