chem-generic-ui 0.1.25 → 0.1.28

package/dist/app.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "ElementManager", {
     return _ElementManager.default;
   }
 });
+Object.defineProperty(exports, "FlowViewerModal", {
+  enumerable: true,
+  get: function get() {
+    return _FlowViewerModal.default;
+  }
+});
 Object.defineProperty(exports, "GenDSMisType", {
   enumerable: true,
   get: function get() {
@@ -56,6 +62,8 @@ var _GenDSDetails = _interopRequireDefault(require("./components/details/GenDSDe
 
 var _GenSgDetails = _interopRequireDefault(require("./components/details/GenSgDetails"));
 
+var _FlowViewerModal = _interopRequireDefault(require("./components/flow/FlowViewerModal"));
+
 var _GenPropertiesFields = require("./components/fields/GenPropertiesFields");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/asserts/main.css

@@ -1,3 +1,10 @@
+.gu_button_right {
+  float: right;
+  right: 0px;
+  z-index: 1;
+  margin-left: 2px;
+}
+
 .bg-bs-primary {
   background-color: #337ab7 !important;
 }

package/dist/asserts/main.scss

@@ -10,6 +10,13 @@ $colo-selected-border: #0dcaf0;
 $color-default: #777;
 $color-bs-info: #5bc0de;
 
+.gu_button_right {
+  float: right;
+  right: 0px;
+  z-index: 1;
+  margin-left: 2px;
+}
+
 .bg-bs-primary {
   background-color: $colo-bs-primary !important;
 }

package/dist/components/details/GenDSDetails.js

@@ -13,10 +13,6 @@ var _lodash = require("lodash");
 
 var _reactBootstrap = require("react-bootstrap");
 
-var _reactDnd = require("react-dnd");
-
-var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));
-
 var _LayersLayout = _interopRequireDefault(require("../layers/LayersLayout"));
 
 var _utils = require("../tools/utils");
@@ -271,8 +267,7 @@ GenericDSDetails.defaultProps = {
   kind: '',
   genericDS: {},
   klass: {}
-};
-
-var _default = (0, _reactDnd.DragDropContext)(_reactDndHtml5Backend.default)(GenericDSDetails);
+}; // export default DragDropContext(HTML5Backend)(GenericDSDetails);
 
+var _default = GenericDSDetails;
 exports.default = _default;

package/dist/components/fields/ButtonTooltip.js

@@ -11,13 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactBootstrap = require("react-bootstrap");
 
-var _uuid = _interopRequireDefault(require("uuid"));
+var _uuid = 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()
+    id: (0, _uuid.v4)()
   }, props.tip);
 
   var size = props.size,

package/dist/components/fields/GenPropertiesFields.js

@@ -197,7 +197,7 @@ var GenPropertiesDrop = function GenPropertiesDrop(opt) {
   }, dragTarget, createOpt, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
     placement: "top",
     overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
-      id: _uuid.v4.v4()
+      id: (0, _uuid.v4)()
     }, "remove")
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
     className: "btn_del",
@@ -234,7 +234,7 @@ var GenPropertiesInputGroup = function GenPropertiesInputGroup(opt) {
 
   var fLab = function fLab(e) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      key: _uuid.v4.v4(),
+      key: (0, _uuid.v4)(),
       className: "form-control g_input_group_label"
     }, e.value);
   };

package/dist/components/flow/FlowView.js

@@ -0,0 +1,88 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactFlowRenderer = _interopRequireWildcard(require("react-flow-renderer"));
+
+var _LayerNode = _interopRequireDefault(require("./LayerNode"));
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var FlowView = function FlowView(props) {
+  var properties = props.properties,
+      properties_release = props.properties_release;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      reactFlowInstance = _useState2[0],
+      setReactFlowInstance = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      elements = _useState4[0],
+      setElements = _useState4[1];
+
+  var onLoad = function onLoad(_reactFlowInstance) {
+    setReactFlowInstance(_reactFlowInstance);
+  };
+
+  (0, _react.useEffect)(function () {
+    var flowEls = (0, _utils.conFlowEls)(props);
+    flowEls = flowEls.length > 0 ? flowEls : _utils.flowDefault; // flowEls = decorateNode(flowEls, properties.layers || {});
+
+    setElements(flowEls);
+  }, [properties, properties_release]);
+  (0, _react.useEffect)(function () {
+    var flowEls = (0, _utils.conFlowEls)(props);
+    flowEls = flowEls.length > 0 ? flowEls : _utils.flowDefault; // flowEls = decorateNode(flowEls, properties.layers || {});
+
+    setElements(flowEls);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (reactFlowInstance && elements.length) {
+      reactFlowInstance.fitView();
+    }
+  }, [reactFlowInstance, elements.length]);
+  return /*#__PURE__*/_react.default.createElement(_reactFlowRenderer.ReactFlowProvider, null, /*#__PURE__*/_react.default.createElement(_reactFlowRenderer.default, {
+    elements: elements,
+    onLoad: onLoad,
+    connectionMode: _reactFlowRenderer.ConnectionMode.Loose,
+    nodeTypes: {
+      selectorNode: _LayerNode.default
+    },
+    deleteKeyCode: 46
+  }, /*#__PURE__*/_react.default.createElement(_reactFlowRenderer.Controls, null)));
+};
+
+FlowView.propTypes = {
+  properties: _propTypes.default.object.isRequired
+};
+var _default = FlowView;
+exports.default = _default;

package/dist/components/flow/FlowViewerModal.js

@@ -0,0 +1,81 @@
+"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 _reactDraggable = _interopRequireDefault(require("react-draggable"));
+
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+
+var _FlowView = _interopRequireDefault(require("./FlowView"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable camelcase */
+
+/* eslint-disable react/forbid-prop-types */
+var FlowViewerModal = function FlowViewerModal(props) {
+  var show = props.show,
+      data = props.data,
+      fnHide = props.fnHide;
+  if (!show) return null;
+  var properties_release = data.properties_release,
+      properties = data.properties,
+      shortLabel = data.shortLabel;
+  if (Object.keys(properties_release).length < 1) return null;
+
+  if (Object.keys(properties_release.flow || {}).length < 1 || (properties_release.flow.elements || []).length < 3) {
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
+      show: show,
+      bsSize: "small",
+      onHide: fnHide
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Header, {
+      closeButton: true
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Title, null, "".concat(shortLabel, " workflow"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, null, "No defined workflow"));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactDraggable.default, {
+    handle: ".layer_header",
+    bounds: "body"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flow_view_draggable"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Panel, {
+    bsStyle: "primary"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Panel.Heading, {
+    className: "layer_header"
+  }, "".concat(shortLabel, " workflow"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    bsStyle: "danger",
+    bsSize: "xsmall",
+    className: "gu_button_right",
+    onClick: fnHide
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: "fas fa-times"
+  }))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Panel.Body, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "body_bg"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "body_canvas"
+  }, /*#__PURE__*/_react.default.createElement(_FlowView.default, {
+    properties: properties,
+    properties_release: properties_release
+  })))))));
+};
+
+FlowViewerModal.propTypes = {
+  show: _propTypes.default.bool.isRequired,
+  data: _propTypes.default.shape({
+    properties_release: _propTypes.default.object,
+    properties: _propTypes.default.object,
+    shortLabel: _propTypes.default.string
+  }).isRequired,
+  fnHide: _propTypes.default.func.isRequired
+};
+var _default = FlowViewerModal;
+exports.default = _default;

package/dist/components/flow/LayerNode.js

@@ -0,0 +1,59 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactFlowRenderer = require("react-flow-renderer");
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var targetHandleStyle = {
+  background: '#555'
+};
+
+var sourceHandleStyleA = _objectSpread(_objectSpread({}, targetHandleStyle), {}, {
+  top: 10
+});
+
+var onConnect = function onConnect(params) {
+  return console.log('handle onConnect', params);
+};
+
+var LayerNode = function LayerNode(_ref) {
+  var data = _ref.data;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactFlowRenderer.Handle, {
+    type: "target",
+    position: _reactFlowRenderer.Position.Top,
+    style: targetHandleStyle,
+    onConnect: onConnect
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      borderWidth: '0px 0px 1px 0px',
+      borderColor: 'black',
+      borderStyle: 'solid'
+    }
+  }, /*#__PURE__*/_react.default.createElement("b", null, data.layer.label)), /*#__PURE__*/_react.default.createElement("div", null, "(", data.layer.key, ")")), /*#__PURE__*/_react.default.createElement(_reactFlowRenderer.Handle, {
+    type: "source",
+    position: _reactFlowRenderer.Position.Bottom,
+    id: "a",
+    style: sourceHandleStyleA
+  }));
+};
+
+var _default = (0, _react.memo)(LayerNode);
+
+exports.default = _default;

package/dist/components/table/SamOption.js

@@ -23,9 +23,7 @@ var SamOption = function SamOption(props) {
   var data = node.data;
   var fValue = data[sField.id] && data[sField.id].value || {};
   if (!fValue.is_new) return /*#__PURE__*/_react.default.createElement("div", null);
-
-  var rUUID = _uuid.v4.v4();
-
+  var rUUID = (0, _uuid.v4)();
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "generic_sam_options"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {

package/dist/components/table/SelectRenderer.js

@@ -21,6 +21,9 @@ var SelectRenderer = function SelectRenderer(props) {
       node = props.node;
   if (sField.type !== 'select' || sOptions.length < 1) return null;
   var data = node.data;
+  var val = sOptions.find(function (o) {
+    return o.value === data[sField.id].value;
+  }) || null;
   return /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
     isClearable: true,
     menuContainerStyle: {
@@ -28,7 +31,7 @@ var SelectRenderer = function SelectRenderer(props) {
     },
     multi: false,
     options: sOptions,
-    value: data[sField.id].value,
+    value: val,
     onChange: function onChange(e) {
       return _onChange(e, sField, node);
     },

package/dist/components/tools/utils.js

@@ -47,8 +47,7 @@ var uploadFiles = function uploadFiles(properties, event, field, layer) {
     case 'f':
       {
         (event.val || []).forEach(function (file) {
-          var uid = _uuid.v4.v4();
-
+          var uid = (0, _uuid.v4)();
           if (typeof value.files === 'undefined' || value.files === null) value.files = [];
           value.files.push({
             uid: uid,

package/dist/index.js

@@ -12,6 +12,8 @@ var _SimuDS = _interopRequireDefault(require("./simulations/SimuDS"));
 
 var _SimuSG = _interopRequireDefault(require("./simulations/SimuSG"));
 
+var _SimWF = _interopRequireDefault(require("./simulations/SimWF"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable no-unused-vars */
@@ -24,9 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 _reactDom.default.render( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_app.ElementManager, {
   elements: [],
   element: {}
-}), /*#__PURE__*/_react.default.createElement(_app.GenDSMisType, {
-  uiCtrl: true
-}), /*#__PURE__*/_react.default.createElement(_SimuDS.default, null), /*#__PURE__*/_react.default.createElement(_SimuSG.default, null)), document.getElementById('root')); // function App() {
+}), /*#__PURE__*/_react.default.createElement(_SimWF.default, null), /*#__PURE__*/_react.default.createElement(_SimuDS.default, null), /*#__PURE__*/_react.default.createElement(_SimuSG.default, null)), document.getElementById('root')); // function App() {
 //   return (
 //     <div>
 //       Project A

package/dist/simulations/SimWF.js

@@ -0,0 +1,123 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactBootstrap = require("react-bootstrap");
+
+var _FlowViewerModal = _interopRequireDefault(require("../components/flow/FlowViewerModal"));
+
+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 _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 SimuWF = /*#__PURE__*/function (_Component) {
+  _inherits(SimuWF, _Component);
+
+  var _super = _createSuper(SimuWF);
+
+  function SimuWF(props) {
+    var _this;
+
+    _classCallCheck(this, SimuWF);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      show: false,
+      data: {
+        properties_release: {},
+        properties: {},
+        shortLabel: 'short label'
+      }
+    };
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(SimuWF, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      fetch('sg_details.json', {
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json'
+        }
+      }).then(function (response) {
+        return response.json();
+      }).then(function (json) {
+        console.log(json);
+
+        _this2.setState({
+          data: {
+            properties_release: json.properties_release,
+            properties: json.properties
+          }
+        });
+      }).catch(function (errorMessage) {
+        console.log(errorMessage);
+      });
+    }
+  }, {
+    key: "handleChange",
+    value: function handleChange(show) {
+      this.setState({
+        show: show
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      var _this$state = this.state,
+          show = _this$state.show,
+          data = _this$state.data;
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", null, "Flow view"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+        onClick: function onClick() {
+          return _this3.handleChange(true);
+        }
+      }, "click"), /*#__PURE__*/_react.default.createElement(_FlowViewerModal.default, {
+        show: show,
+        data: data,
+        fnHide: function fnHide() {
+          return _this3.handleChange(false);
+        }
+      })));
+    }
+  }]);
+
+  return SimuWF;
+}(_react.Component);
+
+var _default = SimuWF;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chem-generic-ui",
-  "version": "0.1.25",
+  "version": "0.1.28",
   "private": false,
   "license": "MIT",
   "scripts": {
@@ -35,6 +35,10 @@
     "defaults"
   ],
   "dependencies": {
+    "sass-loader": "8.0.2",
+    "css-loader": "4.3.0",
+    "mini-css-extract-plugin": "0.11.3",
+    "sass": "^1.49.9",
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.0.0",
     "@babel/eslint-parser": "^7.15.0",
@@ -45,25 +49,22 @@
     "@fortawesome/free-regular-svg-icons": "^6.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/react-fontawesome": "^0.1.17",
-    "css-loader": "4.3.0",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "0.11.3",
-    "node-sass": "^7.0.1",
     "numeral": "^1.5.3",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-bootstrap": "~0.33.1",
+    "react-draggable": "^4.4.3",
     "react-dnd": "^2.6.0",
     "react-dnd-html5-backend": "^2.6.0",
     "react-dom": "^17.0.2",
     "react-dropzone": "^3.6.0",
+    "react-flow-renderer": "^9.6.4",
     "react-redux": "^7.2.4",
     "react-select": "5.2.2",
     "redux": "^4.1.0",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.0.0",
-    "sass": "^1.49.9",
-    "sass-loader": "8.0.2",
     "uuid": "^8.3.2"
   }
-}
+}