showControls prop for UI

samirelanduk · Jan 30, 2022 · 7563dd0 · 7563dd0
1 parent 08682b3
commit 7563dd0
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/src/Molstar.jsx b/src/Molstar.jsx
@@ -8,14 +8,22 @@ import "molstar/build/viewer/molstar.css";
 
 const Molstar = props => {
 
- const { useInterface, pdbId, url, dimensions, className } = props;
+ const { useInterface, pdbId, url, dimensions, className, showControls } = props;
  const parentRef = useRef(null);
  const canvasRef = useRef(null);
  const plugin = useRef(null);
 
  useEffect(async () => {
  if (useInterface) {
- plugin.current = await createPluginAsync(parentRef.current, DefaultPluginUISpec());
+ const spec = DefaultPluginUISpec();
+ spec.layout = {
+ initial: {
+ isExpanded: false,
+ controlsDisplay: "reactive",
+ showControls,
+ }
+ };
+ plugin.current = await createPluginAsync(parentRef.current, spec);
  } else {
  plugin.current = new PluginContext(DefaultPluginSpec());
  plugin.current.initViewer(canvasRef.current, parentRef.current);
@@ -30,23 +38,25 @@ const Molstar = props => {
  }, [pdbId, url])
 
  const loadStructure = async (pdbId, url, 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 (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");
+ }
  }
 
  const width = dimensions ? dimensions[0] : "100%";
  const height = dimensions ? dimensions[1] : "100%";
 
  if (useInterface) {
  return (
- <div style={{position: "relative", width, height, overflow: "hidden"}}>
+ <div style={{position: "absolute", width, height, overflow: "hidden"}}>
  <div ref={parentRef} style={{position: "absolute", left: 0, top: 0, right: 0, bottom: 0}} />
  </div>
  )