chem-generic-ui 0.1.45 → 0.1.46

package/src/components/fields/GenPropertiesFields.js

@@ -0,0 +1,440 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable no-eval */
+/* eslint-disable no-restricted-globals */
+
+import React from 'react';
+import { Button, Checkbox, FormGroup, FormControl,
+  InputGroup, ListGroup, ListGroupItem, OverlayTrigger, Radio, Tooltip } from 'react-bootstrap';
+import Select from 'react-select';
+import Dropzone from 'react-dropzone';
+import { v4 as uuid } from 'uuid';
+import { filter } from 'lodash';
+import FieldLabel from './FieldLabel';
+import { downloadFile, genUnit, genUnitSup, unitConvToBase } from '../tools/utils';
+import GenericElDropTarget from '../dnd/GenericElDropTarget';
+import TableRecord from '../table/TableRecord';
+
+const GenPropertiesCalculate = (opt) => {
+  const fields = (opt.layer && opt.layer.fields) || [];
+  let showVal = 0;
+  let showTxt = null;
+  let newFormula = opt.formula;
+
+  const calFields = filter(fields, o => (o.type === 'integer' || o.type === 'system-defined'));
+  const regF = /[a-zA-Z0-9]+/gm;
+  // eslint-disable-next-line max-len
+  const varFields = (opt.formula && opt.formula.match(regF)) ? opt.formula.match(regF).sort((a, b) => b.length - a.length) : [];
+
+  varFields.forEach((fi) => {
+    if (!isNaN(fi)) return;
+
+    const tmpField = calFields.find(e => e.field === fi);
+    if (typeof tmpField === 'undefined' || tmpField == null) {
+      newFormula = newFormula.replace(fi, 0);
+    } else {
+      newFormula = (tmpField.type === 'system-defined') ? newFormula.replace(fi, parseFloat(unitConvToBase(tmpField) || 0)) : newFormula.replace(fi, parseFloat(tmpField.value || 0));
+    }
+  });
+
+  if (opt.type === 'formula-field') {
+    try {
+      showVal = eval(newFormula);
+      showTxt = !isNaN(showVal) ? parseFloat(showVal.toFixed(5)) : 0;
+    } catch (e) {
+      if (e instanceof SyntaxError) {
+        showTxt = e.message;
+      }
+    }
+  }
+
+  const fieldHeader = opt.label === '' ? null : (<FieldLabel label={opt.label} desc={opt.description} />);
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <InputGroup>
+        <FormControl
+          type="text"
+          value={showTxt}
+          onChange={opt.onChange}
+          className="readonly"
+          readOnly="readonly"
+          required={false}
+          placeholder={opt.placeholder}
+          min={0}
+        />
+        <InputGroup.Button>
+          <OverlayTrigger
+            placement="bottom"
+            overlay={<Tooltip id="update_calculation_field">adjust</Tooltip>}
+          >
+            <Button active className="clipboardBtn" onClick={() => opt.onChange(showTxt)}>
+              <i className="fa fa-arrow-right" aria-hidden="true" />
+            </Button>
+          </OverlayTrigger>
+        </InputGroup.Button>
+        <FormControl
+          type="text"
+          value={opt.value}
+          onChange={opt.onChange}
+          required={false}
+          placeholder={opt.placeholder}
+          min={0}
+        />
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+const GenPropertiesCheckbox = opt => (
+  <FormGroup>
+    <Checkbox
+      name={opt.field}
+      checked={opt.value}
+      onChange={opt.onChange}
+      disabled={opt.readOnly}
+    >
+      <FormControl.Static>{opt.label}</FormControl.Static>
+    </Checkbox>
+  </FormGroup>
+);
+
+const GenPropertiesDrop = (opt) => {
+  const className = opt.isRequired ? 'drop_generic_properties field_required' : 'drop_generic_properties';
+
+  let createOpt = null;
+  if (opt.value.is_new === true) {
+    createOpt = (
+      <div className="sample_radios">
+        <OverlayTrigger placement="top" overlay={<Tooltip id={uuid()}>associate with this sample</Tooltip>}>
+          <Radio name={`dropS_${opt.value.el_id}`} disabled={opt.value.isAssoc === true} checked={opt.value.cr_opt === 0} onChange={() => opt.onChange({ ...opt.value, cr_opt: 0 })} inline>Current</Radio>
+        </OverlayTrigger>
+        <OverlayTrigger placement="top" overlay={<Tooltip id={uuid()}>split from the sample first and then associate with it</Tooltip>}>
+          <Radio name={`dropS_${opt.value.el_id}`} checked={opt.value.cr_opt === 1} onChange={() => opt.onChange({ ...opt.value, cr_opt: 1 })} inline>Split</Radio>
+        </OverlayTrigger>
+        <OverlayTrigger placement="top" overlay={<Tooltip id={uuid()}>duplicate the sample first and then associate with it</Tooltip>}>
+          <Radio name={`dropS_${opt.value.el_id}`} checked={opt.value.cr_opt === 2} onChange={() => opt.onChange({ ...opt.value, cr_opt: 2 })} inline>Copy</Radio>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const defaultIcon = opt.type === 'drag_element' ? <span className="fa fa-link icon_generic_nav indicator" /> : <span className="icon-sample indicator" />;
+  const dragTarget = opt.isPreview === true ? <div className="target">{defaultIcon}</div> : <GenericElDropTarget opt={opt} onDrop={opt.onChange} />;
+
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <FormControl.Static style={{ paddingBottom: '0px' }}>
+        <div className={className}>
+          {dragTarget}
+          {createOpt}
+          <div>
+            <OverlayTrigger placement="top" overlay={<Tooltip id={uuid()}>remove</Tooltip>}>
+              <Button className="btn_del" bsStyle="danger" bsSize="xsmall" onClick={() => opt.onChange({})} ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
+            </OverlayTrigger>
+          </div>
+        </div>
+      </FormControl.Static>
+    </FormGroup>
+  );
+};
+
+const GenDummy = () => (
+  <FormGroup className="text_generic_properties">
+    <FormControl type="text" className="dummy" readOnly />
+  </FormGroup>
+);
+
+const GenPropertiesInputGroup = (opt) => {
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const fLab = e => <div key={uuid()} className="form-control g_input_group_label">{e.value}</div>;
+  const fTxt = e => <FormControl className="g_input_group" key={e.id} type={e.type} name={e.id} value={e.value} onChange={o => opt.onSubChange(o, e.id, opt.f_obj)} />;
+  const fUnit = e => (
+    <span key={`${e.id}_GenPropertiesInputGroup`} className="input-group" style={{ width: '100%' }}>
+      <FormControl key={e.id} type="number" name={e.id} value={e.value} onChange={o => opt.onSubChange(o, e.id, opt.f_obj)} min={1} />
+      <InputGroup.Button>
+        <Button active onClick={() => opt.onSubChange(e, e.id, opt.f_obj)} bsStyle="success">
+          {genUnitSup(genUnit(e.option_layers, e.value_system).label) || ''}
+        </Button>
+      </InputGroup.Button>
+    </span>
+  );
+  const subs = opt.f_obj && opt.f_obj.sub_fields && opt.f_obj.sub_fields.map((e) => {
+    if (e.type === 'label') { return fLab(e); } if (e.type === 'system-defined') { return fUnit(e); } return fTxt(e);
+  });
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <InputGroup style={{ display: 'flex' }}>
+        {subs}
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+const GenPropertiesNumber = (opt) => {
+  let className = opt.isEditable ? 'editable' : 'readonly';
+  className = opt.isRequired && opt.isEditable ? 'required' : className;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <FormControl
+        type="number"
+        value={opt.value}
+        onChange={opt.onChange}
+        className={className}
+        readOnly={opt.readOnly}
+        required={opt.isRequired}
+        placeholder={opt.placeholder}
+        min={1}
+      />
+    </FormGroup>
+  );
+};
+
+const GenPropertiesSelect = (opt) => {
+  const options = opt.options.map(op => ({ value: op.key, name: op.key, label: op.label }));
+  let className = opt.isEditable ? 'select_generic_properties_editable' : 'select_generic_properties_readonly';
+  className = opt.isRequired && opt.isEditable ? 'select_generic_properties_required' : className;
+  className = `${className} status-select`;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const val = options.find(o => o.value === opt.value) || null;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <Select
+        isClearable
+        menuContainerStyle={{ position: 'absolute' }}
+        name={opt.field}
+        multi={false}
+        options={options}
+        value={val}
+        onChange={opt.onChange}
+        className={className}
+        disabled={opt.readOnly}
+      />
+    </FormGroup>
+  );
+};
+
+const GenPropertiesSystemDefined = (opt) => {
+  let className = opt.isEditable ? 'editable' : 'readonly';
+  className = opt.isRequired && opt.isEditable ? 'required' : className;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <InputGroup>
+        <FormControl
+          type="number"
+          value={opt.value}
+          onChange={opt.onChange}
+          className={className}
+          readOnly={opt.readOnly}
+          required={opt.isRequired}
+          placeholder={opt.placeholder}
+          min={1}
+        />
+        <InputGroup.Button>
+          <Button disabled={opt.readOnly} active onClick={opt.onClick} bsStyle="success">
+            {genUnitSup(genUnit(opt.option_layers, opt.value_system).label) || ''}
+          </Button>
+        </InputGroup.Button>
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+const GenPropertiesTable = (opt) => {
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <TableRecord key={`grid_${opt.f_obj.field}`} opt={opt} />
+    </FormGroup>
+  );
+};
+
+const GenPropertiesText = (opt) => {
+  let className = opt.isEditable ? 'editable' : 'readonly';
+  className = opt.isRequired && opt.isEditable ? 'required' : className;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup className="text_generic_properties">
+      {fieldHeader}
+      <FormControl
+        type="text"
+        value={opt.value}
+        onChange={opt.onChange}
+        className={className}
+        readOnly={opt.readOnly}
+        required={opt.isRequired}
+        placeholder={opt.placeholder}
+      />
+    </FormGroup>
+  );
+};
+
+const GenPropertiesTextArea = (opt) => {
+  let className = opt.isEditable ? 'editable' : 'readonly';
+  className = opt.isRequired && opt.isEditable ? 'required' : className;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup className="text_generic_properties">
+      {fieldHeader}
+      <FormControl
+        componentClass="textarea"
+        value={opt.value}
+        onChange={opt.onChange}
+        className={className}
+        readOnly={opt.readOnly}
+        required={opt.isRequired}
+        placeholder={opt.placeholder}
+      />
+    </FormGroup>
+  );
+};
+
+const GenTextFormula = (opt) => {
+  const { layers } = opt;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const subs = [];
+  (opt.f_obj && opt.f_obj.text_sub_fields).map((e) => {
+    const { layer, field, separator } = e;
+    if (field && field !== '') {
+      if (field.includes('[@@]')) {
+        const fds = field.split('[@@]');
+        if (fds && fds.length === 2) {
+          const fdt = ((layers[layer] || {}).fields || []).find(f => f.field === fds[0] && f.type === 'table');
+          ((fdt && fdt.sub_values) || []).forEach((svv) => {
+            if (svv && svv[fds[1]] && svv[fds[1]] !== '') { subs.push(svv[fds[1]]); subs.push(separator); }
+          });
+        }
+      } else {
+        const fd = ((layers[layer] || {}).fields || []).find(f => f.field === field);
+        if (fd && fd.value && fd.value !== '') { subs.push(fd.value); subs.push(separator); }
+      }
+    }
+    return true;
+  });
+  return (
+    <FormGroup className="text_generic_properties">
+      {fieldHeader}
+      <FormControl
+        type="text"
+        value={subs.join('')}
+        className="readonly"
+        readOnly
+        required={false}
+      />
+    </FormGroup>
+  );
+};
+
+const renderListGroupItem = (opt, attachment) => {
+  const delBtn = (
+    <Button bsSize="xsmall" id={attachment.uid} className="button-right" onClick={() => opt.onChange({ ...opt.value, action: 'd', uid: attachment.uid })}>
+      <i className="fa fa-times" aria-hidden="true" />
+    </Button>
+  );
+  const filename = attachment.aid ?
+    (<a onClick={() => downloadFile({ contents: `/api/v1/attachments/${attachment.aid}`, name: attachment.filename })} style={{ cursor: 'pointer' }}>{attachment.filename}</a>) : attachment.filename;
+  return (
+    <div className="generic_grid">
+      <div>
+        <div>{delBtn}</div>
+        <div className="generic_grid_row">{filename}</div>
+        <div className="generic_grid_row">
+          <FormGroup bsSize="small">
+            <FormControl
+              type="text"
+              value={attachment.label || ''}
+              onChange={e => opt.onChange({
+                ...opt.value, action: 'l', uid: attachment.uid, val: e
+              })}
+            />
+          </FormGroup>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const GenPropertiesUpload = (opt) => {
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const attachments = (opt.value && opt.value.files) || [];
+  if (opt.isSearchCriteria) return (<div>(This is an upload)</div>);
+
+  return (
+    <FormGroup className="text_generic_properties">
+      {fieldHeader}
+      <FormControl.Static style={{ paddingBottom: '0px' }}>
+        <Dropzone
+          id="dropzone"
+          onDrop={e => opt.onChange({
+            ...opt.value, action: 'f', val: e
+          })}
+          style={{ height: 30, width: '100%', border: '3px dashed lightgray' }}
+        >
+          <div style={{ textAlign: 'center', paddingTop: 6, color: 'gray' }}>
+            Drop File, or Click to Select.
+          </div>
+        </Dropzone>
+      </FormControl.Static>
+      <ListGroup>
+        {attachments.map(attachment => (
+          <ListGroupItem key={attachment.id} className="generic_files">
+            {renderListGroupItem(opt, attachment)}
+          </ListGroupItem>
+          ))}
+      </ListGroup>
+    </FormGroup>
+  );
+};
+
+const GenWFNext = (opt) => {
+  const options = (opt.f_obj.wf_options || []).map((op) => {
+    const label = op.label.match(/(.*)\(.*\)/);
+    return ({ value: op.key, name: op.key, label: label[1] === '' ? label[0] : label[1] });
+  });
+  let className = opt.isEditable ? 'select_generic_properties_editable' : 'select_generic_properties_readonly';
+  className = opt.isRequired && opt.isEditable ? 'select_generic_properties_required' : className;
+  className = `${className} status-select`;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const val = options.find(o => o.value === opt.value) || null;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <Select
+        menuContainerStyle={{ position: 'absolute' }}
+        name={opt.field}
+        multi={false}
+        options={options}
+        value={val}
+        onChange={opt.onChange}
+        className={className}
+        disabled={opt.readOnly}
+      />
+    </FormGroup>
+  );
+};
+
+export {
+  GenPropertiesCalculate,
+  GenPropertiesCheckbox,
+  GenPropertiesDrop,
+  GenDummy,
+  GenTextFormula,
+  GenPropertiesInputGroup,
+  GenPropertiesNumber,
+  GenPropertiesSelect,
+  GenPropertiesSystemDefined,
+  GenPropertiesTable,
+  GenPropertiesText,
+  GenPropertiesTextArea,
+  GenPropertiesUpload,
+  GenWFNext
+};

package/src/components/layers/GenPropertiesLayer.js

@@ -0,0 +1,178 @@
+/* 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 { Panel, Col, PanelGroup, 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 />) : (
+      <Panel.Heading className={cl}>
+        <Panel.Title toggle>{label}</Panel.Title>
+      </Panel.Heading>
+    );
+    const noneKlass = bs === 'none' ? 'generic_panel_none' : '';
+    if (bs === 'none') bs = 'default';
+    return (
+      <PanelGroup accordion id="accordion_generic_layer" defaultActiveKey="1" style={{ marginBottom: '0px' }}>
+        <Panel bsStyle={bs} className={`panel_generic_properties ${noneKlass}`} eventKey="1">
+          {activeWF ? panelDnD : panelHeader}
+          <Panel.Collapse>
+            <Panel.Body className="panel_generic_properties_body">{this.views()}</Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </PanelGroup>
+    );
+  }
+}
+
+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;