qwc2 2025.10.9 → 2025.10.14

package/plugins/Panoramax.js

@@ -1,4 +1,342 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _slicedToArray(r,e){return _arrayWithHoles(r)||_iterableToArrayLimit(r,e)||_unsupportedIterableToArray(r,e)||_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(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(r){if(Array.isArray(r))return r}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}import React from"react";import{connect}from"react-redux";import axios from"axios";import PropTypes from"prop-types";import{addLayer,addLayerFeatures,LayerRole,removeLayer}from"../actions/layers";import{setCurrentTask}from"../actions/task";import MapSelection from"../components/MapSelection";import ResizeableWindow from"../components/ResizeableWindow";import ConfigUtils from"../utils/ConfigUtils";import CoordinatesUtils from"../utils/CoordinatesUtils";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import ResourceRegistry from"../utils/ResourceRegistry";import"@panoramax/web-viewer";import"@panoramax/web-viewer/build/index.css";import"./style/Panoramax.css";/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { connect } from 'react-redux';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import { addLayer, addLayerFeatures, LayerRole, removeLayer } from '../actions/layers';
+import { setCurrentTask } from '../actions/task';
+import MapSelection from '../components/MapSelection';
+import ResizeableWindow from '../components/ResizeableWindow';
+import ConfigUtils from '../utils/ConfigUtils';
+import CoordinatesUtils from '../utils/CoordinatesUtils';
+import LocaleUtils from '../utils/LocaleUtils';
+import MapUtils from '../utils/MapUtils';
+import ResourceRegistry from '../utils/ResourceRegistry';
+import '@panoramax/web-viewer';
+import '@panoramax/web-viewer/build/index.css';
+import './style/Panoramax.css';
+
+/**
  * Panoramax Integration for QWC2.
  *
- */var Panoramax=/*#__PURE__*/function(_React$Component){function Panoramax(_props){var _this;_classCallCheck(this,Panoramax);_this=_callSuper(this,Panoramax,[_props]);_defineProperty(_this,"state",{lon:null,lat:null,queryData:null,selectionActive:false,selectionGeom:null,yaw:null,currentTooltip:"",viewerInitialized:false});_defineProperty(_this,"onClose",function(){var _this$viewer;_this.props.setCurrentTask(null);_this.props.removeLayer("panoramax-recordings");_this.props.removeLayer("panoramaxselection");_this.setState({selectionGeom:null,queryData:null,lon:null,lat:null,selectionActive:null,yaw:null,currentTooltip:"",viewerInitialized:false});ResourceRegistry.removeResource("selected");(_this$viewer=_this.viewer)===null||_this$viewer===void 0||_this$viewer.select(null,null,true)});_defineProperty(_this,"initializeViewer",function(){var viewerElement=_this.viewerRef.current;if(viewerElement){_this.viewer=viewerElement;_this.viewer.addEventListener("psv:picture-loading",function(event){_this.setState({lon:event.detail.lon,lat:event.detail.lat},function(){return _this.handlePanoramaxEvent()})});_this.viewer.addEventListener("psv:view-rotated",function(event){_this.setState({yaw:event.detail.x},function(){return _this.handlePanoramaxEvent()})});_this.viewer.addEventListener("psv:picture-loaded",function(event){_this.setState({yaw:event.detail.x},function(){return _this.handlePanoramaxEvent()})})}});_defineProperty(_this,"handlePanoramaxEvent",function(){ResourceRegistry.addResource("selected","".concat(ConfigUtils.getAssetsPath(),"/img/panoramax-cursor.svg"));var layer={id:"panoramaxselection",role:LayerRole.SELECTION};var feature={geometry:{type:"Point",coordinates:[_this.state.lon,_this.state.lat]},crs:"EPSG:4326",styleName:"image",styleOptions:{img:"selected",rotation:MapUtils.degreesToRadians(_this.state.yaw),anchor:[0.5,0.5]}};_this.props.addLayerFeatures(layer,[feature],true)});_defineProperty(_this,"handleKeyDown",function(event){if(event.key==="Escape"){_this.onClose()}});_defineProperty(_this,"addRecordingsMVT",function(){var resolutions=MapUtils.getResolutionsForScales(_this.props.theme.scales,_this.props.theme.mapCrs);var layer={id:"panoramax-recordings",type:"mvt",projection:_this.props.theme.mapCrs,tileGridConfig:{origin:[0,0],resolutions:resolutions},style:"https://".concat(_this.props.panoramaxInstance,"/api/map/style.json"),role:LayerRole.USERLAYER};_this.props.addLayer(layer)});_defineProperty(_this,"addRecordingsWMS",function(){var layer={id:"panoramax-recordings",type:"wms",projection:_this.props.theme.mapCrs,url:_this.props.wmsUrl,role:LayerRole.USERLAYER};_this.props.addLayer(layer)});_defineProperty(_this,"queryPoint",function(props){var _CoordinatesUtils$rep=CoordinatesUtils.reproject(props.coordinates,_this.props.theme.mapCrs,"EPSG:4326"),_CoordinatesUtils$rep2=_slicedToArray(_CoordinatesUtils$rep,2),centerX=_CoordinatesUtils$rep2[0],centerY=_CoordinatesUtils$rep2[1];var offset=0.001;var bbox="".concat(centerX-offset,",").concat(centerY-offset,",").concat(centerX+offset,",").concat(centerY+offset);axios.get("https://".concat(_this.props.panoramaxInstance,"/api/search?bbox=").concat(bbox)).then(function(response){_this.setState({queryData:{queryImage:response.data.features[0].id,querySequence:response.data.features[0].collection,querySource:response.data.features[0].providers[0].name,queryDate:response.data.features[0].properties.datetime}});if(_this.viewer){_this.viewer.select(response.data.features[0].collection,response.data.features[0].id,true)}})["catch"](function(){_this.setState({queryData:null})})});_this.viewerRef=/*#__PURE__*/React.createRef();return _this}_inherits(Panoramax,_React$Component);return _createClass(Panoramax,[{key:"componentDidMount",value:function componentDidMount(){document.addEventListener("keydown",this.handleKeyDown)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(!prevProps.active&&this.props.active){this.setState({selectionActive:true});if(this.props.loadSequencesTiles){if(this.props.tileMode==="wms"&&this.props.wmsUrl){this.addRecordingsWMS()}else{this.addRecordingsMVT()}}}else if(this.state.selectionGeom&&this.state.selectionGeom!==prevState.selectionGeom){this.queryPoint(this.state.selectionGeom)}if(this.state.queryData&&!this.state.viewerInitialized&&(!prevState.queryData||this.state.queryData!==prevState.queryData)){this.initializeViewer();this.setState({viewerInitialized:true})}}},{key:"componentWillUnmount",value:function componentWillUnmount(){document.removeEventListener("keydown",this.handleKeyDown);this.onClose()}},{key:"render",value:function render(){var _this2=this;if(!this.props.active){return null}var _this$state=this.state,selectionGeom=_this$state.selectionGeom,queryData=_this$state.queryData;return/*#__PURE__*/React.createElement(React.Fragment,null,selectionGeom&&/*#__PURE__*/React.createElement(ResizeableWindow,{dockable:this.props.geometry.side,icon:"Panoramax",initialHeight:this.props.geometry.initialHeight,initialWidth:this.props.geometry.initialWidth,initialX:this.props.geometry.initialX,initialY:this.props.geometry.initialY,initiallyDocked:this.props.geometry.initiallyDocked,onClose:this.onClose,splitScreenWhenDocked:true,title:LocaleUtils.tr("panoramax.title")},/*#__PURE__*/React.createElement("div",{className:"panoramax-body",role:"body"},!queryData?/*#__PURE__*/React.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%",textAlign:"center"}},/*#__PURE__*/React.createElement("p",null,LocaleUtils.tr("panoramax.notfound"))):/*#__PURE__*/React.createElement("pnx-photo-viewer",{currentTooltip:"",endpoint:"https://".concat(this.props.panoramaxInstance,"/api"),picture:queryData.queryImage,ref:this.viewerRef,sequence:queryData.querySequence,style:{width:"100%",height:"calc(100% + 0.5em)"},widgets:false},/*#__PURE__*/React.createElement("p",{className:"panoramax-widget",slot:"bottom-left"},new Date(queryData.queryDate).toLocaleString(undefined,{year:"numeric",month:"long",day:"numeric",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:"short"})),/*#__PURE__*/React.createElement("p",{className:"panoramax-widget",slot:"bottom-right"},queryData.querySource)))),/*#__PURE__*/React.createElement(MapSelection,{active:this.state.selectionActive,cursor:"url(\"".concat(ConfigUtils.getAssetsPath(),"/img/target.svg\") 1 1, default"),geomType:"Point",geometry:selectionGeom,geometryChanged:function geometryChanged(geom){return _this2.setState({selectionGeom:geom})},styleOptions:{fillColor:[0,0,0,0],strokeColor:[0,0,0,0]}}))}}])}(React.Component);_defineProperty(Panoramax,"propTypes",{active:PropTypes.bool,addLayer:PropTypes.func,addLayerFeatures:PropTypes.func,geometry:PropTypes.shape({initialWidth:PropTypes.number,initialHeight:PropTypes.number,initialX:PropTypes.number,initialY:PropTypes.number,initiallyDocked:PropTypes.bool,side:PropTypes.string}),/** Whether or not to load the layer containing the image sequences. */loadSequencesTiles:PropTypes.bool,/** URL of the Panoramax instance. */panoramaxInstance:PropTypes.string,removeLayer:PropTypes.func,setCurrentTask:PropTypes.func,theme:PropTypes.object,/** Mode for the image sequences layer: either WMS (Require a custom URL) or MVT(EPSG:3857 only). */tileMode:PropTypes.string,/** URL of the WMS image sequences layer. */wmsUrl:PropTypes.string});_defineProperty(Panoramax,"defaultProps",{geometry:{initialWidth:640,initialHeight:640,initialX:0,initialY:0,initiallyDocked:false,side:"left"},loadSequencesTiles:true,panoramaxInstance:"api.panoramax.xyz",tileMode:"mvt"});export default connect(function(state){return{active:state.task.id==="Panoramax",click:state.map.click,mapScale:MapUtils.computeForZoom(state.map.scales,state.map.zoom),theme:state.theme.current}},{addLayer:addLayer,addLayerFeatures:addLayerFeatures,removeLayer:removeLayer,setCurrentTask:setCurrentTask})(Panoramax);
+ */
+var Panoramax = /*#__PURE__*/function (_React$Component) {
+  function Panoramax(_props) {
+    var _this;
+    _classCallCheck(this, Panoramax);
+    _this = _callSuper(this, Panoramax, [_props]);
+    _defineProperty(_this, "state", {
+      lon: null,
+      lat: null,
+      queryData: null,
+      selectionActive: false,
+      selectionGeom: null,
+      yaw: null,
+      currentTooltip: '',
+      viewerInitialized: false
+    });
+    _defineProperty(_this, "onClose", function () {
+      var _this$viewer;
+      _this.props.setCurrentTask(null);
+      _this.props.removeLayer('panoramax-recordings');
+      _this.props.removeLayer('panoramaxselection');
+      _this.setState({
+        selectionGeom: null,
+        queryData: null,
+        lon: null,
+        lat: null,
+        selectionActive: null,
+        yaw: null,
+        currentTooltip: '',
+        viewerInitialized: false
+      });
+      ResourceRegistry.removeResource('selected');
+      (_this$viewer = _this.viewer) === null || _this$viewer === void 0 || _this$viewer.select(null, null, true);
+    });
+    _defineProperty(_this, "initializeViewer", function () {
+      var viewerElement = _this.viewerRef.current;
+      if (viewerElement) {
+        _this.viewer = viewerElement;
+        _this.viewer.addEventListener('psv:picture-loading', function (event) {
+          _this.setState({
+            lon: event.detail.lon,
+            lat: event.detail.lat
+          }, function () {
+            return _this.handlePanoramaxEvent();
+          });
+        });
+        _this.viewer.addEventListener('psv:view-rotated', function (event) {
+          _this.setState({
+            yaw: event.detail.x
+          }, function () {
+            return _this.handlePanoramaxEvent();
+          });
+        });
+        _this.viewer.addEventListener('psv:picture-loaded', function (event) {
+          _this.setState({
+            yaw: event.detail.x
+          }, function () {
+            return _this.handlePanoramaxEvent();
+          });
+        });
+      }
+    });
+    _defineProperty(_this, "handlePanoramaxEvent", function () {
+      ResourceRegistry.addResource('selected', "".concat(ConfigUtils.getAssetsPath(), "/img/panoramax-cursor.svg"));
+      var layer = {
+        id: "panoramaxselection",
+        role: LayerRole.SELECTION
+      };
+      var feature = {
+        geometry: {
+          type: 'Point',
+          coordinates: [_this.state.lon, _this.state.lat]
+        },
+        crs: 'EPSG:4326',
+        styleName: 'image',
+        styleOptions: {
+          img: 'selected',
+          rotation: MapUtils.degreesToRadians(_this.state.yaw),
+          anchor: [0.5, 0.5]
+        }
+      };
+      _this.props.addLayerFeatures(layer, [feature], true);
+    });
+    _defineProperty(_this, "handleKeyDown", function (event) {
+      if (event.key === 'Escape') {
+        _this.onClose();
+      }
+    });
+    _defineProperty(_this, "addRecordingsMVT", function () {
+      var resolutions = MapUtils.getResolutionsForScales(_this.props.theme.scales, _this.props.theme.mapCrs);
+      var layer = {
+        id: 'panoramax-recordings',
+        type: 'mvt',
+        projection: _this.props.theme.mapCrs,
+        tileGridConfig: {
+          origin: [0, 0],
+          resolutions: resolutions
+        },
+        style: "https://".concat(_this.props.panoramaxInstance, "/api/map/style.json"),
+        role: LayerRole.USERLAYER
+      };
+      _this.props.addLayer(layer);
+    });
+    _defineProperty(_this, "addRecordingsWMS", function () {
+      var layer = {
+        id: 'panoramax-recordings',
+        type: 'wms',
+        projection: _this.props.theme.mapCrs,
+        url: _this.props.wmsUrl,
+        role: LayerRole.USERLAYER
+      };
+      _this.props.addLayer(layer);
+    });
+    _defineProperty(_this, "queryPoint", function (props) {
+      var _CoordinatesUtils$rep = CoordinatesUtils.reproject(props.coordinates, _this.props.theme.mapCrs, 'EPSG:4326'),
+        _CoordinatesUtils$rep2 = _slicedToArray(_CoordinatesUtils$rep, 2),
+        centerX = _CoordinatesUtils$rep2[0],
+        centerY = _CoordinatesUtils$rep2[1];
+      var offset = 0.001;
+      var bbox = "".concat(centerX - offset, ",").concat(centerY - offset, ",").concat(centerX + offset, ",").concat(centerY + offset);
+      axios.get("https://".concat(_this.props.panoramaxInstance, "/api/search?bbox=").concat(bbox)).then(function (response) {
+        _this.setState({
+          queryData: {
+            queryImage: response.data.features[0].id,
+            querySequence: response.data.features[0].collection,
+            querySource: response.data.features[0].providers[0].name,
+            queryDate: response.data.features[0].properties.datetime
+          }
+        });
+        if (_this.viewer) {
+          _this.viewer.select(response.data.features[0].collection, response.data.features[0].id, true);
+        }
+      })["catch"](function () {
+        _this.setState({
+          queryData: null
+        });
+      });
+    });
+    _this.viewerRef = /*#__PURE__*/React.createRef();
+    return _this;
+  }
+  _inherits(Panoramax, _React$Component);
+  return _createClass(Panoramax, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('keydown', this.handleKeyDown);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (!prevProps.active && this.props.active) {
+        this.setState({
+          selectionActive: true
+        });
+        if (this.props.loadSequencesTiles) {
+          if (this.props.tileMode === "wms" && this.props.wmsUrl) {
+            this.addRecordingsWMS();
+          } else {
+            this.addRecordingsMVT();
+          }
+        }
+      } else if (this.state.selectionGeom && this.state.selectionGeom !== prevState.selectionGeom) {
+        this.queryPoint(this.state.selectionGeom);
+      }
+      if (this.state.queryData && !this.state.viewerInitialized && (!prevState.queryData || this.state.queryData !== prevState.queryData)) {
+        this.initializeViewer();
+        this.setState({
+          viewerInitialized: true
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('keydown', this.handleKeyDown);
+      this.onClose();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (!this.props.active) {
+        return null;
+      }
+      var _this$state = this.state,
+        selectionGeom = _this$state.selectionGeom,
+        queryData = _this$state.queryData;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, selectionGeom && /*#__PURE__*/React.createElement(ResizeableWindow, {
+        dockable: this.props.geometry.side,
+        icon: "Panoramax",
+        initialHeight: this.props.geometry.initialHeight,
+        initialWidth: this.props.geometry.initialWidth,
+        initialX: this.props.geometry.initialX,
+        initialY: this.props.geometry.initialY,
+        initiallyDocked: this.props.geometry.initiallyDocked,
+        onClose: this.onClose,
+        splitScreenWhenDocked: true,
+        title: LocaleUtils.tr("panoramax.title")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "panoramax-body",
+        role: "body"
+      }, !queryData ? /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+          textAlign: 'center'
+        }
+      }, /*#__PURE__*/React.createElement("p", null, LocaleUtils.tr("panoramax.notfound"))) : /*#__PURE__*/React.createElement("pnx-photo-viewer", {
+        currentTooltip: "",
+        endpoint: "https://".concat(this.props.panoramaxInstance, "/api"),
+        picture: queryData.queryImage,
+        ref: this.viewerRef,
+        sequence: queryData.querySequence,
+        style: {
+          width: '100%',
+          height: 'calc(100% + 0.5em)'
+        },
+        widgets: false
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "panoramax-widget",
+        slot: "bottom-left"
+      }, new Date(queryData.queryDate).toLocaleString(undefined, {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        timeZoneName: 'short'
+      })), /*#__PURE__*/React.createElement("p", {
+        className: "panoramax-widget",
+        slot: "bottom-right"
+      }, queryData.querySource)))), /*#__PURE__*/React.createElement(MapSelection, {
+        active: this.state.selectionActive,
+        cursor: "url(\"".concat(ConfigUtils.getAssetsPath(), "/img/target.svg\") 1 1, default"),
+        geomType: 'Point',
+        geometry: selectionGeom,
+        geometryChanged: function geometryChanged(geom) {
+          return _this2.setState({
+            selectionGeom: geom
+          });
+        },
+        styleOptions: {
+          fillColor: [0, 0, 0, 0],
+          strokeColor: [0, 0, 0, 0]
+        }
+      }));
+    }
+  }]);
+}(React.Component);
+_defineProperty(Panoramax, "propTypes", {
+  active: PropTypes.bool,
+  addLayer: PropTypes.func,
+  addLayerFeatures: PropTypes.func,
+  geometry: PropTypes.shape({
+    initialWidth: PropTypes.number,
+    initialHeight: PropTypes.number,
+    initialX: PropTypes.number,
+    initialY: PropTypes.number,
+    initiallyDocked: PropTypes.bool,
+    side: PropTypes.string
+  }),
+  /** Whether or not to load the layer containing the image sequences. */
+  loadSequencesTiles: PropTypes.bool,
+  /** URL of the Panoramax instance. */
+  panoramaxInstance: PropTypes.string,
+  removeLayer: PropTypes.func,
+  setCurrentTask: PropTypes.func,
+  theme: PropTypes.object,
+  /** Mode for the image sequences layer: either WMS (Require a custom URL) or MVT(EPSG:3857 only). */
+  tileMode: PropTypes.string,
+  /** URL of the WMS image sequences layer. */
+  wmsUrl: PropTypes.string
+});
+_defineProperty(Panoramax, "defaultProps", {
+  geometry: {
+    initialWidth: 640,
+    initialHeight: 640,
+    initialX: 0,
+    initialY: 0,
+    initiallyDocked: false,
+    side: 'left'
+  },
+  loadSequencesTiles: true,
+  panoramaxInstance: 'api.panoramax.xyz',
+  tileMode: 'mvt'
+});
+export default connect(function (state) {
+  return {
+    active: state.task.id === "Panoramax",
+    click: state.map.click,
+    mapScale: MapUtils.computeForZoom(state.map.scales, state.map.zoom),
+    theme: state.theme.current
+  };
+}, {
+  addLayer: addLayer,
+  addLayerFeatures: addLayerFeatures,
+  removeLayer: removeLayer,
+  setCurrentTask: setCurrentTask
+})(Panoramax);

package/plugins/Portal.js

@@ -1,10 +1,205 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
  * Copyright 2020, Sourcepole AG.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{connect}from"react-redux";import PropTypes from"prop-types";import{setCurrentTask}from"../actions/task";import{openExternalUrl}from"../actions/windows";import AppMenu from"../components/AppMenu";import Icon from"../components/Icon";import ThemeList from"../components/ThemeList";import ConfigUtils from"../utils/ConfigUtils";import LocaleUtils from"../utils/LocaleUtils";import{UrlParams}from"../utils/PermaLinkUtils";import ThemeUtils from"../utils/ThemeUtils";import"./style/Portal.css";/**
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { setCurrentTask } from '../actions/task';
+import { openExternalUrl } from '../actions/windows';
+import AppMenu from '../components/AppMenu';
+import Icon from '../components/Icon';
+import ThemeList from '../components/ThemeList';
+import ConfigUtils from '../utils/ConfigUtils';
+import LocaleUtils from '../utils/LocaleUtils';
+import { UrlParams } from '../utils/PermaLinkUtils';
+import ThemeUtils from '../utils/ThemeUtils';
+import './style/Portal.css';
+
+/**
  * Displays a landing lage, consisting of a full-screen theme switcher and a configurable menu.
- */var Portal=/*#__PURE__*/function(_React$Component){function Portal(){var _this;_classCallCheck(this,Portal);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,Portal,[].concat(args));_defineProperty(_this,"state",{filter:"",popupClosed:false,menuVisible:false});_defineProperty(_this,"openUrl",function(url,target,title){if(target==="iframe"){target=":iframedialog:externallinkiframe"}_this.props.openExternalUrl(url,target,{title:title,zIndex:250})});_defineProperty(_this,"menuToggled",function(visible){_this.setState({menuVisible:visible})});return _this}_inherits(Portal,_React$Component);return _createClass(Portal,[{key:"componentDidMount",value:function componentDidMount(){if(!this.props.startupParams.t&&!this.props.startupParams.k&&!this.props.startupParams.bk){this.props.setCurrentTask("Portal")}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.currentTask==="Portal"&&(this.props.currentTask!==prevProps.currentTask||this.props.currentTheme!==prevProps.currentTheme||this.props.map!==prevProps.map)){UrlParams.clear()}else if(!prevProps.themes&&this.props.themes&&this.props.currentTask!=="Portal"){// Show portal if no theme is to be loaded
-var theme=ThemeUtils.getThemeById(this.props.themes,this.props.startupParams.t);if((!theme||theme.restricted)&&(ConfigUtils.getConfigProp("dontLoadDefaultTheme")||!this.props.themes.defaultTheme)){this.props.setCurrentTask("Portal")}}}},{key:"render",value:function render(){var _this2=this;if(this.props.currentTask!=="Portal"){return null}var assetsPath=ConfigUtils.getAssetsPath();var preserveSettings=ConfigUtils.getConfigProp("preserveSettingsOnPortalThemeSwitch");return/*#__PURE__*/React.createElement("div",{className:"Portal"},/*#__PURE__*/React.createElement("div",{className:"portal-topbar"},/*#__PURE__*/React.createElement("img",{className:"portal-logo",src:assetsPath+"/img/"+this.props.logo}),/*#__PURE__*/React.createElement("span",{className:"portal-topbar-text",dangerouslySetInnerHTML:{__html:this.props.topBarText}}),/*#__PURE__*/React.createElement("input",{className:"portal-search-field",onChange:function onChange(ev){return _this2.setState({filter:ev.target.value})},placeholder:LocaleUtils.tr("portal.filter"),type:"text",value:this.state.filter}),/*#__PURE__*/React.createElement("span",{className:"portal-topbar-spacer"}),this.props.menuItems.length>0?/*#__PURE__*/React.createElement(AppMenu,{appMenuClearsTask:false,buttonLabel:LocaleUtils.tr("portal.menulabel"),keepMenuOpen:this.props.keepMenuOpen,menuItems:this.props.menuItems,onMenuToggled:this.menuToggled,openExternalUrl:this.openUrl,showOnStartup:this.props.showMenuOnStartup}):null),/*#__PURE__*/React.createElement("div",{className:"portal-body "+(this.state.menuVisible?"portal-body-menuvisible":"")},/*#__PURE__*/React.createElement(ThemeList,{collapsibleGroups:this.props.collapsibleGroups,dontPreserveSettingsOnSwitch:!preserveSettings,filter:this.state.filter})),/*#__PURE__*/React.createElement("div",{className:"portal-bottombar"},this.props.userName?/*#__PURE__*/React.createElement("div",{className:"portal-bottombar-user"},/*#__PURE__*/React.createElement(Icon,{icon:"logout"}),/*#__PURE__*/React.createElement("span",null,this.props.userName)):null,/*#__PURE__*/React.createElement("div",{className:"portal-bottombar-links"},(this.props.bottomBarLinks||[]).map(function(link,idx){var _link$label;var label=(_link$label=link.label)!==null&&_link$label!==void 0?_link$label:LocaleUtils.tr(link.labelmsgid);return/*#__PURE__*/React.createElement("a",{href:"#",key:"l"+idx,onClick:function onClick(ev){ev.preventDefault();_this2.openUrl(link.href,link.target,label)}},label)}))))}}])}(React.Component);_defineProperty(Portal,"propTypes",{/** Links to show in the portal bottom bar */bottomBarLinks:PropTypes.arrayOf(PropTypes.shape({href:PropTypes.string,label:PropTypes.string,labelmsgid:PropTypes.string,target:PropTypes.string})),/** Whether to allow collapsing groups in the theme switcher. */collapsibleGroups:PropTypes.bool,currentTask:PropTypes.string,currentTheme:PropTypes.object,keepMenuOpen:PropTypes.bool,/** Name of a logo image below assets/img. */logo:PropTypes.string,map:PropTypes.object,/** Portal menu items, in the same format as the TopBar menu items. */menuItems:PropTypes.array,openExternalUrl:PropTypes.func,setCurrentTask:PropTypes.func,/** Whether the menu should be visible on startup. */showMenuOnStartup:PropTypes.bool,startupParams:PropTypes.object,themes:PropTypes.object,/** Portal title text to show in the top bar. */topBarText:PropTypes.string,userName:PropTypes.string});_defineProperty(Portal,"defaultProps",{collapsibleGroups:true,menuItems:[]});var selector=function selector(state){return{currentTask:state.task.id,currentTheme:state.theme.current,map:state.map,themes:state.theme.themes,startupParams:state.localConfig.startupParams,userName:state.localConfig.username||""}};export default connect(selector,{setCurrentTask:setCurrentTask,openExternalUrl:openExternalUrl})(Portal);
+ */
+var Portal = /*#__PURE__*/function (_React$Component) {
+  function Portal() {
+    var _this;
+    _classCallCheck(this, Portal);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, Portal, [].concat(args));
+    _defineProperty(_this, "state", {
+      filter: "",
+      popupClosed: false,
+      menuVisible: false
+    });
+    _defineProperty(_this, "openUrl", function (url, target, title) {
+      if (target === "iframe") {
+        target = ":iframedialog:externallinkiframe";
+      }
+      _this.props.openExternalUrl(url, target, {
+        title: title,
+        zIndex: 250
+      });
+    });
+    _defineProperty(_this, "menuToggled", function (visible) {
+      _this.setState({
+        menuVisible: visible
+      });
+    });
+    return _this;
+  }
+  _inherits(Portal, _React$Component);
+  return _createClass(Portal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (!this.props.startupParams.t && !this.props.startupParams.k && !this.props.startupParams.bk) {
+        this.props.setCurrentTask("Portal");
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.currentTask === "Portal" && (this.props.currentTask !== prevProps.currentTask || this.props.currentTheme !== prevProps.currentTheme || this.props.map !== prevProps.map)) {
+        UrlParams.clear();
+      } else if (!prevProps.themes && this.props.themes && this.props.currentTask !== "Portal") {
+        // Show portal if no theme is to be loaded
+        var theme = ThemeUtils.getThemeById(this.props.themes, this.props.startupParams.t);
+        if ((!theme || theme.restricted) && (ConfigUtils.getConfigProp("dontLoadDefaultTheme") || !this.props.themes.defaultTheme)) {
+          this.props.setCurrentTask("Portal");
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (this.props.currentTask !== "Portal") {
+        return null;
+      }
+      var assetsPath = ConfigUtils.getAssetsPath();
+      var preserveSettings = ConfigUtils.getConfigProp("preserveSettingsOnPortalThemeSwitch");
+      return /*#__PURE__*/React.createElement("div", {
+        className: "Portal"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "portal-topbar"
+      }, /*#__PURE__*/React.createElement("img", {
+        className: "portal-logo",
+        src: assetsPath + "/img/" + this.props.logo
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "portal-topbar-text",
+        dangerouslySetInnerHTML: {
+          __html: this.props.topBarText
+        }
+      }), /*#__PURE__*/React.createElement("input", {
+        className: "portal-search-field",
+        onChange: function onChange(ev) {
+          return _this2.setState({
+            filter: ev.target.value
+          });
+        },
+        placeholder: LocaleUtils.tr("portal.filter"),
+        type: "text",
+        value: this.state.filter
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "portal-topbar-spacer"
+      }), this.props.menuItems.length > 0 ? /*#__PURE__*/React.createElement(AppMenu, {
+        appMenuClearsTask: false,
+        buttonLabel: LocaleUtils.tr("portal.menulabel"),
+        keepMenuOpen: this.props.keepMenuOpen,
+        menuItems: this.props.menuItems,
+        onMenuToggled: this.menuToggled,
+        openExternalUrl: this.openUrl,
+        showOnStartup: this.props.showMenuOnStartup
+      }) : null), /*#__PURE__*/React.createElement("div", {
+        className: "portal-body " + (this.state.menuVisible ? "portal-body-menuvisible" : "")
+      }, /*#__PURE__*/React.createElement(ThemeList, {
+        collapsibleGroups: this.props.collapsibleGroups,
+        dontPreserveSettingsOnSwitch: !preserveSettings,
+        filter: this.state.filter
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "portal-bottombar"
+      }, this.props.userName ? /*#__PURE__*/React.createElement("div", {
+        className: "portal-bottombar-user"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "logout"
+      }), /*#__PURE__*/React.createElement("span", null, this.props.userName)) : null, /*#__PURE__*/React.createElement("div", {
+        className: "portal-bottombar-links"
+      }, (this.props.bottomBarLinks || []).map(function (link, idx) {
+        var _link$label;
+        var label = (_link$label = link.label) !== null && _link$label !== void 0 ? _link$label : LocaleUtils.tr(link.labelmsgid);
+        return /*#__PURE__*/React.createElement("a", {
+          href: "#",
+          key: "l" + idx,
+          onClick: function onClick(ev) {
+            ev.preventDefault();
+            _this2.openUrl(link.href, link.target, label);
+          }
+        }, label);
+      }))));
+    }
+  }]);
+}(React.Component);
+_defineProperty(Portal, "propTypes", {
+  /** Links to show in the portal bottom bar */
+  bottomBarLinks: PropTypes.arrayOf(PropTypes.shape({
+    href: PropTypes.string,
+    label: PropTypes.string,
+    labelmsgid: PropTypes.string,
+    target: PropTypes.string
+  })),
+  /** Whether to allow collapsing groups in the theme switcher. */
+  collapsibleGroups: PropTypes.bool,
+  currentTask: PropTypes.string,
+  currentTheme: PropTypes.object,
+  keepMenuOpen: PropTypes.bool,
+  /** Name of a logo image below assets/img. */
+  logo: PropTypes.string,
+  map: PropTypes.object,
+  /** Portal menu items, in the same format as the TopBar menu items. */
+  menuItems: PropTypes.array,
+  openExternalUrl: PropTypes.func,
+  setCurrentTask: PropTypes.func,
+  /** Whether the menu should be visible on startup. */
+  showMenuOnStartup: PropTypes.bool,
+  startupParams: PropTypes.object,
+  themes: PropTypes.object,
+  /** Portal title text to show in the top bar. */
+  topBarText: PropTypes.string,
+  userName: PropTypes.string
+});
+_defineProperty(Portal, "defaultProps", {
+  collapsibleGroups: true,
+  menuItems: []
+});
+var selector = function selector(state) {
+  return {
+    currentTask: state.task.id,
+    currentTheme: state.theme.current,
+    map: state.map,
+    themes: state.theme.themes,
+    startupParams: state.localConfig.startupParams,
+    userName: state.localConfig.username || ""
+  };
+};
+export default connect(selector, {
+  setCurrentTask: setCurrentTask,
+  openExternalUrl: openExternalUrl
+})(Portal);