mc-react-structure-visualizer 0.4.3 → 0.5.0

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

@@ -1,100 +0,0 @@
-// 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.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;
-}

package/src/StructureVisualizer/index.js

@@ -1,87 +0,0 @@
-import React from "react";
-
-import ControlBox from "./ControlBox";
-
-import StructureWindow from "./StructureWindow";
-
-import "./index.css";
-
-class StructureVisualizer extends React.Component {
-  constructor(props) {
-    super(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 = 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.setMouseEnabledState = this.setMouseEnabledState.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 });
-    }
-  }
-
-  setMouseEnabledState(state) {
-    this.setState({ mouseEnabled: state });
-  }
-
-  handleViewerParamChange(param, value) {
-    this.setState({
-      viewerParams: {
-        ...this.state.viewerParams,
-        [param]: value,
-      },
-    });
-  }
-
-  handleViewerEvent(param, value) {
-    this.visualizerRef.current.handleEvent(param, value);
-  }
-
-  render() {
-    return (
-      <div ref={this.wrapperRef} className="structure-visualizer">
-        <StructureWindow
-          visualizerRef={this.visualizerRef}
-          viewerParams={this.state.viewerParams}
-          cifText={this.props.cifText}
-          mouseEnabled={this.state.mouseEnabled}
-          setMouseEnabledState={this.setMouseEnabledState}
-        />
-        <ControlBox
-          viewerParams={this.state.viewerParams}
-          onViewerParamChange={this.handleViewerParamChange}
-          onViewerEvent={this.handleViewerEvent}
-        />
-      </div>
-    );
-  }
-}
-
-export default StructureVisualizer;

package/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

package/src/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

package/src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;