protein-anywidget

%23%20%2F%2F%2F%20script%0A%23%20requires-python%20%3D%20%22%3E%3D3.11%22%0A%23%20dependencies%20%3D%20%5B%0A%23%20%20%20%20%20%22marimo%22%2C%0A%23%20%20%20%20%20%22anywidget%22%2C%0A%23%20%5D%0A%23%20%2F%2F%2F%0A%22%22%22A%203D%20protein%20viewer%20built%20as%20a%20true%20anywidget%2C%20running%20in%20marimo.%22%22%22%0A%0Aimport%20marimo%0A%0A__generated_with%20%3D%20%220.25.1%22%0Aapp%20%3D%20marimo.App(width%3D%22medium%22)%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20anywidget%0A%20%20%20%20import%20marimo%20as%20mo%0A%20%20%20%20import%20traitlets%0A%0A%20%20%20%20return%20anywidget%2C%20traitlets%0A%0A%0A%40app.cell%0Adef%20_(anywidget%2C%20traitlets)%3A%0A%20%20%20%20class%20ProteinViewer(anywidget.AnyWidget)%3A%0A%20%20%20%20%20%20%20%20%22%22%22Render%20any%20PDB%20entry%20from%20the%20RCSB%20as%20a%203D%20cartoon.%22%22%22%0A%0A%20%20%20%20%20%20%20%20_esm%20%3D%20%22%22%22%0A%20%20%20%20%20%20%20%20function%20load3Dmol()%20%7B%0A%20%20%20%20%20%20%20%20%20%20return%20new%20Promise((resolve%2C%20reject)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(window.%243Dmol)%20%7B%20resolve(window.%243Dmol)%3B%20return%3B%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20script%20%3D%20document.createElement(%22script%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20script.src%20%3D%20%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2F3Dmol%2F2.4.0%2F3Dmol-min.js%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20script.onload%20%3D%20()%20%3D%3E%20resolve(window.%243Dmol)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20script.onerror%20%3D%20()%20%3D%3E%20reject(new%20Error(%22could%20not%20load%203Dmol.js%22))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.head.appendChild(script)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20async%20function%20render(%7B%20model%2C%20el%20%7D)%20%7B%0A%20%20%20%20%20%20%20%20%20%20el.style.position%20%3D%20%22relative%22%3B%0A%20%20%20%20%20%20%20%20%20%20const%20status%20%3D%20document.createElement(%22div%22)%3B%0A%20%20%20%20%20%20%20%20%20%20status.style.cssText%20%3D%0A%20%20%20%20%20%20%20%20%20%20%20%20%22font%3A12px%20ui-monospace%2Cmonospace%3Bcolor%3A%23666%3Bpadding%3A6px%202px%3B%22%3B%0A%20%20%20%20%20%20%20%20%20%20el.appendChild(status)%3B%0A%0A%20%20%20%20%20%20%20%20%20%20async%20function%20show(pdbId)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20status.textContent%20%3D%20%22loading%20%22%20%2B%20pdbId%20%2B%20%22%20from%20rcsb.org...%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20%24%20%3D%20await%20load3Dmol()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20el.querySelectorAll(%22.pv-container%22).forEach((n)%20%3D%3E%20n.remove())%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20container%20%3D%20document.createElement(%22div%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20container.className%20%3D%20%22pv-container%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20container.style.height%20%3D%20model.get(%22height%22)%20%2B%20%22px%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20el.appendChild(container)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20viewer%20%3D%20%24.createViewer(container%2C%20%7B%20backgroundColor%3A%20%22white%22%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20response%20%3D%20await%20fetch(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22https%3A%2F%2Ffiles.rcsb.org%2Fdownload%2F%22%20%2B%20pdbId%20%2B%20%22.pdb%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(!response.ok)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20status.textContent%20%3D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22rcsb.org%20returned%20%22%20%2B%20response.status%20%2B%20%22%20for%20%22%20%2B%20pdbId%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20viewer.addModel(await%20response.text()%2C%20%22pdb%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20viewer.setStyle(%7B%7D%2C%20%7B%20cartoon%3A%20%7B%20color%3A%20%22spectrum%22%20%7D%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20viewer.zoomTo()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20viewer.render()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20status.textContent%20%3D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20pdbId%20%2B%20%22%20%5Cu00b7%20drag%20to%20rotate%2C%20scroll%20to%20zoom%22%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20await%20show(model.get(%22pdb_id%22))%3B%0A%20%20%20%20%20%20%20%20%20%20model.on(%22change%3Apdb_id%22%2C%20()%20%3D%3E%20show(model.get(%22pdb_id%22)))%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20export%20default%20%7B%20render%20%7D%3B%0A%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20%20%20%20%20pdb_id%20%3D%20traitlets.Unicode(%221UBQ%22).tag(sync%3DTrue)%0A%20%20%20%20%20%20%20%20height%20%3D%20traitlets.Int(440).tag(sync%3DTrue)%0A%0A%20%20%20%20return%20(ProteinViewer%2C)%0A%0A%0A%40app.cell%0Adef%20_(ProteinViewer)%3A%0A%20%20%20%20protein_viewer%20%3D%20ProteinViewer(pdb_id%3D%221UBQ%22%2C%20height%3D440)%0A%20%20%20%20protein_viewer%0A%20%20%20%20return%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A