Skip to content

Commit

Permalink
Add svg formatter and json
Browse files Browse the repository at this point in the history 
Add revert button to versioned field
  • Loading branch information
Danny Truong committed Jul 15, 2022
1 parent ff661fc commit fedc3a1
Show file tree
Hide file tree
Showing 7 changed files with 318 additions and 40 deletions.
12 changes: 11 additions & 1 deletion app/models/concerns/versionable.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ def versions_hash(record_name = name)
old_value = version_value(key, base[key])
new_value = version_value(key, value)

if old_value.is_a?(Hash) || new_value.is_a?(Hash)
if (old_value.is_a?(Hash) || new_value.is_a?(Hash)) && key != 'temperature'
# fix nil cases
old_value ||= {}
new_value ||= {}
Expand Down Expand Up @@ -126,6 +126,8 @@ def version_label(attribute, value_hash = {})
'Stop'
when 'observation'
'Additional information for publication and purification details'
when 'temperature'
'Temperature'
else
if self.class.columns_hash[attribute].type.in?(%i[hstore jsonb])
label_hash = {}
Expand Down Expand Up @@ -158,6 +160,8 @@ def version_kind(attribute, value_hash = {})
:quill
elsif self.class.name == 'Container' && key == 'kind'
:treeselect
elsif self.class.name == 'Sample' && key == 'sample_svg_file'
:svg
else
:string
end
Expand All @@ -176,6 +180,12 @@ def version_kind(attribute, value_hash = {})
:date
when 'melting_point', 'boiling_point'
:numrange
when 'solvent'
:solvent
when 'sample_svg_file'
:svg
when 'temperature'
:temperature
else
:string
end
Expand Down
9 changes: 9 additions & 0 deletions app/packs/src/components/ReactionDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,8 @@ export default class ReactionDetails extends Component {
if (!reaction.reaction_svg_file) {
this.updateReactionSvg();
}

this.updateGrandparent = this.updateGrandparent.bind(this);
}


Expand Down Expand Up @@ -440,6 +442,12 @@ export default class ReactionDetails extends Component {
this.setState({ reaction });
}

updateGrandparent(name, kind, value) {
let { reaction } = this.state;
reaction[name] = value;
this.setState({ reaction });
}

render() {
const { reaction } = this.state;
const { visible } = this.state;
Expand Down Expand Up @@ -490,6 +498,7 @@ export default class ReactionDetails extends Component {
<VersionsTable
type="reactions"
id={reaction.id}
updateGrandparent={this.updateGrandparent}
/>
</Tab>
)
Expand Down
42 changes: 25 additions & 17 deletions app/packs/src/components/SampleDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ export default class SampleDetails extends React.Component {
this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
this.decoupleChanged = this.decoupleChanged.bind(this);
this.handleFastInput = this.handleFastInput.bind(this);
this.updateGrandparent = this.updateGrandparent.bind(this);
}

componentDidMount() {
Expand Down Expand Up @@ -227,6 +228,19 @@ export default class SampleDetails extends React.Component {
}, cb);
}

updateGrandparent(name, kind, value) {
let { sample } = this.state;
sample[name] = value;
if((name == 'boiling_point' || name == 'melting_point') && value) {
// remove parenthesis
value = value.replace(/[\])}[{(]/g, '');
let temperatureArr = value.split(',');
sample.updateRange(name, temperatureArr[0], temperatureArr[1]);
}

this.setState({ sample });
}

handleAmountChanged(amount) {
const { sample } = this.state;
sample.setAmountAndNormalizeToGram(amount);
Expand Down Expand Up @@ -1087,7 +1101,7 @@ export default class SampleDetails extends React.Component {
key={`${sample.id}_${ind}`}
>
<ListGroupItem style={{ paddingBottom: 20 }} >
<VersionsTable type="samples" id={sample.id} />
<VersionsTable type="samples" id={sample.id} updateGrandparent={this.updateGrandparent} />
</ListGroupItem>
</Tab>
);
Expand Down Expand Up @@ -1241,7 +1255,6 @@ export default class SampleDetails extends React.Component {
measurements: this.measurementsTab('measurements'),
history: this.historyTab('history'),
};

if (this.enableComputedProps) {
tabContentsMap.computed_props = this.moleculeComputedProps('computed_props');
}
Expand Down Expand Up @@ -1297,22 +1310,22 @@ export default class SampleDetails extends React.Component {
const { pageMessage } = this.state;
const messageBlock = (pageMessage &&
(pageMessage.error.length > 0 || pageMessage.warning.length > 0)) ? (
<Alert bsStyle="warning" style={{ marginBottom: 'unset', padding: '5px', marginTop: '10px' }}>
<strong>Structure Alert</strong>&nbsp;
<Button bsSize="xsmall" bsStyle="warning" onClick={() => this.setState({ pageMessage: null })}>Close Alert</Button>
<br />
{
<Alert bsStyle="warning" style={{ marginBottom: 'unset', padding: '5px', marginTop: '10px' }}>
<strong>Structure Alert</strong>&nbsp;
<Button bsSize="xsmall" bsStyle="warning" onClick={() => this.setState({ pageMessage: null })}>Close Alert</Button>
<br />
{
pageMessage.error.map(m => (
<div key={uuid.v1()}>{m}</div>
))
}
{
{
pageMessage.warning.map(m => (
<div key={uuid.v1()}>{m}</div>
))
}
</Alert>
) : null;
</Alert>
) : null;

const activeTab = (this.state.activeTab !== 0 && stb.indexOf(this.state.activeTab) > -1 &&
this.state.activeTab) || visible.get(0);
Expand All @@ -1332,13 +1345,8 @@ export default class SampleDetails extends React.Component {
tabTitles={tabTitlesMap}
onTabPositionChanged={this.onTabPositionChanged}
/>
<Tabs
activeKey={activeTab}
onSelect={this.handleSelect}
id="SampleDetailsXTab"
mountOnEnter
unmountOnExit
>
{this.state.sfn ? <ScifinderSearch el={sample} /> : null}
<Tabs activeKey={activeTab} onSelect={this.handleSelect} id="SampleDetailsXTab" mountOnEnter unmountOnExit>
{tabContents}
</Tabs>
</ListGroup>
Expand Down
9 changes: 8 additions & 1 deletion app/packs/src/components/VersionsTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ export default class VersionsTable extends Component {
page: 1,
pages: 1,
};

this.updateParent = this.updateParent.bind(this);
}

componentDidMount() {
Expand Down Expand Up @@ -51,7 +53,12 @@ export default class VersionsTable extends Component {
});
}

updateParent(name, kind, value) {
this.props.updateGrandparent(name, kind, value);
}

render() {
const { type } = this.props;
const { versions } = this.state;

const pagination = () => (
Expand Down Expand Up @@ -105,7 +112,7 @@ export default class VersionsTable extends Component {
onlyOneExpanding: true,
parentClassName: 'active',
renderer: row => (
<VersionsTableChanges changes={row.changes} />
<VersionsTableChanges type={type} changes={row.changes} updateParent={this.updateParent}/>
),
};

Expand Down
165 changes: 151 additions & 14 deletions app/packs/src/components/VersionsTableChanges.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,45 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col } from 'react-bootstrap';
import { Row, Col, FormControl, Button, Table } from 'react-bootstrap';
import moment from 'moment';
import QuillViewer from './QuillViewer';
import SVG from 'react-inlinesvg';
import ReactJson from 'react-json-view';
import EditableCell from './lineChart/EditableCell'

const SolventDetails = ({ solvent }) => {
if (!solvent) {
return (<></>)
}

return (
<tr>
<td width="5%"></td>
<td width="50%">
<FormControl
bsClass="bs-form--compact form-control"
bsSize="small"
type="text"
name="solvent_label"
value={solvent.label}
disabled
/>
</td>
<td width="26%">
<FormControl
bsClass="bs-form--compact form-control"
bsSize="small"
type="number"
name="solvent_ratio"
value={solvent.ratio}
disabled
/>
</td>
<td>
</td>
</tr>
)
};

const VersionsTableChanges = (props) => {
const { changes } = props;
Expand All @@ -16,20 +53,115 @@ const VersionsTableChanges = (props) => {
);

const numrange = input => (
input ? input.slice(1, -1).split(',', 1) : ''
input ? `${input.slice(1, -1).split(',')[0]} - ${input.slice(1, -1).split(',')[1]}`: ''
);

const treeselect = input => (
(input || '').split(' | ', 2)[1] || input
);

const svg = input => (
input ? <SVG src={`/images/samples/${input}`} key={input} /> : ''
);

const solvent = input => {
let contents = []
if (input) {
input.forEach((solv) => {
contents.push((
<SolventDetails
solvent={solv}
/>
))
})
}

return input ? (<div>
<table width="100%" className="reaction-scheme">
<thead>
<tr>
<th width="5%"></th>
<th width="50%">Label</th>
<th width="26%">Ratio</th>
<th width="3%" />
</tr>
</thead>
<tbody>
{contents.map(item => item)}
</tbody>
</table>
</div>) : <></>;
};

const temperature = input => {
if (input) {
var rows = []
var data = input.data;
for (let i = 0; i < data.length; i = i + 1) {
let row = (
<tr key={"rows_" + i}>
<td className="table-cell">
<EditableCell type="time" value={data[i].time} />
</td>
<td className="table-cell">
<div>
<div style={{ width: "65%", float: "left" }}>
<EditableCell key={"value_cell_" + i} type="value" value={data[i].value} />
</div>
</div>
</td>
</tr>
)
rows.push(row)
}

return input ? (<div>
<span>Temperature: {input.userText} {input.valueUnit} </span>
<Table className="editable-table" style={{ backgroundColor: 'transparent' }}>
<thead>
<tr>
<th> Time (hh:mm:ss) </th>
<th> Temperature ({input.valueUnit}) </th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</Table>
</div>) : <></>;
}
}

const handleRevert = (name, kind, value) => {
props.updateParent(name, kind, value);
}

const renderRevertButton = (name, kind, oldValue) => {
if (['location', 'name', 'external_label', 'real_amount_value', 'description', 'solvent',
'real_amount_unit', 'showed_name', 'target_amount_unit', 'target_amount_value', 'boiling_point',
'melting_point', 'short_label', 'purity', 'density', 'molarity_value', 'data', 'temperature'].includes(name)) {
return (<Button
bsSize="xsmall"
type="button"
bsStyle='default'
style={{ marginLeft: '5px' }}
onClick={() => handleRevert(name, kind, oldValue)}
>
<i className="fa fa-undo" />
</Button>);
}
}

const formatValue = (kind, value) => {
const formatters = {
date,
quill,
numrange,
treeselect,
string: () => value,
svg,
solvent,
temperature,
string: () => JSON.stringify(value),
};

return (
Expand All @@ -43,17 +175,22 @@ const VersionsTableChanges = (props) => {
changes.map(({
name, label, kind, oldValue, newValue
}) => (
<Row key={name} bsStyle="version-history">
<Col xs={12}>
<strong>{label}</strong>
</Col>
<Col xs={6} className="bg-danger" style={{ whiteSpace: 'pre-line' }}>
{formatValue(kind, oldValue)}
</Col>
<Col xs={6} className="bg-success" style={{ whiteSpace: 'pre-line' }}>
{formatValue(kind, newValue)}
</Col>
</Row>
<div>
<Row key={name} bsStyle="version-history">
<Col xs={12}>
<strong>{label}</strong>
{renderRevertButton(name, kind, oldValue)}
</Col>
</Row>
<Row bsStyle="version-history">
<Col xs={6} className="bg-danger" style={{ whiteSpace: 'pre-line' }}>
{formatValue(kind, oldValue)}
</Col>
<Col xs={6} className="bg-success" style={{ whiteSpace: 'pre-line' }}>
{formatValue(kind, newValue)}
</Col>
</Row>
</div>
))
}
</>
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@
"react-inlinesvg": "0.8.4",
"react-input-autosize": "1.1.0",
"react-json-editor-ajrm": "^2.5.10",
"react-json-view": "^1.21.3",
"react-markdown": "^6.0.2",
"react-notification-system": "^0.2.7",
"react-papaparse": "^3.17.2",
Expand Down
Loading

0 comments on commit fedc3a1

Please sign in to comment.