mc-react-structure-visualizer 0.4.2 → 0.5.0

package/dist/index.js

@@ -1,117 +0,0 @@
-"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 _ControlBox = _interopRequireDefault(require("./ControlBox"));
-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; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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 StructureVisualizer = /*#__PURE__*/function (_React$Component) {
-  _inherits(StructureVisualizer, _React$Component);
-  var _super = _createSuper(StructureVisualizer);
-  function StructureVisualizer(props) {
-    var _this;
-    _classCallCheck(this, StructureVisualizer);
-    _this = _super.call(this, props);
-    _this.state = {
-      viewerParams: {
-        supercell: [2, 2, 2],
-        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.setMouseEnabledState = _this.setMouseEnabledState.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: "setMouseEnabledState",
-    value: function setMouseEnabledState(state) {
-      this.setState({
-        mouseEnabled: state
-      });
-    }
-  }, {
-    key: "handleViewerParamChange",
-    value: function handleViewerParamChange(param, value) {
-      this.setState({
-        viewerParams: _objectSpread(_objectSpread({}, this.state.viewerParams), {}, _defineProperty({}, param, value))
-      });
-    }
-  }, {
-    key: "handleViewerEvent",
-    value: function handleViewerEvent(param, value) {
-      this.visualizerRef.current.handleEvent(param, value);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        ref: this.wrapperRef,
-        className: "structure-visualizer"
-      }, /*#__PURE__*/_react["default"].createElement(_StructureWindow["default"], {
-        visualizerRef: this.visualizerRef,
-        viewerParams: this.state.viewerParams,
-        cifText: this.props.cifText,
-        mouseEnabled: this.state.mouseEnabled,
-        setMouseEnabledState: this.setMouseEnabledState
-      }), /*#__PURE__*/_react["default"].createElement(_ControlBox["default"], {
-        viewerParams: this.state.viewerParams,
-        onViewerParamChange: this.handleViewerParamChange,
-        onViewerEvent: this.handleViewerEvent
-      }));
-    }
-  }]);
-  return StructureVisualizer;
-}(_react["default"].Component);
-var _default = StructureVisualizer;
-exports["default"] = _default;

package/public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

package/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/src/App.css

@@ -1,38 +0,0 @@
-/* .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-} */

package/src/App.js

@@ -1,40 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-// Note: Bootstrap is not really used.
-// Just the default css is loaded to test how the component works with bootstrap.
-import "bootstrap/dist/css/bootstrap.min.css";
-
-import "./App.css";
-import StructureVisualizer from "./StructureVisualizer";
-
-async function fetchCif() {
-  // Fetch a cif file from the Materials Cloud AiiDA rest api
-  const aiidaRestEndpoint = "https://aiida.materialscloud.org/mc3d/api/v4";
-  const uuid = "85260507-9cb4-4849-a10d-703f32697dd7";
-
-  const responseAiiDACif = await fetch(
-    `${aiidaRestEndpoint}/nodes/${uuid}/download?download_format=cif&download=false`
-  );
-  const jsonAiiDACif = await responseAiiDACif.json();
-
-  return jsonAiiDACif.data.download.data;
-}
-
-function App() {
-  const [cifText, setCifText] = useState(null);
-
-  // componentDidMount equivalent
-  useEffect(() => {
-    fetchCif().then((cifText) => {
-      setCifText(cifText);
-    });
-  });
-
-  return (
-    <div className="App">
-      <StructureVisualizer cifText={cifText} />
-    </div>
-  );
-}
-
-export default App;

package/src/StructureVisualizer/ControlBox/index.css

@@ -1,67 +0,0 @@
-.control-box {
-  position: relative;
-  z-index: 1;
-  height: 100px;
-  width: 450px;
-  background: rgb(250, 250, 250);
-  text-align: center;
-  border: 1px solid #999;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: start;
-  margin-top: -20px;
-  padding: 30px 10px 10px 10px;
-  border-radius: 5px;
-}
-
-.supercell-input {
-  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 0px;
-  padding: 0px 10px;
-  width: 100%;
-  line-height: inherit;
-  /* background-color: pink; */
-  display: flex;
-  justify-content: space-between;
-  align-items: stretch;
-}
-
-.control-box-row label {
-  margin: 0px 5px;
-}
-
-.control-box-row button {
-  border-width: 1px;
-  border-style: outset;
-  border-color: rgb(0, 0, 0);
-  border-radius: 4px;
-  display: inline-flex;
-  align-items: center;
-  /* margin-top: -10px; */
-  margin: 0px 1px;
-  height: 25px;
-}
-
-.control-box-row button:hover {
-  background-color: rgb(222, 222, 222);
-}
-.control-box-row .option-checkbox {
-  margin: 0px 2px;
-}
-
-.control-box-row .camera-controls {
-  margin-left: auto;
-  margin-right: auto;
-  display: inline;
-}

package/src/StructureVisualizer/ControlBox/index.js

@@ -1,94 +0,0 @@
-import React from "react";
-
-import "./index.css";
-
-class ControlBox extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  handleSupercellChange = (index, value) => {
-    let newSupercell = this.props.viewerParams.supercell;
-    newSupercell[index] = parseInt(value);
-    this.props.onViewerParamChange("supercell", newSupercell);
-  };
-
-  handleOptionChange = (option) => {
-    this.props.onViewerParamChange(option, !this.props.viewerParams[option]);
-  };
-
-  handleCameraEvent = (orientation) => {
-    this.props.onViewerEvent("camera", orientation);
-  };
-
-  render() {
-    return (
-      <div className="control-box">
-        <div className="control-box-row">
-          <div className="supercell-container">
-            <label>Supercell: </label>
-            {[0, 1, 2].map((index) => (
-              <input
-                key={index}
-                className="supercell-input"
-                type="number"
-                min="1"
-                value={this.props.viewerParams.supercell[index]}
-                onChange={(e) =>
-                  this.handleSupercellChange(index, e.target.value)
-                }
-              />
-            ))}
-          </div>
-          <div className="camera-controls">
-            <label>Camera: </label>
-            <button onClick={() => this.handleCameraEvent("x")}>x</button>
-            <button onClick={() => this.handleCameraEvent("y")}>y</button>
-            <button onClick={() => this.handleCameraEvent("z")}>z</button>
-          </div>
-        </div>
-        <div className="control-box-row">
-          <label>
-            <input
-              className="option-checkbox"
-              type="checkbox"
-              checked={this.props.viewerParams.bonds}
-              onChange={() => this.handleOptionChange("bonds")}
-            />
-            Bonds
-          </label>
-          <label>
-            <input
-              className="option-checkbox"
-              type="checkbox"
-              checked={this.props.viewerParams.atomLabels}
-              onChange={() => this.handleOptionChange("atomLabels")}
-            />
-            Atom labels
-          </label>
-          <label>
-            <input
-              className="option-checkbox"
-              type="checkbox"
-              checked={this.props.viewerParams.packedCell}
-              onChange={() => this.handleOptionChange("packedCell")}
-              disabled={true}
-            />
-            Packed cell
-          </label>
-          <label>
-            <input
-              className="option-checkbox"
-              type="checkbox"
-              checked={this.props.viewerParams.spaceFilling}
-              onChange={() => this.handleOptionChange("vdwRadius")}
-            />
-            vdW radius
-          </label>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default ControlBox;

package/src/StructureVisualizer/StructureWindow/3dmol/Visualizer3dmol.css

@@ -1,5 +0,0 @@
-.gldiv {
-  width: 98%;
-  height: 98%;
-  position: relative;
-}

package/src/StructureVisualizer/StructureWindow/3dmol/Visualizer3dmol.js

@@ -1,108 +0,0 @@
-import React from "react";
-
-import * as $3Dmol from "3dmol";
-
-import "./Visualizer3dmol.css";
-import { isLabelWithInternallyDisabledControl } from "@testing-library/user-event/dist/utils";
-
-class Visualizer3dmol extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.viewer = null;
-    this.model = null;
-
-    // Assign random id to prevent multiple 'gldiv' from clashing
-    this.divId = "gldiv-" + (Math.random() + 1).toString(36).substring(7);
-  }
-
-  componentDidMount() {
-    // set up the viewer instance
-    let config = { backgroundColor: "white", orthographic: true };
-    this.viewer = $3Dmol.createViewer(this.divId, config);
-
-    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");
-
-    let style = {
-      sphere: { scale: 0.3, colorscheme: "Jmol" },
-    };
-    if (this.props.viewerParams.vdwRadius) {
-      style.sphere.scale = 1.0;
-    }
-    if (this.props.viewerParams.bonds) {
-      style.stick = { radius: 0.2, colorscheme: "Jmol" };
-    }
-
-    this.viewer.setStyle(style);
-
-    this.viewer.addUnitCell(this.model);
-    let sc = this.props.viewerParams.supercell;
-    this.viewer.replicateUnitCell(sc[0], sc[1], sc[2], this.model);
-
-    this.model.assignBonds();
-
-    this.viewer.removeAllLabels();
-    if (this.props.viewerParams.atomLabels) {
-      this.model.atoms.forEach((atom) => {
-        this.viewer.addLabel(
-          atom.elem,
-          {
-            position: { x: atom.x, y: atom.y, z: atom.z },
-            fontColor: atom.color,
-            fontSize: 18,
-            showBackground: false,
-            backgroundOpacity: 0.5,
-            inFront: false,
-          },
-          null,
-          true
-        );
-      });
-    }
-
-    this.viewer.zoomTo();
-    this.viewer.zoom(1.4);
-    this.viewer.render();
-  }
-
-  handleEvent(type, value) {
-    if (type == "camera") {
-      // console.log(this.viewer.getView());
-      if (value == "x") {
-        this.viewer.setView([0.0, 0.0, 0.0, 0.0, -0.5, -0.5, -0.5, 0.5]);
-      }
-      if (value == "y") {
-        this.viewer.setView([0.0, 0.0, 0.0, 0.0, 0.5, 0.5, 0.5, 0.5]);
-      }
-      if (value == "z") {
-        this.viewer.setView([0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0]);
-      }
-      this.viewer.zoomTo();
-      this.viewer.zoom(1.4);
-    }
-  }
-
-  render() {
-    return (
-      <div id={this.divId} className="gldiv">
-        No data!
-      </div>
-    );
-  }
-}
-
-export default Visualizer3dmol;

package/src/StructureVisualizer/StructureWindow/index.css

@@ -1,43 +0,0 @@
-.structure-window-outer {
-  position: relative;
-}
-
-.structure-window {
-  position: relative;
-  z-index: 2;
-  height: 370px;
-  width: 450px;
-  background: white;
-  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: #fff1f1;
-  border: 1px solid black;
-  color: #353434;
-  padding: 2px 6px;
-  border-radius: 5px;
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  z-index: 3;
-  cursor: pointer;
-  user-select: none;
-}
-
-.on {
-  background-color: #e9ffe7;
-}
-
-.mouse-disabled-note:hover {
-  filter: brightness(90%);
-}

package/src/StructureVisualizer/StructureWindow/index.js

@@ -1,46 +0,0 @@
-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";
-
-    let mouseNoteText = "Interaction off";
-    let mouseNoteClass = "mouse-disabled-note";
-    if (this.props.mouseEnabled) {
-      mouseNoteText = "Interaction on";
-      mouseNoteClass = "mouse-disabled-note on";
-    }
-    return (
-      <div className="structure-window-outer">
-        <div onClick={() => this.props.setMouseEnabledState(true)}>
-          <div className={swClassName}>
-            <Visualizer3dmol
-              ref={this.props.visualizerRef}
-              viewerParams={this.props.viewerParams}
-              cifText={this.props.cifText}
-            />
-          </div>
-        </div>
-        <div
-          className={mouseNoteClass}
-          onClick={() =>
-            this.props.setMouseEnabledState(!this.props.mouseEnabled)
-          }
-        >
-          {mouseNoteText}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default StructureWindow;

package/src/StructureVisualizer/index.css

@@ -1,3 +0,0 @@
-.structure-visualizer {
-  width: 450px;
-}