chem-generic-ui 0.1.47 → 0.1.48

package/src/components/details/GenSgDetails.js

@@ -1,396 +0,0 @@
-/* eslint-disable no-restricted-globals */
-/* eslint-disable camelcase */
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { findIndex, cloneDeep, sortBy } from 'lodash';
-import { Panel } from 'react-bootstrap';
-// import { DragDropContext } from 'react-dnd';
-// import HTML5Backend from 'react-dnd-html5-backend';
-import LayersLayout from '../layers/LayersLayout';
-import { genUnits, toBool, toNum, swapAryEls, unitConversion, uploadFiles } from '../tools/utils';
-import { getWFNode, orgLayerObject, getFlowLayer, addToObject, removeFromObject, reformCondFields } from '../tools/orten';
-import organizeSubValues from '../tools/collate';
-import LayerModal from '../layers/LayerModal';
-
-class SegmentDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { showViewLayer: false, selectedLayerKey: '' };
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleSubChange = this.handleSubChange.bind(this);
-    this.handleUnitClick = this.handleUnitClick.bind(this);
-    this.handleReload = this.handleReload.bind(this);
-    this.handleAddLayer = this.handleAddLayer.bind(this);
-    this.setViewLayer = this.setViewLayer.bind(this);
-    this.dropLayer = this.dropLayer.bind(this);
-    this.removeLayer = this.removeLayer.bind(this);
-    this.handleWFNext = this.handleWFNext.bind(this);
-  }
-
-  setViewLayer() {
-    this.setState({ showViewLayer: !this.state.showViewLayer });
-  }
-
-  handleSubChange(layer, obj, valueOnly = false) {
-    const { segment } = this.props;
-    const { properties } = segment;
-    if (!valueOnly) {
-      const subFields = properties.layers[`${layer}`].fields
-        .find(m => m.field === obj.f.field).sub_fields || [];
-      const idxSub = subFields.findIndex(m => m.id === obj.sub.id);
-      subFields.splice(idxSub, 1, obj.sub);
-      properties.layers[`${layer}`].fields
-        .find(e => e.field === obj.f.field).sub_fields = subFields;
-    }
-    properties.layers[`${layer}`].fields
-      .find(e => e.field === obj.f.field).sub_values = obj.f.sub_values || [];
-    segment.properties = properties;
-    segment.changed = true;
-    this.props.onChange(segment);
-  }
-
-  handleInputChange(event, field, layer, type = 'text') {
-    const { segment } = this.props;
-    const { properties } = segment;
-    let value = '';
-    let propsChange = true;
-    switch (type) {
-      case 'drop-layer':
-        this.dropLayer(field, layer);
-        propsChange = false;
-        break;
-      case 'layer-remove':
-        event.stopPropagation();
-        this.removeLayer(field, layer);
-        propsChange = false;
-        break;
-      case 'layer-modal':
-        event.stopPropagation();
-        propsChange = false;
-        this.setState({ selectedLayerKey: layer.key, showViewLayer: true });
-        break;
-      case 'wf-next':
-        propsChange = false;
-        this.handleWFNext(event, layer);
-        break;
-      case 'checkbox':
-        value = event.target.checked;
-        break;
-      case 'formula-field':
-        if (event.target) {
-          ({ value } = event.target);
-        } else {
-          value = event;
-        }
-        break;
-      case 'upload': {
-        const vals = uploadFiles(properties, event, field, layer);
-        value = vals[0];
-        if (vals[1].length > 0) segment.files = (segment.files || []).concat(vals[1]);
-        if (vals.length > 2) {
-          const fileIdx = findIndex((segment.files || []), o => o.uid === event.uid);
-          if (fileIdx >= 0 && segment.files && segment.files.length > 0) {
-            segment.files.splice(fileIdx, 1);
-          }
-        }
-        break;
-      }
-      case 'select':
-        value = event ? event.value : null;
-        break;
-      case 'drag_molecule':
-        value = event;
-        break;
-      case 'integer':
-        ({ value } = event.target);
-        value = Math.trunc(value);
-        break;
-      default:
-        ({ value } = event.target);
-    }
-    if (propsChange) {
-      properties.layers[`${layer}`].fields.find(e => e.field === field).value = value;
-      if (type === 'system-defined' && (!properties.layers[`${layer}`].fields.find(e => e.field === field).value_system || properties.layers[`${layer}`].fields.find(e => e.field === field).value_system === '')) {
-        const opt = properties.layers[`${layer}`].fields
-          .find(e => e.field === field).option_layers;
-        properties.layers[`${layer}`].fields
-          .find(e => e.field === field).value_system = genUnits(opt)[0].key;
-      }
-      segment.properties = properties;
-      segment.changed = true;
-      this.props.onChange(segment);
-    }
-  }
-
-  handleUnitClick(layer, obj) {
-    const { segment } = this.props;
-    const { properties } = segment;
-    const newVal = unitConversion(obj.option_layers, obj.value_system, obj.value);
-    properties.layers[`${layer}`].fields
-      .find(e => e.field === obj.field).value_system = obj.value_system;
-    properties.layers[`${layer}`].fields.find(e => e.field === obj.field).value = newVal;
-    segment.properties = properties;
-    segment.changed = true;
-    this.props.onChange(segment);
-  }
-
-  handleReload() {
-    const { klass, segment } = this.props;
-    const newProps = cloneDeep(klass.properties_release);
-    newProps.klass_uuid = klass.uuid;
-    Object.keys(newProps.layers).forEach((key) => {
-      const newLayer = newProps.layers[key] || {};
-      const curFields = (segment.properties.layers[key] && segment.properties.layers[key].fields)
-        || [];
-      (newLayer.fields || []).forEach((f, idx) => {
-        const curIdx = findIndex(curFields, o => o.field === f.field);
-        if (curIdx >= 0) {
-          const curVal = segment.properties.layers[key].fields[curIdx].value;
-          const curType = typeof curVal;
-          if (['select', 'text', 'textarea', 'formula-field'].includes(newProps.layers[key].fields[idx].type)) {
-            newProps.layers[key].fields[idx].value = curType !== 'undefined' ? curVal.toString() : '';
-          }
-          if (newProps.layers[key].fields[idx].type === 'integer') {
-            newProps.layers[key].fields[idx].value = (curType === 'undefined' || curType === 'boolean' || isNaN(curVal)) ? 0 : parseInt(curVal, 10);
-          }
-          if (newProps.layers[key].fields[idx].type === 'checkbox') {
-            newProps.layers[key].fields[idx].value = curType !== 'undefined' ? toBool(curVal) : false;
-          }
-          if (newProps.layers[key].fields[idx].type === 'system-defined') {
-            const units = genUnits(newProps.layers[key].fields[idx].option_layers);
-            const vs = units.find(u =>
-              u.key === segment.properties.layers[key].fields[curIdx].value_system);
-            newProps.layers[key].fields[idx].value_system = (vs && vs.key) || units[0].key;
-            newProps.layers[key].fields[idx].value = toNum(curVal);
-          }
-          if (newProps.layers[key].fields[idx].type === 'input-group') {
-            if (segment.properties.layers[key].fields[curIdx].type !==
-              newProps.layers[key].fields[idx].type) {
-              newProps.layers[key].fields[idx].value = undefined;
-            } else {
-              const nSubs = newProps.layers[key].fields[idx].sub_fields || [];
-              const cSubs = segment.properties.layers[key].fields[curIdx].sub_fields || [];
-              const exSubs = [];
-              if (nSubs.length < 1) {
-                newProps.layers[key].fields[idx].value = undefined;
-              } else {
-                nSubs.forEach((nSub) => {
-                  const hitSub = cSubs.find(c => c.id === nSub.id) || {};
-                  if (nSub.type === 'label') { exSubs.push(nSub); }
-                  if (nSub.type === 'text') {
-                    if (hitSub.type === 'label') {
-                      exSubs.push(nSub);
-                    } else { exSubs.push({ ...nSub, value: (hitSub.value || '').toString() }); }
-                  }
-
-                  if (['number', 'system-defined'].includes(nSub.type)) {
-                    const nvl = (typeof hitSub.value === 'undefined' || hitSub.value == null || hitSub.value.length === 0) ? '' : toNum(hitSub.value);
-                    if (nSub.option_layers === hitSub.option_layers) {
-                      exSubs.push({ ...nSub, value: nvl, value_system: hitSub.value_system });
-                    } else {
-                      exSubs.push({ ...nSub, value: nvl });
-                    }
-                  }
-                });
-              }
-              newProps.layers[key].fields[idx].sub_fields = exSubs;
-            }
-          }
-          if (newProps.layers[key].fields[idx].type === 'upload') {
-            if (segment.properties.layers[key].fields[curIdx].type ===
-              newProps.layers[key].fields[idx].type) {
-              newProps.layers[key].fields[idx].value =
-              segment.properties.layers[key].fields[curIdx].value;
-            } else {
-              newProps.layers[key].fields[idx].value = {};
-            }
-          }
-          if (newProps.layers[key].fields[idx].type === 'table') {
-            if (segment.properties.layers[key].fields[curIdx].type !==
-              newProps.layers[key].fields[idx].type) {
-              newProps.layers[key].fields[idx].sub_values = [];
-            } else {
-              newProps.layers[key].fields[idx].sub_values =
-              organizeSubValues(
-                newProps.layers[key].fields[idx],
-                segment.properties.layers[key].fields[curIdx]
-              );
-            }
-          }
-        }
-      });
-    });
-    segment.properties = newProps;
-    segment.changed = true;
-    this.props.onChange(segment);
-  }
-
-  handleAddLayer(event, _layer) {
-    const { segment } = this.props;
-    const { selectedLayerKey } = this.state;
-    const layer = _layer;
-    const { layers } = segment.properties;
-    const sortedLayers = sortBy(layers, ['position', 'wf_position']);
-    const idx = sortedLayers.findIndex(e => e.key === selectedLayerKey);
-    // re-set added layer attributes
-    const selectedLayer = sortedLayers[idx];
-    layer.position = selectedLayer.position;
-    layer.wf_position = selectedLayer.wf_position + 1;
-    layer.wf = false;
-    layer.wf_uuid = null;
-    // layer is standard layer (from released)
-    const cnt = sortedLayers
-      .filter(e => e.key === layer.key || e.key.startsWith(`${layer.key}.`)).length;
-    if (cnt > 0) {
-      const origKey = layer.key;
-      layer.key = `${layer.key}.${cnt}`;
-      layer.fields = reformCondFields(layer, origKey);
-    }
-    // insert new layer
-    sortedLayers.splice(idx + 1, 0, layer);
-    // re-count wf_position
-    sortedLayers.filter(e => e.position === selectedLayer.position).map((e, ix) => {
-      const el = e;
-      el.wf_position = ix;
-      return el;
-    });
-    const ll = orgLayerObject(sortedLayers);
-    segment.properties.layers = ll;
-    this.setState(
-      { selectedLayerKey: layer.key, showViewLayer: false },
-      this.props.onChange(segment)
-    );
-  }
-
-  dropLayer(_source, _target) {
-    const { segment } = this.props;
-    const { layers } = segment.properties;
-    let sortedLayers = sortBy(layers, ['position', 'wf_position']);
-    // swap or move
-    const srcIdx = sortedLayers.findIndex(e => e.key === _source);
-    const tmpSrc = sortedLayers[srcIdx];
-    let tarIdx = sortedLayers.findIndex(e => e.key === _target);
-    if (Math.abs(srcIdx - tarIdx) === 1) {
-      sortedLayers = swapAryEls(sortedLayers, srcIdx, tarIdx);
-    } else {
-      // delete src
-      sortedLayers.splice(srcIdx, 1);
-      // keep tar
-      tarIdx = sortedLayers.findIndex(e => e.key === _target);
-      const tmpTar = sortedLayers[tarIdx];
-      // prepare new layer
-      tmpSrc.position = tmpTar.position;
-      tmpSrc.wf_position = (tmpTar.wf_position || 0) + 1;
-      // insert new layer
-      sortedLayers.splice(tarIdx + 1, 0, tmpSrc);
-    }
-    // re-count wf_position
-    sortedLayers.filter(e => e.position === tmpSrc.position).map((e, idx) => {
-      const el = e;
-      el.wf_position = idx;
-      return el;
-    });
-    const ll = orgLayerObject(sortedLayers);
-    segment.properties.layers = ll;
-    segment.changed = true;
-    this.props.onChange(segment);
-  }
-
-  removeLayer(elId, layer) {
-    const { segment } = this.props;
-    const { layers } = segment.properties;
-    const sortedLayers = sortBy(layers, ['position', 'wf_position']);
-    const selectedIdx = sortedLayers.findIndex(e => e.key === layer.key);
-    const selected = sortedLayers[selectedIdx];
-    sortedLayers.splice(selectedIdx, 1);
-    sortedLayers.filter(e => e.position === selected.position).map((e, idx) => {
-      const el = e;
-      el.wf_position = idx;
-      return el;
-    });
-    segment.properties.layers = orgLayerObject(sortedLayers);
-    segment.changed = true;
-    this.props.onChange(segment);
-  }
-
-  handleWFNext(event, layer) {
-    const value = event ? event.value : null;
-    if (value) {
-      const { segment } = this.props;
-      const { properties, properties_release } = segment;
-      // next step value if exists
-      let rmNeeded = false;
-      const preValue = properties.layers[`${layer}`].fields.find(e => e.field === '_wf_next').value;
-      if (value !== preValue) {
-        if (preValue && preValue !== '' && preValue !== value) {
-          rmNeeded = true;
-        }
-        const { flow } = properties_release;
-        const preLayer = properties.layers[`${layer}`];
-        // value is the next node's id
-        const nxLayer = getFlowLayer(flow, value, layer, preLayer.wf_position);
-        if (nxLayer) {
-          properties.layers = addToObject(properties.layers, layer, nxLayer);
-        }
-        if (rmNeeded) {
-          properties.layers = removeFromObject(properties.layers, layer, getWFNode(flow, preValue));
-        }
-        // update next step value
-        properties.layers[`${layer}`].fields.find(e => e.field === '_wf_next').value = value;
-        segment.properties = properties;
-        segment.changed = true;
-        // this.props.onChange(segment, () => renderFlowModal(segment, false));
-        this.props.onChange(segment); // cb move to e.g. SampleDetails.js
-      }
-    }
-  }
-
-  elementalPropertiesItem(segment) {
-    const layersLayout = LayersLayout(
-      segment.properties.layers,
-      segment.properties_release.select_options || {},
-      this.handleInputChange,
-      this.handleSubChange,
-      this.handleUnitClick,
-      [], 0, false, true
-    );
-    return (<div style={{ margin: '5px' }}>{layersLayout}</div>);
-  }
-
-  render() {
-    const { uiCtrl, segment } = this.props;
-    if (!uiCtrl || Object.keys(segment).length === 0) return null;
-    const { showViewLayer } = this.state;
-    const addLayerModal = (
-      <LayerModal
-        show={showViewLayer}
-        layers={cloneDeep(segment.properties_release.layers) || {}}
-        fnClose={this.setViewLayer}
-        fnAdd={this.handleAddLayer}
-      />
-    );
-    return (
-      <div>
-        <Panel>
-          <Panel.Body style={{ position: 'relative', minHeight: 260, overflowY: 'unset' }}>
-            {this.elementalPropertiesItem(segment)}
-          </Panel.Body>
-        </Panel>
-        {addLayerModal}
-      </div>
-    );
-  }
-}
-
-SegmentDetails.propTypes = {
-  uiCtrl: PropTypes.bool.isRequired,
-  segment: PropTypes.object,
-  klass: PropTypes.object,
-  onChange: PropTypes.func.isRequired,
-};
-
-SegmentDetails.defaultProps = { segment: {}, klass: {} };
-
-// export default DragDropContext(HTML5Backend)(SegmentDetails);
-export default SegmentDetails;

package/src/components/dnd/GenericElDropTarget.js

@@ -1,160 +0,0 @@
-/* eslint-disable no-unused-vars */
-/* 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/prop-types */
-/* eslint-disable no-restricted-globals */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { v4 as uuid } from 'uuid';
-import { DropTarget } from 'react-dnd';
-// import Aviator from 'aviator';
-import { Tooltip, OverlayTrigger, Popover } from 'react-bootstrap';
-// import UIStore from '../stores/UIStore';
-
-// const handleSampleClick = (type, id) => {
-//   const { currentCollection, isSync } = UIStore.getState();
-//   if (!isNaN(id)) type += `/${id}`;
-//   const collectionUrl = `${currentCollection.id}/${type}`;
-//   Aviator.navigate(isSync ? `/scollection/${collectionUrl}` : `/collection/${collectionUrl}`);
-// };
-
-// const handleElementClick = (type, id) => {
-//   const { currentCollection, isSync } = UIStore.getState();
-//   if (!isNaN(id)) type += `/${id}`;
-//   const collectionUrl = `${currentCollection.id}/${type}`;
-//   Aviator.navigate(isSync ? `/scollection/${collectionUrl}` : `/collection/${collectionUrl}`);
-// };
-
-const show = (opt, iconClass, onLink) => {
-  if (opt.value && opt.value.el_id) {
-    const tips = opt.value.el_tip && opt.value.el_tip.split('@@');
-    const tip1 = (tips && tips.length >= 1 && tips[0]) || '';
-    const tip2 = (tips && tips.length >= 2 && tips[1]) || '';
-    const tit = (<div>{tip1}<br />{tip2}</div>);
-    const pop = (
-      <Popover id="popover-svg" title={tit} style={{ maxWidth: 'none', maxHeight: 'none' }}>
-        <img src={opt.value.el_svg} style={{ height: '26vh', width: '26vh' }} alt="" />
-      </Popover>
-    );
-    let label = opt.value.el_label;
-    const simg = (path, tip, txt) => ((path && path !== '') ? (
-      <div className="s-img">
-        <OverlayTrigger trigger={['hover']} placement="left" rootClose onHide={null} overlay={pop}>
-          <img src={path} alt="" />
-        </OverlayTrigger>&nbsp;<span className="data">{txt}</span>
-      </div>
-    ) : (<OverlayTrigger placement="top" overlay={<Tooltip id={uuid()}>{tip1}<br />{tip2}</Tooltip>}><div className="data">{txt}</div></OverlayTrigger>));
-    if (opt.value.el_type === 'sample') {
-      if (opt.value.is_new !== true) {
-        label = (
-          // <a role="link"
-          // onClick={() => handleSampleClick(opt.value.el_type, opt.value.el_id)}
-          // style={{ cursor: 'pointer' }}>
-          <a role="link" onClick={() => onLink(opt.value.el_type, opt.value.el_id)} style={{ cursor: 'pointer' }}>
-            <span className="reaction-material-link">{label}</span>
-          </a>
-        );
-      }
-    }
-    if (opt.value.el_type === 'element') {
-      label = (
-        // <a role="link"
-        // onClick={() => handleElementClick(opt.value.el_klass, opt.value.el_id)}
-        // style={{ cursor: 'pointer' }}>
-        <a role="link" onClick={() => onLink(opt.value.el_klass, opt.value.el_id)} style={{ cursor: 'pointer' }}>
-          <i className={opt.value.icon_name} />&nbsp;
-          <span className="reaction-material-link">{label}</span>
-        </a>
-      );
-    }
-    return simg(opt.value.el_svg, opt.value.el_tip, label);
-  }
-  if (iconClass === 'element') {
-    return (<span className="fa fa-link icon_generic_nav indicator" />);
-  }
-  return (<span className={`icon-${iconClass} indicator`} />);
-};
-
-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_name_label,
-        el_tip: `${props.molecule.inchikey}@@${props.molecule.cano_smiles}`,
-      };
-    case 'sample':
-      return {
-        el_id: props.id,
-        is_new: true,
-        cr_opt: isAssoc === true ? 1 : 0,
-        isAssoc,
-        el_type: 'sample',
-        el_label: props.short_label,
-        el_tip: props.short_label
-      };
-    case 'element':
-      return {
-        el_id: props.id,
-        el_type: 'element',
-        icon_name: (props.element_klass && props.element_klass.icon_name) || '',
-        el_klass: props.type,
-        el_label: props.short_label,
-        el_tip: `${props.label}@@${props.name}`
-      };
-    default:
-      return {
-        el_id: props.id,
-        el_type: props.type,
-        el_label: props.short_label,
-        el_tip: props.short_label,
-      };
-  }
-};
-
-const dropTarget = {
-  drop(targetProps, monitor) {
-    const sourceProps = monitor.getItem().element;
-    const sourceTag = source(targetProps.opt.type.split('_')[1], sourceProps, targetProps.opt.id);
-    targetProps.onDrop(sourceTag);
-  },
-  canDrop(_targetProps, _monitor) {
-    return true;
-  },
-};
-
-const dropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-class GenericElDropTarget extends Component {
-  render() {
-    const {
-      connectDropTarget, isOver, canDrop, opt, onLink
-    } = this.props;
-    const iconClass = (opt.dndItems && opt.dndItems[0] === 'molecule' ? 'sample' : opt.dndItems[0]);
-    const className = `target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
-    return connectDropTarget(<div className={className}>{show(opt, iconClass, onLink)}</div>);
-  }
-}
-
-export default
-DropTarget(props => props.opt.dndItems, dropTarget, dropCollect)(GenericElDropTarget);
-
-GenericElDropTarget.propTypes = {
-  connectDropTarget: PropTypes.func.isRequired,
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-};

package/src/components/dnd/GridDnD.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { DragSource, DropTarget } from 'react-dnd';
-import { compose } from 'redux';
-
-const orderSource = {
-  beginDrag(props) {
-    const { field, rowValue } = props;
-    return { fid: field, rId: rowValue.id };
-  },
-};
-
-const orderTarget = {
-  drop(props, monitor) {
-    const { field, rowValue, handleMove } = props;
-    const tar = { fid: field, rId: rowValue.id };
-    const src = monitor.getItem();
-    if (tar.fid === src.fid && tar.rId !== src.rId) handleMove(src.rId, tar.rId);
-  },
-};
-
-const orderDragCollect = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-const orderDropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop(),
-});
-
-const GridDnD = ({
-  connectDragSource, connectDropTarget, isDragging, isOver, canDrop,
-}) => {
-  const className = `generic_grid_dnd${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}${isDragging ? ' is-dragging' : ''}`;
-  return compose(connectDragSource, connectDropTarget)(<div className={className}><div className="dnd-btn"><span className="text-info fa fa-arrows" /></div></div>);
-};
-
-export default compose(
-  DragSource(s => s.type, orderSource, orderDragCollect),
-  DropTarget(s => s.type, orderTarget, orderDropCollect)
-)(GridDnD);

package/src/components/dnd/PanelDnD.js

@@ -1,85 +0,0 @@
-/* eslint-disable max-len */
-import React from 'react';
-import { DragSource, DropTarget } from 'react-dnd';
-import { compose } from 'redux';
-import { Panel, ButtonGroup, OverlayTrigger, Tooltip, Button } from 'react-bootstrap';
-import { v4 as uuid } from 'uuid';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-const orderSource = {
-  canDrag(props) {
-    return !props.layer.wf;
-  },
-  beginDrag(props) {
-    const { layer, field, rowValue } = props;
-    return { wf: layer.wf, fid: field, rId: rowValue.id };
-  },
-};
-
-const orderTarget = {
-  canDrop(props, monitor) {
-    const src = monitor.getItem();
-    return !props.layer.wf || !src.wf;
-  },
-  drop(props, monitor) {
-    const {
-      layer, field, rowValue, handleMove
-    } = props;
-    const tar = { wf: layer.wf, fid: field, rId: rowValue.id };
-    const src = monitor.getItem();
-    if (tar.fid === src.fid && tar.rId !== src.rId) handleMove(src.rId, tar.rId);
-  },
-};
-
-const orderDragCollect = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-const orderDropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop(),
-});
-
-const PanelDnD = ({
-  connectDragSource, connectDropTarget, isDragging, isOver, canDrop,
-  layer, id, handleChange, bs
-}) => {
-  const className = `generic_grid_dnd${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}${isDragging ? ' is-dragging' : ''}`;
-  const {
-    style, label, wf, key
-  } = layer;
-  const klz = (style || 'panel_generic_heading').replace('panel_generic_heading', 'panel_generic_heading_slim');
-  const btnAdd = (
-    <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id="_tooltip_add_layer">add layer</Tooltip>}>
-      <Button bsSize="xsmall" onClick={event => handleChange(event, id, layer, 'layer-modal')}><FontAwesomeIcon icon="fas fa-plus" /></Button>
-    </OverlayTrigger>
-  );
-  const btnRemove = (
-    <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id="_tooltip_remove_layer">remove layer</Tooltip>}>
-      <Button bsSize="xsmall" onClick={event => handleChange(event, id, layer, 'layer-remove')}><FontAwesomeIcon icon="fas fa-minus" /></Button>
-    </OverlayTrigger>
-  );
-  const wfIcon = wf ? (<span>&nbsp;<FontAwesomeIcon icon="fas fa-sitemap" /></span>) : null;
-  const moveIcon = (
-    <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid()}>drag and drop to move position</Tooltip>}>
-      <Button onClick={() => {}} bsSize="xsmall"><FontAwesomeIcon icon="fas fa-arrows-alt" /></Button>
-    </OverlayTrigger>);
-  const btnLayer = wf ? (<ButtonGroup className="pull-right" >{btnAdd}</ButtonGroup>) : (<ButtonGroup className="pull-right" >{btnAdd}{btnRemove}{moveIcon}</ButtonGroup>);
-  const extHead = (/\./g.test(key)) ? <>({key}{wfIcon})</> : null;
-  const panelHeader = (
-    <Panel.Heading className={klz}>
-      <Panel.Title toggle style={{ float: 'left', lineHeight: 'normal' }}>{label}&nbsp;{extHead}</Panel.Title>{btnLayer}
-      <div className="clearfix" />
-    </Panel.Heading>
-  );
-  const panelHColor = bs !== 'none' ? `panel-${bs}` : '';
-  const dndKlz = wf ? `dnd-none ${panelHColor}` : `dnd ${panelHColor}`;
-  return compose(connectDragSource, connectDropTarget)(<div className={className}><div className={dndKlz}>{panelHeader}</div></div>);
-};
-
-export default compose(
-  DragSource(s => s.type, orderSource, orderDragCollect),
-  DropTarget(s => s.type, orderTarget, orderDropCollect)
-)(PanelDnD);