chem-generic-ui 0.1.44 → 0.1.47

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 };

package/src/components/table/GridEntry.js

@@ -0,0 +1,75 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import { FormControl, InputGroup } from 'react-bootstrap';
+
+const setCell = (columnDef, rowValue) => {
+  const {
+    type, field, onCellChange, cellRenderer, cellParams
+  } = columnDef;
+  switch (type) {
+    case 'text':
+      return (
+        <FormControl type="text" value={rowValue[field] || ''} onChange={e => onCellChange({ e, columnDef, rowValue })} />
+      );
+    case 'system-defined':
+      return (
+        <InputGroup>
+          <FormControl type="number" value={rowValue[field].value || ''} onChange={e => onCellChange({ e, columnDef, rowValue })} />
+          <InputGroup.Button>
+            {cellRenderer({ ...cellParams, node: { data: rowValue } })}
+          </InputGroup.Button>
+        </InputGroup>
+      );
+    case 'select':
+    case 'drag_molecule':
+    case 'drag_sample':
+    case 'dnd':
+      return (cellRenderer({ ...cellParams, node: { data: rowValue } }));
+    default:
+      return <span />;
+  }
+};
+
+const ColumnHeader = (columnDefs) => {
+  const ch = [];
+  const h = (col, idx) => {
+    const {
+      width, headerName, headerComponent, headerParams
+    } = col;
+    const colCss = {};
+    if (width) { Object.assign(colCss, { width, minWidth: width }); }
+    return (
+      <div key={`column_header_${col.colId || col.field}_${idx}`} className="generic_grid_header" style={colCss}>
+        {headerComponent ? headerComponent(headerParams) : null}
+        <div style={colCss}>{headerName}</div>
+      </div>
+    );
+  };
+  columnDefs.forEach((col, idx) => ch.push(h(col, idx)));
+  return (<div className="generic_grid" style={{ borderBottom: '1px solid #ccc' }}><div>{ch}</div></div>);
+};
+
+const ColumnRow = (columnDefs, rowValue) => {
+  const ch = [];
+  const h = (col, val, idx) => {
+    const {
+      field, width, cellParams, cellRenderer
+    } = col;
+    const colCss = {};
+    if (width) { Object.assign(colCss, { width, minWidth: width }); }
+    return (
+      <div key={`column_row_${val.id}_${col.colId || col.field}_${idx}`} className="generic_grid_row" style={colCss}>
+        {field ? (setCell(col, val) || '') : (cellRenderer({ ...cellParams, node: { data: val } }) || '')}
+      </div>
+    );
+  };
+  columnDefs.forEach((col, idx) => ch.push(h(col, rowValue, idx)));
+  return (<div key={`column_row_${rowValue.id}`} className="generic_grid"><div>{ch}</div></div>);
+};
+
+const NoRow = (values) => {
+  if (values && values.length > 0) return null;
+  return (<div className="generic_grid"><div><div className="generic_grid_row" style={{ width: '100%' }}>(No data)</div></div></div>);
+};
+
+export { ColumnHeader, ColumnRow, NoRow };

package/src/components/table/SamOption.js

@@ -0,0 +1,53 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
+import { OverlayTrigger, Radio, Tooltip } from 'react-bootstrap';
+
+const SamOption = (props) => {
+  const { sField, node, onChange } = props;
+  const { data } = node;
+  const fValue = (data[sField.id] && data[sField.id].value) || {};
+  if (!fValue.is_new) return <div />;
+  const rUUID = uuid();
+  return (
+    <div className="generic_sam_options">
+      <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid()}>associate with this sample</Tooltip>}>
+        <Radio
+          name={`dropS_${rUUID}`}
+          disabled={fValue.isAssoc}
+          checked={fValue.cr_opt === 0}
+          onChange={() => onChange({ node, subField: sField, crOpt: 0 })}
+        >
+          Current
+        </Radio>
+      </OverlayTrigger>
+      <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid()}>split from the sample first and then associate with it</Tooltip>}>
+        <Radio
+          name={`dropS_${rUUID}`}
+          checked={fValue.cr_opt === 1}
+          onChange={() => onChange({ node, subField: sField, crOpt: 1 })}
+        >
+          Split
+        </Radio>
+      </OverlayTrigger>
+      <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid()}>duplicate the sample first and then associate with it</Tooltip>}>
+        <Radio
+          name={`dropS_${rUUID}`}
+          checked={fValue.cr_opt === 2}
+          onChange={() => onChange({ node, subField: sField, crOpt: 2 })}
+        >
+          Copy
+        </Radio>
+      </OverlayTrigger>
+    </div>
+  );
+};
+
+SamOption.propTypes = {
+  sField: PropTypes.object.isRequired,
+  node: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired
+};
+
+export default SamOption;

package/src/components/table/SelectRenderer.js

@@ -0,0 +1,34 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+
+const SelectRenderer = (props) => {
+  const {
+    sField, onChange, sOptions, node
+  } = props;
+  if (sField.type !== 'select' || sOptions.length < 1) return null;
+  const { data } = node;
+  const val = sOptions.find(o => o.value === data[sField.id].value) || null;
+  return (
+    <Select
+      isClearable
+      menuContainerStyle={{ position: 'absolute' }}
+      multi={false}
+      options={sOptions}
+      value={val}
+      onChange={e => onChange(e, sField, node)}
+      className="status-select"
+      style={{ textAlign: 'left' }}
+    />
+  );
+};
+
+SelectRenderer.propTypes = {
+  sField: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  node: PropTypes.object.isRequired,
+  sOptions: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default SelectRenderer;