Merge pull request #127 from Exabyte-io/feature/SOF-6588

Feature/sof-6588 feat: add checks for overlapping atoms etc, highlight in basis viewer and in wave viewer

package.json

@@ -33,12 +33,9 @@
         "@babel/preset-react": "7.16.7",
         "@babel/runtime": "7.16.7",
         "@babel/runtime-corejs2": "7.16.7",
-        "@codemirror/language": "^6.6.0",
-        "@codemirror/legacy-modes": "^6.3.1",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
         "@exabyte-io/wave.js": "2023.9.14-1",
-        "@exabyte-io/cove.js": "2023.10.27-0",
         "@mui/icons-material": "^5.11.0",
         "@mui/material": "^5.11.9",
         "@mui/styles": "^5.11.7",
@@ -66,13 +63,16 @@
     },
     "peerDependencies": {
         "@exabyte-io/made.js": "*",
+        "@exabyte-io/code.js": "*",
+        "@exabyte-io/cove.js": "*",
         "react": "^17.0.0",
         "react-dom": "^17.0.0"
     },
     "devDependencies": {
-        "@exabyte-io/code.js": "^2022.6.15-1",
-        "@exabyte-io/eslint-config": "^2023.8.29-1",
-        "@exabyte-io/made.js": "^2023.9.21-0",
+        "@exabyte-io/cove.js": "2023.11.3-0",
+        "@exabyte-io/code.js": "2023.11.1-0",
+        "@exabyte-io/eslint-config": "^2022.11.17-0",
+        "@exabyte-io/made.js": "2023.11.3-0",
         "@exabyte-io/standata": "git+https://github.com/Exabyte-io/standata",
         "@types/mocha": "^10.0.1",
         "@types/node": "^20.4.2",
@@ -112,7 +112,7 @@
         "not op_mini all"
     ],
     "engines": {
-        "node": ">=12.0",
+        "node": ">=14.0",
         "npm": ">=6.14"
     }
 }

src/MaterialsDesigner.jsx

@@ -171,7 +171,7 @@ MaterialsDesigner.propTypes = {
     onRemove: PropTypes.func,
 
     maxCombinatorialBasesCount: PropTypes.number,
-
+    // eslint-disable-next-line react/forbid-prop-types
     defaultMaterialsSet: PropTypes.array,
 };
 

src/MaterialsDesignerContainer.jsx

@@ -137,7 +137,7 @@ MaterialsDesignerContainer.propTypes = {
     maxCombinatorialBasesCount: PropTypes.number,
     // eslint-disable-next-line react/require-default-props
     isConventionalCellShown: PropTypes.bool,
-    // eslint-disable-next-line react/require-default-props
+    // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
     defaultMaterialsSet: PropTypes.array,
 };
 

src/components/3d_editor/advanced_geometry/BoundaryConditionsDialog.jsx

@@ -111,6 +111,7 @@ export class BoundaryConditionsDialog extends ModalDialog {
 }
 
 BoundaryConditionsDialog.PropTypes = {
+    // eslint-disable-next-line react/forbid-prop-types
     material: PropTypes.object,
     onSubmit: PropTypes.func,
 };

src/components/3d_editor/advanced_geometry/CombinatorialBasisDialog.jsx

@@ -128,6 +128,7 @@ class CombinatorialBasisDialog extends ModalDialog {
 
 CombinatorialBasisDialog.PropTypes = {
     onSubmit: PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
     material: PropTypes.object,
     maxCombinatorialBasesCount: PropTypes.number,
 };

src/components/3d_editor/advanced_geometry/InterpolateBasesDialog.jsx

@@ -179,7 +179,9 @@ class InterpolateBasesDialog extends ModalDialog {
 
 InterpolateBasesDialog.PropTypes = {
     onSubmit: PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
     material: PropTypes.object, // initial
+    // eslint-disable-next-line react/forbid-prop-types
     material2: PropTypes.object, // final
 };
 

src/components/header_menu/HeaderMenuToolbar.jsx

@@ -441,6 +441,7 @@ HeaderMenuToolbar.propTypes = {
     index: PropTypes.number.isRequired,
     isFullscreen: PropTypes.bool.isRequired,
     maxCombinatorialBasesCount: PropTypes.number.isRequired,
+    // eslint-disable-next-line react/forbid-prop-types
     defaultMaterialsSet: PropTypes.array.isRequired,
 
     onUpdate: PropTypes.func.isRequired,

src/components/source_editor/Basis.jsx

@@ -18,6 +18,7 @@ class BasisEditor extends React.Component {
         this.state = {
             xyz: props.material.getBasisAsXyz(),
             coordUnits: Made.ATOMIC_COORD_UNITS.crystal,
+            checks: props.material.getConsistencyChecks(),
         };
 
         this.handleBasisTextChange = this.handleBasisTextChange.bind(this);
@@ -27,7 +28,10 @@ class BasisEditor extends React.Component {
     UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
         const { material } = this.props;
         if (material !== nextProps.material) {
-            this.setState({ xyz: nextProps.material.getBasisAsXyz() });
+            this.setState({
+                xyz: nextProps.material.getBasisAsXyz(),
+                checks: nextProps.material.getConsistencyChecks(),
+            });
         }
     }
 
@@ -90,8 +94,8 @@ class BasisEditor extends React.Component {
     }
 
     renderBasisText() {
-        const { xyz } = this.state;
-        return <BasisText content={xyz} onChange={this.handleBasisTextChange} />;
+        const { xyz, checks } = this.state;
+        return <BasisText content={xyz} checks={checks} onChange={this.handleBasisTextChange} />;
     }
 
     render() {

src/components/source_editor/BasisText.jsx

@@ -9,13 +9,15 @@ import React from "react";
 import { displayMessage } from "../../i18n/messages";
 
 class BasisText extends React.Component {
+    codeMirrorRef = React.createRef();
+
     constructor(props) {
         super(props);
         this.state = {
             content: props.content,
+            checks: props.checks,
             isContentValidated: true, // assuming that initial content is valid
             message: "",
-            manualEditStarted: false,
         };
         this.updateContent = this.updateContent.bind(this);
         // TODO: adjust tests to accommodate for the delay and re-enable
@@ -24,9 +26,11 @@ class BasisText extends React.Component {
 
     // eslint-disable-next-line no-unused-vars
     UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
-        const { content } = this.props;
-        if (content !== nextProps.content) {
-            this.reformatContentAndUpdateStateIfNoManualEdit(nextProps.content);
+        const { content: nextContent, checks: nextChecks } = nextProps;
+        const { content, checks } = this.props;
+        if (content !== nextContent || checks !== nextChecks) {
+            this.reformatContentAndUpdateStateIfNoManualEdit(nextContent);
+            this.setState({ checks: nextChecks });
         }
     }
 
@@ -52,9 +56,9 @@ class BasisText extends React.Component {
     }
 
     reformatContentAndUpdateStateIfNoManualEdit = (newContent) => {
-        const { manualEditStarted, content } = this.state;
+        const { content } = this.state;
         // Change state only if user is not editing basis
-        if (!manualEditStarted && content !== newContent) {
+        if (!this.codeMirrorRef.current?.state.isEditing && content !== newContent) {
             // NOTE: from v 1.0.0 ReactCodeMirror is not handling the content updates properly (thus use v0.3.0)
             // https://github.com/JedWatson/react-codemirror/issues/106
             this.setState({
@@ -70,26 +74,24 @@ class BasisText extends React.Component {
         const { onChange, content } = this.props;
         // Avoid triggering update actions when content is set from props
         if (content === newContent) return;
-        this.setState({ content: newContent }, () => {
-            if (this.isContentPassingValidation(newContent)) {
-                onChange(newContent);
-            }
-        });
+        if (this.isContentPassingValidation(newContent)) {
+            onChange(newContent);
+        }
     }
 
     render() {
         const { className, readOnly, codeMirrorOptions } = this.props;
-        const { content, isContentValidated, message } = this.state;
+        const { content, isContentValidated, message, checks } = this.state;
+
         return (
             <div className={setClass("xyz", className)}>
                 <div id="basis-xyz">
                     <CodeMirror
+                        ref={this.codeMirrorRef}
                         className="xyz-codemirror"
                         // eslint-disable-next-line react/no-unused-class-component-methods
                         content={content}
                         updateContent={this.updateContent}
-                        onFocus={() => this.setState({ manualEditStarted: true })}
-                        onBlur={() => this.setState({ manualEditStarted: false })}
                         readOnly={readOnly}
                         options={{
                             lineNumbers: true,
@@ -98,7 +100,9 @@ class BasisText extends React.Component {
                         theme="dark"
                         completions={() => {}}
                         updateOnFirstLoad
-                        language="fortran"
+                        language="exaxyz"
+                        checks={checks}
+                        triggerReload
                     />
                     <div className="col-xs-12 p-5 text-center">
                         <span className={isContentValidated ? "text-success" : "text-danger"}>
@@ -114,6 +118,8 @@ class BasisText extends React.Component {
 BasisText.propTypes = {
     className: PropTypes.string,
     content: PropTypes.string,
+    // eslint-disable-next-line react/forbid-prop-types
+    checks: PropTypes.array,
     readOnly: PropTypes.bool,
     // eslint-disable-next-line react/forbid-prop-types
     codeMirrorOptions: PropTypes.object,
@@ -124,6 +130,7 @@ BasisText.defaultProps = {
     className: "",
     readOnly: false,
     content: "---- No content passed ----\n",
+    checks: [],
     codeMirrorOptions: {},
     onChange: () => {},
 };

tests/cucumber/features/3d-editor/multiple-selection-cancel.feature

@@ -3,8 +3,8 @@ Feature: User can cancel active multiple selection and all changes should be rev
   Scenario:
     When I open materials designer page
     And I create materials with the following data
-      | name      | basis             |
-      | supercell | Si 0 0 0;Si 0 0 0 |
+      | name      | basis                      |
+      | supercell | Si 0 0 0;Si 0.25 0.25 0.25 |
     And I open multi-material 3D editor
 
     # set default positions for easier expectations calculations

tests/cucumber/features/3d-editor/multiple-selection-submit.feature

@@ -3,8 +3,8 @@ Feature: User can select multiple atoms, move them and update their positions ac
   Scenario:
     When I open materials designer page
     And I create materials with the following data
-      | name      | basis             |
-      | supercell | Si 0 0 0;Si 0 0 0 |
+      | name      | basis                      |
+      | supercell | Si 0 0 0;Si 0.25 0.25 0.25 |
     And I open multi-material 3D editor
 
     # set default positions for easier expectations calculations

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}