Skip to content

Commit

Permalink
feat: frontend implementation of conversion rate field in reaction sc…
Browse files Browse the repository at this point in the history 
…heme
  • Loading branch information
@adambasha0
adambasha0 committed Sep 20, 2024
1 parent 76bd417 commit e6b2e54
Show file tree
Hide file tree
Showing 9 changed files with 161 additions and 34 deletions.
2 changes: 1 addition & 1 deletion app/packs/src/apps/mydb/elements/details/NumeralInputWithUnitsCompo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -485,6 +485,8 @@ export default class ReactionDetails extends Component {
offColor="#d3d3d3"
tooltipOn="Click to enable Default mode"
tooltipOff="Click to enable Gas mode"
fontSize="14px"
fontWeight="normal"
/>
</div>
</div>
Expand Down
80 changes: 63 additions & 17 deletions app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -241,35 +242,65 @@ 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)}
/>
</div>
);
}

yieldOrConversionRate(material) {
const { reaction, displayYieldField } = this.props;
if (displayYieldField) {
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
precision={4}
Expand Down Expand Up @@ -520,6 +551,20 @@ class Material extends Component {
}
}

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);
}
}

handleGasFieldsChange(field, e, currentValue) {
const { materialGroup, onChange } = this.props;
if (onChange && e.value !== undefined && e.unit !== undefined && e.value !== currentValue) {
Expand Down Expand Up @@ -1071,4 +1116,5 @@ Material.propTypes = {
canDrop: PropTypes.bool,
isOver: PropTypes.bool,
lockEquivColumn: PropTypes.bool.isRequired,
displayYieldField: PropTypes.bool,
};
49 changes: 38 additions & 11 deletions app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@ 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 = ({
function MaterialGroup({
materials, materialGroup, deleteMaterial, onChange,
showLoadingColumn, reaction, addDefaultSolvent, headIndex,
dropMaterial, dropSample, switchEquiv, lockEquivColumn
}) => {
dropMaterial, dropSample, switchEquiv, lockEquivColumn, displayYieldField,
switchYield
}) {
const contents = [];
let index = headIndex;
if (materials && materials.length > 0) {
Expand All @@ -36,6 +38,7 @@ const MaterialGroup = ({
dropMaterial={dropMaterial}
dropSample={dropSample}
lockEquivColumn={lockEquivColumn}
displayYieldField={displayYieldField}
/>
));

Expand Down Expand Up @@ -74,9 +77,11 @@ const MaterialGroup = ({
addDefaultSolvent={addDefaultSolvent}
switchEquiv={switchEquiv}
lockEquivColumn={lockEquivColumn}
displayYieldField={displayYieldField}
switchYield={switchYield}
/>
);
};
}

const switchEquivTooltip = () => (
<Tooltip id="assign_button">Lock/unlock Equiv <br /> for target amounts</Tooltip>
Expand All @@ -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 = {
Expand Down Expand Up @@ -151,9 +156,26 @@ function GeneralMaterialGroup({
);
}

const yieldConversionRateFields = () => (
<div>
<ToggleButton
isToggledInitial={displayYieldField}
onToggle={switchYield}
onLabel="Yield"
offLabel="C.R."
onColor="transparent"
offColor="transparent"
tooltipOn="Click to switch to conversion rate field"
tooltipOff="Click to switch to yield field"
fontSize="14px"
fontWeight="bold"
/>
</div>
);

if (materialGroup === 'products') {
headers.group = 'Products';
headers.eq = 'Yield';
headers.eq = yieldConversionRateFields();
}

const refTHead = (materialGroup !== 'products') ? headers.ref : null;
Expand Down Expand Up @@ -310,7 +332,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 = {
Expand All @@ -320,7 +344,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 = {
Expand All @@ -332,13 +358,14 @@ SolventsMaterialGroup.propTypes = {

MaterialGroup.defaultProps = {
showLoadingColumn: false,
lockEquivColumn: false
lockEquivColumn: false,
displayYieldField: true
};

GeneralMaterialGroup.defaultProps = {
showLoadingColumn: false,
lockEquivColumn: false
lockEquivColumn: false,
displayYieldField: true
};


export { MaterialGroup, GeneralMaterialGroup, SolventsMaterialGroup };
9 changes: 7 additions & 2 deletions app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroupContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -82,6 +83,8 @@ class MaterialGroupContainer extends Component {
headIndex={headIndex}
switchEquiv={switchEquiv}
lockEquivColumn={lockEquivColumn}
displayYieldField={displayYieldField}
switchYield={switchYield}
/>
</div>,
);
Expand All @@ -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 = {
Expand Down
42 changes: 41 additions & 1 deletion app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export default class ReactionDetailsScheme extends Component {
this.state = {
reaction,
lockEquivColumn: false,
displayYieldField: true,
cCon: false,
reactionDescTemplate: textTemplate.toJS(),
open: true,
Expand All @@ -63,6 +64,7 @@ export default class ReactionDetailsScheme extends Component {
this.dropMaterial = this.dropMaterial.bind(this);
this.dropSample = this.dropSample.bind(this);
this.switchEquiv = this.switchEquiv.bind(this);
this.switchYield = this.switchYield.bind(this);
this.handleOnConditionSelect = this.handleOnConditionSelect.bind(this);
this.updateTextTemplates = this.updateTextTemplates.bind(this);
this.reactionVesselSize = this.reactionVesselSize.bind(this);
Expand Down Expand Up @@ -137,6 +139,11 @@ export default class ReactionDetailsScheme extends Component {
this.setState({ lockEquivColumn: !lockEquivColumn });
}

switchYield() {
const { displayYieldField } = this.state;
this.setState({ displayYieldField: !displayYieldField });
}

handleOnConditionSelect(eventKey) {
const { reaction } = this.props;
const val = eventKey.value;
Expand Down Expand Up @@ -363,6 +370,11 @@ export default class ReactionDetailsScheme extends Component {
this.updatedReactionForGasFieldsUnitsChange(changeEvent)
);
break;
case 'conversionRateChanged':
this.onReactionChange(
this.updatedReactionForConversionRateChange(changeEvent)
);
break;
default:
break;
}
Expand Down Expand Up @@ -635,6 +647,22 @@ export default class ReactionDetailsScheme extends Component {
);
}

updatedReactionForConversionRateChange(changeEvent) {
const { reaction } = this.props;
const { sampleID, conversionRate } = changeEvent;
const updatedSample = reaction.sampleById(sampleID);

updatedSample.conversion_rate = conversionRate;
if (conversionRate / 100 > 1) {
NotificationActions.add({
message: 'conversion rate cannot be more than 100%',
level: 'warning'
});
}

return this.updatedReactionWithSample(this.updatedSamplesForConversionRateChange.bind(this), updatedSample);
}

calculateEquivalent(refM, updatedSample) {
if (!refM.contains_residues) {
NotificationActions.add({
Expand Down Expand Up @@ -1022,6 +1050,15 @@ export default class ReactionDetailsScheme extends Component {
});
}

updatedSamplesForConversionRateChange(samples, updatedSample) {
return samples.map((sample) => {
if (sample.id === updatedSample.id) {
sample.conversion_rate = updatedSample.conversion_rate;
}
return sample;
});
}

updatedReactionWithSample(updateFunction, updatedSample, type) {
const { reaction } = this.state;
reaction.starting_materials = updateFunction(reaction.starting_materials, updatedSample, 'starting_materials', type);
Expand Down Expand Up @@ -1138,7 +1175,8 @@ export default class ReactionDetailsScheme extends Component {
const {
reaction,
lockEquivColumn,
reactionDescTemplate
reactionDescTemplate,
displayYieldField,
} = this.state;
const minPadding = { padding: '1px 2px 2px 0px' };
if (reaction.editedSample !== undefined) {
Expand Down Expand Up @@ -1229,6 +1267,8 @@ export default class ReactionDetailsScheme extends Component {
onChange={changeEvent => this.handleMaterialsChange(changeEvent)}
switchEquiv={this.switchEquiv}
lockEquivColumn={this.state.lockEquivColumn}
switchYield={this.switchYield}
displayYieldField={displayYieldField}
headIndex={0}
/>
</ListGroupItem>
Expand Down
Loading

0 comments on commit e6b2e54

Please sign in to comment.