Replace molstar with pdbe-molstar

.gitignore

@@ -27,7 +27,6 @@ docs/conf.py
 new-alphafill.conf
 docroot/_sources/
 docroot/_static/
-docroot/dist/
 docroot/.doctrees/
 docroot/.buildinfo
 docroot/**/index.html

CMakeLists.txt

@@ -116,14 +116,14 @@ if(NOT cifpp_FOUND)
 	set(CIFPP_SHARE_DIR ${cifpp_SOURCE_DIR}/rsrc)
 endif()
 
-find_package(libmcfp 1.2.4 QUIET)
+find_package(mcfp 1.3.4 QUIET)
 
-if(NOT libmcfp_FOUND)
+if(NOT mcfp_FOUND)
 	FetchContent_Declare(
-		libmcfp
+		mcfp
 		GIT_REPOSITORY https://github.com/mhekkel/libmcfp.git
-		GIT_TAG v1.2.4)
-	FetchContent_MakeAvailable(libmcfp)
+		GIT_TAG v1.3.4)
+	FetchContent_MakeAvailable(mcfp)
 endif()
 
 find_package(zeep 6.0.16 QUIET)
@@ -164,14 +164,13 @@ if(BUILD_WEB_APPLICATION)
 		${PROJECT_SOURCE_DIR}/webapp/optimized.js
 		${PROJECT_SOURCE_DIR}/webapp/lists.js
 		${PROJECT_SOURCE_DIR}/webapp/wait.js
-		${PROJECT_SOURCE_DIR}/webapp/molstar.tsx
-		${PROJECT_SOURCE_DIR}/scss/pdb-redo-bootstrap.scss)
+		${PROJECT_SOURCE_DIR}/scss/pdb-redo-bootstrap.scss
+		${PROJECT_SOURCE_DIR}/webpack.config.js)
 
 	set(webpack_output ${PROJECT_SOURCE_DIR}/docroot/scripts/index.js)
 
 	add_custom_command(
 		OUTPUT ${webpack_output}
-		BYPRODUCTS
 		DEPENDS ${webpack_input}
 		COMMAND ${YARN} run $<IF:$<CONFIG:Debug>,build,build-production>
 		WORKING_DIRECTORY ${PROJECT_SOURCE_DIR})
@@ -251,7 +250,7 @@ if(HAVE_SYSCONF)
 	target_compile_definitions(alphafill PUBLIC HAVE_SYSCONF)
 endif()
 
-target_link_libraries(alphafill libmcfp::libmcfp cifpp::cifpp zeep::zeep)
+target_link_libraries(alphafill mcfp::mcfp cifpp::cifpp zeep::zeep)
 
 if(BUILD_WEB_APPLICATION)
 	target_compile_definitions(alphafill PUBLIC BUILD_WEB_APPLICATION)
@@ -346,7 +345,7 @@ if(BUILD_TESTING)
 
 	add_executable(validate-test-files
 		${PROJECT_SOURCE_DIR}/test/validate-test-files.cpp)
-	target_link_libraries(validate-test-files libmcfp::libmcfp cifpp::cifpp
+	target_link_libraries(validate-test-files mcfp::mcfp cifpp::cifpp
 		zeep::zeep)
 
 	add_test(NAME validate_files_test

docroot/model.html

@@ -37,13 +37,11 @@ <h5 z:text="${title}"></h5>
 		<table z:if="${type=='alphafold'}" class="table table-sm mt-4">
 			<tr>
 				<td>Structure file</td>
-				<td><a z:href="@{/v1/aff/${af_id}}"
-						z:text="${af_id}"></a></td>
+				<td><a z:href="@{/v1/aff/${af_id}}" z:text="${af_id}"></a></td>
 			</tr>
 			<tr>
 				<td>Metadata</td>
-				<td><a z:href="@{/v1/aff/${af_id}/json}"
-						z:text="|${af_id}/json|"></a></td>
+				<td><a z:href="@{/v1/aff/${af_id}/json}" z:text="|${af_id}/json|"></a></td>
 			</tr>
 
 			<tr z:if="${source == 'BFVD'}">
@@ -65,26 +63,22 @@ <h5 z:text="${title}"></h5>
 		<table z:if="${type=='custom'}" class="table table-sm mt-4">
 			<tr>
 				<td>Structure file</td>
-				<td><a z:href="@{/v1/aff/${af_id}}"
-						z:text="${af_id}"></a></td>
+				<td><a z:href="@{/v1/aff/${af_id}}" z:text="${af_id}"></a></td>
 			</tr>
 			<tr>
 				<td>Metadata</td>
-				<td><a z:href="@{/v1/aff/${af_id}/json}"
-						z:text="|${af_id}/json|"></a></td>
+				<td><a z:href="@{/v1/aff/${af_id}/json}" z:text="|${af_id}/json|"></a></td>
 			</tr>
 		</table>
 
 		<table z:if="${type=='custom'}" class="table table-sm mt-4">
 			<tr>
 				<td>Structure file</td>
-				<td><a z:href="@{/v1/aff/${af_id}}"
-						z:text="${af_id}"></a></td>
+				<td><a z:href="@{/v1/aff/${af_id}}" z:text="${af_id}"></a></td>
 			</tr>
 			<tr>
 				<td>Metadata</td>
-				<td><a z:href="@{/v1/aff/${af_id}/json}"
-						z:text="|${af_id}/json|"></a></td>
+				<td><a z:href="@{/v1/aff/${af_id}/json}" z:text="|${af_id}/json|"></a></td>
 			</tr>
 		</table>
 
@@ -128,10 +122,12 @@ <h5 z:text="${title}"></h5>
 							<th><abbr
 									title="PDB-REDO identifier followed by chain that was used in the alignment">PDBID</abbr>
 							</th>
-							<th><abbr title="RMSD for the overall protein alignment based on Cα atoms">g-RMSd</abbr></th>
+							<th><abbr title="RMSD for the overall protein alignment based on Cα atoms">g-RMSd</abbr>
+							</th>
 							<th><abbr title="The identifier for this transplant">Asym</abbr></th>
 							<th><abbr
-									title="RMSd of the alignment of all backbone atoms within 6Å of the compound that was transplanted by AlphaFill">l-RMSd</abbr></th>
+									title="RMSd of the alignment of all backbone atoms within 6Å of the compound that was transplanted by AlphaFill">l-RMSd</abbr>
+							</th>
 							<th><abbr
 									title="Transplant clash score, RMSd of the van der Waals overlap between ligand and polymer atoms">TCS</abbr>
 							</th>
@@ -142,8 +138,8 @@ <h5 z:text="${title}"></h5>
 								</div>
 							</th>
 							<th>
-								<a href="#" class="btn btn-outline-secondary btn-sm" role="button" id="structure-with-selected-ligands"><img
-										z:src="@{/images/download.svg}" /></a>
+								<a href="#" class="btn btn-outline-secondary btn-sm" role="button"
+									id="structure-with-selected-ligands"><img z:src="@{/images/download.svg}" /></a>
 							</th>
 						</tr>
 					</thead>

package.json

@@ -10,8 +10,7 @@
 		"@babel/runtime-corejs3": "^7.16.0",
 		"bootstrap": "^5.1.3",
 		"core-js": "^3.19.1",
-		"gyp": "^0.5.0",
-		"molstar": "^4.10.0"
+		"gyp": "^0.5.0"
 	},
 	"scripts": {
 		"build": "webpack --config webpack.config.js",
@@ -26,6 +25,7 @@
 		"clean-webpack-plugin": "^4.0.0",
 		"css-loader": "^7.1.2",
 		"mini-css-extract-plugin": "^2.4.3",
+		"pdbe-molstar": "^3.3.2",
 		"postcss": "^8.4.49",
 		"postcss-loader": "^8.1.1",
 		"react": "^19.0.0",

webapp/index.js

@@ -7,7 +7,7 @@ window.addEventListener('load', () => {
 
 	const uploadBtn = document.getElementById('upload-btn');
 	if (uploadBtn) {
-		uploadBtn.addEventListener('click', (evt) => {
+		uploadBtn.addEventListener('click', async (evt) => {
 			evt.preventDefault();
 
 			const customFile = document.getElementById('custom-file');
@@ -18,28 +18,19 @@ window.addEventListener('load', () => {
 
 				fd.append("structure", customFile.files[0]);
 
-				var resultOK = false;
-
-				fetch("v1/aff", {
+				const r = await fetch("v1/aff", {
 					'Accept': 'application/json',
 					'method': "POST",
 					'body': fd
-				}).then(r => {
-					resultOK = r.ok;
-					return r.json()
-				}).then(r => {
-					if (resultOK) {
-						window.location = `model?id=${r.id}`;
-					}
-					else if (typeof(r.error) === "string") {
-						alert(r.error);
-					}
-					else {
-						throw "Failed to upload file";
-					}
-				}).catch(e => {
-					alert(e);
 				});
+				const data = await r.json();
+
+				if (r.ok)
+					window.location = `model?id=${data.id}`;
+				else if (typeof (data.error) === "string")
+					alert(data.error);
+				else
+					alert(`Failed to upload data: ${r.statusText}`);
 			}
 		});
 	}

webapp/model.js

@@ -1,24 +1,20 @@
 import "core-js/stable";
 import "regenerator-runtime/runtime";
-
 import 'bootstrap';
-
-import { Viewer } from "./molstar";
+import 'pdbe-molstar/build/pdbe-molstar-component';
 
 function updateModel(viewer, cbs, showAllCB) {
 	const selected = cbs
 		.filter(c => c.checked)
 		.map(c => c.getAttribute("data-asym-id"));
-	
+
 	const allChecked = selected.length == cbs.length;
 
-	if (allChecked)
-	{
+	if (allChecked) {
 		showAllCB.indeterminate = false;
 		showAllCB.checked = true;
 	}
-	else if (selected.length == 0)
-	{
+	else if (selected.length == 0) {
 		showAllCB.indeterminate = false;
 		showAllCB.checked = false;
 	}
@@ -30,16 +26,38 @@ function updateModel(viewer, cbs, showAllCB) {
 		a.classList.toggle('invisible', selected.length != 1 || a.getAttribute('data-asym-id') != selected[0]);
 	});
 
-	return viewer.loadStructureFromUrl(`v1/aff/${AF_ID}/stripped/${selected.join(',')}/${IDENTITY}`);
+	return viewer.visual.update({
+		customData: {
+			url: `${window.location.origin}/v1/aff/${AF_ID}/stripped/${selected.join(',')}/${IDENTITY}`,
+			format: "cif",
+			binary: false
+		},
+		bgColor: "white"
+	}, true);
 }
 
 window.addEventListener('load', () => {
 
-	const viewer = new Viewer(document.getElementById('app'));
-
 	const showAllCB = document.getElementById('show-all');
-
 	const cbs = [...document.querySelectorAll("tr.transplanted-row input[type='checkbox']")];
+	const selected = cbs
+		.filter(c => c.checked)
+		.map(c => c.getAttribute("data-asym-id"));
+
+	const molstarContainer = document.getElementById("app");
+	const viewer = new PDBeMolstarPlugin();
+
+	const options = {
+		bgColor: "white",
+		customData: {
+			url: `${window.location.origin}/v1/aff/${AF_ID}/stripped/${selected.join(',')}/${IDENTITY}`,
+			format: "cif",
+			binary: false
+		},
+		hideControls: true
+	};
+
+	viewer.render(molstarContainer, options);
 
 	showAllCB.addEventListener('change', () => {
 		const checked = showAllCB.checked;
@@ -55,31 +73,26 @@ window.addEventListener('load', () => {
 		cb.addEventListener('change', () => updateModel(viewer, cbs, showAllCB));
 	});
 
-
 	const links = [...document.querySelectorAll("tr.transplanted-row a")];
 	links.forEach(link => {
 		link.addEventListener('click', (evt) => evt.stopPropagation());
 	});
 
-	// viewer.loadStructureFromUrl(`/v1/aff/${AF_ID}`)
-	updateModel(viewer, cbs, showAllCB)
-		.then(() => {
-			const rows = document.querySelectorAll("tr.transplanted-row");
-			[...rows].forEach(row => {
-				row.addEventListener('click', () => {
-
-					const asymID = row.getAttribute('data-asym-id');
-					const cb = row.querySelector("input[type='checkbox']");
-
-					if (cb.checked)
-						viewer.selectAsym(asymID);
-					else {
-						cb.checked = true;
-						updateModel(viewer, cbs, showAllCB).then(() => viewer.selectAsym(asymID));
-					}
-				});
-			});
+	const rows = document.querySelectorAll("tr.transplanted-row");
+	[...rows].forEach(row => {
+		row.addEventListener('click', () => {
+
+			const asymID = row.getAttribute('data-asym-id');
+			const cb = row.querySelector("input[type='checkbox']");
+
+			if (cb.checked)
+				viewer.visual.focus([{ struct_asym_id: asymID }]);
+			else {
+				cb.checked = true;
+				updateModel(viewer, cbs, showAllCB).then(() => viewer.visual.focus([{ struct_asym_id: asymID }]));
+			}
 		});
+	});
 
 	// identity buttons
 
@@ -89,7 +102,6 @@ window.addEventListener('load', () => {
 		ib.addEventListener('click', () => window.location = `model?id=${AF_ID}&identity=${identity}`)
 	});
 
-
 	// download button
 	const downloadBtn = document.getElementById('structure-with-selected-ligands');
 	downloadBtn.addEventListener('click', (e) => {
@@ -98,7 +110,7 @@ window.addEventListener('load', () => {
 		const selected = cbs
 			.filter(c => c.checked)
 			.map(c => c.getAttribute("data-asym-id"));
-	
+
 		window.location = `v1/aff/${AF_ID}/stripped/${selected.join(',')}/${IDENTITY}`;
 	});
 })