Add svg formatter and json

Add revert button to versioned field
ComPlat · Jul 13, 2022 · 7da662c · 7da662c
1 parent 38a77fe
commit 7da662c
Show file tree

Hide file tree

Showing 8 changed files with 326 additions and 44 deletions.
diff --git a/app/models/concerns/versionable.rb b/app/models/concerns/versionable.rb
@@ -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 ||= {}
@@ -128,6 +128,8 @@ def version_label(attribute, value_hash = {})
       'Solvent'
     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 = {}
@@ -160,6 +162,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
@@ -178,6 +182,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

diff --git a/app/packs/src/components/ReactionDetails.js b/app/packs/src/components/ReactionDetails.js
@@ -87,6 +87,8 @@ export default class ReactionDetails extends Component {
     if (!reaction.reaction_svg_file) {
       this.updateReactionSvg();
     }
+
+    this.updateGrandparent = this.updateGrandparent.bind(this);
   }
 
 
@@ -417,6 +419,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;
@@ -467,6 +475,7 @@ export default class ReactionDetails extends Component {
           <VersionsTable
             type="reactions"
             id={reaction.id}
+            updateGrandparent={this.updateGrandparent}
           />
         </Tab>
       )

diff --git a/app/packs/src/components/SampleDetails.js b/app/packs/src/components/SampleDetails.js
@@ -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() {
@@ -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);
@@ -1078,7 +1092,6 @@ export default class SampleDetails extends React.Component {
   }
 
   historyTab(ind) {
-    console.log('historyTab')
     const { sample } = this.state;
     if (!sample) { return null; }
     return (
@@ -1088,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>
     );
@@ -1242,7 +1255,6 @@ export default class SampleDetails extends React.Component {
       history: this.historyTab('history'),
       measurements: this.measurementsTab('measurements')
     };
-
     if (this.enableComputedProps) {
       tabContentsMap.computed_props = this.moleculeComputedProps('computed_props');
     }
@@ -1298,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);
@@ -1334,7 +1346,7 @@ export default class SampleDetails extends React.Component {
               onTabPositionChanged={this.onTabPositionChanged}
             />
             {this.state.sfn ? <ScifinderSearch el={sample} /> : null}
-            <Tabs activeKey={activeTab} onSelect={this.handleSelect} id="SampleDetailsXTab"  mountOnEnter unmountOnExit>
+            <Tabs activeKey={activeTab} onSelect={this.handleSelect} id="SampleDetailsXTab" mountOnEnter unmountOnExit>
               {tabContents}
             </Tabs>
           </ListGroup>

diff --git a/app/packs/src/components/VersionsTable.js b/app/packs/src/components/VersionsTable.js
@@ -16,6 +16,8 @@ export default class VersionsTable extends Component {
       page: 1,
       pages: 1,
     };
+
+    this.updateParent = this.updateParent.bind(this);
   }
 
   componentDidMount() {
@@ -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 = () => (
@@ -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}/>
       ),
     };
 

diff --git a/app/packs/src/components/VersionsTableChanges.js b/app/packs/src/components/VersionsTableChanges.js
@@ -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;
@@ -16,19 +53,114 @@ 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,
+      svg,
+      solvent,
+      temperature,
       string: () => JSON.stringify(value),
     };
 
@@ -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>
         ))
       }
     </>