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,