chem-generic-ui 0.1.12 → 0.1.13

package/dist/app.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "ElementManager", {
     return _ElementManager.default;
   }
 });
+Object.defineProperty(exports, "GenDSMisType", {
+  enumerable: true,
+  get: function get() {
+    return _GenDSMisType.default;
+  }
+});
 Object.defineProperty(exports, "GenPropertiesNumber", {
   enumerable: true,
   get: function get() {
@@ -22,8 +28,52 @@ Object.defineProperty(exports, "GenPropertiesText", {
   }
 });
 
+var _fontawesomeSvgCore = require("@fortawesome/fontawesome-svg-core");
+
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
+var _freeRegularSvgIcons = require("@fortawesome/free-regular-svg-icons");
+
 var _ElementManager = _interopRequireDefault(require("./components/admin/ElementManager"));
 
+var _GenDSMisType = _interopRequireDefault(require("./components/fields/GenDSMisType"));
+
 var _GenPropertiesText = require("./components/fields/GenPropertiesText");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import React, { useState, useEffect } from 'react';
+// import logo from './logo.svg';
+// import 'bootstrap/dist/css/bootstrap.min.css';
+// import { ElementManager, GenPropertiesText } from './components/admin/ElementManager';
+_fontawesomeSvgCore.library.add(_freeSolidSvgIcons.fas, _freeRegularSvgIcons.far); // export { GenPropertiesNumber, GenPropertiesText };
+// function App() {
+//   return (
+//     <div className="App">
+//       <header className="App-header">
+//         <img src={logo} className="App-logo" alt="logo" />
+//         <p>
+//           Edit <code>src/App.js</code> and save to reload.
+//         </p>
+//         <a
+//           className="App-link"
+//           href="https://reactjs.org"
+//           target="_blank"
+//           rel="noopener noreferrer"
+//         >
+//           Learn React
+//         </a>
+//       </header>
+//     </div>
+//   );
+// }
+// export { ElementManager, GenPropertiesText };
+// function App() {
+//   return (
+//     <div>
+//       Project A
+//       <ElementManager />
+//     </div>
+//   );
+// }
+// export default App;

package/dist/components/details/GenDSDetails.js

@@ -0,0 +1,278 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lodash = require("lodash");
+
+var _reactBootstrap = require("react-bootstrap");
+
+var _utils = require("../tools/utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var GenericDSDetails = /*#__PURE__*/function (_Component) {
+  _inherits(GenericDSDetails, _Component);
+
+  var _super = _createSuper(GenericDSDetails);
+
+  function GenericDSDetails(props) {
+    var _this;
+
+    _classCallCheck(this, GenericDSDetails);
+
+    _this = _super.call(this, props);
+    _this.handleInputChange = _this.handleInputChange.bind(_assertThisInitialized(_this));
+    _this.handleUnitClick = _this.handleUnitClick.bind(_assertThisInitialized(_this));
+    _this.handleReload = _this.handleReload.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(GenericDSDetails, [{
+    key: "handleInputChange",
+    value: function handleInputChange(event, field, layer) {
+      var type = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'text';
+      var genericDS = this.props.genericDS;
+      var properties = genericDS.properties;
+      var value = '';
+
+      switch (type) {
+        case 'checkbox':
+          value = event.target.checked;
+          break;
+
+        case 'select':
+          value = event ? event.value : null;
+          break;
+
+        case 'formula-field':
+          if (event.target) {
+            value = event.target.value;
+          } else {
+            value = event;
+          }
+
+          break;
+
+        case 'integer':
+          value = event.target.value;
+          value = Math.trunc(value);
+          break;
+
+        default:
+          value = event.target.value;
+      }
+
+      properties.layers["".concat(layer)].fields.find(function (e) {
+        return e.field === field;
+      }).value = value;
+
+      if (type === 'system-defined' && (!properties.layers["".concat(layer)].fields.find(function (e) {
+        return e.field === field;
+      }).value_system || properties.layers["".concat(layer)].fields.find(function (e) {
+        return e.field === field;
+      }).value_system === '')) {
+        var opt = properties.layers["".concat(layer)].fields.find(function (e) {
+          return e.field === field;
+        }).option_layers;
+        properties.layers["".concat(layer)].fields.find(function (e) {
+          return e.field === field;
+        }).value_system = (0, _utils.genUnits)(opt)[0].key;
+      }
+
+      genericDS.properties = properties;
+      genericDS.changed = true;
+      this.props.onChange('dataset', {
+        target: {
+          value: genericDS
+        }
+      });
+    }
+  }, {
+    key: "handleUnitClick",
+    value: function handleUnitClick(layer, obj) {
+      var genericDS = this.props.genericDS;
+      var properties = genericDS.properties;
+      var newVal = (0, _utils.unitConversion)(obj.option_layers, obj.value_system, obj.value);
+      properties.layers["".concat(layer)].fields.find(function (e) {
+        return e.field === obj.field;
+      }).value_system = obj.value_system;
+      properties.layers["".concat(layer)].fields.find(function (e) {
+        return e.field === obj.field;
+      }).value = newVal;
+      genericDS.properties = properties;
+      genericDS.changed = true;
+      this.props.onChange('dataset', {
+        target: {
+          value: genericDS
+        }
+      });
+    }
+  }, {
+    key: "handleReload",
+    value: function handleReload() {
+      var _this$props = this.props,
+          klass = _this$props.klass,
+          genericDS = _this$props.genericDS;
+
+      if (klass.properties_release) {
+        var newProps = (0, _lodash.cloneDeep)(klass.properties_release);
+        newProps.klass_uuid = klass.uuid;
+        Object.keys(newProps.layers).forEach(function (key) {
+          var newLayer = newProps.layers[key] || {};
+          var curFields = genericDS.properties.layers[key] && genericDS.properties.layers[key].fields || [];
+          (newLayer.fields || []).forEach(function (f, idx) {
+            var curIdx = (0, _lodash.findIndex)(curFields, function (o) {
+              return o.field === f.field;
+            });
+
+            if (curIdx >= 0) {
+              var curVal = genericDS.properties.layers[key].fields[curIdx].value;
+
+              var 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' ? (0, _utils.toBool)(curVal) : false;
+              }
+
+              if (newProps.layers[key].fields[idx].type === 'system-defined') {
+                var units = (0, _utils.genUnits)(newProps.layers[key].fields[idx].option_layers);
+                var vs = units.find(function (u) {
+                  return u.key === genericDS.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 = (0, _utils.toNum)(curVal);
+              }
+            }
+          });
+        });
+        genericDS.properties = newProps;
+        genericDS.dataset_klass_id = klass.id;
+        genericDS.klass_ols = klass.ols_term_id;
+        genericDS.klass_label = klass.label;
+        genericDS.changed = true;
+        this.props.onChange('dataset', {
+          target: {
+            value: genericDS
+          }
+        });
+      } else {
+        this.props.onChange('dataset', {
+          target: {
+            value: undefined
+          }
+        });
+      }
+    } // elementalPropertiesItem(genericDS, klass) {
+    //   const layersLayout = LayersLayout(
+    //     genericDS.properties.layers,
+    //     (klass.properties_release && klass.properties_release.select_options) || {},
+    //     this.handleInputChange,
+    //     () => {},
+    //     this.handleUnitClick
+    //   );
+    //   return (<div style={{ margin: '5px' }}>{layersLayout}</div>);
+    // }
+
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          uiCtrl = _this$props2.uiCtrl,
+          genericDS = _this$props2.genericDS,
+          klass = _this$props2.klass,
+          kind = _this$props2.kind;
+
+      if (uiCtrl && Object.keys(genericDS).length !== 0) {
+        return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Panel, {
+          className: "panel-detail"
+        }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Panel.Body, {
+          style: {
+            position: 'relative',
+            minHeight: 260,
+            overflowY: 'unset'
+          }
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "g-ds-note label"
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "g-ds-title"
+        }, "Note"), /*#__PURE__*/_react.default.createElement("br", null), "Selected analysis type: ", (0, _utils.absOlsTermLabel)(kind), /*#__PURE__*/_react.default.createElement("br", null), "Content is designed for: ", genericDS.klass_label), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonToolbar, {
+          className: "pull-right"
+        }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+          placement: "top",
+          overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
+            id: "_tooltip_reload"
+          }, "click to reload the content template")
+        }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+          bsSize: "xsmall",
+          bsStyle: "danger",
+          onClick: function onClick() {
+            return _this2.handleReload();
+          }
+        }, "Reload")))));
+      }
+
+      return null;
+    }
+  }]);
+
+  return GenericDSDetails;
+}(_react.Component);
+
+GenericDSDetails.propTypes = {
+  uiCtrl: _propTypes.default.bool.isRequired,
+  // MatrixCheck(currentUser.matrix, 'genericDataset')
+  kind: _propTypes.default.string.isRequired,
+  // selected analysis type
+  genericDS: _propTypes.default.object,
+  klass: _propTypes.default.object,
+  onChange: _propTypes.default.func.isRequired
+};
+GenericDSDetails.defaultProps = {
+  genericDS: {},
+  klass: {}
+};
+var _default = GenericDSDetails;
+exports.default = _default;

package/dist/components/fields/ButtonConfirm.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactBootstrap = require("react-bootstrap");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ButtonConfirm = function ButtonConfirm(props) {
+  var msg = props.msg,
+      size = props.size,
+      bs = props.bs,
+      fnClick = props.fnClick,
+      fnParams = props.fnParams,
+      place = props.place,
+      fa = props.fa,
+      disabled = props.disabled;
+
+  var popover = /*#__PURE__*/_react.default.createElement(_reactBootstrap.Popover, {
+    id: "popover-button-confirm"
+  }, msg, " ", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "btn-toolbar"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    bsSize: "xsmall",
+    bsStyle: "danger",
+    "aria-hidden": "true",
+    onClick: function onClick() {
+      return fnClick(fnParams);
+    }
+  }, "Yes"), /*#__PURE__*/_react.default.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    bsSize: "xsmall",
+    bsStyle: "warning"
+  }, "No")));
+
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+    animation: true,
+    placement: place,
+    root: true,
+    trigger: "focus",
+    overlay: popover
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    bsSize: size,
+    bsStyle: bs,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa ".concat(fa),
+    "aria-hidden": "true"
+  })));
+};
+
+ButtonConfirm.propTypes = {
+  msg: _propTypes.default.string.isRequired,
+  fnParams: _propTypes.default.object.isRequired,
+  fnClick: _propTypes.default.func.isRequired,
+  bs: _propTypes.default.string,
+  size: _propTypes.default.string,
+  place: _propTypes.default.string,
+  fa: _propTypes.default.string,
+  disabled: _propTypes.default.bool
+};
+ButtonConfirm.defaultProps = {
+  bs: 'danger',
+  size: 'xs',
+  place: 'right',
+  fa: 'fa-trash-o',
+  disabled: false
+};
+var _default = ButtonConfirm;
+exports.default = _default;

package/dist/components/fields/ButtonTooltip.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactBootstrap = require("react-bootstrap");
+
+var _uuid = _interopRequireDefault(require("uuid"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ButtonTooltip = function ButtonTooltip(props) {
+  var tip = /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
+    id: _uuid.default.v4()
+  }, props.tip);
+
+  var size = props.size,
+      bs = props.bs,
+      fnClick = props.fnClick,
+      element = props.element,
+      place = props.place,
+      fa = props.fa,
+      disabled = props.disabled,
+      txt = props.txt;
+  var content = txt ? /*#__PURE__*/_react.default.createElement("span", null, txt, "\xA0") : '';
+
+  if (bs === '') {
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+      delayShow: 1000,
+      placement: place,
+      overlay: tip
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+      bsSize: size,
+      onClick: function onClick() {
+        return fnClick(element);
+      },
+      disabled: disabled
+    }, content, /*#__PURE__*/_react.default.createElement("i", {
+      className: "fa ".concat(fa),
+      "aria-hidden": "true"
+    })));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+    delayShow: 1000,
+    placement: place,
+    overlay: tip
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    bsSize: size,
+    bsStyle: bs,
+    onClick: function onClick() {
+      return fnClick(element);
+    },
+    disabled: disabled
+  }, content, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa ".concat(fa),
+    "aria-hidden": "true"
+  })));
+};
+
+ButtonTooltip.propTypes = {
+  tip: _propTypes.default.string.isRequired,
+  element: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
+  fnClick: _propTypes.default.func.isRequired,
+  bs: _propTypes.default.string,
+  size: _propTypes.default.string,
+  place: _propTypes.default.string,
+  fa: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  txt: _propTypes.default.string
+};
+ButtonTooltip.defaultProps = {
+  bs: '',
+  size: 'xs',
+  place: 'right',
+  fa: 'fa-pencil-square-o',
+  disabled: false,
+  txt: null,
+  element: {}
+};
+var _default = ButtonTooltip;
+exports.default = _default;

package/dist/components/fields/FieldLabel.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactBootstrap = require("react-bootstrap");
+
+var _uuid = _interopRequireDefault(require("uuid"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FieldLabel = function FieldLabel(props) {
+  var label = props.label,
+      desc = props.desc;
+  return desc && desc !== '' ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+    placement: "top",
+    delayShow: 1000,
+    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
+      id: _uuid.default.v4()
+    }, desc)
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ControlLabel, null, label)) : /*#__PURE__*/_react.default.createElement(_reactBootstrap.ControlLabel, null, label);
+};
+
+FieldLabel.propTypes = {
+  label: _propTypes.default.string.isRequired,
+  desc: _propTypes.default.string
+};
+FieldLabel.defaultProps = {
+  desc: ''
+};
+var _default = FieldLabel;
+exports.default = _default;

package/dist/components/fields/GenDSMisType.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactBootstrap = require("react-bootstrap");
+
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var GenDSMisType = function GenDSMisType(props) {
+  var uiCtrl = props.uiCtrl;
+
+  if (uiCtrl) {
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+      placement: "top",
+      overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
+        id: "tooltip"
+      }, "Type (Chemical Methods Ontology) has been changed. ", /*#__PURE__*/_react.default.createElement("br", null), "Please review this Dataset content.")
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        color: 'red'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: "fas fa-exclamation-circle"
+    }), "\xA0"));
+  }
+
+  return null;
+};
+
+GenDSMisType.propTypes = {
+  uiCtrl: _propTypes.default.bool.isRequired
+};
+var _default = GenDSMisType;
+exports.default = _default;

package/dist/components/tools/utils.js

@@ -0,0 +1,489 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unitConversion = exports.unitConvToBase = exports.toNum = exports.toBool = exports.swapAryEls = exports.storeFlow = exports.samOptions = exports.reUnit = exports.molOptions = exports.inputEventVal = exports.genUnitsSystem = exports.genUnits = exports.genUnitSup = exports.genUnit = exports.flowDefault = exports.decorateNode = exports.conFlowEls = exports.clsInputGroup = exports.absOlsTermLabel = exports.absOlsTermId = exports.GenericDummy = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uuid = _interopRequireDefault(require("uuid"));
+
+var _lodash = require("lodash");
+
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var GenericDummy = /*#__PURE__*/_createClass(function GenericDummy() {
+  _classCallCheck(this, GenericDummy);
+
+  this.type = 'dummy';
+  this.field = _uuid.default.v1();
+  this.position = 100;
+  this.label = '';
+  this.default = '';
+  this.required = false;
+});
+
+exports.GenericDummy = GenericDummy;
+
+var inputEventVal = function inputEventVal(event, type) {
+  if (type === 'select') {
+    return event ? event.value : null;
+  } else if (type.startsWith('drag')) {
+    return event;
+  } else if (type === 'checkbox') {
+    return event.target.checked;
+  } else if (type === 'formula-field') {
+    if (event.target) {
+      return event.target.value;
+    }
+
+    return event;
+  }
+
+  return event.target && event.target.value;
+};
+
+exports.inputEventVal = inputEventVal;
+
+var absOlsTermId = function absOlsTermId(val) {
+  return (val || '').split('|')[0].trim();
+};
+
+exports.absOlsTermId = absOlsTermId;
+
+var absOlsTermLabel = function absOlsTermLabel(val) {
+  return val.replace(absOlsTermId(val), '').replace('|', '').trim();
+};
+
+exports.absOlsTermLabel = absOlsTermLabel;
+
+var toNum = function toNum(val) {
+  var parse = Number(val || '');
+  return Number.isNaN(parse) ? 0 : parse;
+};
+
+exports.toNum = toNum;
+
+var genUnitSup = function genUnitSup(val) {
+  if (typeof val === 'undefined' || val === null) return '';
+  var vals = val.match(/<\s*(\w+\b)(?:(?!<\s*\/\s*\1\b)[\s\S])*<\s*\/\s*\1\s*>|[^<]+/g);
+  var reV = vals.map(function (v) {
+    var supVal = v.match(/<sup[^>]*>([^<]+)<\/sup>/);
+    if (supVal) return /*#__PURE__*/_react.default.createElement("sup", {
+      key: _uuid.default.v4()
+    }, supVal[1]);
+    var subVal = v.match(/<sub[^>]*>([^<]+)<\/sub>/);
+    if (subVal) return /*#__PURE__*/_react.default.createElement("sub", {
+      key: _uuid.default.v4()
+    }, subVal[1]);
+    return v;
+  });
+  return /*#__PURE__*/_react.default.createElement("span", null, reV);
+};
+
+exports.genUnitSup = genUnitSup;
+
+var toBool = function toBool(val) {
+  var valLower = String(val).toLowerCase();
+  return !(!valLower || valLower === 'false' || valLower === '0');
+};
+
+exports.toBool = toBool;
+
+var genUnitsSystem = function genUnitsSystem() {
+  fetch('units_system.json', {
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json'
+    }
+  }).then(function (response) {
+    var units = response.json();
+    console.log(units);
+    return (units || {}).fields || [];
+  }).catch(function (errorMessage) {
+    console.log(errorMessage);
+    return [];
+  });
+};
+
+exports.genUnitsSystem = genUnitsSystem;
+
+var genUnits = function genUnits(field) {
+  return (genUnitsSystem().find(function (u) {
+    return u.field === field;
+  }) || {}).units || [];
+};
+
+exports.genUnits = genUnits;
+
+var genUnit = function genUnit(field, key) {
+  var units = genUnits(field);
+  return units.find(function (u) {
+    return u.key === key;
+  }) || {};
+};
+
+exports.genUnit = genUnit;
+
+var reUnit = function reUnit(unitsSystem, optionLayers) {
+  var uniFileds = unitsSystem.fields || [];
+  var uniObj = uniFileds.find(function (fiel) {
+    return fiel.field === optionLayers;
+  });
+  var defaultUnit = uniObj && uniObj.field || '';
+  var preUnit = uniFileds.length > 0 ? uniFileds[0].field : '';
+  return defaultUnit === '' ? preUnit : defaultUnit;
+};
+
+exports.reUnit = reUnit;
+
+var convertTemp = function convertTemp(key, val) {
+  switch (key) {
+    case 'F':
+      return (parseFloat(val) * 1.8 + 32).toFixed(2);
+
+    case 'K':
+      return ((parseFloat(val) + 459.67) * 5 / 9).toFixed(2);
+
+    case 'C':
+      return (parseFloat(val) - 273.15).toFixed(2);
+
+    default:
+      return val;
+  }
+};
+
+var unitConvToBase = function unitConvToBase() {
+  var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var units = genUnits(field.option_layers);
+
+  if (units.length <= 1) {
+    return field.value;
+  }
+
+  var idx = (0, _lodash.findIndex)(units, function (u) {
+    return u.key === field.value_system;
+  });
+  if (idx <= 0) return field.value;
+  return field.value * units[0].nm / (units[idx] && units[idx].nm || 1) || 0;
+};
+
+exports.unitConvToBase = unitConvToBase;
+
+var unitConversion = function unitConversion(field, key, val) {
+  if (typeof val === 'undefined' || val == null || val === 0 || val === '') {
+    return val;
+  }
+
+  if (field === 'temperature') {
+    return convertTemp(key, val);
+  }
+
+  var units = genUnits(field);
+
+  if (units.length <= 1) {
+    return val;
+  }
+
+  var idx = (0, _lodash.findIndex)(units, function (u) {
+    return u.key === key;
+  });
+
+  if (idx === -1) {
+    return val;
+  }
+
+  var pIdx = idx === 0 ? units.length : idx;
+  var pre = units[pIdx - 1] && units[pIdx - 1].nm || 1;
+  var curr = units[idx] && units[idx].nm || 1;
+  return parseFloat((parseFloat(val) * (curr / pre)).toFixed(5));
+}; // const notification = props =>
+//   (
+//     NotificationActions.add({
+//       title: props.title,
+//       message: props.msg,
+//       level: props.lvl,
+//       position: 'tc',
+//       dismissible: 'button',
+//       autoDismiss: props.autoDismiss || 5,
+//       uid: props.uid || uuid.v4()
+//     })
+//   );
+// const validateLayerInput = (layer, act = 'new') => {
+//   if (layer.key === '') {
+//     notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'Please input Name.' });
+//     return false;
+//   }
+//   if (act === 'new' && !(/^[a-z][a-z_]+[a-z]$/g.test(layer.key))) {
+//     notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Name is invalid, please try a different one.' });
+//     return false;
+//   }
+//   if (parseInt((layer.cols || 1), 10) < 1) {
+//     notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'The minimun of Column per Row is 1, please input a different one.' });
+//     return false;
+//   }
+//   return true;
+// };
+// const validateSelectList = (selectName, element) => {
+//   if (selectName === '') {
+//     notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'Please input Name.' });
+//     return false;
+//   }
+//   if (!(/^[a-z][a-z_]+[a-z]$/g.test(selectName))) {
+//     notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'This Name is invalid, please try a different one.' });
+//     return false;
+//   }
+//   if (element.properties_template.select_options[`${selectName}`]) {
+//     notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'This name of Select List is already taken. Please choose another one.' });
+//     return false;
+//   }
+//   return true;
+// };
+
+
+exports.unitConversion = unitConversion;
+
+var clsInputGroup = function clsInputGroup(el) {
+  if (!el) return el;
+  var genericEl = el;
+  var layers = genericEl.properties_template.layers;
+  var keys = Object.keys(layers);
+  keys.forEach(function (key) {
+    var layer = layers[key];
+    layer.fields.filter(function (e) {
+      return e.type === 'input-group';
+    }).forEach(function (e) {
+      e.sub_fields.forEach(function (s) {
+        var ff = s;
+
+        if (ff.type === 'text') {
+          ff.value = '';
+        }
+      });
+    });
+  });
+  return genericEl;
+};
+
+exports.clsInputGroup = clsInputGroup;
+var molOptions = [{
+  label: 'InChiKey',
+  value: 'inchikey'
+}, {
+  label: 'SMILES',
+  value: 'smiles'
+}, {
+  label: 'IUPAC',
+  value: 'iupac'
+}, {
+  label: 'Mass',
+  value: 'molecular_weight'
+}];
+exports.molOptions = molOptions;
+var samOptions = [{
+  label: 'Name',
+  value: 'name'
+}, {
+  label: 'Ext. Label',
+  value: 'external_label'
+}, {
+  label: 'Mass',
+  value: 'molecular_weight'
+}];
+exports.samOptions = samOptions;
+
+var findCurrentNode = function findCurrentNode(_srcKey, _layerVals) {
+  var result = [];
+
+  var fs = _layerVals.filter(function (o) {
+    return o.wf && o.wf_info && o.wf_info.source_layer === _srcKey;
+  });
+
+  if (fs.length > 1) {
+    fs.forEach(function (o) {
+      findCurrentNode(o, _layerVals);
+    });
+  } else if (fs.length === 1) {
+    return findCurrentNode(fs[0].key, _layerVals);
+  }
+
+  return [_srcKey];
+};
+
+var decorateNode = function decorateNode(_elements, _layers) {
+  if (!_elements || _elements.length < 1) return _elements;
+  var m = {
+    background: '#D6D5E6',
+    color: '#333' // border: '1px solid #222138',
+    // width: 180,
+
+  };
+  var elements = _elements;
+  elements.map(function (e) {
+    if (['input', 'output'].includes(e.type) || e.animated) return e;
+    var lk = e.data.lKey;
+    var fk = (0, _lodash.findKey)(_layers, function (o) {
+      return o.wf && (o.key === lk || o.key.startsWith("".concat(lk, ".")));
+    });
+
+    if (fk) {
+      e.style = m;
+      return e;
+    }
+
+    return e;
+  });
+  return elements;
+};
+
+exports.decorateNode = decorateNode;
+
+var conFlowEls = function conFlowEls(props) {
+  var properties = props.properties,
+      properties_release = props.properties_release;
+  var flow = properties_release.flow,
+      layers = properties_release.layers;
+  var deep = (0, _lodash.cloneDeep)(flow);
+  var els = deep && deep.elements || [];
+  els.map(function (d) {
+    if (['default'].includes(d.type) && d.data) {
+      var lKey = d.data.lKey;
+      var fk = (0, _lodash.findKey)(properties.layers || {}, function (o) {
+        return o.wf && (o.key === lKey || o.key.startsWith("".concat(lKey, ".")));
+      });
+      var chk = fk ? /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          position: 'absolute',
+          top: '0px',
+          right: '2px',
+          color: 'green',
+          zIndex: '100'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+        icon: "far fa-check-circle"
+      })) : null;
+      var layer = layers[lKey] || {};
+
+      var ll = /*#__PURE__*/_react.default.createElement("div", null, chk, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          borderWidth: '0px 0px 1px 0px',
+          borderColor: 'black',
+          borderStyle: 'solid'
+        }
+      }, /*#__PURE__*/_react.default.createElement("b", null, layer.label)), /*#__PURE__*/_react.default.createElement("div", null, "(", layer.key, ")"));
+
+      d.data = {
+        label: ll,
+        lKey: layer.key
+      };
+    }
+
+    return d;
+  });
+  return els;
+};
+
+exports.conFlowEls = conFlowEls;
+
+var storeFlow = function storeFlow(props) {
+  var elements = props.elements;
+  var els = (0, _lodash.cloneDeep)(elements);
+  els.map(function (d) {
+    if (['default'].includes(d.type) && d.data) {
+      delete d.data.label;
+      delete d.data.layer;
+    }
+
+    return d;
+  });
+  return els;
+};
+
+exports.storeFlow = storeFlow;
+var flowDefault = [{
+  id: '1',
+  type: 'input',
+  data: {
+    label: 'Start'
+  },
+  position: {
+    x: 250,
+    y: 15
+  }
+}, {
+  id: '2',
+  type: 'output',
+  data: {
+    label: 'End'
+  },
+  position: {
+    x: 250,
+    y: 255
+  }
+}];
+exports.flowDefault = flowDefault;
+
+var isLayerInWF = function isLayerInWF(_element, _layerKey) {
+  var flow = _element.properties_template.flow;
+  var finds = ((flow || {}).elements || []).filter(function (e) {
+    return e.type === 'default' && (e.data || {}).lKey === _layerKey;
+  });
+  return finds.length > 0;
+}; // const validateLayerDeletion = (_element, _delKey) => {
+//   if (isLayerInWF(_element, _delKey)) {
+//     notification({ title: `Layer [${_delKey}]`, lvl: 'warning', msg: `This layer [${_delKey}] can not be removed because it is currently used in workflow.` });
+//     return false;
+//   }
+//   return true;
+// };
+// const validateLayerUpdation = (_element, _updates) => {
+//   const { key, wf } = _updates;
+//   if (isLayerInWF(_element, key)) {
+//     if (!wf) {
+//       notification({ title: `Layer [${key}]`, lvl: 'warning', msg: `Can not change the attribute 'used in Workflow?' because this layer [${key}] is currently used in workflow.` });
+//       return false;
+//     }
+//   }
+//   const { layers } = _element.properties_template;
+//   if (wf && layers[key] && (layers[key].cond_fields || []).length > 0) {
+//     notification({ title: `Layer [${key}]`, lvl: 'warning', msg: 'Can not use in Workflow because the Layer Restriction has been set.' });
+//     return false;
+//   }
+//   return true;
+// };
+
+
+var swapAryEls = function swapAryEls(_ary, idx1, idx2) {
+  var ary = _ary;
+  var temp = ary[idx1];
+  ary[idx1] = ary[idx2];
+  ary[idx2] = temp;
+  return ary;
+}; // re-fetch workflow and set to state of store, should be out-of this project
+// const renderFlowModal = (generic, isToggle) => {
+//   const segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
+//   let shortLabel = generic.short_label;
+//   if (!shortLabel) {
+//     shortLabel = segmentKlasses.filter(s => s.id === generic.segment_klass_id);
+//     shortLabel = shortLabel.length > 0 ? shortLabel[0].label : '';
+//   }
+//   const params = {
+//     properties_release: cloneDeep(generic.properties_release) || {},
+//     properties: cloneDeep(generic.properties) || {},
+//     shortLabel,
+//     toggle: isToggle
+//   };
+//   UIActions.rerenderGenericWorkflow(params);
+// };
+
+
+exports.swapAryEls = swapAryEls;

package/dist/index.js

@@ -17,10 +17,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // import reportWebVitals from './reportWebVitals';
 // import { ElementManager, GenPropertiesText } from './components/admin/ElementManager';
 // export { ElementManager, GenPropertiesText };
-_reactDom.default.render( /*#__PURE__*/_react.default.createElement(_app.ElementManager, {
+_reactDom.default.render( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_app.ElementManager, {
   elements: [],
   element: {}
-}), document.getElementById('root')); // function App() {
+}), /*#__PURE__*/_react.default.createElement(_app.GenDSMisType, {
+  uiCtrl: true
+})), document.getElementById('root')); // function App() {
 //   return (
 //     <div>
 //       Project A

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chem-generic-ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "private": false,
   "license": "MIT",
   "scripts": {
@@ -14,11 +14,11 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "react-scripts": "4.0.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.4.0"
+    "eslint-plugin-react": "^7.4.0",
+    "react-scripts": "4.0.1"
   },
   "main": "dist/app.js",
   "module": "dist/app.js",
@@ -34,8 +34,14 @@
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "7.3.1",
     "@babel/preset-react": "7.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.0.0",
+    "@fortawesome/free-regular-svg-icons": "^6.0.0",
+    "@fortawesome/free-solid-svg-icons": "^6.0.0",
+    "@fortawesome/react-fontawesome": "^0.1.17",
     "bootstrap": "5.1.3",
     "lodash": "^4.17.21",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.2.1",
     "react-dom": "^17.0.2",