@equinor/echo-framework 0.7.2 → 0.7.5

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;

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

@@ -0,0 +1,159 @@
+'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 apiManager = require('../../../services/api/api-manager.js');
+
+var useSignalRListener = require('./useSignalRListener.js');
+
+var HubConnectionBuilder = require('../../../../node_modules/@microsoft/signalr/dist/esm/HubConnectionBuilder.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 setLoading(state) {
+  return Object.assign(Object.assign({}, state), {
+    loading: false
+  });
+}
+
+function setDoneLoading(state) {
+  return Object.assign(Object.assign({}, state), {
+    loading: true
+  });
+}
+
+function accessTokenFactory() {
+  return _tslib.__awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            return _context.abrupt("return", EchoCore__default["default"].EchoClient.getAccessToken());
+
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+} // TODO - Add unit test - need to figure out how to test hooks with useEffectAsync
+
+
+function useSignalR(hubUrl) {
+  var _this = this;
+
+  var _React$useState = React.useState({
+    status: '',
+    loading: false
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      state = _React$useState2[0],
+      setState = _React$useState2[1]; // we will always default to listening for the subscribe message
+
+
+  useSignalRListener.useSignalRListener(state.connection, 'subscribe', function (id, status, payload) {
+    if (status === 200) {
+      setState(function (state) {
+        return Object.assign(Object.assign({}, state), {
+          loading: false,
+          status: 'ok'
+        });
+      });
+    } else {
+      setState(function (state) {
+        return Object.assign(Object.assign({}, state), {
+          loading: false,
+          status: 'error',
+          message: typeof payload === 'string' ? payload : ''
+        });
+      });
+    }
+  }); // SignalR start/stop connection hook
+
+  EchoUtils__default["default"].Hooks.useEffectAsync(function (signal) {
+    return _tslib.__awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var setStateWhenMounted, connection;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              setStateWhenMounted = function _setStateWhenMounted(value) {
+                if (signal.aborted) {
+                  return;
+                }
+
+                setState(value);
+              };
+
+              connection = new HubConnectionBuilder.HubConnectionBuilder().withUrl(apiManager.baseApiUrl + hubUrl, {
+                accessTokenFactory: accessTokenFactory
+              }).withAutomaticReconnect().build(); // reconnect things
+
+              connection.onreconnected(function () {
+                return setStateWhenMounted(setDoneLoading);
+              });
+              connection.onreconnecting(function () {
+                return setStateWhenMounted(setLoading);
+              }); // starting connection
+
+              _context2.next = 6;
+              return connection.start();
+
+            case 6:
+              // should set connection and then loading to done
+              setStateWhenMounted(function (state) {
+                return Object.assign(Object.assign({}, state), {
+                  connection: connection
+                });
+              });
+              setStateWhenMounted(setDoneLoading); // stop connection when unmounted
+
+              return _context2.abrupt("return", function () {
+                connection.stop();
+              });
+
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+  }, []);
+  return state;
+}
+
+exports.useSignalR = useSignalR;

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var React = require('react');
+
+function useSignalRListener(hubConnection, target, method) {
+  React.useEffect(function () {
+    if (!hubConnection) {
+      return;
+    }
+
+    hubConnection.on(target, method);
+    return function () {
+      hubConnection.off(target, method);
+    };
+  }, [hubConnection, target, method]);
+}
+
+exports.useSignalRListener = useSignalRListener;

package/dist/src/coreApplication/EchoEventHandler.js

@@ -14,10 +14,16 @@ var React = require('react');
 
 var reactRouterDom = require('react-router-dom');
 
+var useLongPress = require('../hooks/useLongPress.js');
+
 var plantChanged = require('../services/eventCallbacks/plantChanged.js');
 
+var copyText = require('../utils/copyText.js');
+
 var eventHandlerUtils = require('../utils/eventHandlerUtils.js');
 
+var EchoEventHandler_module = require('./EchoEventHandler.module.css.js');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -35,6 +41,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var EchoEventHandler = function EchoEventHandler(_ref) {
   var children = _ref.children;
   var history = reactRouterDom.useHistory();
+  var touchEvents = useLongPress.useLongPress(copyText.copyText, 800);
   React.useEffect(function () {
     var unsubscribe = echoBase.eventHub.subscribe(EchoCore.EchoEvents.PlantChanged, function (plantEvent) {
       plantChanged.handlePlantChanged(plantEvent.selectedPlant, history, plantEvent.stayOnPath);
@@ -43,6 +50,12 @@ var EchoEventHandler = function EchoEventHandler(_ref) {
       unsubscribe();
     };
   });
+  React.useEffect(function () {
+    document.addEventListener('contextmenu', copyText.copyText);
+    return function () {
+      document.removeEventListener('contextmenu', copyText.copyText);
+    };
+  });
   React.useEffect(function () {
     if (!history) {
       console.error('No react history found!', history);
@@ -58,7 +71,9 @@ var EchoEventHandler = function EchoEventHandler(_ref) {
       unListen();
     };
   }, [history]);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children);
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    className: EchoEventHandler_module["default"].echoEventContainer
+  }, touchEvents), children);
 };
 
 exports.EchoEventHandler = EchoEventHandler;

package/dist/src/coreApplication/EchoEventHandler.module.css.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var styleInject_es = require('../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".EchoEventHandler-module_echoEventContainer__zFKRh{height:100%}";
+var style = {
+  "echoEventContainer": "EchoEventHandler-module_echoEventContainer__zFKRh"
+};
+styleInject_es["default"](css_248z);
+exports["default"] = style;

package/dist/src/hooks/useLongPress.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var React = require('react'); // https://stackoverflow.com/questions/48048957/react-long-press-event
+
+
+function useLongPress(onLongPress) {
+  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
+  var timeout = React.useRef();
+
+  var start = function start(event) {
+    timeout.current = setTimeout(function () {
+      onLongPress(event);
+    }, delay);
+  };
+
+  var clear = function clear() {
+    timeout.current && clearTimeout(timeout.current);
+  };
+
+  return {
+    onTouchStart: function onTouchStart(e) {
+      return start(e);
+    },
+    onTouchMove: function onTouchMove() {
+      return clear();
+    },
+    onTouchEnd: function onTouchEnd() {
+      return clear();
+    }
+  };
+}
+
+exports.useLongPress = useLongPress;