molstar
molstar copied to clipboard
molstar
Molstar canvas size is increasing infinitely in react js
https://codesandbox.io/p/sandbox/goofy-jennings-qhgh3n
import React, { useEffect, useRef } from "react";
import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
import { PluginContext } from "molstar/lib/mol-plugin/context";
import "molstar/build/viewer/molstar.css";
export default function Molstar({ pdbId, dimensions, url, file }) {
const parentRef = useRef(null);
const canvasRef = useRef(null);
const plugin = useRef(null);
useEffect(() => {
const initializeViewer = async () => {
if (!plugin.current) {
plugin.current = new PluginContext(DefaultPluginSpec());
await plugin.current.init();
plugin.current.initViewer(canvasRef.current, parentRef.current);
}
};
initializeViewer();
return () => {
if (plugin.current) {
plugin.current.dispose();
plugin.current = null;
}
};
}, []);
return (
<>
<div ref={parentRef}>
<canvas ref={canvasRef} />
</div>
</>
);
}
https://github.com/user-attachments/assets/60da3a7f-d983-42cf-984b-97a50af3bcf2
https://github.com/user-attachments/assets/b4a47751-7eca-46d0-8ad9-19a964d24770
How can I implement this output screen? I found that the Mol* documentation is not very beginner-friendly. Could you provide some steps to make this feature?
nvidia API response structure
"trajectory": // pdb data,
"ligand_positions": [
"_rank1\n RDKit 3D\n\n 37 40 0 0 0 0 0 0 0 0999 V2000\n 3.2919 -6.0062 7.1231 C 0 0 0 0 0 0 0 0 0 0 0 0\n 4.3687 -6.0346 6.1224 N 0 0 0 0 0 0 0 0 0 0 0 0\n 4.3551 -5.1777 5.0332 N 0 0 0 0 0 0 0 0 0 0 0 0\n 5.2312 -5.2994 4.1116 C 0 0 0 0 0 0 0 0 0 0 0 0\n 6.6466 -5.2301 4.4014 N 0 0 0 0 0 0 0 0 0 0 0 0\n 7.9630 -5.6201 3.1352 Br 0 0 0 0 0 0 0 0 0 0 0 0\n 4.7751 -5.5419 2.7988 N 0 0 0 0 0 0 0 0 0 0 0 0\n 4.0882 -6.6752 2.4396 N 0 0 0 0 0 0 0 0 0 0 0 0\n 3.0537 -6.5359 1.5358 C 0 0 0 0 0 0 0 0 0 0 0 0\n 2.8395 -5.3673 1.0849 O 0 0 0 0 0 0 0 0 0 0 0 0\n 2.3170 -7.5730 1.1546 N 0 0 0 0 0 0 0 0 0 0 0 0\n 2.5463 -8.8117 1.6339 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.7470 -9.8743 1.1954 N 0 0 0 0 0 0 0 0 0 0 0 0\n 0.6052 -9.8596 0.3741 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.5015 -9.1281 -0.7876 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.6405 -9.1232 -1.5828 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.9912 -8.4999 -2.7542 C 0 0 0 0 0 0 0 0 0 0 0 0\n -2.2416 -8.8498 -3.0953 N 0 0 0 0 0 0 0 0 0 0 0 0\n -2.9744 -8.3942 -4.2787 C 0 0 0 0 0 0 0 0 0 0 0 0\n -2.6700 -9.6762 -2.1583 N 0 0 0 0 0 0 0 0 0 0 0 0\n -1.7283 -9.8698 -1.2202 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.6398 -10.6081 -0.0587 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.5223 -10.6197 0.7296 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.4670 -11.3680 1.8835 F 0 0 0 0 0 0 0 0 0 0 0 0\n 3.5585 -8.9977 2.5311 N 0 0 0 0 0 0 0 0 0 0 0 0\n 3.8410 -10.2625 3.0890 C 0 0 0 0 0 0 0 0 0 0 0 0\n 4.7967 -10.2404 4.2208 C 0 0 0 0 0 0 0 0 0 0 0 0\n 4.3566 -9.6059 5.3831 C 0 0 0 0 0 0 0 0 0 0 0 0\n 5.1516 -9.5206 6.5053 C 0 0 0 0 0 0 0 0 0 0 0 0\n 4.7147 -8.8968 7.6442 F 0 0 0 0 0 0 0 0 0 0 0 0\n 6.4206 -10.0667 6.5116 C 0 0 0 0 0 0 0 0 0 0 0 0\n 7.2193 -9.9918 7.6120 F 0 0 0 0 0 0 0 0 0 0 0 0\n 6.8288 -10.6896 5.3425 C 0 0 0 0 0 0 0 0 0 0 0 0\n 6.0400 -10.7793 4.2165 C 0 0 0 0 0 0 0 0 0 0 0 0\n 6.4697 -11.3995 3.0820 F 0 0 0 0 0 0 0 0 0 0 0 0\n 4.2765 -7.9189 2.8870 C 0 0 0 0 0 0 0 0 0 0 0 0\n 5.1955 -8.1219 3.7143 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 6\n 2 3 1 0\n 3 4 2 3\n 4 5 1 0\n 5 6 1 0\n 4 7 1 0\n 7 8 1 0\n 8 9 1 0\n 9 10 2 0\n 9 11 1 0\n 11 12 2 0\n 12 13 1 0\n 13 14 1 0\n 14 15 2 0\n 15 16 1 0\n 16 17 2 0\n 17 18 1 0\n 19 18 1 1\n 18 20 1 0\n 20 21 2 0\n 21 22 1 0\n 22 23 2 0\n 23 24 1 0\n 12 25 1 0\n 26 25 1 6\n 26 27 1 0\n 27 28 2 0\n 28 29 1 0\n 29 30 1 0\n 29 31 2 0\n 31 32 1 0\n 31 33 1 0\n 33 34 2 0\n 34 35 1 0\n 25 36 1 0\n 36 37 2 0\n 36 8 1 0\n 23 14 1 0\n 34 27 1 0\n 21 16 1 0\nM END\n$$$$\n",
"_rank2\n RDKit 3D\n\n 37 40 0 0 0 0 0 0 0 0999 V2000\n 17.2042 0.4820 -4.4973 C 0 0 0 0 0 0 0 0 0 0 0 0\n 16.7826 -0.9262 -4.5179 N 0 0 0 0 0 0 0 0 0 0 0 0\n 17.7069 -1.9510 -4.3901 N 0 0 0 0 0 0 0 0 0 0 0 0\n 17.7166 -2.9131 -5.2305 C 0 0 0 0 0 0 0 0 0 0 0 0\n 18.9003 -3.2337 -5.9975 N 0 0 0 0 0 0 0 0 0 0 0 0\n 20.2213 -1.9763 -6.4001 Br 0 0 0 0 0 0 0 0 0 0 0 0\n 16.5414 -3.6822 -5.3629 N 0 0 0 0 0 0 0 0 0 0 0 0\n 15.3468 -3.3345 -4.7823 N 0 0 0 0 0 0 0 0 0 0 0 0\n 14.3322 -2.9063 -5.6152 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.5789 -2.8970 -6.8617 O 0 0 0 0 0 0 0 0 0 0 0 0\n 13.1539 -2.5225 -5.1377 N 0 0 0 0 0 0 0 0 0 0 0 0\n 12.8943 -2.5336 -3.8152 C 0 0 0 0 0 0 0 0 0 0 0 0\n 11.6338 -2.1268 -3.3614 N 0 0 0 0 0 0 0 0 0 0 0 0\n 10.7790 -1.1277 -3.8610 C 0 0 0 0 0 0 0 0 0 0 0 0\n 11.2140 -0.0061 -4.5304 C 0 0 0 0 0 0 0 0 0 0 0 0\n 10.3510 0.9738 -5.0115 C 0 0 0 0 0 0 0 0 0 0 0 0\n 10.5226 2.1533 -5.6920 C 0 0 0 0 0 0 0 0 0 0 0 0\n 9.3282 2.7244 -5.9145 N 0 0 0 0 0 0 0 0 0 0 0 0\n 9.0920 3.9918 -6.6095 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.4228 1.9217 -5.3852 N 0 0 0 0 0 0 0 0 0 0 0 0\n 9.0014 0.8459 -4.8263 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.5500 -0.2724 -4.1572 C 0 0 0 0 0 0 0 0 0 0 0 0\n 9.3898 -1.2410 -3.6805 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.9062 -2.3453 -3.0165 F 0 0 0 0 0 0 0 0 0 0 0 0\n 13.8681 -2.9483 -2.9527 N 0 0 0 0 0 0 0 0 0 0 0 0\n 13.6724 -2.9659 -1.5555 C 0 0 0 0 0 0 0 0 0 0 0 0\n 12.2696 -3.1785 -1.1294 C 0 0 0 0 0 0 0 0 0 0 0 0\n 11.3517 -2.2086 -1.5343 C 0 0 0 0 0 0 0 0 0 0 0 0\n 10.0169 -2.2938 -1.2033 C 0 0 0 0 0 0 0 0 0 0 0 0\n 9.1196 -1.3389 -1.6035 F 0 0 0 0 0 0 0 0 0 0 0 0\n 9.5443 -3.3534 -0.4532 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.2283 -3.4534 -0.1176 F 0 0 0 0 0 0 0 0 0 0 0 0\n 10.4802 -4.2998 -0.0663 C 0 0 0 0 0 0 0 0 0 0 0 0\n 11.8163 -4.2219 -0.3931 C 0 0 0 0 0 0 0 0 0 0 0 0\n 12.7122 -5.1695 0.0017 F 0 0 0 0 0 0 0 0 0 0 0 0\n 15.0438 -3.3272 -3.4821 C 0 0 0 0 0 0 0 0 0 0 0 0\n 15.9176 -3.6989 -2.6644 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 6\n 2 3 1 0\n 3 4 2 3\n 4 5 1 0\n 5 6 1 0\n 4 7 1 0\n 7 8 1 0\n 8 9 1 0\n 9 10 2 0\n 9 11 1 0\n 11 12 2 0\n 12 13 1 0\n 13 14 1 0\n 14 15 2 0\n 15 16 1 0\n 16 17 2 0\n 17 18 1 0\n 19 18 1 1\n 18 20 1 0\n 20 21 2 0\n 21 22 1 0\n 22 23 2 0\n 23 24 1 0\n 12 25 1 0\n 26 25 1 6\n 26 27 1 0\n 27 28 2 0\n 28 29 1 0\n 29 30 1 0\n 29 31 2 0\n 31 32 1 0\n 31 33 1 0\n 33 34 2 0\n 34 35 1 0\n 25 36 1 0\n 36 37 2 0\n 36 8 1 0\n 23 14 1 0\n 34 27 1 0\n 21 16 1 0\nM END\n$$$$\n",
"_rank3\n RDKit 3D\n\n 37 40 0 0 0 0 0 0 0 0999 V2000\n 6.1844 5.7286 0.2319 C 0 0 0 0 0 0 0 0 0 0 0 0\n 7.2003 6.4910 -0.5084 N 0 0 0 0 0 0 0 0 0 0 0 0\n 8.5496 6.2060 -0.3697 N 0 0 0 0 0 0 0 0 0 0 0 0\n 9.1836 5.6317 -1.3184 C 0 0 0 0 0 0 0 0 0 0 0 0\n 9.0370 4.2160 -1.5760 N 0 0 0 0 0 0 0 0 0 0 0 0\n 7.5533 3.4906 -2.4483 Br 0 0 0 0 0 0 0 0 0 0 0 0\n 10.0089 6.4317 -2.1363 N 0 0 0 0 0 0 0 0 0 0 0 0\n 9.9155 6.4521 -3.5060 N 0 0 0 0 0 0 0 0 0 0 0 0\n 10.5146 7.5030 -4.1718 C 0 0 0 0 0 0 0 0 0 0 0 0\n 11.1326 8.3552 -3.4600 O 0 0 0 0 0 0 0 0 0 0 0 0\n 10.4493 7.6187 -5.4931 N 0 0 0 0 0 0 0 0 0 0 0 0\n 9.7936 6.7133 -6.2461 C 0 0 0 0 0 0 0 0 0 0 0 0\n 9.7596 6.8750 -7.6365 N 0 0 0 0 0 0 0 0 0 0 0 0\n 9.7791 8.0535 -8.4041 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.7852 9.0058 -8.3784 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.8215 10.1626 -9.1511 C 0 0 0 0 0 0 0 0 0 0 0 0\n 7.9844 11.2391 -9.3067 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.5088 12.0938 -10.1993 N 0 0 0 0 0 0 0 0 0 0 0 0\n 7.9153 13.3595 -10.6363 C 0 0 0 0 0 0 0 0 0 0 0 0\n 9.6524 11.5669 -10.5980 N 0 0 0 0 0 0 0 0 0 0 0 0\n 9.8810 10.3934 -9.9857 C 0 0 0 0 0 0 0 0 0 0 0 0\n 10.8847 9.4483 -10.0226 C 0 0 0 0 0 0 0 0 0 0 0 0\n 10.8585 8.3084 -9.2674 C 0 0 0 0 0 0 0 0 0 0 0 0\n 11.8772 7.3849 -9.3281 F 0 0 0 0 0 0 0 0 0 0 0 0\n 9.1846 5.6573 -5.6314 N 0 0 0 0 0 0 0 0 0 0 0 0\n 8.4639 4.6839 -6.3552 C 0 0 0 0 0 0 0 0 0 0 0 0\n 9.1319 3.3654 -6.4540 C 0 0 0 0 0 0 0 0 0 0 0 0\n 10.5212 3.3895 -6.5826 C 0 0 0 0 0 0 0 0 0 0 0 0\n 11.2581 2.2294 -6.6815 C 0 0 0 0 0 0 0 0 0 0 0 0\n 12.6221 2.2585 -6.8074 F 0 0 0 0 0 0 0 0 0 0 0 0\n 10.6358 0.9963 -6.6557 C 0 0 0 0 0 0 0 0 0 0 0 0\n 11.3488 -0.1599 -6.7518 F 0 0 0 0 0 0 0 0 0 0 0 0\n 9.2557 1.0055 -6.5273 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.5117 2.1608 -6.4278 C 0 0 0 0 0 0 0 0 0 0 0 0\n 7.1552 2.1369 -6.3014 F 0 0 0 0 0 0 0 0 0 0 0 0\n 9.2777 5.5823 -4.2928 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.7055 4.6038 -3.7585 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 6\n 2 3 1 0\n 3 4 2 3\n 4 5 1 0\n 5 6 1 0\n 4 7 1 0\n 7 8 1 0\n 8 9 1 0\n 9 10 2 0\n 9 11 1 0\n 11 12 2 0\n 12 13 1 0\n 13 14 1 0\n 14 15 2 0\n 15 16 1 0\n 16 17 2 0\n 17 18 1 0\n 19 18 1 1\n 18 20 1 0\n 20 21 2 0\n 21 22 1 0\n 22 23 2 0\n 23 24 1 0\n 12 25 1 0\n 26 25 1 6\n 26 27 1 0\n 27 28 2 0\n 28 29 1 0\n 29 30 1 0\n 29 31 2 0\n 31 32 1 0\n 31 33 1 0\n 33 34 2 0\n 34 35 1 0\n 25 36 1 0\n 36 37 2 0\n 36 8 1 0\n 23 14 1 0\n 34 27 1 0\n 21 16 1 0\nM END\n$$$$\n"
], // array of ranks that you see in the output screens
}
output screen link: https://build.nvidia.com/mit/diffdock
That's a custom UI they implemented and only used Mol* for the visualization part.