mc-react-structure-visualizer 0.4.1 → 0.4.3

package/dist/StructureWindow/3dmol/Visualizer3dmol.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var $3Dmol = _interopRequireWildcard(require("3dmol"));
+var _bondLengths = require("./bondLengths");
 require("./Visualizer3dmol.css");
-var _utils = require("@testing-library/user-event/dist/utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -24,6 +24,32 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 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); }
+// override the covalent bond detection based on examples in MC3D
+var overrideBondLengths = {
+  // uuid = "aaea1e0f-337c-453f-a23a-acc06ddc93c9"; // BaTiO3 mc3d-46554/pbe
+  Ba: 0.92 * _bondLengths.covalentRadii["Ba"],
+  Ti: 0.94 * _bondLengths.covalentRadii["Ti"],
+  // uuid = "a490b0ff-012a-44c8-a48a-f734dc634b3c"; // EuI4La mc3d-34858/pbe
+  I: 1.05 * _bondLengths.covalentRadii["I"],
+  Eu: 1.05 * _bondLengths.covalentRadii["Eu"]
+};
+function setCustomBondLengths() {
+  function setCustomBondLength(elem, len) {
+    // 3dmol adds 0.25 to the total bond length as a "fudge_factor"
+    var fudgeCorrection = 0.125;
+    $3Dmol.setBondLength(elem, len - fudgeCorrection);
+  }
+
+  // override the default bond lengths with covalentRadii
+  Object.keys(_bondLengths.covalentRadii).forEach(function (elem) {
+    setCustomBondLength(elem, _bondLengths.covalentRadii[elem]);
+  });
+
+  // override further based on custom-defined lengths
+  Object.keys(overrideBondLengths).forEach(function (elem) {
+    setCustomBondLength(elem, overrideBondLengths[elem]);
+  });
+}
 var Visualizer3dmol = /*#__PURE__*/function (_React$Component) {
   _inherits(Visualizer3dmol, _React$Component);
   var _super = _createSuper(Visualizer3dmol);
@@ -31,6 +57,7 @@ var Visualizer3dmol = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, Visualizer3dmol);
     _this = _super.call(this, props);
+    setCustomBondLengths();
     _this.viewer = null;
     _this.model = null;
 
@@ -91,11 +118,12 @@ var Visualizer3dmol = /*#__PURE__*/function (_React$Component) {
               y: atom.y,
               z: atom.z
             },
-            fontColor: atom.color,
+            fontColor: "black",
+            bold: true,
             fontSize: 18,
             showBackground: false,
-            backgroundOpacity: 0.5,
-            inFront: false
+            backgroundOpacity: 1.0,
+            inFront: true
           }, null, true);
         });
       }

package/dist/StructureWindow/3dmol/bondLengths.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.covalentRadii = void 0;
+// from https://en.wikipedia.org/wiki/Covalent_radius
+// unit: angstrom
+var covalentRadii = {
+  H: 0.31,
+  He: 0.28,
+  Li: 1.28,
+  Be: 0.96,
+  B: 0.84,
+  C: 0.76,
+  N: 0.71,
+  O: 0.66,
+  F: 0.57,
+  Ne: 0.58,
+  Na: 1.66,
+  Mg: 1.41,
+  Al: 1.21,
+  Si: 1.11,
+  P: 1.07,
+  S: 1.05,
+  Cl: 1.02,
+  Ar: 1.06,
+  K: 2.03,
+  Ca: 1.76,
+  Sc: 1.7,
+  Ti: 1.6,
+  V: 1.53,
+  Cr: 1.39,
+  Mn: 1.61,
+  Fe: 1.52,
+  Co: 1.5,
+  Ni: 1.24,
+  Cu: 1.32,
+  Zn: 1.22,
+  Ga: 1.22,
+  Ge: 1.2,
+  As: 1.19,
+  Se: 1.2,
+  Br: 1.2,
+  Kr: 1.16,
+  Rb: 2.2,
+  Sr: 1.95,
+  Y: 1.9,
+  Zr: 1.75,
+  Nb: 1.64,
+  Mo: 1.54,
+  Tc: 1.47,
+  Ru: 1.46,
+  Rh: 1.42,
+  Pd: 1.39,
+  Ag: 1.45,
+  Cd: 1.44,
+  In: 1.42,
+  Sn: 1.39,
+  Sb: 1.39,
+  Te: 1.38,
+  I: 1.39,
+  Xe: 1.4,
+  Cs: 2.44,
+  Ba: 2.15,
+  La: 2.07,
+  Ce: 2.04,
+  Pr: 2.03,
+  Nd: 2.01,
+  Pm: 1.99,
+  Sm: 1.98,
+  Eu: 1.98,
+  Gd: 1.96,
+  Tb: 1.94,
+  Dy: 1.92,
+  Ho: 1.92,
+  Er: 1.89,
+  Tm: 1.9,
+  Yb: 1.87,
+  Lu: 1.75,
+  Hf: 1.87,
+  Ta: 1.7,
+  W: 1.62,
+  Re: 1.51,
+  Os: 1.44,
+  Ir: 1.41,
+  Pt: 1.36,
+  Au: 1.36,
+  Hg: 1.32,
+  Tl: 1.45,
+  Pb: 1.46,
+  Bi: 1.48,
+  Po: 1.4,
+  At: 1.5,
+  Rn: 1.5,
+  Fr: 2.6,
+  Ra: 2.21,
+  Ac: 2.15,
+  Th: 2.06,
+  Pa: 2.0,
+  U: 1.96,
+  Np: 1.9,
+  Pu: 1.87,
+  Am: 1.8,
+  Cm: 1.69
+};
+exports.covalentRadii = covalentRadii;

package/dist/StructureWindow/index.js

@@ -40,8 +40,9 @@ var StructureWindow = /*#__PURE__*/function (_React$Component) {
         mouseNoteText = "Interaction on";
         mouseNoteClass = "mouse-disabled-note on";
       }
-      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "structure-window-outer",
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "structure-window-outer"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         onClick: function onClick() {
           return _this.props.setMouseEnabledState(true);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mc-react-structure-visualizer",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "author": "Kristjan Eimre <kristjan.eimre@epfl.ch>",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -14,7 +14,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "3dmol": "^2.0.1",
+    "3dmol": "^2.0.2",
     "bootstrap": "^5.2.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.1",

package/src/App.js

@@ -11,6 +11,10 @@ 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 uuid = "07e48338-e639-485c-bed0-5f23bf6cfae2"; // Ag
+  //const uuid = "e36f52ac-0f64-47eb-86eb-550608c8672c"; // BN mc3d-66325/pbe
+  //const uuid = "aaea1e0f-337c-453f-a23a-acc06ddc93c9"; // BaTiO3 mc3d-46554/pbe
+  //const uuid = "a490b0ff-012a-44c8-a48a-f734dc634b3c"; // EuI4La mc3d-34858/pbe
 
   const responseAiiDACif = await fetch(
     `${aiidaRestEndpoint}/nodes/${uuid}/download?download_format=cif&download=false`

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

@@ -2,13 +2,44 @@ import React from "react";
 
 import * as $3Dmol from "3dmol";
 
+import { covalentRadii } from "./bondLengths";
+
 import "./Visualizer3dmol.css";
-import { isLabelWithInternallyDisabledControl } from "@testing-library/user-event/dist/utils";
+
+// override the covalent bond detection based on examples in MC3D
+const overrideBondLengths = {
+  // uuid = "aaea1e0f-337c-453f-a23a-acc06ddc93c9"; // BaTiO3 mc3d-46554/pbe
+  Ba: 0.92 * covalentRadii["Ba"],
+  Ti: 0.94 * covalentRadii["Ti"],
+  // uuid = "a490b0ff-012a-44c8-a48a-f734dc634b3c"; // EuI4La mc3d-34858/pbe
+  I: 1.05 * covalentRadii["I"],
+  Eu: 1.05 * covalentRadii["Eu"],
+};
+
+function setCustomBondLengths() {
+  function setCustomBondLength(elem, len) {
+    // 3dmol adds 0.25 to the total bond length as a "fudge_factor"
+    let fudgeCorrection = 0.125;
+    $3Dmol.setBondLength(elem, len - fudgeCorrection);
+  }
+
+  // override the default bond lengths with covalentRadii
+  Object.keys(covalentRadii).forEach((elem) => {
+    setCustomBondLength(elem, covalentRadii[elem]);
+  });
+
+  // override further based on custom-defined lengths
+  Object.keys(overrideBondLengths).forEach((elem) => {
+    setCustomBondLength(elem, overrideBondLengths[elem]);
+  });
+}
 
 class Visualizer3dmol extends React.Component {
   constructor(props) {
     super(props);
 
+    setCustomBondLengths();
+
     this.viewer = null;
     this.model = null;
 
@@ -62,11 +93,12 @@ class Visualizer3dmol extends React.Component {
           atom.elem,
           {
             position: { x: atom.x, y: atom.y, z: atom.z },
-            fontColor: atom.color,
+            fontColor: "black",
+            bold: true,
             fontSize: 18,
             showBackground: false,
-            backgroundOpacity: 0.5,
-            inFront: false,
+            backgroundOpacity: 1.0,
+            inFront: true,
           },
           null,
           true

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

@@ -0,0 +1,100 @@
+// from https://en.wikipedia.org/wiki/Covalent_radius
+// unit: angstrom
+export const covalentRadii = {
+  H: 0.31,
+  He: 0.28,
+  Li: 1.28,
+  Be: 0.96,
+  B: 0.84,
+  C: 0.76,
+  N: 0.71,
+  O: 0.66,
+  F: 0.57,
+  Ne: 0.58,
+  Na: 1.66,
+  Mg: 1.41,
+  Al: 1.21,
+  Si: 1.11,
+  P: 1.07,
+  S: 1.05,
+  Cl: 1.02,
+  Ar: 1.06,
+  K: 2.03,
+  Ca: 1.76,
+  Sc: 1.7,
+  Ti: 1.6,
+  V: 1.53,
+  Cr: 1.39,
+  Mn: 1.61,
+  Fe: 1.52,
+  Co: 1.5,
+  Ni: 1.24,
+  Cu: 1.32,
+  Zn: 1.22,
+  Ga: 1.22,
+  Ge: 1.2,
+  As: 1.19,
+  Se: 1.2,
+  Br: 1.2,
+  Kr: 1.16,
+  Rb: 2.2,
+  Sr: 1.95,
+  Y: 1.9,
+  Zr: 1.75,
+  Nb: 1.64,
+  Mo: 1.54,
+  Tc: 1.47,
+  Ru: 1.46,
+  Rh: 1.42,
+  Pd: 1.39,
+  Ag: 1.45,
+  Cd: 1.44,
+  In: 1.42,
+  Sn: 1.39,
+  Sb: 1.39,
+  Te: 1.38,
+  I: 1.39,
+  Xe: 1.4,
+  Cs: 2.44,
+  Ba: 2.15,
+  La: 2.07,
+  Ce: 2.04,
+  Pr: 2.03,
+  Nd: 2.01,
+  Pm: 1.99,
+  Sm: 1.98,
+  Eu: 1.98,
+  Gd: 1.96,
+  Tb: 1.94,
+  Dy: 1.92,
+  Ho: 1.92,
+  Er: 1.89,
+  Tm: 1.9,
+  Yb: 1.87,
+  Lu: 1.75,
+  Hf: 1.87,
+  Ta: 1.7,
+  W: 1.62,
+  Re: 1.51,
+  Os: 1.44,
+  Ir: 1.41,
+  Pt: 1.36,
+  Au: 1.36,
+  Hg: 1.32,
+  Tl: 1.45,
+  Pb: 1.46,
+  Bi: 1.48,
+  Po: 1.4,
+  At: 1.5,
+  Rn: 1.5,
+  Fr: 2.6,
+  Ra: 2.21,
+  Ac: 2.15,
+  Th: 2.06,
+  Pa: 2.0,
+  U: 1.96,
+  Np: 1.9,
+  Pu: 1.87,
+  Am: 1.8,
+  Cm: 1.69,
+};

package/src/StructureVisualizer/StructureWindow/index.js

@@ -20,11 +20,8 @@ class StructureWindow extends React.Component {
       mouseNoteClass = "mouse-disabled-note on";
     }
     return (
-      <div>
-        <div
-          className="structure-window-outer"
-          onClick={() => this.props.setMouseEnabledState(true)}
-        >
+      <div className="structure-window-outer">
+        <div onClick={() => this.props.setMouseEnabledState(true)}>
           <div className={swClassName}>
             <Visualizer3dmol
               ref={this.props.visualizerRef}