Skip to content

Commit

Permalink
feat: change component table for liquid components
Browse files Browse the repository at this point in the history 
when volume given, calculate the amount
when amount is given, calculate the volume
handle the calculation when the starting conc. or density being locked
reset the entire row when starting conc. or density is updated
  • Loading branch information
Tasnim Mehzabin committed Aug 14, 2024
1 parent 0a9e477 commit 77f9f89
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 91 deletions.
54 changes: 26 additions & 28 deletions app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -111,8 +111,7 @@ class SampleComponent extends Component {
type: 'densityChanged',
materialGroup: this.props.materialGroup,
sampleID: this.componentId(),
updateVolume: lockColumn,

lockColumn,
};
this.props.onChange(event);
}
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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';
Expand All @@ -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'}
Expand Down Expand Up @@ -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
Expand All @@ -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'}
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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)}

Expand Down Expand Up @@ -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,
Expand Down
48 changes: 26 additions & 22 deletions app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleComponentsGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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;
19 changes: 10 additions & 9 deletions app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleDetailsComponents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default class SampleDetailsComponents extends React.Component {
showModal: false,
droppedMaterial: null,
activeTab: 'concentration',
lockAmountColumn: false,
lockAmountColumn: true,
lockAmountColumnSolids: false,
};

Expand Down Expand Up @@ -102,34 +102,35 @@ 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 } = 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].setAmount(amount, totalVolume); // volume given, update amount
} else if (amount.unit === 'mol') {
sample.components[componentIndex].setMol(amount, totalVolume);
sample.components[componentIndex].setMol(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); // 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].setDensity(amount, lockColumn, totalVolume);
// update components ratio
sample.updateMixtureComponentEquivalent();
}
Expand Down
Loading

0 comments on commit 77f9f89

Please sign in to comment.