feat: change component table for liquid components

when volume given, calculate the amount when amount is given, calculate the volume handle the calculation when the starting conc. or density being locked recalculate the entire row when starting conc. or density is updated except total concentration, the reference, and the ratio test: add test codes for Component model
ComPlat · Aug 21, 2024 · fa4b02c · fa4b02c
1 parent 0a9e477
commit fa4b02c
Show file tree

Hide file tree

Showing 7 changed files with 713 additions and 174 deletions.
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
@@ -87,16 +87,16 @@ class SampleComponent extends Component {
 
   handleAmountChange(e, value, concType, lockColumn) {
     if (e.value === value) return;
+    const { materialGroup } = this.props;
 
     if (this.props.onChange && e) {
       const event = {
         amount: e,
         type: 'amountChanged',
-        materialGroup: this.props.materialGroup,
+        materialGroup,
         sampleID: this.componentId(),
         concType,
-        updateVolume: !lockColumn,
-
+        lockColumn,
       };
       this.props.onChange(event);
     }
@@ -111,8 +111,7 @@ class SampleComponent extends Component {
         type: 'densityChanged',
         materialGroup: this.props.materialGroup,
         sampleID: this.componentId(),
-        updateVolume: lockColumn,
-
+        lockColumn,
       };
       this.props.onChange(event);
     }
@@ -209,16 +208,14 @@ class SampleComponent extends Component {
   handleRatioChange(e, value) {
     if (e.value === value) return;
 
-    const adjustAmount = this.props.materialGroup === 'liquid' ? this.props.lockAmountColumn : this.props.lockAmountColumnSolids;
+    const { materialGroup } = this.props;
 
     if (this.props.onChange && e) {
       const event = {
         newRatio: e.value,
         type: 'ratioChanged',
         sampleID: this.componentId(),
-        materialGroup: this.props.materialGroup,
-        adjustAmount,
-
+        materialGroup,
       };
       this.props.onChange(event);
     }
@@ -247,7 +244,7 @@ class SampleComponent extends Component {
     if (material.contains_residues) { return notApplicableInput(); }
 
     const {
-      sample, lockAmountColumn, enableComponentLabel, enableComponentPurity
+      sample, enableComponentLabel, enableComponentPurity
     } = this.props;
     const metricPrefixes = ['m', 'n', 'u'];
     const metric = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[1]) > -1) ? material.metrics[1] : 'm';
@@ -263,7 +260,7 @@ class SampleComponent extends Component {
           metricPrefix={metric}
           metricPrefixes={metricPrefixes}
           precision={3}
-          disabled={!permitOn(sample) || lockAmountColumn}
+          disabled={!permitOn(sample)}
           onChange={(e) => this.handleAmountChange(e, material.amount_l)}
           onMetricsChange={this.handleMetricsChange}
           bsStyle={material.amount_unit === 'l' ? 'success' : 'default'}
@@ -302,9 +299,8 @@ class SampleComponent extends Component {
 
   componentMol(material, metricMol, metricPrefixesMol) {
     const {
-      sample, materialGroup, lockAmountColumn, lockAmountColumnSolids, enableComponentLabel, enableComponentPurity
+      sample, enableComponentLabel, enableComponentPurity
     } = this.props;
-    const lockColumn = materialGroup === 'liquid' ? lockAmountColumn : lockAmountColumnSolids;
 
     return (
       <td
@@ -317,7 +313,7 @@ class SampleComponent extends Component {
           metricPrefix={metricMol}
           metricPrefixes={metricPrefixesMol}
           precision={4}
-          disabled={!permitOn(sample) || lockColumn}
+          disabled={!permitOn(sample)}
           onChange={(e) => this.handleAmountChange(e, material.amount_mol)}
           onMetricsChange={this.handleMetricsChange}
           bsStyle={material.amount_unit === 'mol' ? 'success' : 'default'}
@@ -327,10 +323,7 @@ class SampleComponent extends Component {
   }
 
   componentConc(material, metricMolConc, metricPrefixesMolConc) {
-    const {
-      materialGroup, lockAmountColumn, lockAmountColumnSolids, sample
-    } = this.props;
-    const lockColumn = materialGroup === 'liquid' ? lockAmountColumn : lockAmountColumnSolids;
+    const { sample } = this.props;
     return (
       <td style={{ verticalAlign: 'top' }}>
         <NumeralInputWithUnitsCompo
@@ -340,16 +333,17 @@ class SampleComponent extends Component {
           metricPrefix={metricMolConc}
           metricPrefixes={metricPrefixesMolConc}
           precision={4}
-          disabled={!permitOn(sample) || !lockColumn}
-          onChange={(e) => this.handleAmountChange(e, material.concn, 'targetConc', lockColumn)}
+          disabled={!permitOn(sample)}
+          onChange={(e) => this.handleAmountChange(e, material.concn, 'targetConc')}
           onMetricsChange={this.handleMetricsChange}
         />
       </td>
     );
   }
 
   componentStartingConc(material, metricMolConc, metricPrefixesMolConc) {
-    const lockColumn = this.props.materialGroup === 'liquid' ? this.props.lockAmountColumn : this.props.lockAmountColumnSolids;
+    const { sample, lockAmountColumn } = this.props;
+
     return (
       <td style={{ verticalAlign: 'top' }}>
         <NumeralInputWithUnitsCompo
@@ -359,8 +353,8 @@ class SampleComponent extends Component {
           metricPrefix={metricMolConc}
           metricPrefixes={metricPrefixesMolConc}
           precision={4}
-          disabled={!permitOn(this.props.sample)}
-          onChange={(e) => this.handleAmountChange(e, material.startingConc, 'startingConc', lockColumn)}
+          disabled={!permitOn(sample) || lockAmountColumn}
+          onChange={(e) => this.handleAmountChange(e, material.startingConc, 'startingConc', lockAmountColumn)}
           onMetricsChange={this.handleMetricsChange}
         />
       </td>
@@ -383,7 +377,11 @@ class SampleComponent extends Component {
   }
 
   componentDensity(material) {
-    const lockColumn = this.props.materialGroup === 'liquid' ? this.props.lockAmountColumn : this.props.lockAmountColumnSolids;
+    const {
+      sample, materialGroup, lockAmountColumn, lockAmountColumnSolids
+    } = this.props;
+    const lockColumn = materialGroup === 'liquid' ? lockAmountColumn : lockAmountColumnSolids;
+
     return (
       <td style={{ verticalAlign: 'top' }}>
         <NumeralInputWithUnitsCompo
@@ -393,7 +391,7 @@ class SampleComponent extends Component {
           metricPrefix="n"
           metricPrefixes={['n']}
           precision={4}
-          disabled={!permitOn(this.props.sample)}
+          disabled={!permitOn(sample) || lockColumn}
           onChange={(e) => this.handleDensityChange(e, material.density, lockColumn)}
         />
       </td>
@@ -435,9 +433,8 @@ class SampleComponent extends Component {
           </Button>
         </td>
 
-        {this.componentStartingConc(material, metricMolConc, metricPrefixesMolConc)}
-
-        {this.componentDensity(material)}
+        {activeTab === 'concentration' && this.componentStartingConc(material, metricMolConc, metricPrefixesMolConc)}
+        {activeTab === 'density' && this.componentDensity(material)}
 
         {this.materialVolume(material)}
 
@@ -606,6 +603,7 @@ export default compose(
 )(SampleComponent);
 
 SampleComponent.propTypes = {
+  sample: PropTypes.object.isRequired,
   material: PropTypes.instanceOf(Sample).isRequired,
   materialGroup: PropTypes.string.isRequired,
   deleteMaterial: PropTypes.func.isRequired,

diff --git a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleComponentsGroup.js b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleComponentsGroup.js
@@ -67,13 +67,19 @@ const SampleComponentsGroup = ({
 
   const switchAmountTooltip = () => (
     <Tooltip id="assign_button">
-      Lock/unlock amounts <br /> (mass/volume/mol)
+      <span style={{ display: 'block' }}>
+        Lock/unlock amounts
+      </span>
+      <span style={{ display: 'block' }}>
+        (mass/stock/density)
+      </span>
     </Tooltip>
   );
 
   const SwitchAmountButton = (lockAmountColumn, switchAmount, materialGroup) => (
     <OverlayTrigger placement="top" overlay={switchAmountTooltip()}>
       <Button
+        style={{ marginRight: '5px' }}
         id="lock_amount_column_btn"
         bsSize="xsmall"
         bsStyle={lockAmountColumn ? 'warning' : 'default'}
@@ -91,13 +97,12 @@ const SampleComponentsGroup = ({
           <col style={{ width: '4%' }} />
           <col style={{ width: '7%' }} />
           <col style={{ width: '4%' }} />
-          <col style={{ width: '10%' }} />
-          <col style={{ width: '10%' }} />
-          <col style={{ width: '10%' }} />
-          <col style={{ width: '10%' }} />
-          <col style={{ width: '6%' }} />
-          <col style={{ width: '2%' }} />
-          <col style={{ width: '10%' }} />
+          <col style={{ width: '14%' }} />
+          <col style={{ width: '14%' }} />
+          <col style={{ width: '14%' }} />
+          <col style={{ width: '8%' }} />
+          <col style={{ width: '4%' }} />
+          <col style={{ width: '14%' }} />
           {enableComponentLabel && <col style={{ width: '4%' }} />}
           {enableComponentPurity && <col style={{ width: '4%' }} />}
         </colgroup>
@@ -114,18 +119,22 @@ const SampleComponentsGroup = ({
 
           {materialGroup === 'liquid' && (
             <th>
-              {headers.startingConc}
-            </th>
-          )}
-          {materialGroup === 'liquid' && (
-            <th>
-              {headers.density}
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Tabs
+                  onSelect={handleTabSelect}
+                  id="material-tabs"
+                >
+                  <Tab eventKey="concentration" title="Stock" />
+                  <Tab eventKey="density" title="Density" />
+                </Tabs>
+                {SwitchAmountButton(lockAmountColumn, switchAmount, materialGroup)}
+              </div>
             </th>
           )}
 
           {materialGroup === 'liquid' && (
             <th>
-              {SwitchAmountButton(lockAmountColumn, switchAmount, materialGroup)} {headers.volume}
+              {headers.volume}
             </th>
           )}
           <th>{headers.amount}</th>
@@ -169,15 +178,10 @@ SampleComponentsGroup.propTypes = {
   dropSample: PropTypes.func.isRequired,
   dropMaterial: PropTypes.func.isRequired,
   switchAmount: PropTypes.func.isRequired,
-  lockAmountColumn: PropTypes.bool,
-  lockAmountColumnSolids: PropTypes.bool,
+  lockAmountColumn: PropTypes.bool.isRequired,
+  lockAmountColumnSolids: PropTypes.bool.isRequired,
   enableComponentLabel: PropTypes.bool.isRequired,
   enableComponentPurity: PropTypes.bool.isRequired,
 };
 
-SampleComponentsGroup.defaultProps = {
-  lockAmountColumn: false,
-  lockAmountColumnSolids: false,
-};
-
 export default SampleComponentsGroup;
diff --git a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleDetailsComponents.js b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleDetailsComponents.js
@@ -20,7 +20,7 @@ export default class SampleDetailsComponents extends React.Component {
       showModal: false,
       droppedMaterial: null,
       activeTab: 'concentration',
-      lockAmountColumn: false,
+      lockAmountColumn: true,
       lockAmountColumnSolids: false,
     };
 
@@ -102,34 +102,37 @@ export default class SampleDetailsComponents extends React.Component {
 
   updatedSampleForAmountUnitChange(changeEvent) {
     const { sample } = this.props;
-    const {sampleID, amount, concType, updateVolume} = changeEvent;
-    const componentIndex = this.props.sample.components.findIndex(
+    const { sampleID, amount, concType, lockColumn } = changeEvent;
+    const componentIndex = sample.components.findIndex(
       (component) => component.id === sampleID
     );
 
     const totalVolume = sample.amount_l;
 
     if (amount.unit === 'g' || amount.unit === 'l') {
-      sample.components[componentIndex].setAmount(amount, totalVolume);
+      sample.components[componentIndex].handleVolumeChange(amount, totalVolume); // volume given, update amount
     } else if (amount.unit === 'mol') {
-      sample.components[componentIndex].setMol(amount, totalVolume);
+      sample.components[componentIndex].handleAmountChange(amount, totalVolume); // amount given, update volume
     } else if (amount.unit === 'mol/l') {
-      sample.components[componentIndex].setConc(amount, totalVolume, concType, updateVolume);
+      sample.components[componentIndex].setConc(amount, totalVolume, concType, lockColumn); // starting conc. given,
     }
+
     // update components ratio
     sample.updateMixtureComponentEquivalent();
   }
 
   updateDensity(changeEvent) {
     const { sample } = this.props;
-    const { sampleID, amount, updateVolume } = changeEvent;
-    const componentIndex = this.props.sample.components.findIndex(
+    const { sampleID, amount, lockColumn } = changeEvent;
+    const componentIndex = sample.components.findIndex(
       (component) => component.id === sampleID
     );
 
     const totalVolume = sample.amount_l;
 
-    sample.components[componentIndex].setDensity(amount, updateVolume, totalVolume);
+    sample.components[componentIndex].handleDensityChange(amount, lockColumn, totalVolume);
+    // sample.components[componentIndex].setDensity(amount, lockColumn, totalVolume);
+
     // update components ratio
     sample.updateMixtureComponentEquivalent();
   }

diff --git a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js
@@ -933,24 +933,32 @@ export default class SampleForm extends React.Component {
               )}
             </ListGroupItem>
           </ListGroup>
-          <tr>
-            <ControlLabel>Mixture Components:</ControlLabel>
-          </tr>
-          <tr style={{ float: 'right' }}>
-            <td style={{ width: '10%', paddingRight: '15px' }}>
-              {selectedSampleType === 'Mixture' ? this.totalAmount(sample) : null}
-            </td>
-          </tr>
-          {selectedSampleType === 'Mixture' ? this.mixtureComponentsList(sample) : null}
-          <tr>
-            <div style={{
-              display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '10px'
-            }}
-            >
-              {this.renderCheckbox('enableComponentLabel', 'Enable Label', 'enable-component-label')}
-              {this.renderCheckbox('enableComponentPurity', 'Enable Purity', 'enable-component-purity')}
-            </div>
-          </tr>
+          {selectedSampleType === 'Mixture' && (
+            <>
+              <tr>
+                <ControlLabel>Mixture Components:</ControlLabel>
+              </tr>
+
+              <tr style={{ float: 'right' }}>
+                <td style={{ width: '10%', paddingRight: '15px' }}>
+                  {this.totalAmount(sample)}
+                </td>
+              </tr>
+
+              {this.mixtureComponentsList(sample)}
+
+              <tr>
+                <td>
+                  <div style={{
+                    display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '10px'
+                  }}>
+                    {this.renderCheckbox('enableComponentLabel', 'Enable Label', 'enable-component-label')}
+                    {this.renderCheckbox('enableComponentPurity', 'Enable Purity', 'enable-component-purity')}
+                  </div>
+                </td>
+              </tr>
+            </>
+          )}
           <tr>
             <td colSpan="4">
               <SampleDetailsSolvents