File prop for loading filestrings

README.md

@@ -48,6 +48,10 @@ You can pre-load an official PDB structure by supplying its 4 letter ID as a pro
 
 You can also pre-load a structure by passing in the URL of the file - as long as it is a file type that Molstar supports.
 
+#### `file`
+
+Thirdly, you can provide a file object, which should have a `filestring` property and a `type` property (`"pdb"`, `"mmcif"` etc. - anything that molstar itself natively supports).
+
 #### `dimensions`
 
 By default the molstar plugin will take up the full screen. If you want it to act as just a normal div, you can provide a `[width, height]` array instead.

src/Molstar.jsx

@@ -8,7 +8,7 @@ import "molstar/build/viewer/molstar.css";
 
 const Molstar = props => {
 
- const { useInterface, pdbId, url, dimensions, className, showControls } = props;
+ const { useInterface, pdbId, url, file, dimensions, className, showControls } = props;
  const parentRef = useRef(null);
  const canvasRef = useRef(null);
  const plugin = useRef(null);
@@ -29,25 +29,33 @@ const Molstar = props => {
  plugin.current.initViewer(canvasRef.current, parentRef.current);
  await plugin.current.init();
  }
- await loadStructure(pdbId, url, plugin.current);
+ await loadStructure(pdbId, url, file, plugin.current);
  return () => plugin.current = null;
  }, [])
 
  useEffect(async () => {
- await loadStructure(pdbId, url, plugin.current);
- }, [pdbId, url])
+ await loadStructure(pdbId, url, file, plugin.current);
+ }, [pdbId, url, file])
 
- const loadStructure = async (pdbId, url, plugin) => {
+ const loadStructure = async (pdbId, url, file, plugin) => {
  if (plugin) {
  plugin.clear();
- const structureUrl = url ? url : pdbId ? `https://files.rcsb.org/view/${pdbId}.cif` : null;
- if (!structureUrl) return;
- const data = await plugin.builders.data.download(
- { url: structureUrl }, {state: {isGhost: true}}
- );
- const extension = structureUrl.split(".").pop().replace("cif", "mmcif");
- const traj = await plugin.builders.structure.parseTrajectory(data, extension);
- await plugin.builders.structure.hierarchy.applyPreset(traj, "default");
+ if (file) {
+ const data = await plugin.builders.data.rawData({
+ data: file.filestring /* string or number[] */,
+ });
+ const traj = await plugin.builders.structure.parseTrajectory(data, file.type);
+ await plugin.builders.structure.hierarchy.applyPreset(traj, "default");
+ } else {
+ const structureUrl = url ? url : pdbId ? `https://files.rcsb.org/view/${pdbId}.cif` : null;
+ if (!structureUrl) return;
+ const data = await plugin.builders.data.download(
+ { url: structureUrl }, {state: {isGhost: true}}
+ );
+ const extension = structureUrl.split(".").pop().replace("cif", "mmcif");
+ const traj = await plugin.builders.structure.parseTrajectory(data, extension);
+ await plugin.builders.structure.hierarchy.applyPreset(traj, "default");
+ }
  }
  }