feat: updated components table calculation

- component table header updated
- issue with the Amount field not being set for mixture components
- add the preview image to component in mixtures
- modified the calculations related to various fields
- added the field for required total volume
- modified the structure of the solid components table
- import the molarity value from sample in drag-n-drop into component
- when Target Concentration is updated, then Amount and Volume gets recalculated
- added the calculations related to Solid components

fix (UI): cannot create a single molecule
fix: fetching of components after fetching the sample causing the sample appear as edited
refactor: code
refactor: eslint warnings

test: add test codes for Component model

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

app/packs/src/apps/mydb/elements/details/NumeralInputWithUnitsCompo.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { FormControl, ControlLabel, InputGroup, Button } from 'react-bootstrap';
+import {
+  FormControl, ControlLabel, InputGroup, Button, OverlayTrigger, Tooltip
+} from 'react-bootstrap';
 import { metPreConv, metPrefSymbols } from 'src/utilities/metricPrefix';
 
 export default class NumeralInputWithUnitsCompo extends Component {
@@ -135,7 +137,7 @@ export default class NumeralInputWithUnitsCompo extends Component {
 
   render() {
     const {
-      bsSize, bsStyle, disabled, label, unit, name
+      bsSize, bsStyle, disabled, label, unit, name, showInfoTooltipTotalVol
     } = this.props;
     const {
       showString, value, metricPrefix,
@@ -173,6 +175,20 @@ export default class NumeralInputWithUnitsCompo extends Component {
       return (
         <div className={`numeric-input-unit_${this.props.unit}`}>
           {labelWrap}
+          {showInfoTooltipTotalVol && (
+            <OverlayTrigger
+              placement="top"
+              overlay={(
+                <Tooltip id="info-total-volume">
+                  It is only a value given manually, i.e. volume by definition - not (re)calculated
+                </Tooltip>
+              )}
+            >
+              <ControlLabel style={{ marginLeft: '5px', cursor: 'pointer' }}>
+                <span style={{ cursor: 'pointer' }} className="glyphicon glyphicon-info-sign" />
+              </ControlLabel>
+            </OverlayTrigger>
+          )}
           <InputGroup
             onDoubleClick={event => this.handleInputDoubleClick(event)}
           >
@@ -228,7 +244,8 @@ NumeralInputWithUnitsCompo.propTypes = {
   label: PropTypes.node,
   bsSize: PropTypes.string,
   bsStyle: PropTypes.string,
-  name: PropTypes.string
+  name: PropTypes.string,
+  showInfoTooltipTotalVol: PropTypes.bool,
 };
 
 NumeralInputWithUnitsCompo.defaultProps = {
@@ -239,5 +256,6 @@ NumeralInputWithUnitsCompo.defaultProps = {
   block: false,
   bsSize: 'small',
   bsStyle: 'default',
-  name: ''
+  name: '',
+  showInfoTooltipTotalVol: false,
 };

app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js

@@ -688,7 +688,8 @@ export default class SampleDetails extends React.Component {
 
   saveBtn(sample, closeView = false) {
     let submitLabel = (sample && sample.isNew) ? 'Create' : 'Save';
-    const hasComponents = sample.sample_type === 'Mixture' && sample.components && sample.components.length > 0;
+    const hasComponents = sample.sample_type !== 'Mixture'
+      || (sample.components && sample.components.length > 0);
     const isDisabled = !sample.can_update || !hasComponents;
     if (closeView) submitLabel += ' and close';
 
@@ -968,8 +969,9 @@ export default class SampleDetails extends React.Component {
     const timesTag = (
       <i className="fa fa-times" />
     );
-    const hasComponents = sample.sample_type === 'Mixture' && sample.components && sample.components.length > 0;
-    const sampleUpdateCondition = !this.sampleIsValid() || !sample.can_update || !hasComponents; 
+    const hasComponents = sample.sample_type !== 'Mixture'
+      || (sample.components && sample.components.length > 0);
+    const sampleUpdateCondition = !this.sampleIsValid() || !sample.can_update || !hasComponents;
 
     const elementToSave = activeTab === 'inventory' ? 'Chemical' : 'Sample';
     const saveAndClose = (
@@ -1420,13 +1422,13 @@ export default class SampleDetails extends React.Component {
 
   sampleAverageMW(sample) {
     let mw;
-    
+
     if (sample.sample_type === 'Mixture' && sample.sample_details) {
       mw = sample.total_molecular_weight;
     } else {
       mw = sample.molecule_molecular_weight;
     }
-  
+
     if (mw) return <ClipboardCopyText text={`${mw.toFixed(MWPrecision)} g/mol`} />;
     return '';
   }