chem-generic-ui 0.1.34 → 0.1.37

package/src/components/layers/GenPropertiesLayer.js

@@ -0,0 +1,176 @@
+/* eslint-disable max-len */
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Card, Col, CardGroup, Row } from 'react-bootstrap';
+import GenProperties from '../fields/GenProperties';
+import { genUnits, showProperties, unitConversion } from '../tools/utils';
+import PanelDnD from '../dnd/PanelDnD';
+
+export default class GenPropertiesLayer extends Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubChange = this.handleSubChange.bind(this);
+    this.moveLayer = this.moveLayer.bind(this);
+  }
+
+  handleChange(e, f, k, t) {
+    this.props.onChange(e, f, k, t);
+  }
+
+  handleSubChange(e, id, f, valueOnly = false) {
+    const sub = f.sub_fields.find(m => m.id === id);
+    if (!valueOnly) {
+      if (e.type === 'system-defined') {
+        const units = genUnits(e.option_layers);
+        let uIdx = units.findIndex(u => u.key === e.value_system);
+        if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
+        sub.value_system = units.length > 0 ? units[uIdx].key : '';
+        sub.value = unitConversion(e.option_layers, sub.value_system, e.value);
+      } else {
+        sub.value = e.target.value;
+      }
+    }
+    const { layer } = this.props;
+    const obj = { f, sub };
+    this.props.onSubChange(layer.key, obj, valueOnly);
+  }
+
+  handleClick(keyLayer, obj, val) {
+    const units = genUnits(obj.option_layers);
+    let uIdx = units.findIndex(e => e.key === val);
+    if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
+    const update = obj;
+    update.value_system = units.length > 0 ? units[uIdx].key : '';
+    this.props.onClick(keyLayer, update);
+  }
+
+  views() {
+    const {
+      layer, selectOptions, id, layers, isPreview
+    } = this.props;
+    const { cols, fields, key } = layer;
+    const perRow = cols || 1;
+    const col = Math.floor(12 / perRow);
+    const klaz = (12 % perRow) > 0 ? 'g_col_w' : '';
+    const vs = [];
+    let op = [];
+    let newRow = 0;
+    let rowId = 1;
+    (fields || []).forEach((f, i) => {
+      if (showProperties(f, layers)) {
+        const unit = genUnits(f.option_layers)[0] || {};
+        const tabCol = (f.cols || 1) * 1;
+        const rCol = (f.type === 'table') ? (12 / (tabCol || 1)) : col;
+        newRow = (f.type === 'table') ? newRow += (perRow / (tabCol || 1)) : newRow += 1;
+
+        if (newRow > perRow) {
+          vs.push(<Row key={rowId}>{op}</Row>);
+          rowId += 1;
+          op = [];
+          newRow = (f.type === 'table') ? newRow = (perRow / (tabCol || 1)) : newRow = 1;
+        }
+        const eachCol = (
+          <Col key={`prop_${key}_${f.priority}_${f.field}`} md={rCol} lg={rCol} className={f.type === 'table' ? '' : klaz}>
+            <GenProperties
+              key={`${id}_${layer}_${f.field}_GenPropertiesLayer`}
+              layers={layers}
+              id={id}
+              layer={layer}
+              f_obj={f}
+              label={f.label}
+              value={f.value || ''}
+              description={f.description || ''}
+              type={f.type || 'text'}
+              field={f.field || 'field'}
+              formula={f.formula || ''}
+              options={(selectOptions && selectOptions[f.option_layers] && selectOptions[f.option_layers].options) || []}
+              onChange={event => this.handleChange(event, f.field, key, f.type)}
+              onSubChange={this.handleSubChange}
+              isEditable
+              isPreview={isPreview}
+              readOnly={false}
+              isRequired={f.required || false}
+              placeholder={f.placeholder || ''}
+              option_layers={f.option_layers}
+              value_system={f.value_system || unit.key}
+              onClick={() => this.handleClick(key, f, (f.value_system || unit.key))}
+              selectOptions={selectOptions || {}}
+            />
+          </Col>
+        );
+        op.push(eachCol);
+        if (newRow % perRow === 0) newRow = 0;
+        if ((newRow === 0) || (fields.length === (i + 1))) {
+          vs.push(<Row key={rowId}>{op}</Row>);
+          rowId += 1;
+          op = [];
+        }
+      } else if (fields.length === (i + 1)) {
+        vs.push(<Row key={rowId}>{op}</Row>);
+        rowId += 1;
+        op = [];
+      }
+    });
+    return vs;
+  }
+
+  moveLayer(src, tar) {
+    this.handleChange(null, src, tar, 'drop-layer');
+  }
+
+  render() {
+    const { id, layer, activeWF } = this.props;
+    const { color, style, label } = layer;
+    let bs = color || 'default';
+    const cl = (style || 'panel_generic_heading').replace('panel_generic_heading', 'panel_generic_heading_slim');
+    // panel header color is based on input bs value
+    const panelDnD = (<PanelDnD
+      type="gen_panel"
+      layer={layer}
+      field="layer"
+      rowValue={{ id: layer.key }}
+      handleMove={this.moveLayer}
+      id={id}
+      handleChange={this.handleChange}
+      bs={bs}
+    />);
+    const panelHeader = label === '' ? (<span />) : (
+      <Card.Heading className={cl}>
+        <Card.Title toggle>{label}</Card.Title>
+      </Card.Heading>
+    );
+    const noneKlass = bs === 'none' ? 'generic_panel_none' : '';
+    if (bs === 'none') bs = 'default';
+    return (
+      <CardGroup id="accordion_generic_layer" defaultActiveKey="1" style={{ marginBottom: '0px' }}>
+        <Card bg={bs} className={`panel_generic_properties ${noneKlass}`}>
+
+          <Card.Body className="panel_generic_properties_body">{this.views()}</Card.Body>
+        </Card>
+      </CardGroup>
+    );
+  }
+}
+
+GenPropertiesLayer.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // element id or new id
+  layer: PropTypes.object,
+  selectOptions: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  onSubChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
+  layers: PropTypes.object.isRequired,
+  isPreview: PropTypes.bool,
+  activeWF: PropTypes.bool
+};
+
+GenPropertiesLayer.defaultProps = {
+  id: 0,
+  selectOptions: {},
+  onClick: () => {},
+  isPreview: false,
+  activeWF: false
+};

package/src/components/layers/LayerModal.js

@@ -0,0 +1,52 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Tooltip, Modal, OverlayTrigger } from 'react-bootstrap';
+import { sortBy } from 'lodash';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const block = (layer, fnAdd) => (
+  <div className="generic_layer_column">
+    <div>
+      <div><b>{layer.label}</b><br />({layer.key})</div>
+      <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id="_tooltip_layers">click to add layer</Tooltip>}>
+        <Button bsStyle="primary" onClick={event => fnAdd(event, layer)}><FontAwesomeIcon icon="fas fa-plus" /></Button>
+      </OverlayTrigger>
+    </div>
+  </div>
+);
+
+const drawLayout = (layers, fnAdd) => {
+  const layout = [];
+  layers.forEach((layer) => { layout.push(<div key={layer.key}>{block(layer, fnAdd)}</div>); });
+  return layout;
+};
+
+const LayerModal = (props) => {
+  const {
+    show, layers, fnClose, fnAdd
+  } = props;
+  if (!show) return null;
+  const sortedLayers = sortBy(layers, ['position', 'wf_position']) || [];
+  if (sortedLayers.length < 1) return null;
+  const layout = drawLayout(sortedLayers, fnAdd);
+  return (
+    <Modal show={show} onHide={fnClose}>
+      <Modal.Header closeButton><Modal.Title>Choose Layer</Modal.Title></Modal.Header>
+      <Modal.Body>
+        <div style={{ maxHeight: '80vh', overflow: 'auto' }}>
+          <div className="generic_grid">{layout}</div>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+LayerModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  layers: PropTypes.object.isRequired,
+  fnClose: PropTypes.func.isRequired,
+  fnAdd: PropTypes.func.isRequired
+};
+
+export default LayerModal;

package/src/components/layers/LayersLayout.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { sortBy } from 'lodash';
+import GenPropertiesLayer from './GenPropertiesLayer';
+
+const LayersLayout = (
+  layers, options, funcChange,
+  funcSubChange = () => {}, funcClick = () => {}, layout = [], id = 0, isPreview = false,
+  activeWF = false
+) => {
+  const sortedLayers = sortBy(layers, ['position', 'wf_position']) || [];
+  sortedLayers.forEach((layer, idx) => {
+    const uk = `${layer.key}_${idx}`;
+    if (typeof layer.cond_fields === 'undefined' || layer.cond_fields == null || layer.cond_fields.length === 0) {
+      const ig = (
+        <GenPropertiesLayer
+          id={id}
+          key={uk}
+          layer={layer}
+          onChange={funcChange}
+          onSubChange={funcSubChange}
+          selectOptions={options}
+          onClick={funcClick}
+          layers={layers}
+          isPreview={isPreview}
+          activeWF={activeWF}
+        />
+      );
+      layout.push(ig);
+    } else if (layer.cond_fields && layer.cond_fields.length > 0) {
+      let showLayer = false;
+
+      for (let i = 0; i < layer.cond_fields.length; i += 1) {
+        const cond = layer.cond_fields[i] || {};
+        const fd = ((layers[cond.layer] || {}).fields || [])
+          .find(f => f.field === cond.field) || {};
+        if (fd.type === 'checkbox' && ((['false', 'no', 'f', '0'].includes((cond.value || '').trim().toLowerCase()) && (typeof (fd && fd.value) === 'undefined' || fd.value === false)) ||
+        (['true', 'yes', 't', '1'].includes((cond.value || '').trim().toLowerCase()) && (typeof fd.value !== 'undefined' && fd.value === true)))) {
+          showLayer = true;
+          break;
+        } else if (['text', 'select'].includes(fd.type) && (typeof (fd && fd.value) !== 'undefined' && (fd.value || '').trim() === (cond.value || '').trim())) {
+          showLayer = true;
+          break;
+        }
+      }
+
+      if (showLayer === true) {
+        const igs = (
+          <GenPropertiesLayer
+            id={id}
+            key={uk}
+            layer={layer}
+            onChange={funcChange}
+            onSubChange={funcSubChange}
+            selectOptions={options}
+            onClick={funcClick}
+            layers={layers}
+            isPreview={isPreview}
+            activeWF={activeWF}
+          />
+        );
+        layout.push(igs);
+      }
+    }
+  });
+  return layout;
+};
+
+export default LayersLayout;

package/src/components/models/Attachment.js

@@ -0,0 +1,37 @@
+import { v4 as uuid } from 'uuid';
+
+export default class Attachment {
+  constructor(args) {
+    Object.assign(this, args);
+    if (!this.id) { this.id = Attachment.buildID(); }
+  }
+
+  static buildID() { return uuid(); }
+
+  static fromFile(file) {
+    return new Attachment({
+      file,
+      name: file.name,
+      filename: file.name,
+      identifier: file.id,
+      is_deleted: false,
+    });
+  }
+
+  get isNew() {
+    return this.is_new === true;
+  }
+
+  serialize() {
+    return super.serialize({
+      filename: this.filename,
+      identifier: this.identifier,
+      file: this.file,
+      thumb: this.thumb,
+      content_type: this.content_type,
+      is_deleted: this.is_deleted,
+      id: this.id,
+      is_new: this.isNew || false
+    });
+  }
+}

package/src/components/models/GenericSubField.js

@@ -0,0 +1,10 @@
+import { v4 as uuid } from 'uuid';
+
+export default class GenericSubField {
+  constructor(args) {
+    Object.assign(this, args);
+    if (!this.id) { this.id = GenericSubField.buildID(); }
+  }
+
+  static buildID() { return uuid(); }
+}

package/src/components/table/DropLinkRenderer.js

@@ -0,0 +1,35 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+// import Aviator from 'aviator';
+// import UIStore from '../stores/UIStore';
+
+// const linkSample = (type, id) => {
+//   const { currentCollection, isSync } = UIStore.getState();
+//   const collectionUrl = (!isNaN(id)) ?
+//     `${currentCollection.id}/${type}/${id}` : `${currentCollection.id}/${type}`;
+//   Aviator.navigate(isSync ? `/scollection/${collectionUrl}` : `/collection/${collectionUrl}`);
+// };
+
+const DropLinkRenderer = (props) => {
+  const { sField, node, onLink } = props;
+  const dId = ((node.data[sField.id] || {}).value || {}).el_id || '';
+  const dVal = ((node.data[sField.id] || {}).value || {}).el_short_label || ' ';
+  if (dId === '') return <div />;
+  return (
+    <a role="link" onClick={() => onLink('sample', dId)} style={{ cursor: 'pointer' }}>
+      <span className="reaction-material-link">{dVal}</span>
+    </a>
+  );
+};
+
+DropLinkRenderer.propTypes = {
+  sField: PropTypes.object.isRequired,
+  node: PropTypes.object.isRequired,
+  onLink: PropTypes.func.isRequired
+};
+
+export default DropLinkRenderer;

package/src/components/table/DropRenderer.js

@@ -0,0 +1,31 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { cloneDeep } from 'lodash';
+import GenericElTableDropTarget from './GenericElTableDropTarget';
+
+const DropRenderer = (props) => {
+  const {
+    opt, sField, onChange, node
+  } = props;
+  if (!['drag_molecule', 'drag_sample'].includes(sField.type)) return null;
+  const { data } = node;
+  opt.dndItems = [sField.type.split('_')[1]];
+  opt.sField = sField;
+  opt.data = data;
+  const oopt = cloneDeep(opt);
+  return (
+    <div className="drop_generic_properties drop_generic_table_wrap">
+      <GenericElTableDropTarget opt={oopt} onDrop={onChange} />
+    </div>
+  );
+};
+
+DropRenderer.propTypes = {
+  sField: PropTypes.object.isRequired,
+  opt: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  node: PropTypes.object.isRequired
+};
+
+export default DropRenderer;

package/src/components/table/DropTextRenderer.js

@@ -0,0 +1,25 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+const DropTextRenderer = (props) => {
+  const { attr, sField, node } = props;
+  let displayValue = ((node.data[sField.id] || {}).value || {})[`el_${attr.value}`] || '';
+  displayValue = (attr.value === 'molecular_weight' && displayValue !== '') ? displayValue.toFixed(6) : displayValue;
+  return (
+    <OverlayTrigger placement="top" overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}>
+      <div role="button" data-clipboard-text={displayValue} className="clipboardBtn" style={{ wordBreak: 'break-all', cursor: 'copy' }}>
+        {displayValue}
+      </div>
+    </OverlayTrigger>
+  );
+};
+
+DropTextRenderer.propTypes = {
+  attr: PropTypes.object.isRequired,
+  sField: PropTypes.object.isRequired,
+  node: PropTypes.object.isRequired
+};
+
+export default DropTextRenderer;

package/src/components/table/GenericElTableDropTarget.js

@@ -0,0 +1,131 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
+import { DropTarget } from 'react-dnd';
+import { Tooltip, OverlayTrigger, Popover, Button } from 'react-bootstrap';
+
+const base = (opt, iconClass, onDrop = () => {}, params = {}) => {
+  const noSvg = '/images/not_available.svg';
+  if (opt.value && opt.value.el_id) {
+    const label = opt.value.el_label;
+    const svg = (opt.value.el_svg && opt.value.el_svg.endsWith('.svg')) ? opt.value.el_svg : noSvg;
+    const pop = (
+      <Popover id="popover-svg" title={label} style={{ maxWidth: 'none', maxHeight: 'none' }}>
+        <img src={svg} style={{ height: '26vh', width: '26vh' }} alt="" />
+      </Popover>
+    );
+    const simg = (path, txt) => ((path && path !== '') ? (
+      <div className="s-img">
+        <OverlayTrigger delayShow={1000} trigger={['hover']} placement="top" rootClose onHide={null} overlay={pop}>
+          <img className="generic_grid_img" src={path} alt="" />
+        </OverlayTrigger>
+        <div className="del_btn">
+          <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid()}>remove this molecule</Tooltip>}>
+            <Button className="btn_del" bsSize="xsmall" onClick={() => onDrop({}, params)} ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
+          </OverlayTrigger>
+        </div>
+      </div>
+    ) : (<div className="data" style={{ width: '4vw' }}>{txt}</div>));
+    return simg(svg, label);
+  }
+  return (<span className={`icon-${iconClass} indicator`} style={{ width: '4vw' }} />);
+};
+
+const show = (opt, iconClass, onDrop) => {
+  if (opt.type === 'table') {
+    const sField = opt.sField || {};
+    const subVal = opt.data[sField.id];
+    const { data } = opt;
+    return base(subVal, iconClass, onDrop, { sField, data });
+  }
+  return base(opt, iconClass);
+};
+
+const source = (type, props, id) => {
+  let isAssoc = false;
+  const taggable = (props && props.tag && props.tag.taggable_data) || {};
+  if (taggable.element && taggable.element.id === id) {
+    isAssoc = false;
+  } else {
+    isAssoc = !!(taggable.reaction_id || taggable.wellplate_id || taggable.element);
+  }
+
+  switch (type) {
+    case 'molecule':
+      return {
+        el_id: props.molecule.id,
+        el_type: 'molecule',
+        el_label: props.molecule.cano_smiles || props.molecule_formula || props.molecule_name_label,
+        el_inchikey: props.molecule.inchikey,
+        el_smiles: props.molecule.cano_smiles,
+        el_iupac: props.molecule.iupac_name,
+        el_molecular_weight: props.molecule.molecular_weight,
+        el_svg: `/images/molecules/${props.molecule.molecule_svg_file}`,
+      };
+    case 'sample':
+      return {
+        el_id: props.id,
+        is_new: true,
+        cr_opt: 1,
+        isAssoc,
+        el_type: 'sample',
+        el_label: props.short_label,
+        el_short_label: props.short_label,
+        el_name: props.name,
+        el_external_label: props.external_label,
+        el_molecular_weight: props.molecule_molecular_weight,
+        el_svg: props.sample_svg_file ? `/images/samples/${props.sample_svg_file}` : `/images/molecules/${props.molecule.molecule_svg_file}`,
+      };
+    default:
+      return {
+        el_id: props.id,
+        is_new: true,
+        cr_opt: 0,
+        el_type: props.type,
+        el_label: props.short_label,
+      };
+  }
+};
+
+const dropTarget = {
+  drop(targetProps, monitor) {
+    const sourceProps = monitor.getItem().element;
+    const type = targetProps.opt.sField.type.split('_')[1];
+    const sourceTag = source(type, sourceProps, targetProps.opt.id);
+    targetProps.onDrop(sourceTag, targetProps.opt);
+  },
+  canDrop(targetProps, monitor) {
+    return true;
+  },
+};
+
+const dropCollect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+class GenericElTableDropTarget extends Component {
+  render() {
+    const {
+      connectDropTarget, isOver, canDrop, opt, onDrop
+    } = this.props;
+    const className = `target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
+    return connectDropTarget(<div className={className} style={{ display: 'inline-flex', justifyContent: 'center' }}>{show(opt, 'sample', onDrop)}</div>);
+  }
+}
+
+export default
+DropTarget(props => props.opt.dndItems, dropTarget, dropCollect)(GenericElTableDropTarget);
+
+GenericElTableDropTarget.propTypes = {
+  connectDropTarget: PropTypes.func.isRequired,
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+  opt: PropTypes.object.isRequired,
+  onDrop: PropTypes.func
+};
+
+GenericElTableDropTarget.defaultProps = { onDrop: () => {} };

package/src/components/table/GridBtn.js

@@ -0,0 +1,41 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import GridDnD from '../dnd/GridDnD';
+
+const AddRowBtn = ({ addRow }) => (
+  <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid()}>add entry</Tooltip>}>
+    <Button onClick={() => addRow()} bsSize="xsmall" bsStyle="primary"><i className="fa fa-plus" aria-hidden="true" /></Button>
+  </OverlayTrigger>
+);
+
+AddRowBtn.propTypes = { addRow: PropTypes.func.isRequired };
+
+const DelRowBtn = ({ delRow, node }) => {
+  const { data } = node;
+  return (
+    <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid()}>remove</Tooltip>}>
+      <Button onClick={() => delRow(data)} bsSize="xsmall"><i className="fa fa-times" aria-hidden="true" /></Button>
+    </OverlayTrigger>);
+};
+
+DelRowBtn.propTypes = { delRow: PropTypes.func.isRequired, node: PropTypes.object.isRequired };
+
+const NullRowBtn = () => (<div className="grid-btn-none"><span className="fa fa-arrows" /></div>);
+
+const DnDRowBtn = ({
+  moveRow, field, type, node
+}) => (
+  <GridDnD field={field} type={type} rowValue={node.data} handleMove={moveRow} />
+);
+
+DnDRowBtn.propTypes = {
+  moveRow: PropTypes.func.isRequired,
+  field: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  node: PropTypes.object.isRequired
+};
+
+export { AddRowBtn, DelRowBtn, DnDRowBtn, NullRowBtn };