Use ResizeableWindow for displaying identify results (qgis/qwc2-demo-…

…app#4)

QWC2Components/actions/mapInfo.js

@@ -10,14 +10,8 @@ const assign = require('object-assign');
 const axios = require('axios');
 const uuid = require('uuid');
 const jsts = require('jsts');
-const mapInfoGetFeatureInfo = require('../../MapStore2/web/client/actions/mapInfo').getFeatureInfo;
 const {newMapInfoRequest, errorFeatureInfo, loadFeatureInfo} = require('../../MapStore2/web/client/actions/mapInfo');
 
-function getFeatureInfo(wmsBasePath, requestParams, lMetaData, layerOptions = {}) {
-    // NOTE: ignore options from layer to prevent unnecessary params in GetFeatureInfo request
-    return mapInfoGetFeatureInfo(wmsBasePath, requestParams, lMetaData, {});
-}
-
 function getFeature(wfsBasePath, requestParams, lMetaData, wgs84FilterPoly = null) {
     const defaultParams = {
         service: 'WFS',

QWC2Components/components/IdentifyViewer.jsx

@@ -207,7 +207,7 @@ const IdentifyViewer = React.createClass({
         return (
             <li key={layer} className={this.getExpandedClass(layer, true)}>
                 <div className="identify-layer-result">
-                    <span onClick={()=> this.toggleExpanded(layer, true)}><b>{layer}</b></span>
+                    <span className="clickable" onClick={()=> this.toggleExpanded(layer, true)}><b>{layer}</b></span>
                     <Glyphicon className="identify-remove-result" glyph="minus-sign" onClick={() => this.removeResultLayer(layer)} />
                     <Glyphicon className="identify-export-result" glyph="export" onClick={() => this.exportResultLayer(layer)} />
                 </div>

QWC2Components/components/style/IdentifyViewer.css

@@ -1,11 +1,14 @@
 #IdentifyViewer {
     padding: 0.5em;
     background-color: @dialog_bg@;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 #IdentifyViewer div.identify-results-container {
-    max-height: 15em;
     overflow-y: auto;
+    flex: 0 1 auto;
 }
 
 #IdentifyViewer ul {
@@ -14,6 +17,7 @@
     font-size: small;
 }
 
+#IdentifyViewer div.identify-layer-result span.clickable,
 #IdentifyViewer li.identify-feature-result span.clickable {
     cursor: pointer;
 }
@@ -85,8 +89,8 @@
     background-color: white;
     font-size: small;
     padding: 0.25em;
-    max-height: 10em;
     overflow-y: auto;
+    flex: 1 1 auto;
 }
 
 #IdentifyViewer table.attribute-list {
@@ -113,4 +117,5 @@
 #IdentifyViewer div.identify-buttonbox {
     margin-top: 0.5em;
     text-align: right;
+    flex: 0 0 auto;
 }

QWC2Components/plugins/Identify.jsx

@@ -1,87 +1,120 @@
 /**
- * Copyright 2016, Sourcepole AG.
+ * Copyright 2017, 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.
  */
+
 const React = require('react');
 const {connect} = require('react-redux');
-const {getVectorInfo, purgeMapInfoResults, showMapinfoMarker, hideMapinfoMarker, showMapinfoRevGeocode, hideMapinfoRevGeocode} = require('../../MapStore2/web/client/actions/mapInfo');
-const {getFeatureInfo} = require('../actions/mapInfo');
-const {defaultQueryableFilter} = require('../../MapStore2/web/client/utils/MapInfoUtils');
-const {changeMapInfoFormat} = require('../../MapStore2/web/client/actions/mapInfo');
+const MapInfoUtils = require('../../MapStore2/web/client/utils/MapInfoUtils');
+const Spinner = require('../../MapStore2/web/client/components/misc/spinners/BasicSpinner/BasicSpinner');
+const Message = require('../../MapStore2/web/client/components/I18N/Message');
+const {getFeatureInfo, purgeMapInfoResults, showMapinfoMarker, hideMapinfoMarker} = require('../../MapStore2/web/client/actions/mapInfo');
+const ResizeableWindow = require("../components/ResizeableWindow");
 const {IdentifyViewer} = require('../components/IdentifyViewer');
 
-require('./style/Identify.css');
-
 const Identify = React.createClass({
     propTypes: {
         enabled: React.PropTypes.bool,
-        responses: React.PropTypes.array,
-        requests: React.PropTypes.array,
         format: React.PropTypes.string,
-        params: React.PropTypes.object, // additional GetFeatureInfo params
+        maxItems: React.PropTypes.number,
+        point: React.PropTypes.object,
         map: React.PropTypes.object,
         layers: React.PropTypes.array,
-        point: React.PropTypes.object,
-        showModalReverse: React.PropTypes.bool,
-        reverseGeocodeData: React.PropTypes.object,
-        sendRequest: React.PropTypes.func,
-        localRequest: React.PropTypes.func,
+        requests: React.PropTypes.array,
+        responses: React.PropTypes.array,
         purgeResults: React.PropTypes.func,
-        queryableLayersFilter: React.PropTypes.func,
+        buildRequest: React.PropTypes.func,
+        sendRequest: React.PropTypes.func,
         showMarker: React.PropTypes.func,
         hideMarker: React.PropTypes.func,
-        showRevGeocode: React.PropTypes.func,
-        hideRevGeocode: React.PropTypes.func,
-        panelClassName: React.PropTypes.string,
-        headerClassName: React.PropTypes.string,
-        closeGlyph: React.PropTypes.string,
-        allowMultiselection: React.PropTypes.bool
     },
     getDefaultProps() {
         return {
-            enabled: false,
-            format: 'text/xml',
-            params: {},
-            queryableLayersFilter: (l) => {
-                return defaultQueryableFilter(l) &&
-                    // skip WMS layers with empty query layers
-                    (l.type !== 'wms' || (l.queryLayers || []).length > 0);
-            },
-            panelClassName: "identify-dialog",
-            headerClassName: "identify-dialog-header",
-            closeGlyph: "remove",
-            allowMultiselection: true
+            format: "text/xml",
+            maxItems: 10
+        };
+    },
+    queryFilter(l) {
+        // All non-background WMS layers with a non-empty queryLayers list
+        return l.type === 'wms' && l.group !== "background" && (l.queryLayers || []).length > 0
+    },
+    componentWillReceiveProps(newProps) {
+        if (this.needsRefresh(newProps)) {
+            if(newProps.point.modifiers.ctrl !== true) {
+                this.props.purgeResults();
+            }
+            const queryableLayers = newProps.layers.filter(this.queryFilter);
+            queryableLayers.forEach((layer) => {
+                const {url, request, metadata} = MapInfoUtils.buildIdentifyRequest(layer, newProps);
+                if (url) {
+                    this.props.sendRequest(url, request, metadata, {});
+                }
+            });
+            this.props.showMarker();
         }
+        if (!newProps.enabled && this.props.enabled) {
+            this.props.hideMarker();
+            this.props.purgeResults();
+        }
+    },
+    onClose() {
+        this.props.hideMarker();
+        this.props.purgeResults();
+    },
+    renderHeader(missing) {
+        return (
+            <span role="header">
+                { (missing !== 0 ) ? <Spinner value={missing} sSize="sp-small" /> : null }
+                {this.props.headerGlyph ? <Glyphicon glyph={this.props.headerGlyph} /> : null}&nbsp;<Message msgId="identifyTitle" />
+                <button onClick={this.onModalHiding} className="close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button>
+            </span>
+        );
     },
     render() {
-        const Identify = require("../../MapStore2/web/client/components/data/identify/Identify.jsx");
-        return (<Identify {...this.props} asPanel={false} viewer={IdentifyViewer} viewerOptions={{map: this.props.map}} />);
+        if (!this.props.enabled || this.props.requests.length === 0) {
+            return null;
+        }
+        let missingResponses = this.props.requests.length - this.props.responses.length;
+        return (
+            <ResizeableWindow title="identifyTitle" glyphicon="info-sign" onClose={this.onClose} initialWidth={320} initialHeight={400}>
+                <IdentifyViewer role="body"
+                    map={this.props.map}
+                    missingResponses={missingResponses}
+                    responses={this.props.responses} />
+            </ResizeableWindow>
+        );
+    },
+    needsRefresh(props) {
+        if (props.enabled && props.point && props.point.pixel) {
+            if (!this.props.point.pixel || this.props.point.pixel.x !== props.point.pixel.x ||
+                    this.props.point.pixel.y !== props.point.pixel.y ) {
+                return true;
+            }
+            if (!this.props.point.pixel || props.point.pixel && this.props.format !== props.format) {
+                return true;
+            }
+        }
+        return false;
     }
 });
 
 const selector = (state) => ({
     enabled: state.mapInfo && state.mapInfo.enabled,
     responses: state.mapInfo && state.mapInfo.responses || [],
     requests: state.mapInfo && state.mapInfo.requests || [],
-    format: state.mapInfo && state.mapInfo.infoFormat,
     map: state.map ? state.map.present : null,
-    point: state.mapInfo && state.mapInfo.clickPoint,
-    showModalReverse: state.mapInfo && state.mapInfo.showModalReverse,
-    reverseGeocodeData: state.mapInfo && state.mapInfo.reverseGeocodeData,
+    point: state.mapInfo && state.mapInfo.clickPoint || {},
     layers: state.layers && state.layers.flat || []
 });
 
 const IdentifyPlugin = connect(selector, {
     sendRequest: getFeatureInfo,
-    localRequest: getVectorInfo,
     purgeResults: purgeMapInfoResults,
     showMarker: showMapinfoMarker,
-    hideMarker: hideMapinfoMarker,
-    showRevGeocode: showMapinfoRevGeocode,
-    hideRevGeocode: hideMapinfoRevGeocode
+    hideMarker: hideMapinfoMarker
 })(Identify);
 
 module.exports = {