useInterface prop for pluginUI

samirelanduk · Jan 30, 2022 · 08682b3 · 08682b3
1 parent 8709ff8
commit 08682b3
Showing 1 changed file with 26 additions and 6 deletions.
diff --git a/src/Molstar.jsx b/src/Molstar.jsx
@@ -1,19 +1,26 @@
 import React, { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
-import { PluginContext  } from "molstar/lib/mol-plugin/context";
+import { DefaultPluginUISpec } from "molstar/lib/mol-plugin-ui/spec";
+import { createPluginAsync } from "molstar/lib/mol-plugin-ui/index";
+import { PluginContext } from "molstar/lib/mol-plugin/context";
+import "molstar/build/viewer/molstar.css";
 
 const Molstar = props => {
 
-  const { pdbId, url, dimensions, className } = props;
+  const { useInterface, pdbId, url, dimensions, className } = props;
   const parentRef = useRef(null);
   const canvasRef = useRef(null);
   const plugin = useRef(null);
 
   useEffect(async () => {
-    plugin.current = new PluginContext(DefaultPluginSpec());
-    plugin.current.initViewer(canvasRef.current, parentRef.current);
-    await plugin.current.init();
+    if (useInterface) {
+      plugin.current = await createPluginAsync(parentRef.current, DefaultPluginUISpec());
+    } else {
+      plugin.current = new PluginContext(DefaultPluginSpec());
+      plugin.current.initViewer(canvasRef.current, parentRef.current);
+      await plugin.current.init();
+    }
     await loadStructure(pdbId, url, plugin.current);
     return () => plugin.current = null;
   }, [])
@@ -37,8 +44,20 @@ const Molstar = props => {
   const width = dimensions ? dimensions[0] : "100%";
   const height = dimensions ? dimensions[1] : "100%";
 
+  if (useInterface) {
+    return (
+      <div style={{position: "relative", width, height, overflow: "hidden"}}>
+        <div ref={parentRef} style={{position: "absolute", left: 0, top: 0, right: 0, bottom: 0}} />
+      </div>
+    )
+  }
+
   return (
-    <div ref={parentRef} style={{position: "relative", width, height}} className={className || ""}>
+    <div
+      ref={parentRef}
+      style={{position: "relative", width, height}}
+      className={className || ""}
+    >
       <canvas
         ref={canvasRef}
         style={{position: "absolute", top: 0, left: 0, right: 0, bottom: 0}}
@@ -48,6 +67,7 @@ const Molstar = props => {
 };
 
 Molstar.propTypes = {
+  interface: PropTypes.bool,
   pdbId: PropTypes.string,
   url: PropTypes.string,
   dimensions: PropTypes.array,