Add Store in VectorCalculator and functional upgrades (#860)

Refactor `VectorCalculator` to use app global `Store`-concept and adjust to updates in `VectorSelector`/`SmartNodeSelector`.

- Use `Context` and `useReducer` to create a app global `store` for current `state`. 
- Improve layout for consistent view an prevent resizing during editing/usage  
- Component inherit sizes from parent.
- Add dialogs for improved user interaction when selecting new active expression and edited data is not saved
- Updated usage according to new features in `VectorSelector`/`SmartNodeSelector`
- Re-organize folder structure of components for clarity
- Rename components for clarity:
    - ExpressionInputComponent -> `ExpressionEditComponent`
    - VariablesTable->`VectorSelectorTable`

Author: jorgenherje

react/package-lock.json

@@ -602,14 +602,16 @@ class VectorCalculatorDemo extends Component {
 
     render() {
         return (
-            <VectorCalculator
-                id="vector_calculator"
-                vectors={this.vectors}
-                expressions={this.expressions}
-                isDashControlled={false}
-                maxExpressionDescriptionLength={35}
-                setProps={this.setProps}
-            />
+            <div style={{ height: "60vh", width: "90vw" }}>
+                <VectorCalculator
+                    id="vector_calculator"
+                    vectors={this.vectors}
+                    expressions={this.expressions}
+                    isDashControlled={false}
+                    maxExpressionDescriptionLength={35}
+                    setProps={this.setProps}
+                />
+            </div>
         );
     }
 }

react/src/demo/VectorCalculatorDemo.js

@@ -1,41 +1,70 @@
 .VectorCalculator {
     display: block;
-    padding: 5px;
     flex-grow: 1;
+    margin-top: 5px;
+    height: 100%;
 }
 
-.VectorCalculator .ExpressionInputComponent {
-    padding: 20px;
-    min-width: 400px;
+.VectorCalculator > .MuiGrid-root {
+    height: 100%;
 }
 
-.VectorCalculator .ExpressionTableComponent {
-    padding: 20px;
-    min-width: 360px;
+.VectorCalculator .WarningAlert {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
 }
 
 .VectorCalculator .ExpressionsTableHeader {
     font-weight: bold;
+    background-color: #f7f7f7;
+}
+
+.VectorCalculator .ExpressionsTableHeaderTable {
+    table-layout: fixed;
 }
 
-.VectorCalculator .ExpressionsTableHeaderNameCell {
+.VectorCalculator .ExpressionsTableNameCell {
     width: 35%;
 }
 
-.VectorCalculator .ExpressionsTableHeaderExpressionCell {
+.VectorCalculator .ExpressionsTableExpressionCell {
     width: 65%;
 }
 
+.VectorCalculator .TableWrapperGridItem {
+    flex-grow: 4;
+    height: 0;
+    border: 1px #ccc solid;
+    background-color: #fff;
+    padding: 0;
+    position: relative;
+}
+
+.VectorCalculator .TableWrapperGridItem tbody {
+    height: 100%;
+    background-color: #fff;
+}
+
 .VectorCalculator .ExpressionsTable {
     position: relative;
-    max-height: 450px;
     max-width: 100%;
+    max-height: 100%;
+    height: calc(100% - 57px);
+    background-color: #fff;
 }
 
 .VectorCalculator .ExpressionsTable table {
     table-layout: fixed;
 }
 
+.VectorCalculator .ExpressionsTable .Mui-selected {
+    background-color: #edf4fb;
+}
+
+.VectorCalculator .ExpressionsTable .Mui-selected:hover {
+    background-color: #e3eefa;
+}
 .VectorCalculator .ExpressionsTableCell {
     display: inline-block;
     position: relative;
@@ -45,13 +74,43 @@
     text-overflow: ellipsis;
 }
 
+.VectorCalculator .ExpressionNameTextFieldGridItem {
+    height: 90px;
+}
+.VectorCalculator .ExpressionInputTextFieldGridItem {
+    height: 90px;
+}
+.VectorCalculator .ExpressionDescriptionTextFieldGridItem {
+    height: 90px;
+}
+.VectorCalculator .VectorSelectorTableGridItem {
+    min-height: 70px;
+}
+
+.VectorCalculator .ActionButtonsGridItem {
+    height: 80px;
+}
+
 .VectorCalculator .TextFieldWrapper {
     height: 58px;
 }
 
-.VectorCalculator .VariablesTableContainer {
-    overflow: visible;
+.VectorCalculator .VectorSelectorTableContainer {
     position: relative;
+    max-height: 100%;
+    max-width: 100%;
+}
+
+.VectorCalculator .VectorSelectorTableContainer table {
+    table-layout: fixed;
+}
+
+.VectorCalculator .VectorSelectorTableVariableColumn {
+    width: 10%;
+}
+
+.VectorCalculator .VectorSelectorTableVectorSelectorColumn {
+    min-width: 240px;
 }
 
 .VectorCalculator .DisableOverlay {

react/src/lib/components/VectorCalculator/VectorCalculator.css

@@ -1,15 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import {
+    ExpressionTypePropTypes,
+    ExternalParseDataPropTypes,
+} from "./utils/VectorCalculatorTypes";
 import { VectorCalculatorComponent } from "./components/VectorCalculatorComponent";
-import { string } from "jsverify";
-import "!style-loader!css-loader!./VectorCalculator.css";
+import { StoreProvider } from "./components/ExpressionsStore";
 
 /**
  * VectorCalculator is a component that allows to calculate new vectors by creating a mathematical expression
  * based existing vectors.
  *
- * New calcualted vectors are created by writing a mathematical equation with single character variables,
+ * New calculated vectors are created by writing a mathematical equation with single character variables,
  * where each variable is assigned a vector from the set of existing vectors.
  *
  * The component provides a list of valid expressions which can be used externally to calculate the wanted
@@ -20,9 +23,9 @@ import "!style-loader!css-loader!./VectorCalculator.css";
  */
 export const VectorCalculator = (props) => {
     return (
-        <div className={"VectorCalculator"}>
+        <StoreProvider initialExpressions={props.expressions}>
             <VectorCalculatorComponent {...props} />
-        </div>
+        </StoreProvider>
     );
 };
 
@@ -46,23 +49,10 @@ VectorCalculator.propTypes = {
     /**
      * Pre-defined vector calculator expressions.
      * Each expression consist of an expression name, mathematical expression string with variables
-     * and a map of characther variables and the corresponding vector name.
+     * and a map of character variables and the corresponding vector name.
      */
     expressions: PropTypes.arrayOf(
-        PropTypes.shape({
-            name: PropTypes.string.isRequired,
-            expression: PropTypes.string.isRequired,
-            id: PropTypes.string.isRequired,
-            variableVectorMap: PropTypes.arrayOf(
-                PropTypes.shape({
-                    variableName: string.isRequired,
-                    vectorName: string.isRequired,
-                })
-            ).isRequired,
-            description: PropTypes.string,
-            isValid: PropTypes.bool.isRequired,
-            isDeletable: PropTypes.bool.isRequired,
-        })
+        PropTypes.shape(ExpressionTypePropTypes).isRequired
     ).isRequired,
 
     /**
@@ -83,12 +73,7 @@ VectorCalculator.propTypes = {
     /**
      * Data for external parsing of mathematical expression
      */
-    externalParseData: PropTypes.shape({
-        expression: PropTypes.string.isRequired,
-        id: PropTypes.string.isRequired,
-        variables: PropTypes.arrayOf(string.isRequired).isRequired,
-        isValid: PropTypes.bool.isRequired,
-    }),
+    externalParseData: PropTypes.shape(ExternalParseDataPropTypes),
 
     /**
      * Dash-assigned callback that should be called to report property changes