feat: updated components table calculation

- modified the calculations related to various fields - added the field for required total volume - modified the structure of the solid components table refactor: code
ComPlat · Oct 2, 2024 · 7e1c2bd · 7e1c2bd
1 parent 9812ef1
commit 7e1c2bd
Show file tree

Hide file tree

Showing 10 changed files with 591 additions and 343 deletions.
diff --git a/app/api/entities/sample_entity.rb b/app/api/entities/sample_entity.rb
@@ -50,7 +50,7 @@ class SampleEntity < ApplicationEntity
       expose! :melting_point,           unless: :displayed_in_list
       expose! :metrics
       expose! :molarity_unit,           unless: :displayed_in_list
-      expose! :molarity_value,          unless: :displayed_in_list
+      expose! :molarity_value
       expose! :molecule_name_hash,                                  anonymize_with: {}
       expose! :name
       expose! :parent_id,               unless: :displayed_in_list

diff --git a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleComponent.js b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleComponent.js
@@ -15,7 +15,7 @@ import NumeralInputWithUnitsCompo from 'src/apps/mydb/elements/details/NumeralIn
 import Sample from 'src/models/Sample';
 import { permitCls, permitOn } from 'src/components/common/uis';
 import SvgWithPopover from 'src/components/common/SvgWithPopover';
-import SampleForm from "./SampleForm";
+import ComponentStore from 'src/stores/alt/stores/ComponentStore';
 
 const matSource = {
   beginDrag(props) {
@@ -76,6 +76,15 @@ class SampleComponent extends Component {
   constructor(props) {
     super(props);
 
+    const componentState = ComponentStore.getState();
+    this.state = {
+      lockAmountColumn: componentState.lockAmountColumn,
+      lockAmountColumnSolids: componentState.lockAmountColumnSolids,
+      lockConcentration: componentState.lockConcentration,
+      lockConcentrationSolids: componentState.lockConcentrationSolids,
+    };
+
+    this.onComponentStoreChange = this.onComponentStoreChange.bind(this);
     this.handleAmountChange = this.handleAmountChange.bind(this);
     this.handleMetricsChange = this.handleMetricsChange.bind(this);
     this.handleDensityChange = this.handleDensityChange.bind(this);
@@ -85,6 +94,18 @@ class SampleComponent extends Component {
     this.handleReferenceChange = this.handleReferenceChange.bind(this);
   }
 
+  componentDidMount() {
+    ComponentStore.listen(this.onComponentStoreChange);
+  }
+
+  componentWillUnmount() {
+    ComponentStore.unlisten(this.onComponentStoreChange);
+  }
+
+  onComponentStoreChange(state) {
+    this.setState({ ...state });
+  }
+
   handleAmountChange(e, value, concType, lockColumn) {
     if (e.value === value) return;
     const { materialGroup } = this.props;
@@ -270,6 +291,9 @@ class SampleComponent extends Component {
   }
 
   componentMass(material, metric, metricPrefixes, massBsStyle) {
+    const { lockAmountColumnSolids } = this.state;
+    const { sample } = this.props;
+
     return (
       <OverlayTrigger
         delay="100"
@@ -286,7 +310,7 @@ class SampleComponent extends Component {
             metricPrefix={metric}
             metricPrefixes={metricPrefixes}
             precision={4}
-            disabled={!permitOn(this.props.sample) || this.props.lockAmountColumnSolids}
+            disabled={!permitOn(sample) || lockAmountColumnSolids}
             onChange={(e) => this.handleAmountChange(e, material.amount_g)}
             onMetricsChange={this.handleMetricsChange}
             bsStyle={material.error_mass ? 'error' : massBsStyle}
@@ -322,8 +346,9 @@ class SampleComponent extends Component {
     );
   }
 
-  componentConc(material, metricMolConc, metricPrefixesMolConc) {
+  componentConc(material, metricMolConc, metricPrefixesMolConc, lockColumn) {
     const { sample } = this.props;
+
     return (
       <td style={{ verticalAlign: 'top' }}>
         <NumeralInputWithUnitsCompo
@@ -333,16 +358,17 @@ class SampleComponent extends Component {
           metricPrefix={metricMolConc}
           metricPrefixes={metricPrefixesMolConc}
           precision={4}
-          disabled={!permitOn(sample)}
-          onChange={(e) => this.handleAmountChange(e, material.concn, 'targetConc')}
+          disabled={!permitOn(sample) || lockColumn}
+          onChange={(e) => this.handleAmountChange(e, material.concn, 'targetConc', lockColumn)}
           onMetricsChange={this.handleMetricsChange}
         />
       </td>
     );
   }
 
   componentStartingConc(material, metricMolConc, metricPrefixesMolConc) {
-    const { sample, lockAmountColumn } = this.props;
+    const { sample } = this.props;
+    const { lockAmountColumn } = this.state;
 
     return (
       <td style={{ verticalAlign: 'top' }}>
@@ -377,9 +403,8 @@ class SampleComponent extends Component {
   }
 
   componentDensity(material) {
-    const {
-      sample, materialGroup, lockAmountColumn, lockAmountColumnSolids
-    } = this.props;
+    const { sample, materialGroup } = this.props;
+    const { lockAmountColumn, lockAmountColumnSolids } = this.state;
     const lockColumn = materialGroup === 'liquid' ? lockAmountColumn : lockAmountColumnSolids;
 
     return (
@@ -403,6 +428,7 @@ class SampleComponent extends Component {
       sample, material, deleteMaterial, connectDragSource, connectDropTarget, activeTab,
       enableComponentLabel, enableComponentPurity
     } = props;
+    const { lockConcentration } = this.state;
     const metricPrefixes = ['m', 'n', 'u'];
     const metricPrefixesMol = ['m', 'n'];
     const metricMol = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[2]) > -1) ? material.metrics[2] : 'm';
@@ -451,7 +477,7 @@ class SampleComponent extends Component {
 
         {this.materialRef(material)}
 
-        {this.componentConc(material, metricMolConc, metricPrefixesMolConc)}
+        {this.componentConc(material, metricMolConc, metricPrefixesMolConc, lockConcentration)}
 
         {
           enableComponentLabel && (
@@ -479,8 +505,10 @@ class SampleComponent extends Component {
 
   solidComponent(props, style) {
     const {
-      sample, material, deleteMaterial, connectDragSource, connectDropTarget
+      sample, material, deleteMaterial, connectDragSource, connectDropTarget,
+      enableComponentLabel, enableComponentPurity
     } = props;
+    const { lockConcentrationSolids } = this.state;
     const metricPrefixes = ['m', 'n', 'u'];
     const metric = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[0]) > -1) ? material.metrics[0] : 'm';
     const metricPrefixesMol = ['m', 'n'];
@@ -502,26 +530,25 @@ class SampleComponent extends Component {
           {this.materialNameWithIupac(material)}
         </td>
 
-        {this.materialRef(material)}
-
-        <td>
-          {this.componentMass(material, metric, metricPrefixes, massBsStyle)}
+        <td style={{ verticalAlign: 'top' }}>
+          <Button
+            disabled={!permitOn(sample)}
+            bsStyle="danger"
+            bsSize="small"
+            onClick={() => deleteMaterial(material)}
+          >
+            <i className="fa fa-trash-o" />
+          </Button>
         </td>
+        <td />
 
-        <td>
-          {this.componentMol(material, metricMol, metricPrefixesMol)}
+        <td
+          style={enableComponentLabel === false && enableComponentPurity === false ? { verticalAlign: 'bottom' } : null}
+        >
+          {this.componentMass(material, metric, metricPrefixes, massBsStyle)}
         </td>
-        {this.componentDensity(material, metricMol, metricPrefixesMol)}
-        {this.componentConc(material, metricMolConc, metricPrefixesMolConc)}
 
-        <td style={{ verticalAlign: 'top' }}>
-          <NumeralInputWithUnitsCompo
-            precision={4}
-            value={material.purity}
-            disabled={!permitOn(this.props.sample)}
-            onChange={(e) => this.handlePurityChange(e, material.purity)}
-          />
-        </td>
+        {this.componentMol(material, metricMol, metricPrefixesMol)}
 
         <td style={{ verticalAlign: 'top' }}>
           <NumeralInputWithUnitsCompo
@@ -532,16 +559,30 @@ class SampleComponent extends Component {
           />
         </td>
 
-        <td style={{ verticalAlign: 'top' }}>
-          <Button
-            disabled={!permitOn(sample)}
-            bsStyle="danger"
-            bsSize="small"
-            onClick={() => deleteMaterial(material)}
-          >
-            <i className="fa fa-trash-o" />
-          </Button>
-        </td>
+        {this.materialRef(material)}
+
+        {this.componentConc(material, metricMolConc, metricPrefixesMolConc, lockConcentrationSolids)}
+
+        {
+          enableComponentLabel && (
+            <td>
+              {this.nameInput(material)}
+            </td>
+          )
+        }
+
+        {
+          enableComponentPurity && (
+            <td style={{ verticalAlign: 'top' }}>
+              <NumeralInputWithUnitsCompo
+                precision={4}
+                value={material.purity}
+                disabled={!permitOn(this.props.sample)}
+                onChange={(e) => this.handlePurityChange(e, material.purity)}
+              />
+            </td>
+          )
+        }
       </tr>
     );
   }
@@ -612,8 +653,6 @@ SampleComponent.propTypes = {
   isDragging: PropTypes.bool,
   canDrop: PropTypes.bool,
   isOver: PropTypes.bool,
-  lockAmountColumn: PropTypes.bool.isRequired,
-  lockAmountColumnSolids: PropTypes.bool.isRequired,
   enableComponentLabel: PropTypes.bool.isRequired,
   enableComponentPurity: PropTypes.bool.isRequired,
 };