From fa4b02c1e5fb249044a986d414e0f3acc1dfca95 Mon Sep 17 00:00:00 2001
From: Tasnim Mehzabin <tasnim.mehzabin@live.com>
Date: Wed, 14 Aug 2024 16:18:43 +0200
Subject: [PATCH] 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

---
 .../samples/propertiesTab/SampleComponent.js  |  54 ++-
 .../propertiesTab/SampleComponentsGroup.js    |  48 +--
 .../propertiesTab/SampleDetailsComponents.js  |  21 +-
 .../samples/propertiesTab/SampleForm.js       |  44 ++-
 app/packs/src/models/Component.js             | 206 ++++++-----
 app/packs/src/models/_Component.js            | 346 ++++++++++++++++++
 .../javascripts/packs/src/models/Component.js | 168 +++++++++
 7 files changed, 713 insertions(+), 174 deletions(-)
 create mode 100644 app/packs/src/models/_Component.js
 create mode 100644 spec/javascripts/packs/src/models/Component.js

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
index f4888613ce..29f3d0c569 100644
--- 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,8 +333,8 @@ 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>
@@ -349,7 +342,8 @@ class SampleComponent extends Component {
   }
 
   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
index a7f674849e..104eff2d51 100644
--- 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
index 4fddfb25f7..ebf4a88b44 100644
--- 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
index 5f2adab251..94e35a54ac 100644
--- 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
diff --git a/app/packs/src/models/Component.js b/app/packs/src/models/Component.js
index ef57c3bdc0..99e5b7c3ed 100644
--- a/app/packs/src/models/Component.js
+++ b/app/packs/src/models/Component.js
@@ -41,153 +41,165 @@ export default class Component extends Sample {
       ? `/images/molecules/${this.molecule.molecule_svg_file}` : '';
   }
 
-  setAmount(amount, totalVolume) {
-    if (!amount.unit || Number.isNaN(amount.value)) {
-      return;
-    }
-    if (this.density && this.density > 0 && this.material_group !== 'solid') {
-      this.setAmountDensity(amount, totalVolume);
-    } else {
-      this.setAmountConc(amount, totalVolume);
-    }
-  }
-
-  // refactor this part
-  setMol(amount, totalVolume) {
-    if (Number.isNaN(amount.value) || amount.unit !== 'mol') return;
+  // Volume related codes
 
-    this.amount_mol = amount.value;
-    const purity = this.purity || 1.0;
+  handleVolumeChange(amount, totalVolume) {
+    if (!amount.unit || Number.isNaN(amount.value)) return;
 
-    if (this.density && this.density > 0 && this.material_group === 'liquid') {
-      // update density
-      this.starting_molarity_value = 0;
+    this.setVolume(amount);
 
-      this.amount_g = (this.amount_mol * this.molecule_molecular_weight) / this.purity;
+    const purity = this.purity || 1.0;
 
-      if (totalVolume && totalVolume > 0) {
-        const concentration = this.amount_mol / (totalVolume * purity);
-        this.molarity_value = concentration;
-        this.concn = concentration;
+    if (this.material_group === 'liquid') {
+      if (this.density && this.density > 0) {
+        this.calculateAmountFromDensity(totalVolume, purity);
+      } else if (this.starting_molarity_value && this.starting_molarity_value > 0) {
+        this.calculateAmountFromConcentration(totalVolume, purity);
       }
-    } else if (this.material_group === 'solid') {
-      // update concentrations
-      if (this.amount_l === 0 || this.amount_g === 0) {
-        this.molarity_value = 0;
-        this.concn = 0;
-      } else if (totalVolume && totalVolume > 0) {
-        const concentration = this.amount_mol / (totalVolume * purity);
-
-        this.concn = concentration;
-        this.molarity_value = concentration;
+    }
 
-        this.molarity_unit = 'M';
-      }
+    if (totalVolume && totalVolume > 0) {
+      const concentration = this.amount_mol / (totalVolume * purity);
+      this.molarity_value = concentration;
+      this.concn = concentration;
     }
   }
 
-  setAmountDensity(amount, totalVolume) {
-    this.amount_l = amount.value;
-    this.starting_molarity_value = 0;
-    const purity = this.purity || 1.0;
+  setVolume(amount) {
     if (this.material_group === 'liquid') {
-      this.amount_g = (this.amount_l * 1000) * this.density;
-      this.amount_mol = (this.amount_g * purity) / this.molecule_molecular_weight;
-      this.molarity_value = this.concn = this.amount_mol / (totalVolume * purity);
+      this.amount_l = amount.value;
+    } else if (this.material_group === 'solid') {
+      this.amount_g = amount.value;
     }
   }
 
-  setAmountConc(amount, totalVolume) {
+  // Volume related codes ends
+
+  // Amount related codes
+
+  handleAmountChange(amount, totalVolume) {
+    if (Number.isNaN(amount.value) || amount.unit !== 'mol') return;
+
+    this.amount_mol = amount.value;
+
     const purity = this.purity || 1.0;
-    if (amount.unit === 'l') {
-      this.amount_l = amount.value;
-      if (this.starting_molarity_value) {
-        this.amount_mol = this.starting_molarity_value * this.amount_l * purity;
-      }
-      this.concn = this.molarity_value = this.amount_mol / (totalVolume * purity);
-      this.molarity_unit = 'M';
-    } else if (amount.unit === 'g') {
-      this.amount_g = amount.value;
-      this.amount_mol = (this.amount_g * purity) / this.molecule_molecular_weight;
-      if (totalVolume) {
-        this.molarity_value = this.concn = this.amount_mol / (totalVolume * purity);
-        this.molarity_unit = 'M';
-      }
 
-      if (this.amount_l === 0 || this.amount_g === 0) {
-        this.molarity_value = this.concn = 0;
+    if (this.material_group === 'liquid') {
+      if (this.density && this.density > 0) { // if density is given
+        this.calculateVolumeFromDensity(purity);
+      } else if (this.starting_molarity_value && this.starting_molarity_value > 0) { // if stock concentration is given
+        this.calculateVolumeFromConcentration(purity);
       }
     }
 
-    this.density = 0;
+    if (totalVolume && totalVolume > 0) {
+      const concentration = this.amount_mol / (totalVolume * purity);
+      this.molarity_value = concentration;
+      this.concn = concentration;
+      this.molarity_unit = 'M';
+    }
   }
 
-  setConc(amount, totalVolume, concType, updateVolume) {
-    if (!amount.unit || isNaN(amount.value) || amount.unit !== 'mol/l') { return; }
+  // Amount related codes ends
+
+  // Stock related codes
+
+  setConc(amount, totalVolume, concType, lockColumn) {
+    if (!amount.unit || Number.isNaN(amount.value) || amount.unit !== 'mol/l') { return; }
 
     if (this.density && this.density > 0 && concType !== 'startingConc' && this.material_group !== 'solid') {
       this.setMolarityDensity(amount, totalVolume);
     } else {
-      this.setMolarity(amount, totalVolume, concType, updateVolume);
+      this.handleStockChange(amount, totalVolume, concType, lockColumn);
     }
   }
 
-  setMolarityDensity(amount, totalVolume) {
+  handleStockChange(amount, totalVolume, concType, lockColumn) {
+    this.setConcentration(amount, concType, lockColumn);
+
     const purity = this.purity || 1.0;
-    this.molarity_value = this.concn = amount.value;
-    this.molarity_unit = amount.unit;
-    this.starting_molarity_value = 0;
 
-    this.amount_mol = this.molarity_value * totalVolume * purity;
-    this.amount_g = (this.molecule_molecular_weight * this.amount_mol) / purity;
-    this.amount_l = (this.amount_g / this.density) / 1000;
+    if (this.amount_l && this.amount_l > 0) {
+      this.calculateAmountFromConcentration(totalVolume, purity);
+    } else if (this.amount_mol && this.amount_mol > 0) {
+      this.calculateVolumeFromConcentration(purity);
+    }
   }
 
-  setMolarity(amount, totalVolume, concType, updateVolume) {
-    const purity = this.purity || 1.0;
+  setConcentration(amount, concType, lockColumn) {
     if (concType !== 'startingConc') {
       this.concn = amount.value;
       this.molarity_value = amount.value;
       this.molarity_unit = amount.unit;
-    } else {
+    } else if (!lockColumn) {
       this.starting_molarity_value = amount.value;
       this.starting_molarity_unit = amount.unit;
     }
-    if (this.material_group === 'liquid' && updateVolume) {
-      this.amount_mol = this.molarity_value * totalVolume * purity;
-      this.amount_l = this.amount_mol / (this.starting_molarity_value * purity);
-    } else if (this.material_group === 'liquid' && !updateVolume) {
-      this.amount_mol = this.starting_molarity_value * this.amount_l * purity;
-      this.concn = this.molarity_value = this.amount_mol / (totalVolume * purity);
-    } else if (this.material_group === 'solid' && this.concn && totalVolume) {
-      this.amount_mol = this.molarity_value * totalVolume * purity;
-      this.amount_g = this.molecule_molecular_weight * (this.amount_mol / purity);
-    } else if (this.concn === 0) {
-      this.amount_g = 0;
-      this.amount_l = 0;
-    }
 
     this.density = 0;
   }
 
-  setDensity(density, updateVolume, totalVolume) {
+  // Stock related codes ends
+
+  // Density related codes
+
+  handleDensityChange(amount, lockColumn, totalVolume) {
+    if (!amount.unit || Number.isNaN(amount.value) || amount.unit !== 'g/ml') return;
+
     const purity = this.purity || 1.0;
-    if (!density.unit || isNaN(density.value) || density.unit !== 'g/ml') { return; }
 
-    this.density = density.value;
+    this.setDensity(amount, lockColumn);
+
+    if (this.amount_l && this.amount_l > 0) {
+      this.calculateAmountFromDensity(totalVolume, purity);
+    } else if (this.amount_mol && this.amount_mol > 0) {
+      this.calculateVolumeFromDensity(purity);
+    }
+  }
+
+  setDensity(amount, lockColumn) {
+    if (!lockColumn) {
+      this.density = amount.value;
+      this.starting_molarity_value = 0;
+    }
+  }
+
+  // Density related codes ends
+
+  // Case 1.1: Calculate Amount from Volume, Density, Molecular Weight, and Purity
+  calculateAmountFromDensity(totalVolume, purity) {
     this.starting_molarity_value = 0;
 
-    if (updateVolume) {
-      this.amount_mol = this.molarity_value * totalVolume * purity;
-      this.amount_g = this.amount_mol * this.molecule_molecular_weight / purity;
-      this.amount_l = (this.amount_g / this.density) / 1000;
-    } else {
+    if (this.material_group === 'liquid') {
       this.amount_g = (this.amount_l * 1000) * this.density;
-      this.amount_mol = this.amount_g * purity / this.molecule_molecular_weight;
-      this.concn = this.molarity_value = this.amount_mol / (totalVolume * purity);
+      this.amount_mol = (this.amount_g * purity) / this.molecule_molecular_weight;
     }
   }
 
+  // Case 1.2: Calculate Amount from Volume, Concentration, and Purity
+  calculateAmountFromConcentration(totalVolume, purity) {
+    this.amount_mol = this.starting_molarity_value * this.amount_l * purity;
+
+    if (totalVolume) {
+      const concentration = this.amount_mol / (totalVolume * purity);
+      this.concn = concentration;
+      this.molarity_value = concentration;
+      this.molarity_unit = 'M';
+    }
+  }
+
+  // Case 2.1: Calculate Volume from Amount, Density, Molecular Weight, and Purity
+  calculateVolumeFromDensity(purity) {
+    this.starting_molarity_value = 0;
+    this.amount_l = (this.amount_mol * this.molecule_molecular_weight * purity) / (this.density * 1000);
+  }
+
+  // Case 2.2: Calculate Volume from Amount, Concentration, and Purity
+  calculateVolumeFromConcentration(purity) {
+    this.density = 0;
+    this.amount_l = this.amount_mol / (this.starting_molarity_value * purity);
+  }
+
   updateRatio(newRatio, materialGroup, totalVolume, referenceMoles) {
     if (this.equivalent === newRatio) { return; }
 
diff --git a/app/packs/src/models/_Component.js b/app/packs/src/models/_Component.js
new file mode 100644
index 0000000000..de7390de7a
--- /dev/null
+++ b/app/packs/src/models/_Component.js
@@ -0,0 +1,346 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable camelcase */
+import React from 'react';
+import Sample from 'src/models/Sample';
+
+export default class Component extends Sample {
+  constructor(props) {
+    super(props);
+  }
+
+  get has_density() {
+    return this.density > 0 && this.starting_molarity_value === 0;
+  }
+
+  get amount_mol() {
+    return this._amount_mol;
+  }
+
+  set amount_mol(amount_mol) {
+    this._amount_mol = amount_mol;
+  }
+
+  get amount_g() {
+    return this._amount_g;
+  }
+
+  set amount_g(amount_g) {
+    return this._amount_g = amount_g;
+  }
+
+  get amount_l() {
+    return this._amount_l;
+  }
+
+  set amount_l(amount_l) {
+    return this._amount_l = amount_l;
+  }
+
+  get svgPath() {
+    return this.molecule && this.molecule.molecule_svg_file
+      ? `/images/molecules/${this.molecule.molecule_svg_file}` : '';
+  }
+
+  setAmount(amount, totalVolume) {
+    if (!amount.unit || Number.isNaN(amount.value)) {
+      return;
+    }
+    if (this.density && this.density > 0 && this.material_group !== 'solid') {
+      this.calculateAmountFromDensity(amount, totalVolume);
+    } else {
+      this.calculateAmountFromConcentration(amount, totalVolume);
+    }
+  }
+
+  // refactor this part
+  setMol(amount, totalVolume) {
+    if (Number.isNaN(amount.value) || amount.unit !== 'mol') return;
+
+    this.amount_mol = amount.value;
+    const purity = this.purity || 1.0;
+
+    if (this.material_group === 'liquid') {
+      if (this.density && this.density > 0) { // if density is given
+        this.starting_molarity_value = 0;
+        this.amount_l = (this.amount_mol * this.molecule_molecular_weight * purity) / (this.density * 1000);
+      } else { // if stock concentration is given
+        this.density = 0;
+        this.amount_l = this.amount_mol / (this.starting_molarity_value * purity);
+      }
+      if (totalVolume && totalVolume > 0) {
+        const concentration = this.amount_mol / (totalVolume * purity);
+        this.molarity_value = concentration;
+        this.concn = concentration;
+        this.molarity_unit = 'M';
+      }
+    }
+    if (this.material_group === 'solid') {
+      // update concentrations
+      if (this.amount_l === 0 || this.amount_g === 0) {
+        this.molarity_value = 0;
+        this.concn = 0;
+      } else if (totalVolume && totalVolume > 0) {
+        const concentration = this.amount_mol / (totalVolume * purity);
+
+        this.concn = concentration;
+        this.molarity_value = concentration;
+
+        this.molarity_unit = 'M';
+      }
+    }
+  }
+
+  calculateAmountFromDensity(amount, totalVolume) {
+    this.starting_molarity_value = 0;
+    const purity = this.purity || 1.0;
+
+    if (this.material_group === 'liquid') {
+      this.amount_g = (this.amount_l * 1000) * this.density;
+      this.amount_mol = (this.amount_g * purity) / this.molecule_molecular_weight;
+
+      if (totalVolume && totalVolume > 0) {
+        const concentration = this.amount_mol / (totalVolume * purity);
+        this.molarity_value = concentration;
+        this.concn = concentration;
+      }
+    }
+  }
+
+  calculateAmountFromDensity(amount, totalVolume) {
+    this.amount_l = amount.value;
+    this.starting_molarity_value = 0;
+    const purity = this.purity || 1.0;
+    if (this.material_group === 'liquid') {
+      this.amount_g = (this.amount_l * 1000) * this.density;
+      this.amount_mol = (this.amount_g * purity) / this.molecule_molecular_weight;
+
+      const concentration = this.amount_mol / (totalVolume * purity);
+      this.molarity_value = concentration;
+      this.concn = concentration;
+    }
+  }
+
+  setAmountConc(amount, totalVolume) {
+    const purity = this.purity || 1.0;
+    if (amount.unit === 'l') {
+      this.amount_l = amount.value;
+      if (this.starting_molarity_value) {
+        this.amount_mol = this.starting_molarity_value * this.amount_l * purity;
+      }
+
+      const concentration = this.amount_mol / (totalVolume * purity);
+      this.concn = concentration;
+      this.molarity_value = concentration;
+      this.molarity_unit = 'M';
+    } else if (amount.unit === 'g') {
+      this.amount_g = amount.value;
+      this.amount_mol = (this.amount_g * purity) / this.molecule_molecular_weight;
+      if (totalVolume) {
+        this.molarity_value = this.concn = this.amount_mol / (totalVolume * purity);
+        this.molarity_unit = 'M';
+      }
+
+      if (this.amount_l === 0 || this.amount_g === 0) {
+        this.molarity_value = this.concn = 0;
+      }
+    }
+
+    this.density = 0;
+  }
+
+  setConc(amount, totalVolume, concType, lockColumn) {
+    if (!amount.unit || Number.isNaN(amount.value) || amount.unit !== 'mol/l') { return; }
+
+    if (this.density && this.density > 0 && concType !== 'startingConc' && this.material_group !== 'solid') {
+      this.setMolarityDensity(amount, totalVolume);
+    } else {
+      this.handleStockChange(amount, totalVolume, concType, lockColumn);
+      // this.setMolarity(amount, totalVolume, concType, updateVolume);
+    }
+  }
+
+  handleVolumeChange(amount, totalVolume) {
+    if (!amount.unit || Number.isNaN(amount.value)) return;
+
+    this.amount_l = amount.value;
+
+    if (this.material_group === 'liquid') {
+      if (this.density && this.density > 0) {
+        this.calculateAmountFromDensity(amount, totalVolume);
+      } else if (this.starting_molarity_value && this.starting_molarity_value > 0) {
+        this.calculateAmountFromConcentration(amount, totalVolume);
+      }
+    }
+  }
+
+  handleStockChange(amount, totalVolume, concType, lockColumn) {
+    const purity = this.purity || 1.0;
+
+    this.setConcentration(amount, concType, lockColumn);
+
+    if (this.amount_l && this.amount_l > 0) {
+      this.calculateAmountFromConcentration(purity, totalVolume);
+    } else if (this.amount_mol && this.amount_mol > 0) {
+      this.calculateVolumeFromConcentration(purity);
+    }
+
+    if (totalVolume && totalVolume > 0) {
+      const concentration = this.amount_mol / (totalVolume * purity);
+      this.concn = concentration;
+      this.molarity_value = concentration;
+    }
+  }
+
+  setConcentration(amount, concType, lockColumn) {
+    if (concType !== 'startingConc') {
+      this.concn = amount.value;
+      this.molarity_value = amount.value;
+      this.molarity_unit = amount.unit;
+    } else if (!lockColumn) {
+      this.starting_molarity_value = amount.value;
+      this.starting_molarity_unit = amount.unit;
+    }
+  }
+
+  // Case 1.2: Calculate Amount from Volume, Concentration, and Purity
+  calculateAmountFromConcentration(purity, totalVolume) {
+    this.amount_mol = this.starting_molarity_value * this.amount_l * purity;
+
+    if (totalVolume) {
+      const concentration = this.amount_mol / (totalVolume * purity);
+      this.concn = concentration;
+      this.molarity_value = concentration;
+      this.molarity_unit = 'M';
+    }
+  }
+
+  // Case 2.2: Calculate Volume from Amount, Concentration, and Purity
+  calculateVolumeFromConcentration(purity) {
+    this.amount_l = this.amount_mol / (this.starting_molarity_value * purity);
+  }
+
+  setMolarityDensity(amount, totalVolume) {
+    const purity = this.purity || 1.0;
+    this.molarity_value = this.concn = amount.value;
+    this.molarity_unit = amount.unit;
+    this.starting_molarity_value = 0;
+
+    this.amount_mol = this.molarity_value * totalVolume * purity;
+    this.amount_g = (this.molecule_molecular_weight * this.amount_mol) / purity;
+    this.amount_l = (this.amount_g / this.density) / 1000;
+  }
+
+  setMolarity(amount, totalVolume, concType, lockColumn) {
+    const purity = this.purity || 1.0;
+    if (concType !== 'startingConc') {
+      this.concn = amount.value;
+      this.molarity_value = amount.value;
+      this.molarity_unit = amount.unit;
+    } else if (!lockColumn) {
+      this.starting_molarity_value = amount.value;
+      this.starting_molarity_unit = amount.unit;
+    }
+    if (this.material_group === 'liquid' && lockColumn) {
+      this.amount_mol = this.starting_molarity_value * this.amount_l * purity;
+      this.concn = this.molarity_value = this.amount_mol / (totalVolume * purity);
+    } else if (this.material_group === 'liquid' && !lockColumn) {
+      this.amount_mol = this.molarity_value * totalVolume * purity;
+      this.amount_l = this.amount_mol / (this.starting_molarity_value * purity);
+    } else if (this.material_group === 'solid' && this.concn && totalVolume) {
+      this.amount_mol = this.molarity_value * totalVolume * purity;
+      this.amount_g = this.molecule_molecular_weight * (this.amount_mol / purity);
+    } else if (this.concn === 0) {
+      this.amount_g = 0;
+      this.amount_l = 0;
+    }
+
+    this.density = 0;
+  }
+
+  setDensity(density, lockColumn, totalVolume) {
+    // const purity = this.purity || 1.0;
+    if (!density.unit || isNaN(density.value) || density.unit !== 'g/ml') { return; }
+
+    this.density = density.value;
+    this.starting_molarity_value = 0;
+
+    // const concentration = (this.amount_mol / (totalVolume * purity)) || 0;
+
+    // this.concn = concentration;
+    // this.molarity_value = concentration;
+
+    this.amount_g = 0;
+    this.amount_l = 0;
+    this.amount_mol = 0;
+
+    // if (lockColumn) {
+    //   this.amount_g = (this.amount_l * 1000) * this.density;
+    //   this.amount_mol = this.amount_g * purity / this.molecule_molecular_weight;
+    //   this.concn = this.molarity_value = this.amount_mol / (totalVolume * purity);
+    // } else {
+    //   this.amount_mol = this.molarity_value * totalVolume * purity;
+    //   this.amount_g = this.amount_mol * this.molecule_molecular_weight / purity;
+    //   this.amount_l = (this.amount_g / this.density) / 1000;
+    // }
+  }
+
+  updateRatio(newRatio, materialGroup, totalVolume, referenceMoles) {
+    if (this.equivalent === newRatio) { return; }
+
+    const purity = this.purity || 1.0;
+    this.amount_mol = newRatio * referenceMoles;
+    this.equivalent = newRatio;
+
+    if (materialGroup === 'liquid') {
+      if (!this.has_density) {
+        this.amount_l = this.amount_mol / (this.starting_molarity_value * purity);
+        this.molarity_value = this.concn = this.amount_mol / (totalVolume * purity);
+        this.molarity_unit = 'M';
+      } else if (this.has_density) {
+        this.amount_g = (this.amount_mol * this.molecule_molecular_weight) / purity;
+        this.amount_l = this.amount_g / (this.density * 1000);
+        this.molarity_value = this.concn = this.amount_mol / (totalVolume * purity);
+        this.molarity_unit = 'M';
+      }
+    } else if (materialGroup === 'solid') {
+      this.amount_g = (this.amount_mol * this.molecule_molecular_weight) / purity;
+      this.molarity_value = this.concn = this.amount_mol / (totalVolume * purity);
+    }
+  }
+
+  setPurity(purity, totalVolume) {
+    if (!isNaN(purity) && purity >= 0 && purity <= 1) {
+      this.purity = purity;
+      this.amount_mol = this.molarity_value * totalVolume * this.purity;
+    }
+  }
+
+  get svgPath() {
+    return this.molecule && this.molecule.molecule_svg_file
+      ? `/images/molecules/${this.molecule.molecule_svg_file}` : '';
+  }
+
+  serializeComponent() {
+    return {
+      id: this.id,
+      name: this.name,
+      position: this.position,
+      component_properties: {
+        amount_mol: this.amount_mol,
+        amount_l: this.amount_l,
+        amount_g: this.amount_g,
+        density: this.density,
+        molarity_unit: this.molarity_unit,
+        molarity_value: this.molarity_value,
+        starting_molarity_value: this.starting_molarity_value,
+        starting_molarity_unit: this.starting_molarity_unit,
+        molecule_id: this.molecule.id,
+        equivalent: this.equivalent,
+        parent_id: this.parent_id,
+        material_group: this.material_group,
+        reference: this.reference,
+        purity: this.purity,
+      }
+    };
+  }
+}
diff --git a/spec/javascripts/packs/src/models/Component.js b/spec/javascripts/packs/src/models/Component.js
new file mode 100644
index 0000000000..1d8b8cb6a3
--- /dev/null
+++ b/spec/javascripts/packs/src/models/Component.js
@@ -0,0 +1,168 @@
+import expect from 'expect';
+import Component from '../../../../../app/packs/src/models/Component.js';
+import Molecule from '../../../../../app/packs/src/models/Molecule.js';
+
+describe('Component', () => {
+  let component;
+
+  beforeEach(() => {
+    component = new Component({});
+    component.molecule = new Molecule();
+    component.molecule.molecular_weight = 18.010564684; // Set a default molecular weight
+    component.purity = 1.0; // Set a default purity
+  });
+
+  describe('handleVolumeChange', () => {
+    it('should set volume and calculate amount from density when material group is liquid', () => {
+      const amount = { unit: 'l', value: 2 };
+      component.material_group = 'liquid';
+      component.density = 1.0; //1 g/mL
+      component.molecule.molecular_weight = 18.010564684;
+
+      component.handleVolumeChange(amount, 200);
+
+      expect(component.amount_l).to.equal(2);
+      expect(component.amount_g).to.equal(2000); // 2 liters * 1 g/mL = 2000 g
+      expect(component.amount_mol).to.be.closeTo(111.07, 0.01); // 2000g / 18.01g/mol
+    });
+
+    it('should set volume and calculate amount and molarity, when material group is liquid, and stock (starting' +
+      ' concentration) is given', () => {
+      const amount = { unit: 'l', value: 2 };
+      component.material_group = 'liquid';
+      component.starting_molarity_value = 0.1; // Molarity of 0.1 mmol/L
+
+      component.handleVolumeChange(amount, 200);
+
+      expect(component.amount_mol).to.equal(0.0002); // 0.1 mmol/L * 2 liters = 0.2 mmol = 0.0002 mol
+      expect(component.molarity_value).to.equal(0.000001); // 0.2 mmol / 200 liters = 0.001 mmol/L = 0.000001 mol/L
+    });
+  });
+
+  describe('handleAmountChange', () => {
+    it('should set amount in mol and calculate volume if stock (starting concentration), when material group is' +
+      ' liquid', () => {
+      const amount = { unit: 'mol', value: 2 };
+      component.material_group = 'liquid';
+      component.starting_molarity_value = 1.0; // 1 Molar solution
+      component.purity = 1.0;
+
+      component.handleAmountChange(amount, 2);
+
+      expect(component.amount_mol).to.equal(2);
+      expect(component.amount_l).to.equal(2); // 2 mol / (1 mol/L * 1) = 2 L
+    });
+
+    it('should set amount in mol and calculate volume if density is given, when material group is liquid', () => {
+      const amount = { unit: 'mol', value: 2 };
+      component.material_group = 'liquid';
+      component.density = 1.0; //1 g/mL
+      component.purity = 1.0; // 100% purity
+
+      component.handleAmountChange(amount, 2);
+
+      // amount_l = (amount_mol * molecule_molecular_weight * purity) / (density * 1000)
+      // So, amount_l = (2 mol * 18.010564684 g/mol * 1) / (1000 g/L)
+      const expectedAmountL = (2 * 18.010564684) / 1000; // = 0.036021129368 L (approximately)
+
+      expect(component.amount_mol).toBe(2);
+      expect(component.amount_l).toBeCloseTo(expectedAmountL, 6); // Check to a precision of 6 decimal places
+    });
+  });
+
+  describe('handleDensityChange', () => {
+    it('should set density and calculate amount when volume is known, when material group is liquid', () => {
+      const density = { unit: 'g/ml', value: 2.0 };
+      component.material_group = 'liquid';
+      component.amount_l = 2.0;
+
+      component.handleDensityChange(density, false, 2);
+
+      // amount_g = (amount_l * 1000) * density;
+      // amount_mol = (amount_g * purity) / molecule_molecular_weight;
+      const expectedAmountG = component.amount_l * 1000 * density.value; // 2 L * 1000 g/L * 2.0 = 4000 g
+      const expectedAmountMol = expectedAmountG / component.molecule.molecular_weight; // 4000 g / 18.010564684 g/mol
+
+      expect(component.density).toBe(2.0);
+      expect(component.amount_g).toBe(expectedAmountG); // 4000 g
+      expect(component.amount_mol).toBeCloseTo(expectedAmountMol, 0.01); // Approximately 222.1 mol
+    });
+
+    it('should set density and calculate volume when amount is known, when material group is liquid', () => {
+      component.amount_mol = 1.0; // 1 mole of the substance
+      component.molecule_molecular_weight = 18.010564684; // g/mol
+      const density = { unit: 'g/ml', value: 2.0 }; // g/mL (which is equivalent to 2000 g/L)
+      const purity = 1.0; // 100% purity
+
+      component.handleDensityChange(density, false, 2);
+
+      // amount_l = (amount_mol * molecule_molecular_weight * purity) / (density * 1000)
+      // amount_l = (1.0 mol * 18.010564684 g/mol * 1.0) / (2.0 g/mL * 1000)
+      const expectedAmountL = (component.amount_mol * component.molecule_molecular_weight * purity) / (component.density * 1000);
+
+      expect(component.density).toBe(2.0);
+      expect(component.amount_l).to.be.closeTo(expectedAmountL, 0.01); // Allow a small margin for floating-point arithmetic
+    });
+  });
+
+  describe('setPurity', () => {
+    it('should set purity and adjust amount_mol accordingly', () => {
+      component.molarity_value = 1.0;
+      component.setPurity(0.9, 2); // Setting purity to 0.9
+
+      expect(component.purity).to.equal(0.9);
+      expect(component.amount_mol).to.equal(1.8); // 1 mol/L * 2L * 0.9 purity = 1.8 mol
+    });
+
+    it('should not set purity if it is out of bounds', () => {
+      component.setPurity(1.1, 2); // Invalid purity (> 1)
+      expect(component.purity).to.not.equal(1.1);
+
+      component.setPurity(-0.5, 2); // Invalid purity (< 0)
+      expect(component.purity).to.not.equal(-0.5);
+    });
+  });
+
+  describe('serializeComponent', () => {
+    it('should return a serialized object of the  component', () => {
+      component.id = 1;
+      component.name = 'Test Component';
+      component.position = 1;
+      component.amount_mol = 2.0;
+      component.amount_g = 20.0;
+      component.amount_l = 1.5;
+      component.density = 1.2;
+      component.molarity_value = 0.5;
+      component.starting_molarity_value = 0.1;
+      component.equivalent = 1.0;
+      component.parent_id = 2;
+      component.material_group = 'solid';
+      component.purity = 0.9;
+      component.molecule.id = 101;
+
+      const serialized = component.serializeComponent();
+
+      expect(serialized).to.deep.equal({
+        id: 1,
+        name: 'Test Component',
+        position: 1,
+        component_properties: {
+          amount_mol: 2.0,
+          amount_g: 20.0,
+          amount_l: 1.5,
+          density: 1.2,
+          molarity_unit: 'M',
+          molarity_value: 0.5,
+          starting_molarity_value: 0.1,
+          starting_molarity_unit: undefined, // Not set in this case
+          molecule_id: 101,
+          equivalent: 1.0,
+          parent_id: 2,
+          material_group: 'solid',
+          reference: undefined, // Not set in this case
+          purity: 0.9,
+        }
+      });
+    });
+  });
+});