mc-react-structure-visualizer 0.3.0 → 0.4.0

package/dist/ControlBox/index.css

@@ -16,10 +16,16 @@
 }
 
 .supercell-input {
-  width: 40px;
+  width: 45px;
   height: 25px;
 }
 
+/* Always show the small arrows (needed for Chrome) */
+.supercell-input::-webkit-inner-spin-button,
+.supercell-input::-webkit-outer-spin-button {
+  opacity: 1;
+}
+
 .control-box-row {
   margin: 5px 5px;
   line-height: inherit;

package/dist/ControlBox/index.js

@@ -54,6 +54,7 @@ var ControlBox = /*#__PURE__*/function (_React$Component) {
           key: index,
           className: "supercell-input",
           type: "number",
+          min: "1",
           value: _this2.props.viewerParams.supercell[index],
           onChange: function onChange(e) {
             return _this2.handleSupercellChange(index, e.target.value);

package/dist/{3dmol → StructureWindow/3dmol}/Visualizer3dmol.js

@@ -48,6 +48,13 @@ var Visualizer3dmol = /*#__PURE__*/function (_React$Component) {
       this.viewer = $3Dmol.createViewer(this.divId, config);
       this.updateView();
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.viewerParams != this.props.viewerParams || prevProps.cifText != this.props.cifText) {
+        this.updateView();
+      }
+    }
   }, {
     key: "updateView",
     value: function updateView() {
@@ -73,10 +80,6 @@ var Visualizer3dmol = /*#__PURE__*/function (_React$Component) {
       var sc = this.props.viewerParams.supercell;
       this.viewer.replicateUnitCell(sc[0], sc[1], sc[2], this.model);
       this.model.assignBonds();
-
-      // console.log(this.viewer.getView());
-      // this.viewer.setView([0.0, 0.0, 0.0, 0.0, 0.5, 0.5, 0.5, 0.5]);
-
       this.viewer.zoomTo();
       this.viewer.render();
     }
@@ -100,9 +103,6 @@ var Visualizer3dmol = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      if (this.viewer && this.model) {
-        this.updateView();
-      }
       return /*#__PURE__*/_react.default.createElement("div", {
         id: this.divId,
         className: "gldiv"

package/dist/StructureWindow/index.css

@@ -0,0 +1,33 @@
+.structure-window-outer {
+  position: relative;
+}
+
+.structure-window {
+  position: relative;
+  z-index: 2;
+  height: 370px;
+  width: 450px;
+  background: #f5fffa;
+  text-align: center;
+  border: 1px solid #999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+}
+
+.disable-mouse {
+  pointer-events: none;
+}
+
+.mouse-disabled-note {
+  background-color: #fafafa;
+  border: 1px solid black;
+  color: #353434;
+  padding: 5px;
+  border-radius: 5px;
+  position: absolute;
+  top: 15px;
+  left: 170px;
+  z-index: 3;
+}

package/dist/StructureWindow/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Visualizer3dmol = _interopRequireDefault(require("./3dmol/Visualizer3dmol"));
+require("./index.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var StructureWindow = /*#__PURE__*/function (_React$Component) {
+  _inherits(StructureWindow, _React$Component);
+  var _super = _createSuper(StructureWindow);
+  function StructureWindow(props) {
+    _classCallCheck(this, StructureWindow);
+    return _super.call(this, props);
+  }
+  _createClass(StructureWindow, [{
+    key: "render",
+    value: function render() {
+      var _this = this;
+      var swClassName = "structure-window";
+      if (!this.props.mouseEnabled) swClassName += " disable-mouse";
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "structure-window-outer",
+        onClick: function onClick() {
+          return _this.props.setMouseEnabled();
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: swClassName
+      }, /*#__PURE__*/_react.default.createElement(_Visualizer3dmol.default, {
+        ref: this.props.visualizerRef,
+        viewerParams: this.props.viewerParams,
+        cifText: this.props.cifText
+      })), !this.props.mouseEnabled && /*#__PURE__*/_react.default.createElement("div", {
+        className: "mouse-disabled-note"
+      }, "Click to interact!"));
+    }
+  }]);
+  return StructureWindow;
+}(_react.default.Component);
+var _default = StructureWindow;
+exports.default = _default;

package/dist/index.css

@@ -1,13 +1,3 @@
-.structure-window {
-  position: relative;
-  z-index: 2;
-  height: 370px;
+.structure-visualizer {
   width: 450px;
-  background: #f5fffa;
-  text-align: center;
-  border: 1px solid #999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 5px;
 }

package/dist/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ControlBox = _interopRequireDefault(require("./ControlBox"));
-var _Visualizer3dmol = _interopRequireDefault(require("./3dmol/Visualizer3dmol"));
+var _StructureWindow = _interopRequireDefault(require("./StructureWindow"));
 require("./index.css");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -35,21 +35,52 @@ var StructureVisualizer = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       viewerParams: {
         supercell: [2, 2, 2],
-        orientation: "x",
         bonds: true,
         atomLabels: false,
         packedCell: false,
         vdwRadius: false
-      }
+      },
+      mouseEnabled: false
     };
 
     // use Ref to send events to the visualizer backend
     _this.visualizerRef = /*#__PURE__*/_react.default.createRef();
+
+    // Ref to detect click outside
+    _this.wrapperRef = /*#__PURE__*/_react.default.createRef();
+    _this.handleClickOutside = _this.handleClickOutside.bind(_assertThisInitialized(_this));
     _this.handleViewerParamChange = _this.handleViewerParamChange.bind(_assertThisInitialized(_this));
     _this.handleViewerEvent = _this.handleViewerEvent.bind(_assertThisInitialized(_this));
+    _this.setMouseEnabled = _this.setMouseEnabled.bind(_assertThisInitialized(_this));
     return _this;
   }
   _createClass(StructureVisualizer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener("mousedown", this.handleClickOutside);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener("mousedown", this.handleClickOutside);
+    }
+  }, {
+    key: "handleClickOutside",
+    value: function handleClickOutside(event) {
+      if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
+        this.setState({
+          mouseEnabled: false
+        });
+      }
+    }
+  }, {
+    key: "setMouseEnabled",
+    value: function setMouseEnabled() {
+      this.setState({
+        mouseEnabled: true
+      });
+    }
+  }, {
     key: "handleViewerParamChange",
     value: function handleViewerParamChange(param, value) {
       this.setState({
@@ -64,16 +95,16 @@ var StructureVisualizer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      // console.log("CIF", this.props.cifText);
       return /*#__PURE__*/_react.default.createElement("div", {
+        ref: this.wrapperRef,
         className: "structure-visualizer"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "structure-window"
-      }, /*#__PURE__*/_react.default.createElement(_Visualizer3dmol.default, {
-        ref: this.visualizerRef,
+      }, /*#__PURE__*/_react.default.createElement(_StructureWindow.default, {
+        visualizerRef: this.visualizerRef,
         viewerParams: this.state.viewerParams,
-        cifText: this.props.cifText
-      })), /*#__PURE__*/_react.default.createElement(_ControlBox.default, {
+        cifText: this.props.cifText,
+        mouseEnabled: this.state.mouseEnabled,
+        setMouseEnabled: this.setMouseEnabled
+      }), /*#__PURE__*/_react.default.createElement(_ControlBox.default, {
         viewerParams: this.state.viewerParams,
         onViewerParamChange: this.handleViewerParamChange,
         onViewerEvent: this.handleViewerEvent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mc-react-structure-visualizer",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": "Kristjan Eimre <kristjan.eimre@epfl.ch>",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/App.js

@@ -17,8 +17,6 @@ async function fetchCif() {
   );
   const jsonAiiDACif = await responseAiiDACif.json();
 
-  console.log(jsonAiiDACif);
-
   return jsonAiiDACif.data.download.data;
 }
 

package/src/StructureVisualizer/ControlBox/index.css

@@ -16,10 +16,16 @@
 }
 
 .supercell-input {
-  width: 40px;
+  width: 45px;
   height: 25px;
 }
 
+/* Always show the small arrows (needed for Chrome) */
+.supercell-input::-webkit-inner-spin-button,
+.supercell-input::-webkit-outer-spin-button {
+  opacity: 1;
+}
+
 .control-box-row {
   margin: 5px 5px;
   line-height: inherit;

package/src/StructureVisualizer/ControlBox/index.js

@@ -31,6 +31,7 @@ class ControlBox extends React.Component {
               key={index}
               className="supercell-input"
               type="number"
+              min="1"
               value={this.props.viewerParams.supercell[index]}
               onChange={(e) =>
                 this.handleSupercellChange(index, e.target.value)

package/src/StructureVisualizer/{3dmol → StructureWindow/3dmol}/Visualizer3dmol.js

@@ -23,6 +23,15 @@ class Visualizer3dmol extends React.Component {
     this.updateView();
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.viewerParams != this.props.viewerParams ||
+      prevProps.cifText != this.props.cifText
+    ) {
+      this.updateView();
+    }
+  }
+
   updateView() {
     this.viewer.removeAllModels();
     this.model = this.viewer.addModel(this.props.cifText, "cif");
@@ -44,9 +53,6 @@ class Visualizer3dmol extends React.Component {
     this.viewer.replicateUnitCell(sc[0], sc[1], sc[2], this.model);
     this.model.assignBonds();
 
-    // console.log(this.viewer.getView());
-    // this.viewer.setView([0.0, 0.0, 0.0, 0.0, 0.5, 0.5, 0.5, 0.5]);
-
     this.viewer.zoomTo();
     this.viewer.render();
   }
@@ -68,9 +74,6 @@ class Visualizer3dmol extends React.Component {
   }
 
   render() {
-    if (this.viewer && this.model) {
-      this.updateView();
-    }
     return (
       <div id={this.divId} className="gldiv">
         No data!

package/src/StructureVisualizer/StructureWindow/index.css

@@ -0,0 +1,33 @@
+.structure-window-outer {
+  position: relative;
+}
+
+.structure-window {
+  position: relative;
+  z-index: 2;
+  height: 370px;
+  width: 450px;
+  background: #f5fffa;
+  text-align: center;
+  border: 1px solid #999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+}
+
+.disable-mouse {
+  pointer-events: none;
+}
+
+.mouse-disabled-note {
+  background-color: #fafafa;
+  border: 1px solid black;
+  color: #353434;
+  padding: 5px;
+  border-radius: 5px;
+  position: absolute;
+  top: 15px;
+  left: 170px;
+  z-index: 3;
+}

package/src/StructureVisualizer/StructureWindow/index.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+import Visualizer3dmol from "./3dmol/Visualizer3dmol";
+
+import "./index.css";
+
+class StructureWindow extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let swClassName = "structure-window";
+    if (!this.props.mouseEnabled) swClassName += " disable-mouse";
+    return (
+      <div
+        className="structure-window-outer"
+        onClick={() => this.props.setMouseEnabled()}
+      >
+        <div className={swClassName}>
+          <Visualizer3dmol
+            ref={this.props.visualizerRef}
+            viewerParams={this.props.viewerParams}
+            cifText={this.props.cifText}
+          />
+        </div>
+        {!this.props.mouseEnabled && (
+          <div className="mouse-disabled-note">Click to interact!</div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default StructureWindow;

package/src/StructureVisualizer/index.css

@@ -1,13 +1,3 @@
-.structure-window {
-  position: relative;
-  z-index: 2;
-  height: 370px;
+.structure-visualizer {
   width: 450px;
-  background: #f5fffa;
-  text-align: center;
-  border: 1px solid #999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 5px;
 }

package/src/StructureVisualizer/index.js

@@ -2,7 +2,7 @@ import React from "react";
 
 import ControlBox from "./ControlBox";
 
-import Visualizer3dmol from "./3dmol/Visualizer3dmol";
+import StructureWindow from "./StructureWindow";
 
 import "./index.css";
 
@@ -13,19 +13,42 @@ class StructureVisualizer extends React.Component {
     this.state = {
       viewerParams: {
         supercell: [2, 2, 2],
-        orientation: "x",
         bonds: true,
         atomLabels: false,
         packedCell: false,
         vdwRadius: false,
       },
+      mouseEnabled: false,
     };
 
     // use Ref to send events to the visualizer backend
     this.visualizerRef = React.createRef();
 
+    // Ref to detect click outside
+    this.wrapperRef = React.createRef();
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+
     this.handleViewerParamChange = this.handleViewerParamChange.bind(this);
     this.handleViewerEvent = this.handleViewerEvent.bind(this);
+    this.setMouseEnabled = this.setMouseEnabled.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener("mousedown", this.handleClickOutside);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleClickOutside);
+  }
+
+  handleClickOutside(event) {
+    if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
+      this.setState({ mouseEnabled: false });
+    }
+  }
+
+  setMouseEnabled() {
+    this.setState({ mouseEnabled: true });
   }
 
   handleViewerParamChange(param, value) {
@@ -42,16 +65,15 @@ class StructureVisualizer extends React.Component {
   }
 
   render() {
-    // console.log("CIF", this.props.cifText);
     return (
-      <div className="structure-visualizer">
-        <div className="structure-window">
-          <Visualizer3dmol
-            ref={this.visualizerRef}
-            viewerParams={this.state.viewerParams}
-            cifText={this.props.cifText}
-          />
-        </div>
+      <div ref={this.wrapperRef} className="structure-visualizer">
+        <StructureWindow
+          visualizerRef={this.visualizerRef}
+          viewerParams={this.state.viewerParams}
+          cifText={this.props.cifText}
+          mouseEnabled={this.state.mouseEnabled}
+          setMouseEnabled={this.setMouseEnabled}
+        />
         <ControlBox
           viewerParams={this.state.viewerParams}
           onViewerParamChange={this.handleViewerParamChange}