Skip to content

Commit

Permalink
fix in bootstrap: color and label not saved on submit in wellplates (#…
Browse files Browse the repository at this point in the history 
…2210)

* fix color and label not saved on submit

* change disabled options color to gray in wellplates labels

* fix broken selects in Affiliations
  • Loading branch information
@ashwiniHerle
ashwiniHerle authored Oct 11, 2024
1 parent 726b8e0 commit 79e9ac9
Show file tree
Hide file tree
Showing 8 changed files with 116 additions and 91 deletions.
16 changes: 10 additions & 6 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 @@ -217,12 +217,13 @@ class Material extends Component {
return (
<Button
active
className='p-1'
className="p-1 ms-1"
onClick={e => this.handleShowLabelChange(e)}
variant={material.show_label ? 'success' : 'primary'}
size="sm"
title={material.show_label ? 'Switch to structure' : 'Switch to label'}
>{material.show_label ? 'l' : 's'}
>
{material.show_label ? 'l' : 's'}
</Button>
);
}
Expand Down Expand Up @@ -666,7 +667,7 @@ class Material extends Component {

return (
<tbody>
<tr className="general-material">
<tr className="m-1 p-1">
{compose(connectDragSource, connectDropTarget)(
<td className={`drag-source ${permitCls(reaction)} ${className}`}>
<span className="text-info fa fa-arrows" />
Expand Down Expand Up @@ -715,7 +716,9 @@ class Material extends Component {
metricPrefix={metricMol}
metricPrefixes={metricPrefixes}
precision={4}
disabled={!permitOn(reaction) || (this.props.materialGroup === 'products' || (!material.reference && this.props.lockEquivColumn))}
disabled={!permitOn(reaction)
|| (this.props.materialGroup === 'products'
|| (!material.reference && this.props.lockEquivColumn))}
onChange={e => this.handleAmountUnitChange(e, material.amount_mol)}
onMetricsChange={this.handleMetricsChange}
variant={material.amount_unit === 'mol' ? 'success' : 'default'}
Expand Down Expand Up @@ -784,7 +787,7 @@ class Material extends Component {
const mw = material.molecule && material.molecule.molecular_weight;
const drySolvTooltip = <Tooltip>Dry Solvent</Tooltip>;
return (
<tr className="solvent-material">
<tr className="m-1 p-1">
{compose(connectDragSource, connectDropTarget)(
<td className={`drag-source ${permitCls(reaction)} ${className}`}>
<span className="text-info fa fa-arrows" />
Expand All @@ -801,6 +804,7 @@ class Material extends Component {
type="checkbox"
checked={material.dry_solvent}
onChange={(event) => this.handleDrySolventChange(event)}
className="ms-1"
/>
</OverlayTrigger>
</td>
Expand Down Expand Up @@ -864,7 +868,7 @@ class Material extends Component {
<Button
disabled={!permitOn(this.props.reaction)}
active
className="p-1"
className="p-1 ms-1"
onClick={() => this.toggleTarget(isTarget)}
variant={isTarget ? 'success' : 'primary'}
size="sm"
Expand Down
22 changes: 11 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 @@ -168,7 +168,7 @@ function GeneralMaterialGroup({
<Button
disabled={!permitOn(reaction)}
variant="success"
size="sm"
size="xsm"
onClick={() => ElementActions.addSampleToMaterialGroup({ reaction, materialGroup })}
>
<i className="fa fa-plus" />
Expand All @@ -181,8 +181,8 @@ function GeneralMaterialGroup({
<col style={{ width: '4%' }} />
<col style={{ width: showLoadingColumn ? '8%' : '15%' }} />
<col style={{ width: '4%' }} />
<col style={{ width: '2%' }} />
<col style={{ width: '2%' }} />
<col style={{ width: '3%' }} />
<col style={{ width: '3%' }} />
<col style={{ width: showLoadingColumn ? '3%' : '4%' }} />
<col style={{ width: showLoadingColumn ? '10%' : '11%' }} />
{showLoadingColumn && <col style={{ width: '11%' }} />}
Expand Down Expand Up @@ -236,7 +236,7 @@ function SolventsMaterialGroup({
<Button
disabled={!permitOn(reaction)}
variant="success"
size="sm"
size="xsm"
onClick={() => ElementActions.addSampleToMaterialGroup({ reaction, materialGroup })}
>
<i className="fa fa-plus" />
Expand Down Expand Up @@ -271,20 +271,20 @@ function SolventsMaterialGroup({
<Table borderless className="w-100">
<thead>
<tr>
<th>{addSampleButton}</th>
<th>
<th className="align-middle">{addSampleButton}</th>
<th className="align-middle">
<Select
isDisabled={!permitOn(reaction)}
options={solventOptions}
placeholder="Default solvents"
onChange={createDefaultSolventsForReaction}
/>
</th>
<th title="Dry Solvent">DS</th>
<th>T/R</th>
<th>Label</th>
<th>Vol</th>
<th>Vol ratio</th>
<th title="Dry Solvent" className="align-middle">DS</th>
<th className="align-middle">T/R</th>
<th className="align-middle">Label</th>
<th className="align-middle">Vol</th>
<th className="align-middle">Vol ratio</th>
</tr>
</thead>
<tbody>
Expand Down
125 changes: 66 additions & 59 deletions app/packs/src/apps/mydb/elements/details/wellplates/designerTab/WellDetails.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import {
Button,
Expand Down Expand Up @@ -28,7 +29,7 @@ const sampleName = (sample) => {
return sampleNameLabel;
}
return (
<a onClick={() => navigateToSample(sample)} role="button">
<a onClick={() => navigateToSample(sample)} role="button" className="text-primary">
{sampleNameLabel}
</a>
);
Expand All @@ -39,8 +40,8 @@ const sampleVisualisation = (well, onChange) => {
let svg = null;
let removeButton = null;
const removeSampleFromWell = () => {
well.sample = null
onChange(well)
well.sample = null;
onChange(well);
}

if (sample) {
Expand All @@ -54,7 +55,7 @@ const sampleVisualisation = (well, onChange) => {
return (
<>
{removeButton}
<div class="well-details-svg-container">
<div className="well-details-svg-container">
{svg}
</div>
<p className="wellplate-overlay text-center">
Expand All @@ -67,31 +68,32 @@ const sampleVisualisation = (well, onChange) => {
};

const readoutSection = (readouts, readoutTitles) => {
if (!readouts || readouts.every(readout => readout.unit == '' && readout.value == '')) return null;

const readoutListItems = readouts.map((readout, index) => {
return (
<li key={`readout_${index}`}>
<strong>{readoutTitles[index]}:</strong>
{readout.value}
</li>
)
})
if (!readouts || readouts.every((readout) => readout.unit == '' && readout.value == '')) return null;

const readoutListItems = readouts.map((readout, index) => (
<li key={`readout_${index}`}>
<strong>
{readoutTitles[index]}
:
</strong>
{readout.value}
</li>
));

return (
<div class="mt-3">
<div className="mt-3">
<h4>Readouts</h4>
<ul>
{readoutListItems}
</ul>
</div>
)
}
);
};

const labelSelection = (well, onChange) => {
const wellLabels = well.label ? well.label.split(',') : [];
const labelsIncludesMolecularStructure = wellLabels.some(item => item === 'Molecular structure')
const labelsIncludeNonMolecularStructure = wellLabels.some(item => item !== 'Molecular structure')
const labelsIncludesMolecularStructure = wellLabels.some((item) => item === 'Molecular structure');
const labelsIncludeNonMolecularStructure = wellLabels.some((item) => item !== 'Molecular structure');

const labelOptions = [
{ label: 'Name', value: 'Name', disabled: labelsIncludesMolecularStructure },
Expand All @@ -100,61 +102,66 @@ const labelSelection = (well, onChange) => {
];

return (
<div class="mt-3">
<div className="mt-3">
<h4>Select label type</h4>
<Select
name="label"
isMulti
options={labelOptions}
value={labelOptions.filter(({value}) => wellLabels.includes(value))}
isOptionDisabled={({disabled}) => disabled}
onChange={selectedOptions => {
const newLabel = selectedOptions.map(option => option.label).join(',')
well.label = newLabel
onChange(well)
value={labelOptions.filter(({ value }) => wellLabels.includes(value))}
isOptionDisabled={(option) => option.disabled}
styles={{
option: (provided, state) => {
const isDisabled = state.data.disabled;
return {
...provided,
color: isDisabled ? 'gray' : 'black',
};
}
}}
onChange={(selectedOptions) => {
const newLabel = selectedOptions.map((option) => option.label).join(',');
well.label = newLabel;
onChange(well);
}}
/>
</div>
)
}

const colorPicker = (well, onChange) => {
const { sample, readouts } = well;

return (
<div class="mt-3">
<Form.Group as={Row} controlId="formColorSelectorDisplay">
<Form.Label as="h4">Select Color</Form.Label>
<InputGroup>
<InputGroup.Text style={{backgroundColor: well.color_code}} />
<Form.Control
className="input-sm"
type="text"
readOnly
value={well.color_code}
/>
</InputGroup>
</Form.Group>
<Form.Group controlId="formHorizontalPicker" class="my-3">
<CirclePicker
circleSize={17}
width="100%"
onChangeComplete={(color) => {
well.color_code = color.hex;
onChange(well)
}}
/>
</Form.Group>
</div>
);
};

const WellDetails = ({ well, readoutTitles, handleClose, onChange}) => {
const colorPicker = (well, onChange) => (
<div className="mt-3">
<Form.Group as={Row} controlId="formColorSelectorDisplay">
<Form.Label as="h4">Select Color</Form.Label>
<InputGroup>
<InputGroup.Text style={{ backgroundColor: well.color_code }} />
<Form.Control
className="input-sm"
type="text"
readOnly
value={well.color_code}
/>
</InputGroup>
</Form.Group>
<Form.Group controlId="formHorizontalPicker" className="my-3">
<CirclePicker
circleSize={17}
width="100%"
onChangeComplete={(color) => {
well.color_code = color.hex;
onChange(well);
}}
/>
</Form.Group>
</div>
);

const WellDetails = ({ well, readoutTitles, handleClose, onChange }) => {
return (
<Modal
animation
centered
show={() => { well != null }}
show={() => { well != null; }}
onHide={handleClose}
>
<Modal.Header closeButton>
Expand Down
7 changes: 1 addition & 6 deletions app/packs/src/apps/mydb/elements/details/wellplates/designerTab/Wellplate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import React, { Component, useState } from 'react';
import PropTypes from 'prop-types';
import WellContainer from 'src/apps/mydb/elements/details/wellplates/designerTab/WellContainer';
import WellDetails from 'src/apps/mydb/elements/details/wellplates/designerTab/WellDetails';
import WellplatesFetcher from 'src/fetchers/WellplatesFetcher';
import WellplateModel from 'src/models/Wellplate';
import { Container, Row } from 'react-bootstrap'

const HorizontalHeaderField = ({label}) => {
return (<div className="fw-bold text-center wellplate-horizontal-header-field">{label}</div>)
Expand All @@ -16,7 +14,6 @@ const VerticalHeaderField = ({label}) => {

const Wellplate = ({ wellplate, handleWellsChange }) => {
const [selectedWell, setSelectedWell] = useState(null)
const [selectedColor, setSelectedColor] = useState(null)

const swapWells = (firstWell, secondWell) => {
const wells = wellplate.wells
Expand Down Expand Up @@ -88,11 +85,9 @@ const Wellplate = ({ wellplate, handleWellsChange }) => {
})

// fill

return rows
return rows;
}

const wellSize = 60
return(
<div className="d-inline-flex flex-column">
{wellplateRows(wellplate).map(rowContent => (<div className="d-inline-flex flex-row">{rowContent}</div>))}
Expand Down
13 changes: 7 additions & 6 deletions app/packs/src/apps/userSettings/Affiliations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ function Affiliations({ show, onHide }) {
placeholder="Select or enter a new option"
components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
options={countryOptions}
value={item.country || ''}
value={countryOptions.find((option) => option.value === item.country) || null}
isSearchable
isClearable
onChange={(choice) => onChangeHandler(index, 'country', !choice ? '' : choice.value)}
Expand All @@ -262,7 +262,7 @@ function Affiliations({ show, onHide }) {
className={inputError[index] && inputError[index].organization ? 'is-invalid' : ''}
isCreatable
options={orgOptions}
value={item.organization}
value={orgOptions.find((option) => option.value === item.organization) || null}
isClearable
onChange={(choice) => onChangeHandler(index, 'organization', !choice ? '' : choice.value)}
/>
Expand All @@ -281,7 +281,7 @@ function Affiliations({ show, onHide }) {
disabled={item.disabled}
placeholder="Select or enter a new option"
options={deptOptions}
value={item.department}
value={deptOptions.find((option) => option.value === item.department) || null}
isSearchable
clearable
onChange={(choice) => onChangeHandler(index, 'department', !choice ? '' : choice.value)}
Expand All @@ -298,7 +298,7 @@ function Affiliations({ show, onHide }) {
disabled={item.disabled}
allowCreate
options={groupOptions}
value={item.group}
value={groupOptions.find((option) => option.value === item.group) || null}
isSearchable
closeMenuOnSelect
isClearable
Expand All @@ -316,7 +316,7 @@ function Affiliations({ show, onHide }) {
isClearable
clearButtonTitle="Clear"
// eslint-disable-next-line max-len
className={`Select-control ${inputError[index] && inputError[index].from ? 'border-danger' : ''}`}
className={`py-1 rounded border ${inputError[index] && inputError[index].from ? 'border-danger' : 'border-gray'}`}
showPopperArrow={false}
disabled={item.disabled}
showMonthYearPicker
Expand All @@ -339,7 +339,8 @@ function Affiliations({ show, onHide }) {
placeholderText={inputError[index] && inputError[index].to ? errorMsg : ''}
isClearable
clearButtonTitle="Clear"
className={`Select-control ${inputError[index] && inputError[index].to ? 'border-danger' : ''}`}
// eslint-disable-next-line max-len
className={`py-1 rounded border ${inputError[index] && inputError[index].to ? 'border-danger' : 'border-gray'}`}
showPopperArrow={false}
disabled={item.disabled}
showMonthYearPicker
Expand Down
Loading

0 comments on commit 79e9ac9

Please sign in to comment.