chem-generic-ui 0.1.36 → 0.1.39

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, InputGroup, 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>}>
+        <InputGroup.Radio
+          name={`dropS_${rUUID}`}
+          disabled={fValue.isAssoc}
+          checked={fValue.cr_opt === 0}
+          onChange={() => onChange({ node, subField: sField, crOpt: 0 })}
+        >
+          Current
+        </InputGroup.Radio>
+      </OverlayTrigger>
+      <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid()}>split from the sample first and then associate with it</Tooltip>}>
+        <InputGroup.Radio
+          name={`dropS_${rUUID}`}
+          checked={fValue.cr_opt === 1}
+          onChange={() => onChange({ node, subField: sField, crOpt: 1 })}
+        >
+          Split
+        </InputGroup.Radio>
+      </OverlayTrigger>
+      <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid()}>duplicate the sample first and then associate with it</Tooltip>}>
+        <InputGroup.Radio
+          name={`dropS_${rUUID}`}
+          checked={fValue.cr_opt === 2}
+          onChange={() => onChange({ node, subField: sField, crOpt: 2 })}
+        >
+          Copy
+        </InputGroup.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;

package/src/components/table/TableRecord.js

@@ -0,0 +1,254 @@
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-empty */
+/* eslint-disable react/forbid-prop-types */
+import PropTypes from 'prop-types';
+import React from 'react';
+import Numeral from 'numeral';
+import GenericSubField from '../models/GenericSubField';
+import { AddRowBtn, DelRowBtn, DnDRowBtn, NullRowBtn } from './GridBtn';
+import { ColumnHeader, ColumnRow, NoRow } from './GridEntry';
+import UConverterRenderer from './UConverterRenderer';
+import { genUnits, unitConversion, molOptions, samOptions } from '../tools/utils';
+import DropRenderer from './DropRenderer';
+import DropTextRenderer from './DropTextRenderer';
+import DropLinkRenderer from './DropLinkRenderer';
+import SampOption from './SamOption';
+import DragDropItemTypes from '../dnd/DragDropItemTypes';
+import SelectRenderer from './SelectRenderer';
+
+export default class TableRecord extends React.Component {
+  constructor(props) {
+    super(props);
+    this.delRow = this.delRow.bind(this);
+    this.addRow = this.addRow.bind(this);
+    this.moveRow = this.moveRow.bind(this);
+    this.onCellChange = this.onCellChange.bind(this);
+    this.onSelectClick = this.onSelectClick.bind(this);
+    this.onUnitClick = this.onUnitClick.bind(this);
+    this.onDrop = this.onDrop.bind(this);
+    this.onChk = this.onChk.bind(this);
+    this.getColumns = this.getColumns.bind(this);
+  }
+
+  onCellChange(params) {
+    const { e, columnDef, rowValue } = params;
+    const newValue = e.target.value;
+    const oldValue = rowValue[columnDef.field].value;
+    if (oldValue === newValue) return;
+    if (columnDef.type === 'text') {
+      rowValue[columnDef.field] = newValue;
+    }
+    if (columnDef.type === 'system-defined') {
+      if (isNaN(newValue)) return;
+      rowValue[columnDef.field].value = Numeral(newValue).value();
+    }
+    const { opt } = this.props;
+    const subVals = opt.f_obj.sub_values || [];
+    const idx = subVals.findIndex(s => s.id === rowValue.id);
+    subVals.splice(idx, 1, rowValue);
+    opt.f_obj.sub_values = subVals;
+    opt.onSubChange(0, 0, opt.f_obj, true);
+  }
+
+  onSelectClick(e, subField, node) {
+    const { data } = node;
+    const { opt } = this.props;
+    const subVals = opt.f_obj.sub_values || [];
+    const subVal = subVals.find(s => s.id === data.id);
+    subVal[subField.id] = { value: e ? e.value : '' };
+    const idx = subVals.findIndex(s => s.id === data.id);
+    subVals.splice(idx, 1, subVal);
+    opt.f_obj.sub_values = subVals;
+    opt.onSubChange(subField, subField.id, opt.f_obj, true);
+  }
+
+  onUnitClick(subField, node) {
+    const { data } = node;
+    const { opt } = this.props;
+    const subVals = opt.f_obj.sub_values || [];
+    const subVal = subVals.find(s => s.id === data.id);
+    const units = genUnits(subField.option_layers);
+    let uIdx = units.findIndex(u => u.key === subVal[subField.id].value_system);
+    if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
+    const vs = units.length > 0 ? units[uIdx].key : '';
+    const v = unitConversion(subField.option_layers, vs, subVal[subField.id].value);
+    subVal[subField.id] = { value: v, value_system: vs };
+    const idx = subVals.findIndex(s => s.id === data.id);
+    subVals.splice(idx, 1, subVal);
+    opt.f_obj.sub_values = subVals;
+    opt.onSubChange(subField, subField.id, opt.f_obj, true);
+  }
+
+  onDrop(targetProps, targetOpt) {
+    const { opt } = this.props;
+    const subField = targetOpt.sField;
+    const subVals = opt.f_obj.sub_values || [];
+    const subVal = subVals.find(s => s.id === targetOpt.data.id);
+    subVal[subField.id] = { value: targetProps };
+    const idx = subVals.findIndex(s => s.id === targetOpt.data.id);
+    subVals.splice(idx, 1, subVal);
+    opt.f_obj.sub_values = subVals;
+    opt.onSubChange(subField, subField.id, opt.f_obj, true);
+  }
+
+  onChk(params) {
+    const { node, subField, crOpt } = params;
+    const { opt } = this.props;
+    const subVals = opt.f_obj.sub_values || [];
+    const subVal = subVals.find(s => s.id === node.data.id);
+    node.data[subField.id].value.cr_opt = crOpt;
+    subVal[subField.id] = { value: node.data[subField.id].value };
+    const idx = subVals.findIndex(s => s.id === node.data.id);
+    subVals.splice(idx, 1, subVal);
+    opt.f_obj.sub_values = subVals;
+    opt.onSubChange(subField, subField.id, opt.f_obj, true);
+  }
+
+  getColumns() {
+    const { opt } = this.props;
+    const { selectOptions } = opt;
+    const sValues = (opt.f_obj.sub_values || []);
+    let columnDefs = [];
+    (opt.f_obj.sub_fields || []).forEach((sF) => {
+      let colDef = {
+        type: sF.type, headerName: sF.col_name, field: sF.id
+      };
+      const colDefExt = [];
+      if (sF.type === 'text') {
+        colDef = Object.assign({}, colDef, {
+          editable: true, onCellChange: this.onCellChange
+        });
+      }
+      if (sF.type === 'select') {
+        let sOptions =
+          (selectOptions[sF.option_layers] && selectOptions[sF.option_layers].options) || [];
+        sOptions = sOptions.map(op => ({ value: op.key, name: op.key, label: op.label }));
+        const cellParams = { sField: sF, onChange: this.onSelectClick, sOptions };
+        colDef = Object.assign({}, colDef, {
+          cellRenderer: SelectRenderer, cellParams, onCellChange: this.onCellChange
+        });
+      }
+      if (sF.type === 'system-defined') {
+        const cellParams = { sField: sF, onChange: this.onUnitClick };
+        colDef = Object.assign({}, colDef, {
+          cellRenderer: UConverterRenderer, cellParams, onCellChange: this.onCellChange
+        });
+      }
+      if (sF.type === 'drag_molecule') {
+        const cellParams = { sField: sF, opt, onChange: this.onDrop };
+        colDef = Object.assign({}, colDef, {
+          cellRenderer: DropRenderer, cellParams, onCellChange: this.onCellChange, width: '5vw'
+        });
+        const conf = ((sF.value || '').split(';') || []);
+        conf.forEach((c) => {
+          const attr = molOptions.find(m => m.value === c);
+          if (attr) {
+            const ext = {
+              colId: c, editable: false, type: 'text', headerName: attr.label, cellRenderer: DropTextRenderer, cellParams: { attr, sField: sF }
+            };
+            colDefExt.push(ext);
+          }
+        });
+      }
+      if (sF.type === 'drag_sample') {
+        const sOpt = sValues.filter(o => o[sF.id] && o[sF.id].value && o[sF.id].value.is_new);
+        const cellParams = { sField: sF, opt, onChange: this.onDrop };
+        colDef = Object.assign({}, colDef, {
+          cellRenderer: DropRenderer, cellParams, onCellChange: this.onCellChange, width: '5vw'
+        });
+        const addOption = {
+          colId: 'sam_option', editable: false, type: 'text', headerName: '', cellRenderer: SampOption, cellParams: { sField: sF, onChange: this.onChk }, width: '3vw'
+        };
+        if (sOpt.length > 0) colDefExt.push(addOption);
+        const addLink = {
+          colId: 'sam_link', editable: false, type: 'text', headerName: 'Short label', cellRenderer: DropLinkRenderer, cellParams: { sField: sF }, width: '5vw'
+        };
+        colDefExt.push(addLink);
+        const conf = ((sF.value || '').split(';') || []);
+        conf.forEach((c) => {
+          const attr = samOptions.find(m => m.value === c);
+          if (attr) {
+            const ext = {
+              colId: c, editable: false, type: 'text', headerName: attr.label, cellRenderer: DropTextRenderer, cellParams: { attr, sField: sF }
+            };
+            colDefExt.push(ext);
+          }
+        });
+      }
+      columnDefs.push(colDef);
+      if (colDefExt.length > 0) columnDefs = columnDefs.concat(colDefExt);
+    });
+    const act = {
+      type: 'button',
+      headerName: '',
+      colId: opt.f_obj.field,
+      headerComponent: AddRowBtn,
+      headerParams: { addRow: this.addRow },
+      cellRenderer: DelRowBtn,
+      cellParams: { delRow: this.delRow },
+      width: 'unset',
+    };
+    columnDefs.splice(0, 0, act);
+    const dtype = `${DragDropItemTypes.GENERIC_GRID}_${opt.layer.key}_${opt.f_obj.field}`;
+    const move = {
+      type: 'dnd',
+      field: opt.f_obj.field,
+      headerName: '',
+      colId: `${opt.f_obj.field}_dnd`,
+      headerComponent: NullRowBtn,
+      cellRenderer: DnDRowBtn,
+      cellParams: { moveRow: this.moveRow, field: opt.f_obj.field, type: dtype },
+      width: 'unset',
+    };
+    columnDefs.splice(0, 0, move);
+    return columnDefs;
+  }
+
+  moveRow(source, target) {
+    const { opt } = this.props;
+    const alles = opt.f_obj.sub_values;
+    const sid = alles.findIndex(e => e.id === source);
+    const tid = alles.findIndex(e => e.id === target);
+    const temp = alles[sid];
+    alles[sid] = alles[tid];
+    alles[tid] = temp;
+    opt.onSubChange(0, 0, opt.f_obj, true);
+  }
+
+  delRow(rowData) {
+    const { opt } = this.props;
+    opt.f_obj.sub_values = opt.f_obj.sub_values.filter(s => s.id !== rowData.id);
+    opt.onSubChange(0, 0, opt.f_obj, true);
+  }
+
+  addRow() {
+    const { opt } = this.props;
+    const subFields = opt.f_obj.sub_fields || [];
+    const newSub = new GenericSubField();
+    subFields.map((e) => {
+      if (e.type === 'text') return Object.assign(newSub, { [e.id]: '' });
+      return Object.assign(newSub, { [e.id]: { value: '', value_system: e.value_system } });
+    });
+    opt.f_obj.sub_values = opt.f_obj.sub_values || [];
+    opt.f_obj.sub_values.push(newSub);
+    opt.onSubChange(0, 0, opt.f_obj, true);
+  }
+
+  render() {
+    const { opt } = this.props;
+    if (opt.isSearchCriteria) return (<div>(This is a table)</div>);
+    if ((opt.f_obj.sub_fields || []).length < 1) return null;
+    const columnDefs = this.getColumns();
+    return (
+      <div>
+        {ColumnHeader(columnDefs)}
+        <div>{NoRow(opt.f_obj.sub_values)}</div>
+        <div>{(opt.f_obj.sub_values || []).map(s => ColumnRow(columnDefs, s))}</div>
+      </div>
+    );
+  }
+}
+
+TableRecord.propTypes = {
+  opt: PropTypes.object.isRequired,
+};

package/src/components/table/UConverterRenderer.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+import { genUnit, genUnitSup } from '../tools/utils';
+
+const UConverterRenderer = (props) => {
+  const { sField, onChange, node } = props;
+  if (sField.type !== 'system-defined') return null;
+  const { data } = node;
+  return (
+    <Button key={`ucr_${data.id}`} active onClick={() => onChange(sField, node)} variant="success">
+      {genUnitSup(genUnit(sField.option_layers, data[sField.id].value_system).label) || ''}
+    </Button>
+  );
+};
+
+UConverterRenderer.propTypes = {
+  sField: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  node: PropTypes.object.isRequired
+};
+
+export default UConverterRenderer;

package/src/components/tools/collate.js

@@ -0,0 +1,65 @@
+import { cloneDeep } from 'lodash';
+import { unitConversion } from './utils';
+import GenericSubField from '../models/GenericSubField';
+
+const collateValues = (currentFields, previousFields, previousValues) => {
+  const result = [];
+  let newSub = new GenericSubField();
+  currentFields.map(e => Object.assign(newSub, { [e.id]: '' }));
+  const currentValuKeys = Object.keys(newSub);
+  const previousValueKeys = Object.keys(previousValues[0]);
+  const notInCurrent = previousValueKeys.filter(e => !currentValuKeys.includes(e));
+  const currObj = {};
+  currentFields.map((c) => {
+    if (c.type === 'text') return Object.assign(currObj, { [c.id]: '' });
+    return Object.assign(currObj, { [c.id]: { value: '', value_system: c.value_system } });
+  });
+  previousValues.forEach((e) => {
+    newSub = new GenericSubField();
+    Object.assign(newSub, currObj, e);
+    notInCurrent.forEach(c => delete newSub[c]);
+    previousValueKeys.forEach((preKey) => {
+      if (newSub[preKey] === undefined || preKey === 'id') return;
+      const curr = currentFields.find(f => f.id === preKey);
+      const prev = previousFields.find(f => f.id === preKey);
+      if (curr.type === 'drag_molecule') {
+        if (['text', 'system-defined', 'drag_sample'].includes(prev.type)) {
+          newSub[preKey] = { value: undefined };
+        }
+      }
+      if (curr.type === 'text') {
+        if (prev.type === 'system-defined') {
+          newSub[preKey] = newSub[preKey].value;
+        }
+        if (['drag_molecule', 'drag_sample'].includes(prev.type)) {
+          newSub[preKey] = '';
+        }
+      }
+      if (curr.type === 'system-defined') {
+        if (prev.type === 'system-defined' && (curr.option_layers !== prev.option_layers)) {
+          newSub[preKey].value_system = curr.value_system;
+        }
+        if (['text', 'drag_molecule', 'drag_sample'].includes(prev.type)) {
+          newSub[preKey] = { value: '', value_system: curr.value_system };
+        }
+        newSub[preKey].value =
+        unitConversion(curr.option_layer, newSub[preKey].value_system, newSub[preKey].value);
+      }
+    });
+    result.push(newSub);
+  });
+  return result;
+};
+
+const organizeSubValues = (cur, pre) => {
+  const currentFields = cloneDeep(cur.sub_fields || []);
+  const previousFields = cloneDeep(pre.sub_fields || []);
+  const previousValues = cloneDeep(pre.sub_values || []);
+  if (currentFields.length < 1 ||
+    previousFields.length < 1 || previousValues.length < 1) {
+    return [];
+  }
+  return collateValues(currentFields, previousFields, previousValues);
+};
+
+export default organizeSubValues;

package/src/components/tools/orten.js

@@ -0,0 +1,171 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable import/prefer-default-export */
+import { cloneDeep, sortBy } from 'lodash';
+import { v4 as uuid } from 'uuid';
+
+const getWFNode = (_flow, nodeId) => _flow.elements.filter(e => e.id === nodeId)[0];
+
+// full-flow, node id
+const getFlowLayer = (templateFlow, nodeId, sourceLayer, sIdx) => {
+  const flow = cloneDeep(templateFlow);
+  const nd = flow.elements.filter(e => e.id === nodeId); // fetch node
+  if (nd.length < 1) return null;
+  const { layer } = nd[0].data;
+  const ls = flow.elements.filter(e => e.animated); // lines
+  const ns = flow.elements.filter(e => e.type === 'default' && e.data); // nodes - Start - End
+  const ndNs = ls.filter(e => e.source === nodeId).map(e => e.target); // next nodes' id
+  const wfOpts = ns.filter(n => ndNs.includes(n.id)).map(e => ({ key: e.id, label: `${e.data.layer.label}(${e.data.layer.key})` })); // next nodes
+  if (wfOpts.length > 0) {
+    const position = (layer.fields || []).length + 1;
+    layer.fields.push({
+      type: 'wf-next', default: '', field: '_wf_next', label: 'Next', required: false, sub_fields: [], text_sub_fields: [], position, wf_options: wfOpts
+    });
+  }
+  layer.wf_info = { node_id: nodeId, source_layer: sourceLayer };
+  layer.wf_position = sIdx + 1;
+  return layer;
+};
+
+const orgLayerObject = (_layers = []) => {
+  const layers = _layers;
+  return layers.reduce((alles, name) => {
+    const all = alles;
+    const ok = Object.keys(all);
+    if (ok.includes(name.key)) {
+      const cnt = ok.filter(e => e === name.key || e.startsWith(`${name.key}.`)).length;
+      const nName = `${name.key}.${cnt}`;
+      name.key = nName;
+      all[nName] = name;
+    } else {
+      all[name.key] = name;
+    }
+    return all;
+  }, {});
+};
+
+const reformCondFields = (_layer, _oKey) => {
+  const layer = _layer;
+  layer.fields.map((_f) => {
+    const f = _f;
+    let conds = f.cond_fields;
+    // no cond_fields
+    if (!conds || conds.length < 1 || conds.filter(o => !o.field || o.field === '').length === conds.length) return f;
+    conds = conds.filter(o => o.layer === _oKey);
+    // no same layer, remove cond_fields
+    if (conds.length < 1) {
+      delete f.cond_fields;
+      return f;
+    }
+    // rename layer
+    conds = conds.map((o) => {
+      const n = o;
+      n.layer = layer.key;
+      return n;
+    });
+    f.cond_fields = conds;
+    return f;
+  });
+  return layer.fields;
+};
+
+const addToObject = (obj, key, addAfter) => {
+  const temp = {};
+  const ok = Object.keys(obj);
+  Object.keys(obj).forEach((e) => {
+    if (Object.prototype.hasOwnProperty.call(obj, e)) {
+      temp[e] = obj[e];
+      if (e === key) {
+        const srcPosition = temp[e].position;
+        const cnt = ok.filter(o => o === addAfter.key || o.startsWith(`${addAfter.key}.`)).length;
+        if (cnt === 0) {
+          temp[addAfter.key] = addAfter;
+          temp[addAfter.key].position = srcPosition;
+        } else {
+          const oKey = addAfter.key;
+          temp[`${addAfter.key}.${cnt}`] = addAfter;
+          temp[`${addAfter.key}.${cnt}`].position = srcPosition;
+          temp[`${addAfter.key}.${cnt}`].key = `${addAfter.key}.${cnt}`;
+          temp[addAfter.key].fields = reformCondFields(addAfter, oKey);
+        }
+      }
+    }
+  });
+  if (Object.keys(obj).length === 0) temp[addAfter.key] = addAfter;
+  return temp;
+};
+
+const traverseToRemove = (layers, rmKey) => {
+  let rms = [];
+  Object.keys(layers).forEach((e) => {
+    if (Object.prototype.hasOwnProperty.call(layers, e)) {
+      if (layers[e].key === rmKey) rms = rms.concat(rmKey);
+      else if (layers[e].wf_info && (layers[e].wf_info.source_layer === rmKey)) {
+        rms = rms.concat(traverseToRemove(layers, layers[e].key));
+      }
+    }
+  });
+  return rms;
+};
+
+const removeFromObject = (_propertiesLayers = {}, srcLayer = '', rmNode = {}) => {
+  const layers = _propertiesLayers;
+  const rmLayer = rmNode.data && rmNode.data.layer ? rmNode.data.layer.key : null;
+  if (!rmLayer) return [];
+  let rms = [];
+  Object.keys(layers).forEach((e) => {
+    if (Object.prototype.hasOwnProperty.call(layers, e)) {
+      const wf = layers[e].wf_info;
+      if (wf && (wf.source_layer === srcLayer) && (wf.node_id === rmNode.id)) {
+        rms = rms.concat(traverseToRemove(layers, layers[e].key));
+      }
+    }
+  });
+  rms.forEach(e => delete layers[e]);
+  return layers;
+};
+
+const buildInitWF = (template) => {
+  const orig = cloneDeep(template);
+  const { layers, flow } = orig;
+  const sortedLayers = sortBy(layers, l => l.position);
+  if (flow && flow.elements.filter(e => !['input', 'output'].includes(e.type).length > 0)) {
+    // id = 1 Start, id = 2 End
+    const nls = flow.elements; // nodes + lines
+    const ls = nls.filter(e => e.animated); // lines
+    const ns = nls.filter(e => e.type === 'default' && e.data); // nodes - Start - End
+    const nNs = ls.filter(e => e.source === '1').map(e => e.target); // get target ids from Start
+    const nextNodes = ns.filter(n => nNs.includes(n.id)); // target nodes
+    const result = [];
+    sortedLayers.forEach((sortedLayer) => {
+      const fLayer = sortedLayer;
+      if (fLayer.wf) {
+        const position = (fLayer.fields || []).length + 1;
+        const passen = nextNodes.filter(n => n.data.layer.key === fLayer.key);
+        passen.forEach((pas) => {
+          const nextOptions =
+          ls.filter(e => e.source === pas.id && e.source !== e.target).map(e => e.target);
+          const wfOpts = ns.filter(n => nextOptions.includes(n.id)).map(e => ({ key: e.id, label: `${e.data.layer.label}(${e.data.layer.key})` })); // next nodes
+          fLayer.fields.push({
+            type: 'wf-next', default: '', field: '_wf_next', label: 'Next', required: false, sub_fields: [], text_sub_fields: [], position, wf_options: wfOpts
+          });
+          fLayer.wf_info = { node_id: pas.id };
+          fLayer.wf_position = 1;
+          fLayer.wf_uuid = uuid();
+          result.push(fLayer);
+        });
+      } else {
+        result.push(fLayer);
+      }
+    });
+    const ll = orgLayerObject(result);
+    orig.layers = ll;
+  } else {
+    orig.layers = layers;
+  }
+  return orig;
+};
+
+export {
+  getWFNode, getFlowLayer, orgLayerObject,
+  addToObject, removeFromObject, reformCondFields, buildInitWF
+};