feat: conversion feature rebased to v1.10

app/api/entities/reaction_material_entity.rb

@@ -17,5 +17,6 @@ class ReactionMaterialEntity < ApplicationEntity
     expose! :waste
     expose! :gas_type
     expose! :gas_phase_data
+    expose! :conversion_rate
   end
 end

app/api/helpers/report_helpers.rb

@@ -614,6 +614,7 @@ def build_sql_reaction_sample(columns, c_id, ids, checkedAll = false)
         # reactions_sample:
         equivalent: ['r_s.equivalent', '"r eq"', 10],
         reference: ['r_s.reference', '"r ref"', 10],
+        conversion_rate: ['r_s.conversion_rate', '"r conversion rate"', 10],
       },
       analysis: {
         name: ['anac."name"', '"name"', 10],
@@ -723,6 +724,7 @@ def force_molfile_selection
       equivalent
       reference
       type
+      conversion_rate
     ],
     sample: %i[
       sample_svg_file

app/models/reactions_product_sample.rb

@@ -15,6 +15,7 @@
 #  show_label     :boolean          default(FALSE), not null
 #  gas_type       :integer          default("off")
 #  gas_phase_data :jsonb
+#  conversion_rate :float
 #
 # Indexes
 #

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

@@ -111,7 +111,7 @@ export default class NumeralInputWithUnitsCompo extends Component {
 
   togglePrefix(currentUnit) {
     const units = ['TON/h', 'TON/m', 'TON/s', '°C', '°F', 'K', 'h', 'm', 's'];
-    const excludedUnits = ['ppm', 'TON'];
+    const excludedUnits = ['ppm', 'TON', '%'];
     const { onMetricsChange, unit } = this.props;
     if (units.includes(currentUnit)) {
       // eslint-disable-next-line no-unused-expressions

app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js

@@ -123,6 +123,7 @@ class Material extends Component {
     this.gasFieldsUnitsChanged = this.gasFieldsUnitsChanged.bind(this);
     this.handleCoefficientChange = this.handleCoefficientChange.bind(this);
     this.debounceHandleAmountUnitChange = debounce(this.handleAmountUnitChange, 500);
+    this.yieldOrConversionRate = this.yieldOrConversionRate.bind(this);
   }
 
   handleMaterialClick(sample) {
@@ -241,37 +242,69 @@ class Material extends Component {
     return result > 1 ? '100%' : `${(result * 100).toFixed(0)}%`;
   }
 
-  equivalentOrYield(material) {
-    const { reaction, materialGroup } = this.props;
-    if (materialGroup === 'products') {
-      const refMaterial = reaction.getReferenceMaterial();
-      let calculateYield = material.equivalent;
-      if (material.gas_type === 'gas') {
-        calculateYield = this.recalculateYieldForGasProduct(material, reaction);
-      } else if (reaction.hasPolymers()) {
-        calculateYield = `${((material.equivalent || 0) * 100).toFixed(0)}%`;
-      } else if (refMaterial && (refMaterial.decoupled || material.decoupled)) {
-        calculateYield = 'n.a.';
-      } else if (material.purity < 1 && material.equivalent > 1) {
-        calculateYield = `${((material.purity / 100 * (material.amount_g * 1000)) * 100).toFixed(1)}%`;
-      } else {
-        calculateYield = `${((material.equivalent <= 1 ? material.equivalent || 0 : 1) * 100).toFixed(0)}%`;
-      }
+  calculateYield(material, reaction) {
+    const refMaterial = reaction.getReferenceMaterial();
+    let calculateYield = material.equivalent;
+    if (material.gas_type === 'gas') {
+      calculateYield = this.recalculateYieldForGasProduct(material, reaction);
+    } else if (reaction.hasPolymers()) {
+      calculateYield = `${((material.equivalent || 0) * 100).toFixed(0)}%`;
+    } else if (refMaterial && (refMaterial.decoupled || material.decoupled)) {
+      calculateYield = 'n.a.';
+    } else if (material.purity < 1 && material.equivalent > 1) {
+      calculateYield = `${((material.purity / 100 * (material.amount_g * 1000)) * 100).toFixed(1)}%`;
+    } else {
+      calculateYield = `${((material.equivalent <= 1 ? material.equivalent || 0 : 1) * 100).toFixed(0)}%`;
+    }
+    return calculateYield;
+  }
+
+  conversionRateField(material) {
+    const { reaction } = this.props;
+    const condition = material.conversion_rate / 100 > 1;
+    const allowedConversionRateValue = material.conversion_rate && condition
+      ? 100 : material.conversion_rate;
+    return (
+      <div>
+        <NumeralInputWithUnitsCompo
+          precision={4}
+          value={allowedConversionRateValue || 'n.d.'}
+          unit="%"
+          disabled={!permitOn(reaction)}
+          onChange={(e) => this.handleConversionRateChange(e)}
+          size="sm"
+        />
+      </div>
+    );
+  }
+
+  yieldOrConversionRate(material) {
+    const { reaction, displayYieldField } = this.props;
+    if (displayYieldField === true || displayYieldField === null) {
       return (
         <div>
           <FormControl
             name="yield"
             type="text"
             bsClass="bs-form--compact form-control"
             bsSize="small"
-            value={calculateYield || 'n.d.'}
+            value={this.calculateYield(material, reaction) || 'n.d.'}
             disabled
           />
         </div>
       );
     }
+    return this.conversionRateField(material);
+  }
+
+  equivalentOrYield(material) {
+    const { materialGroup } = this.props;
+    if (materialGroup === 'products') {
+      return this.yieldOrConversionRate(material);
+    }
     return (
       <NumeralInputWithUnitsCompo
+        size="sm"
         precision={4}
         value={material.equivalent}
         disabled={!permitOn(this.props.reaction) || ((((material.reference || false) && material.equivalent) !== false) || this.props.lockEquivColumn)}
@@ -530,6 +563,19 @@ class Material extends Component {
         value: e.value,
         unit: e.unit,
         field,
+      }
+    }
+  }
+
+  handleConversionRateChange(e) {
+    const { onChange, materialGroup } = this.props;
+    const conversionRate = e.value;
+    if (onChange && e) {
+      const event = {
+        type: 'conversionRateChanged',
+        materialGroup,
+        sampleID: this.materialId(),
+        conversionRate
       };
       onChange(event);
     }
@@ -1069,4 +1115,5 @@ Material.propTypes = {
   canDrop: PropTypes.bool,
   isOver: PropTypes.bool,
   lockEquivColumn: PropTypes.bool.isRequired,
+  displayYieldField: PropTypes.bool,
 };

app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js

@@ -12,11 +12,13 @@ import { defaultMultiSolventsSmilesOptions } from 'src/components/staticDropdown
 import { ionic_liquids } from 'src/components/staticDropdownOptions/ionic_liquids';
 import { reagents_kombi } from 'src/components/staticDropdownOptions/reagents_kombi';
 import { permitOn } from 'src/components/common/uis';
+import ToggleButton from 'src/components/common/ToggleButton';
 
 const MaterialGroup = ({
   materials, materialGroup, deleteMaterial, onChange,
   showLoadingColumn, reaction, addDefaultSolvent, headIndex,
-  dropMaterial, dropSample, switchEquiv, lockEquivColumn
+  dropMaterial, dropSample, switchEquiv, lockEquivColumn, displayYieldField,
+  switchYield
 }) => {
   const contents = [];
   let index = headIndex;
@@ -36,6 +38,7 @@ const MaterialGroup = ({
           dropMaterial={dropMaterial}
           dropSample={dropSample}
           lockEquivColumn={lockEquivColumn}
+          displayYieldField={displayYieldField}
         />
       ));
 
@@ -74,6 +77,8 @@ const MaterialGroup = ({
       addDefaultSolvent={addDefaultSolvent}
       switchEquiv={switchEquiv}
       lockEquivColumn={lockEquivColumn}
+      displayYieldField={displayYieldField}
+      switchYield={switchYield}
     />
   );
 };
@@ -99,7 +104,7 @@ const SwitchEquivButton = (lockEquivColumn, switchEquiv) => {
 
 function GeneralMaterialGroup({
   contents, materialGroup, showLoadingColumn, reaction, addDefaultSolvent,
-  switchEquiv, lockEquivColumn
+  switchEquiv, lockEquivColumn, displayYieldField, switchYield
 }) {
   const isReactants = materialGroup === 'reactants';
   let headers = {
@@ -151,9 +156,36 @@ function GeneralMaterialGroup({
     );
   }
 
+  const yieldConversionRateFields = () => {
+    const conversionText = 'Click to switch to conversion field.'
+    + ' The conversion will not be displayed as part of the reaction scheme';
+    const yieldText = 'Click to switch to yield field.'
+    + ' The yield will be displayed as part of the reaction scheme';
+    let conversionOrYield = displayYieldField;
+    if (displayYieldField || displayYieldField === null) {
+      conversionOrYield = true;
+    }
+    return (
+      <div>
+        <ToggleButton
+          isToggledInitial={conversionOrYield}
+          onToggle={switchYield}
+          onLabel="Yield"
+          offLabel="Conv."
+          onColor="transparent"
+          offColor="transparent"
+          tooltipOn={conversionText}
+          tooltipOff={yieldText}
+          fontSize="14px"
+          fontWeight="bold"
+        />
+      </div>
+    );
+  };
+
   if (materialGroup === 'products') {
     headers.group = 'Products';
-    headers.eq = 'Yield';
+    headers.eq = yieldConversionRateFields();
   }
 
   const refTHead = (materialGroup !== 'products') ? headers.ref : null;
@@ -213,7 +245,7 @@ function GeneralMaterialGroup({
             {!isReactants && <th />}
             {showLoadingColumn && !isReactants && <th>{headers.loading}</th>}
             {!isReactants && <th>{headers.concn}</th>}
-            {!isReactants && permitOn(reaction) && <th>{headers.eq} {!isReactants && materialGroup !== 'products' && SwitchEquivButton(lockEquivColumn, switchEquiv)}</th> }
+            {!isReactants && <th>{headers.eq} {!isReactants && materialGroup !== 'products' && SwitchEquivButton(lockEquivColumn, switchEquiv)}</th> }
           </tr>
         </thead>
         {contents.map(item => item)}
@@ -310,7 +342,9 @@ MaterialGroup.propTypes = {
   dropMaterial: PropTypes.func.isRequired,
   dropSample: PropTypes.func.isRequired,
   switchEquiv: PropTypes.func.isRequired,
-  lockEquivColumn: PropTypes.bool
+  lockEquivColumn: PropTypes.bool,
+  displayYieldField: PropTypes.bool,
+  switchYield: PropTypes.func.isRequired
 };
 
 GeneralMaterialGroup.propTypes = {
@@ -320,7 +354,9 @@ GeneralMaterialGroup.propTypes = {
   addDefaultSolvent: PropTypes.func.isRequired,
   contents: PropTypes.arrayOf(PropTypes.shape).isRequired,
   switchEquiv: PropTypes.func.isRequired,
-  lockEquivColumn: PropTypes.bool
+  lockEquivColumn: PropTypes.bool,
+  displayYieldField: PropTypes.bool,
+  switchYield: PropTypes.func.isRequired
 };
 
 SolventsMaterialGroup.propTypes = {
@@ -332,12 +368,14 @@ SolventsMaterialGroup.propTypes = {
 
 MaterialGroup.defaultProps = {
   showLoadingColumn: false,
-  lockEquivColumn: false
+  lockEquivColumn: false,
+  displayYieldField: null
 };
 
 GeneralMaterialGroup.defaultProps = {
   showLoadingColumn: false,
-  lockEquivColumn: false
+  lockEquivColumn: false,
+  displayYieldField: null
 };
 
 

app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroupContainer.js

@@ -55,7 +55,8 @@ class MaterialGroupContainer extends Component {
     const {
       materials, materialGroup, showLoadingColumn, headIndex,
       isOver, canDrop, connectDropTarget,
-      deleteMaterial, onChange, reaction, dropSample, dropMaterial, switchEquiv, lockEquivColumn
+      deleteMaterial, onChange, reaction, dropSample, dropMaterial, switchEquiv, lockEquivColumn,
+      displayYieldField, switchYield,
     } = this.props;
     const style = {
       padding: '2px 5px',
@@ -82,6 +83,8 @@ class MaterialGroupContainer extends Component {
           headIndex={headIndex}
           switchEquiv={switchEquiv}
           lockEquivColumn={lockEquivColumn}
+          displayYieldField={displayYieldField}
+          switchYield={switchYield}
         />
       </div>,
     );
@@ -108,7 +111,9 @@ MaterialGroupContainer.propTypes = {
   canDrop: PropTypes.bool.isRequired,
   connectDropTarget: PropTypes.func.isRequired,
   switchEquiv: PropTypes.func,
-  lockEquivColumn: PropTypes.bool
+  lockEquivColumn: PropTypes.bool,
+  displayYieldField: PropTypes.bool.isRequired,
+  switchYield: PropTypes.func.isRequired,
 };
 
 MaterialGroupContainer.defaultProps = {