@equinor/echo-framework 0.7.4 → 0.7.7

package/dist/src/components/realTimeData/RealTimePopoverButton.js

@@ -0,0 +1,136 @@
+'use strict';
+
+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; }
+
+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
+});
+
+var _tslib = require('../../../_virtual/_tslib.js');
+
+var React = require('react');
+
+var echoSearch = require('@equinor/echo-search');
+
+var EchoUtils = require('@equinor/echo-utils');
+
+require('@equinor/eds-core-react');
+
+require('@equinor/echo-components');
+
+require('./components/connectorForIMSTag/IMSConnector.module.css.js');
+
+require('@equinor/echo-core');
+
+require('../../services/api/api-manager.js');
+
+var RealTimeContextButton = require('./components/contextButton/RealTimeContextButton.js');
+
+require('./components/contextPopover/Popover.module.css.js');
+
+var RealTimeIMSDropdown = require('./components/IMSDropdown/RealTimeIMSDropdown.js');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var EchoUtils__default = /*#__PURE__*/_interopDefaultLegacy(EchoUtils);
+/**
+ * ContextMenu button for displaying Real-Time-Data from connected sensors.
+ * @param {RTDProps} {
+ * tagNo: The tagNo to check for connected IMS tags.
+ * onOpen: Optional callback for whenever RTD popover is being opened
+ * }
+ * @return {*}
+ */
+
+
+function RealTimePopoverButton(_ref) {
+  var _this = this;
+
+  var tagNo = _ref.tagNo,
+      onOpen = _ref.onOpen;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isVisible = _React$useState2[0],
+      setIsVisible = _React$useState2[1];
+
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      imsFields = _React$useState4[0],
+      setImsFields = _React$useState4[1];
+
+  EchoUtils__default["default"].Hooks.useEffectAsync(function (signal) {
+    return _tslib.__awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var response, _imsFields;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return echoSearch.Search.Tags.getTagDetailsAsync(tagNo);
+
+            case 2:
+              response = _context.sent;
+
+              if (response.value) {
+                _imsFields = response.value.additionalFields.filter(function (field) {
+                  return field.type === 'IMS';
+                });
+
+                if (!signal.aborted) {
+                  // we have IMS sensors connected to this tag.
+                  if (_imsFields.length > 0) {
+                    setIsVisible(true);
+                  }
+
+                  setImsFields(_imsFields);
+                }
+              }
+
+              return _context.abrupt("return", function () {
+                if (!signal.aborted) {
+                  setIsVisible(false);
+                  setImsFields([]);
+                }
+              });
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }, [tagNo]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(RealTimeContextButton.RealTimeContextButton, {
+    onOpen: onOpen
+  }, /*#__PURE__*/React__default["default"].createElement(RealTimeIMSDropdown.RealTimeIMSDropdown, {
+    imsFields: imsFields
+  }));
+}
+
+exports.RealTimePopoverButton = RealTimePopoverButton;

package/dist/src/components/realTimeData/components/IMSDropdown/RealTimeIMSDropdown.js

@@ -0,0 +1,81 @@
+'use strict';
+
+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; }
+
+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
+});
+
+var React = require('react');
+
+var edsCoreReact = require('@equinor/eds-core-react');
+
+var RealTimeConnectorForIMSTag = require('../connectorForIMSTag/RealTimeConnectorForIMSTag.js');
+
+var RealTimeIMSDropdown_module = require('./RealTimeIMSDropdown.module.css.js');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function RealTimeIMSDropdown(_ref) {
+  var imsFields = _ref.imsFields;
+
+  var _a;
+
+  var _React$useState = React.useState(undefined),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selected = _React$useState2[0],
+      setSelected = _React$useState2[1];
+
+  var items = React.useMemo(function () {
+    return imsFields.map(function (ims) {
+      return ims.description;
+    });
+  }, [imsFields]);
+
+  function onSelect(item) {
+    var selected;
+
+    if (item) {
+      selected = imsFields.find(function (ims) {
+        return ims.description === item;
+      });
+    }
+
+    setSelected(selected);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: RealTimeIMSDropdown_module["default"].popoverContent
+  }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.SingleSelect, {
+    className: RealTimeIMSDropdown_module["default"].select,
+    label: "Select sensor",
+    items: items,
+    handleSelectedItemChange: function handleSelectedItemChange(_ref2) {
+      var selectedItem = _ref2.selectedItem;
+      return onSelect(selectedItem);
+    },
+    selectedOption: (_a = selected === null || selected === void 0 ? void 0 : selected.description) !== null && _a !== void 0 ? _a : ''
+  }), selected && /*#__PURE__*/React__default["default"].createElement(RealTimeConnectorForIMSTag.RealTimeConnectorForIMSTag, {
+    ims: selected.value
+  }));
+}
+
+exports.RealTimeIMSDropdown = RealTimeIMSDropdown;

package/dist/src/components/realTimeData/components/IMSDropdown/RealTimeIMSDropdown.module.css.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var styleInject_es = require('../../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".RealTimeIMSDropdown-module_popoverContent__9-qpz{align-items:center;background-color:#fff;border-color:grey;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);display:flex;flex-direction:column;margin-top:1rem;padding:1rem;width:100%}.RealTimeIMSDropdown-module_select__i9xTJ{width:100%}";
+var style = {
+  "popoverContent": "RealTimeIMSDropdown-module_popoverContent__9-qpz",
+  "select": "RealTimeIMSDropdown-module_select__i9xTJ"
+};
+styleInject_es["default"](css_248z);
+exports["default"] = style;

package/dist/src/components/realTimeData/components/connectorForIMSTag/IMSConnector.module.css.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var styleInject_es = require('../../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".IMSConnector-module_wrapper__CvKvm{align-items:center;display:grid;gap:1rem;grid-row:1fr;grid-template-columns:1fr 1fr;justify-items:center;margin-top:1rem}.IMSConnector-module_experimentalWarning__7Vv3z{grid-template-columns:auto 1fr;margin-top:0}.IMSConnector-module_message__w8j1M{margin-top:1rem;width:100%}";
+var style = {
+  "wrapper": "IMSConnector-module_wrapper__CvKvm",
+  "experimentalWarning": "IMSConnector-module_experimentalWarning__7Vv3z IMSConnector-module_wrapper__CvKvm",
+  "message": "IMSConnector-module_message__w8j1M"
+};
+styleInject_es["default"](css_248z);
+exports["default"] = style;

package/dist/src/components/realTimeData/components/connectorForIMSTag/RealTimeConnectorForIMSTag.js

@@ -0,0 +1,110 @@
+'use strict';
+
+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; }
+
+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
+});
+
+var React = require('react');
+
+var edsCoreReact = require('@equinor/eds-core-react');
+
+var echoComponents = require('@equinor/echo-components');
+
+var IMSConnector_module = require('./IMSConnector.module.css.js');
+
+require('@equinor/echo-utils');
+
+var EchoCore = require('@equinor/echo-core');
+
+require('../../../../services/api/api-manager.js');
+
+var useRealTimeHub = require('../../hooks/useRealTimeHub.js');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function RealTimeConnectorForIMSTag(_ref) {
+  var ims = _ref.ims;
+  var instCode = EchoCore.useInstCode();
+
+  var _useRealTimeHub$useRe = useRealTimeHub.useRealTimeHub(ims, instCode),
+      metadata = _useRealTimeHub$useRe.metadata,
+      present = _useRealTimeHub$useRe.present,
+      status = _useRealTimeHub$useRe.status,
+      message = _useRealTimeHub$useRe.message,
+      loading = _useRealTimeHub$useRe.loading;
+
+  var _React$useMemo = React.useMemo(function () {
+    if (present && metadata) {
+      return [present.value, metadata.unit];
+    }
+
+    return [];
+  }, [metadata, present]),
+      _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+      value = _React$useMemo2[0],
+      unit = _React$useMemo2[1];
+
+  if (status === 'error') {
+    return /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+      message: message
+    });
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: IMSConnector_module["default"].wrapper
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, loading ? /*#__PURE__*/React__default["default"].createElement(edsCoreReact.CircularProgress, null) : /*#__PURE__*/React__default["default"].createElement(SensorValueProps, {
+    value: value,
+    unit: unit
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: IMSConnector_module["default"].experimentalWarning
+  }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Icon, {
+    name: "warning_outlined",
+    color: echoComponents.themeConst.warningIcon
+  }), /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Typography, {
+    variant: "helper",
+    group: "input"
+  }, "Tag sensor mapping is experimental, do not use for operational purposes")));
+}
+
+function SensorValueProps(_ref2) {
+  var value = _ref2.value,
+      unit = _ref2.unit;
+
+  if (!value || !unit) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", null, value), " ", /*#__PURE__*/React__default["default"].createElement("b", null, unit));
+}
+
+function ErrorMessage(_ref3) {
+  var message = _ref3.message;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: IMSConnector_module["default"].message
+  }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Typography, {
+    variant: "body_short",
+    color: echoComponents.themeConst.voided
+  }, message !== null && message !== void 0 ? message : 'Something went wrong with RTD connection.'));
+}
+
+exports.RealTimeConnectorForIMSTag = RealTimeConnectorForIMSTag;

package/dist/src/components/realTimeData/components/contextButton/RealTimeContextButton.js

@@ -0,0 +1,75 @@
+'use strict';
+
+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; }
+
+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
+});
+
+var React = require('react');
+
+var edsCoreReact = require('@equinor/eds-core-react');
+
+var echoComponents = require('@equinor/echo-components');
+
+var RealTimeContextButton_module = require('./RealTimeContextButton.module.css.js');
+
+var Popover = require('../contextPopover/Popover.js');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var RealTimeContextButton = function RealTimeContextButton(_ref) {
+  var onOpen = _ref.onOpen,
+      children = _ref.children;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      expanded = _React$useState2[0],
+      setExpanded = _React$useState2[1];
+
+  function handleClick() {
+    var nextState = !expanded;
+
+    if (nextState) {
+      onOpen && onOpen();
+    }
+
+    setExpanded(nextState);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: RealTimeContextButton_module["default"].wrapper
+  }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Button, {
+    className: RealTimeContextButton_module["default"].button,
+    variant: "ghost_icon",
+    onClick: handleClick
+  }, expanded ? /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Icon, {
+    name: "close",
+    title: "Close Real Time Data",
+    color: echoComponents.themeConst.asBuilt
+  }) : /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Icon, {
+    name: "timeline",
+    title: "Real Time Data",
+    color: echoComponents.themeConst.asBuilt
+  })), expanded && /*#__PURE__*/React__default["default"].createElement(Popover.ContextPopover, null, children));
+};
+
+exports.RealTimeContextButton = RealTimeContextButton;

package/dist/src/components/realTimeData/components/contextButton/RealTimeContextButton.module.css.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var styleInject_es = require('../../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".RealTimeContextButton-module_wrapper__2hzo4{margin-left:4px}.RealTimeContextButton-module_button__TxZmh{background-color:var(--white)!important;border:3px solid var(--white)!important;border-radius:10rem;box-shadow:0 4px 4px rgba(0,0,0,.25);box-sizing:border-box;height:46px!important;width:46px!important}.RealTimeContextButton-module_button__TxZmh:hover{background:#deedee!important}";
+var style = {
+  "wrapper": "RealTimeContextButton-module_wrapper__2hzo4",
+  "button": "RealTimeContextButton-module_button__TxZmh"
+};
+styleInject_es["default"](css_248z);
+exports["default"] = style;

package/dist/src/components/realTimeData/components/contextPopover/Popover.js

@@ -0,0 +1,37 @@
+'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
+});
+
+var React = require('react');
+
+var Popover_module = require('./Popover.module.css.js');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+/**
+ * Generic Popover placement component that can take in optional background color
+ */
+
+
+var ContextPopover = function ContextPopover(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: Popover_module["default"].wrapper,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: Popover_module["default"].optionsPopover
+  }, children));
+};
+
+exports.ContextPopover = ContextPopover;

package/dist/src/components/realTimeData/components/contextPopover/Popover.module.css.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var styleInject_es = require('../../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".Popover-module_wrapper__6HoPX{display:flex;flex-direction:column;left:0;position:absolute;right:0;z-index:10}.Popover-module_optionsPopover__Qp7UL{display:flex}@media screen and (max-width:440px){.Popover-module_optionsPopover__Qp7UL{max-width:270px}.Popover-module_wrapper__6HoPX{left:0}.Popover-module_optionsPopover__Qp7UL{align-self:flex-start}}";
+var styles = {
+  "wrapper": "Popover-module_wrapper__6HoPX",
+  "optionsPopover": "Popover-module_optionsPopover__Qp7UL"
+};
+styleInject_es["default"](css_248z);
+exports["default"] = styles;

package/dist/src/components/realTimeData/hooks/useRealTimeHub.js

@@ -0,0 +1,122 @@
+'use strict';
+
+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; }
+
+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
+});
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+
+var React = require('react');
+
+var EchoUtils = require('@equinor/echo-utils');
+
+var EchoCore = require('@equinor/echo-core');
+
+var useSignalR = require('./useSignalR.js');
+
+var useSignalRListener = require('./useSignalRListener.js');
+
+var apiRealtimedata = require('../../../services/api/api-realtimedata.js');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var EchoUtils__default = /*#__PURE__*/_interopDefaultLegacy(EchoUtils);
+
+var EchoCore__default = /*#__PURE__*/_interopDefaultLegacy(EchoCore);
+
+function useRealTimeHub(id, instCode) {
+  var _this = this;
+
+  var _a = useSignalR.useSignalR('/real-time-data'),
+      connection = _a.connection,
+      loading = _a.loading,
+      rest = _tslib.__rest(_a, ["connection", "loading"]);
+
+  var _React$useState = React.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      metadata = _React$useState2[0],
+      setMetadata = _React$useState2[1];
+
+  var _React$useState3 = React.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      present = _React$useState4[0],
+      setPresent = _React$useState4[1];
+
+  useSignalRListener.useSignalRListener(connection, 'realtimedata', function (timeData) {
+    var _timeData$dataPoints = _slicedToArray(timeData.dataPoints, 1),
+        present = _timeData$dataPoints[0];
+
+    setPresent(present);
+  }); // SignalR connection starter + listen to timeseries data
+
+  EchoUtils__default["default"].Hooks.useEffectAsync(function () {
+    return _tslib.__awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var timeseries, timeseriesId, accessToken;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(!instCode || !connection)) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              _context.next = 4;
+              return apiRealtimedata.getTimeseriesByName(id, instCode);
+
+            case 4:
+              timeseries = _context.sent;
+
+              if (!timeseries) {
+                _context.next = 13;
+                break;
+              }
+
+              setMetadata(timeseries);
+              timeseriesId = timeseries.id;
+              _context.next = 10;
+              return EchoCore__default["default"].EchoClient.getAccessToken();
+
+            case 10:
+              accessToken = _context.sent;
+              _context.next = 13;
+              return connection.send('subscribe', accessToken, timeseriesId);
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }, [connection, id, instCode]);
+  return Object.assign({
+    metadata: metadata,
+    present: present,
+    connection: connection,
+    loading: loading || !present
+  }, rest);
+}
+
+exports.useRealTimeHub = useRealTimeHub;