qwc2 2025.10.15 → 2025.10.16

package/components/IdentifyViewer.js

@@ -52,9 +52,10 @@ import CoordinatesUtils from '../utils/CoordinatesUtils';
 import LayerUtils from '../utils/LayerUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 import MapUtils from '../utils/MapUtils';
-import MiscUtils from '../utils/MiscUtils';
+import MiscUtils, { ToggleSet } from '../utils/MiscUtils';
 import VectorLayerUtils from '../utils/VectorLayerUtils';
 import Icon from './Icon';
+import NavBar from './widgets/NavBar';
 import Spinner from './widgets/Spinner';
 import './style/IdentifyViewer.css';
 var EXCLUDE_PROPS = ['featurereport', 'displayfield', 'layername', 'layertitle', 'layerinfo', 'attribnames', 'clickPos', 'displayname', 'bbox'];
@@ -321,46 +322,52 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, IdentifyViewer);
     _this = _callSuper(this, IdentifyViewer, [props]);
     _defineProperty(_this, "state", {
-      expanded: {},
-      expandedResults: {},
+      collapsedLayers: new ToggleSet(),
+      expandedResults: new ToggleSet(),
+      pinnedResults: new ToggleSet(),
       resultTree: {},
       reports: {},
       currentResult: null,
-      currentLayer: null,
+      settingsMenu: false,
       exportFormat: 'geojson',
       selectedAggregatedReport: "",
       generatingReport: false,
-      selectedLayer: ''
+      selectedLayer: '',
+      compareEnabled: false,
+      currentPage: 0
+    });
+    _defineProperty(_this, "getCurrentResultFeature", function () {
+      var _this$state$resultTre, _this$state$resultTre2, _this$state$resultTre3, _this$state$currentRe;
+      return (_this$state$resultTre = (_this$state$resultTre2 = _this.state.resultTree[(_this$state$currentRe = _this.state.currentResult) === null || _this$state$currentRe === void 0 ? void 0 : _this$state$currentRe.layerid]) === null || _this$state$resultTre2 === void 0 || (_this$state$resultTre3 = _this$state$resultTre2.find) === null || _this$state$resultTre3 === void 0 ? void 0 : _this$state$resultTre3.call(_this$state$resultTre2, function (feature) {
+        return feature.id === _this.state.currentResult.featureid;
+      })) !== null && _this$state$resultTre !== void 0 ? _this$state$resultTre : null;
     });
     _defineProperty(_this, "updateResultTree", function () {
       var layers = Object.keys(_this.props.identifyResults);
       var currentResult = null;
-      var currentLayer = null;
       if (layers.length === 1 && _this.props.identifyResults[layers[0]].length === 1) {
-        currentLayer = layers[0];
-        currentResult = _this.props.identifyResults[layers[0]][0];
+        currentResult = {
+          layerid: layers[0],
+          featureid: _this.props.identifyResults[layers[0]][0].id
+        };
       }
       _this.setState({
         resultTree: clone(_this.props.identifyResults),
         currentResult: currentResult,
-        currentLayer: currentLayer,
         reports: LayerUtils.collectFeatureReports(_this.props.layers)
       });
     });
-    _defineProperty(_this, "setHighlightedResults", function (results, resultTree) {
-      if (!results && _this.props.highlightAllResults) {
-        var selectedLayer = _this.state.selectedLayer || '';
-        results = Object.keys(resultTree).reduce(function (res, layer) {
-          var layerData = resultTree[selectedLayer || layer];
-          return res.concat(layerData.map(function (result) {
-            return _objectSpread(_objectSpread({}, result), {}, {
-              id: "".concat(selectedLayer || layer, ".").concat(result.id)
-            });
-          }));
-        }, []);
+    _defineProperty(_this, "setHighlightedFeatures", function (features) {
+      var paginated = _this.props.resultDisplayMode === 'paginated';
+      if (!features && (_this.props.highlightAllResults || paginated)) {
+        var resultTree = _this.state.selectedLayer !== '' ? _defineProperty({}, _this.state.selectedLayer, _this.state.resultTree[_this.state.selectedLayer]) : _this.state.resultTree;
+        features = Object.values(resultTree).flat();
+        if (paginated) {
+          features = [features[_this.state.currentPage]];
+        }
       }
-      results = (results || []).filter(function (result) {
-        return result.type.toLowerCase() === "feature";
+      features = (features || []).filter(function (feature) {
+        return feature.type.toLowerCase() === "feature";
       }).map(function (feature) {
         var newFeature = _objectSpread(_objectSpread({}, feature), {}, {
           properties: {}
@@ -370,79 +377,50 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
         delete newFeature.styleOptions;
         return newFeature;
       });
-      if (!isEmpty(results)) {
+      if (!isEmpty(features)) {
         var layer = {
           id: "__identifyviewerhighlight",
           role: LayerRole.SELECTION
         };
-        _this.props.addLayerFeatures(layer, results, true);
+        _this.props.addLayerFeatures(layer, features, true);
       } else {
         _this.props.removeLayer("__identifyviewerhighlight");
       }
     });
-    _defineProperty(_this, "getExpandedClass", function (path, deflt) {
-      var expanded = _this.state.expanded[path] !== undefined ? _this.state.expanded[path] : deflt;
-      return expanded ? "identify-layer-expandable identify-layer-expanded" : "identify-layer-expandable";
-    });
-    _defineProperty(_this, "toggleExpanded", function (path, deflt) {
-      var newstate = _this.state.expanded[path] !== undefined ? !_this.state.expanded[path] : !deflt;
-      var diff = {};
-      diff[path] = newstate;
-      if (_this.state.currentLayer === path && !newstate) {
-        _this.setState(function (state) {
-          return _objectSpread(_objectSpread({}, state), {}, {
-            expanded: _objectSpread(_objectSpread({}, state.expanded), diff),
-            currentResult: null,
-            currentLayer: null
-          });
-        });
-      } else {
-        _this.setState(function (state) {
-          return _objectSpread(_objectSpread({}, state), {}, {
-            expanded: _objectSpread(_objectSpread({}, state.expanded), diff)
-          });
-        });
-      }
-    });
-    _defineProperty(_this, "setCurrentResult", function (layer, result) {
-      if (_this.state.currentResult === result) {
-        _this.setState({
-          currentResult: null,
-          currentLayer: null
-        });
-      } else {
-        _this.setState({
-          currentResult: result,
-          currentLayer: layer
-        });
-        _this.scrollIntoView = true;
-      }
-    });
-    _defineProperty(_this, "removeResultLayer", function (layer) {
+    _defineProperty(_this, "removeResultLayer", function (layerid) {
       _this.setState(function (state) {
+        var _state$currentResult;
         var newResultTree = _objectSpread({}, state.resultTree);
-        delete newResultTree[layer];
-        _this.setState({
+        delete newResultTree[layerid];
+        return {
           resultTree: newResultTree,
-          currentResult: state.currentLayer === layer ? null : state.currentResult,
-          currentLayer: state.currentLayer === layer ? null : state.currentLayer
-        });
+          collapsedLayers: state.collapsedLayers["delete"](layerid),
+          currentResult: ((_state$currentResult = state.currentResult) === null || _state$currentResult === void 0 ? void 0 : _state$currentResult.layerid) === layerid ? null : state.currentResult
+        };
       });
     });
-    _defineProperty(_this, "removeResult", function (layer, result) {
+    _defineProperty(_this, "removeResult", function (layerid, feature) {
       _this.setState(function (state) {
+        var _state$currentResult2;
         var newResultTree = _objectSpread({}, state.resultTree);
-        newResultTree[layer] = state.resultTree[layer].filter(function (item) {
-          return item !== result;
+        var collapsedLayers = state.collapsedLayers;
+        newResultTree[layerid] = state.resultTree[layerid].filter(function (item) {
+          return item !== feature;
         });
-        if (isEmpty(newResultTree[layer])) {
-          delete newResultTree[layer];
+        if (isEmpty(newResultTree[layerid])) {
+          delete newResultTree[layerid];
+          collapsedLayers["delete"](layerid);
         }
-        var selectedLayer = isEmpty(newResultTree[layer]) ? '' : state.selectedLayer;
+        var selectedLayer = isEmpty(newResultTree[layerid]) ? '' : state.selectedLayer;
+        var pinnedResults = state.pinnedResults["delete"](layerid + "$" + feature.id);
         return {
           resultTree: newResultTree,
-          currentResult: state.currentResult === result ? null : state.currentResult,
-          selectedLayer: selectedLayer
+          currentResult: ((_state$currentResult2 = state.currentResult) === null || _state$currentResult2 === void 0 ? void 0 : _state$currentResult2.featureid) === feature.id ? null : state.currentResult,
+          selectedLayer: selectedLayer,
+          pinnedResults: pinnedResults,
+          expandedResults: state.expandedResults["delete"](layerid + "$" + feature.id),
+          collapsedLayers: collapsedLayers,
+          compareEnabled: state.compareEnabled && pinnedResults.size > 1
         };
       });
     });
@@ -469,10 +447,10 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       });
       if (exporter) {
         if (!_this.props.exportGeometry) {
-          json = Object.entries(json).reduce(function (res, _ref13) {
-            var _ref14 = _slicedToArray(_ref13, 2),
-              layerId = _ref14[0],
-              features = _ref14[1];
+          json = Object.entries(json).reduce(function (res, _ref14) {
+            var _ref15 = _slicedToArray(_ref14, 2),
+              layerId = _ref15[0],
+              features = _ref15[1];
             return _objectSpread(_objectSpread({}, res), {}, _defineProperty({}, layerId, features.map(function (feature) {
               return omit(feature, ['geometry']);
             })));
@@ -489,138 +467,179 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-    _defineProperty(_this, "renderLayer", function (layer) {
-      var results = _this.state.resultTree[layer];
-      if (results.length === 0) {
-        return null;
-      }
+    _defineProperty(_this, "renderResultTree", function () {
+      var exportEnabled = _this.props.enableExport === true || !isEmpty(_this.props.enableExport);
       return /*#__PURE__*/React.createElement("div", {
-        className: _this.getExpandedClass(layer, true),
-        key: layer
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "identify-result-entry",
-        onMouseEnter: function onMouseEnter() {
-          return _this.setHighlightedResults(results, _this.state.resultTree);
+        className: "identify-results-tree",
+        key: "results-container",
+        ref: function ref(el) {
+          _this.resultsTreeRef = el;
         },
-        onMouseLeave: function onMouseLeave() {
-          return _this.setHighlightedResults(_this.state.currentResult === null ? null : [_this.state.currentResult], _this.state.resultTree);
-        }
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "clickable",
-        onClick: function onClick() {
-          return _this.toggleExpanded(layer, true);
+        style: {
+          maxHeight: _this.state.currentResult ? '10em' : 'initial'
         }
-      }, /*#__PURE__*/React.createElement("b", null, results[0].layertitle)), /*#__PURE__*/React.createElement(Icon, {
-        className: "identify-remove-result",
-        icon: "minus-sign",
-        onClick: function onClick() {
-          return _this.removeResultLayer(layer);
-        }
-      }), _this.props.enableExport === true || !isEmpty(_this.props.enableExport) ? /*#__PURE__*/React.createElement(Icon, {
-        className: "identify-export-result",
-        icon: "export",
-        onClick: function onClick() {
-          return _this.exportResultLayer(layer);
+      }, Object.entries(_this.state.resultTree).map(function (_ref16) {
+        var _ref17 = _slicedToArray(_ref16, 2),
+          layerid = _ref17[0],
+          features = _ref17[1];
+        if (features.length === 0) {
+          return null;
         }
-      }) : null), /*#__PURE__*/React.createElement("div", {
-        className: "identify-layer-entries"
-      }, results.map(function (result) {
-        return _this.renderResult(layer, result);
-      })));
+        return /*#__PURE__*/React.createElement("div", {
+          key: layerid
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "identify-results-tree-entry",
+          onMouseEnter: function onMouseEnter() {
+            return _this.setHighlightedFeatures(features);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return _this.setHighlightedFeatures(_this.state.currentResult ? [_this.getCurrentResultFeature()] : null);
+          }
+        }, /*#__PURE__*/React.createElement("span", {
+          onClick: function onClick() {
+            return _this.toggleExpanded(layerid);
+          }
+        }, /*#__PURE__*/React.createElement(Icon, {
+          icon: _this.state.collapsedLayers.has(layerid) ? "expand" : "collapse"
+        }), " ", features[0].layertitle), exportEnabled ? /*#__PURE__*/React.createElement(Icon, {
+          className: "identify-export-result",
+          icon: "export",
+          onClick: function onClick() {
+            return _this.exportResultLayer(layerid);
+          }
+        }) : null, /*#__PURE__*/React.createElement(Icon, {
+          className: "identify-remove-result",
+          icon: "trash",
+          onClick: function onClick() {
+            return _this.removeResultLayer(layerid);
+          }
+        })), _this.state.collapsedLayers.has(layerid) ? null : /*#__PURE__*/React.createElement("div", {
+          className: "identify-results-tree-entries"
+        }, features.map(function (feature) {
+          var _this$state$currentRe2, _this$state$currentRe3;
+          // this.renderResult(layername, result)
+          var ref = _this.state.currentResult === feature && _this.scrollIntoView ? function (el) {
+            _this.currentResultElRef = el;
+          } : null;
+          var active = ((_this$state$currentRe2 = _this.state.currentResult) === null || _this$state$currentRe2 === void 0 ? void 0 : _this$state$currentRe2.featureid) === feature.id && ((_this$state$currentRe3 = _this.state.currentResult) === null || _this$state$currentRe3 === void 0 ? void 0 : _this$state$currentRe3.layerid) === layerid;
+          return /*#__PURE__*/React.createElement("div", {
+            className: "identify-results-tree-entry",
+            key: feature.id,
+            onMouseEnter: function onMouseEnter() {
+              return _this.setHighlightedFeatures([feature]);
+            },
+            onMouseLeave: function onMouseLeave() {
+              return _this.setHighlightedFeatures(_this.state.currentResult ? [_this.getCurrentResultFeature()] : null);
+            }
+          }, /*#__PURE__*/React.createElement("span", {
+            className: active ? "identify-results-tree-entry-active" : "",
+            onClick: function onClick() {
+              return _this.setCurrentResult(layerid, feature.id);
+            },
+            ref: ref
+          }, feature.displayname, _this.state.pinnedResults.has(layerid + "$" + feature.id) ? /*#__PURE__*/React.createElement(Icon, {
+            icon: "pin"
+          }) : null), exportEnabled ? /*#__PURE__*/React.createElement(Icon, {
+            className: "identify-export-result",
+            icon: "export",
+            onClick: function onClick() {
+              return _this.exportResult(layerid, feature);
+            }
+          }) : null, /*#__PURE__*/React.createElement(Icon, {
+            className: "identify-remove-result",
+            icon: "trash",
+            onClick: function onClick() {
+              return _this.removeResult(layerid, feature);
+            }
+          }));
+        })));
+      }));
     });
-    _defineProperty(_this, "renderResult", function (layer, result) {
-      var ref = _this.state.currentResult === result && _this.scrollIntoView ? function (el) {
-        _this.currentResultElRef = el;
-      } : null;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "identify-result-entry",
-        key: result.id,
-        onMouseEnter: function onMouseEnter() {
-          return _this.setHighlightedResults([result], _this.state.resultTree);
-        },
-        onMouseLeave: function onMouseLeave() {
-          return _this.setHighlightedResults(_this.state.currentResult === null ? null : [_this.state.currentResult], _this.state.resultTree);
-        }
-      }, /*#__PURE__*/React.createElement("span", {
-        className: _this.state.currentResult === result ? "active clickable" : "clickable",
-        onClick: function onClick() {
-          return _this.setCurrentResult(layer, result);
-        },
-        ref: ref
-      }, result.displayname), /*#__PURE__*/React.createElement(Icon, {
-        className: "identify-remove-result",
-        icon: "minus-sign",
-        onClick: function onClick() {
-          return _this.removeResult(layer, result);
-        }
-      }), _this.props.enableExport === true || !isEmpty(_this.props.enableExport) ? /*#__PURE__*/React.createElement(Icon, {
-        className: "identify-export-result",
-        icon: "export",
-        onClick: function onClick() {
-          return _this.exportResult(layer, result);
-        }
-      }) : null);
+    _defineProperty(_this, "toggleExpanded", function (layerid) {
+      _this.setState(function (state) {
+        var _state$currentResult3;
+        return {
+          collapsedLayers: state.collapsedLayers.toggle(layerid),
+          currentResult: ((_state$currentResult3 = state.currentResult) === null || _state$currentResult3 === void 0 ? void 0 : _state$currentResult3.layerid) === layerid ? null : state.currentResult
+        };
+      });
+    });
+    _defineProperty(_this, "setCurrentResult", function (layerid, featureid) {
+      var _this$state$currentRe4, _this$state$currentRe5;
+      if (((_this$state$currentRe4 = _this.state.currentResult) === null || _this$state$currentRe4 === void 0 ? void 0 : _this$state$currentRe4.layerid) === layerid && ((_this$state$currentRe5 = _this.state.currentResult) === null || _this$state$currentRe5 === void 0 ? void 0 : _this$state$currentRe5.featureid) === featureid) {
+        _this.setState({
+          currentResult: null
+        });
+      } else {
+        _this.setState({
+          currentResult: {
+            layerid: layerid,
+            featureid: featureid
+          }
+        });
+        _this.scrollIntoView = true;
+      }
     });
-    _defineProperty(_this, "renderResultAttributes", function (layer, result, resultClass) {
-      if (!result) {
+    _defineProperty(_this, "renderResultAttributes", function (layerid, feature, resultClass) {
+      if (!feature) {
         return null;
       }
       var resultbox = null;
       var extraattribs = null;
       var inlineExtaAttribs = false;
-      var featureReports = _this.state.reports[layer] || [];
-      if (result.featureReport) {
+      var featureReports = _this.state.reports[layerid] || [];
+      if (feature.featureReport) {
         featureReports.push({
-          title: result.layertitle,
-          template: result.featureReport
+          title: feature.layertitle,
+          template: feature.featureReport
         });
       }
-      if (result.type === "text") {
+      if (feature.type === "text") {
         resultbox = /*#__PURE__*/React.createElement("pre", {
           className: "identify-result-box"
-        }, result.text);
-      } else if (result.type === "html") {
+        }, feature.text);
+      } else if (feature.type === "html") {
         resultbox = /*#__PURE__*/React.createElement("iframe", {
           className: "identify-result-box",
           onLoad: function onLoad(ev) {
-            return _this.setIframeContent(ev.target, result.text);
+            return _this.setIframeContent(ev.target, feature.text);
           },
           ref: function ref(el) {
-            return _this.pollIframe(el, result.text);
+            return _this.pollIframe(el, feature.text);
           }
         });
-      } else if (result.properties.htmlContent) {
-        if (result.properties.htmlContentInline) {
+      } else if (feature.properties.htmlContent) {
+        if (feature.properties.htmlContentInline) {
           resultbox = /*#__PURE__*/React.createElement("div", {
             className: "identify-result-box"
-          }, _this.parsedContent(result.properties.htmlContent));
+          }, _this.parsedContent(feature.properties.htmlContent));
         } else {
           resultbox = /*#__PURE__*/React.createElement("iframe", {
             className: "identify-result-box",
             onLoad: function onLoad(ev) {
-              return _this.setIframeContent(ev.target, result.properties.htmlContent);
+              return _this.setIframeContent(ev.target, feature.properties.htmlContent);
             },
             ref: function ref(el) {
-              return _this.pollIframe(el, result.properties.htmlContent);
+              return _this.pollIframe(el, feature.properties.htmlContent);
             }
           });
         }
       } else {
         var _rows;
         inlineExtaAttribs = true;
-        var properties = Object.keys(result.properties) || [];
+        var properties = Object.keys(feature.properties) || [];
         var rows = [];
-        if (properties.length === 1 && result.properties.maptip) {
+        if (properties.length === 1 && feature.properties.maptip) {
           rows = properties.map(function (attrib) {
             return /*#__PURE__*/React.createElement("tr", {
               key: attrib
             }, /*#__PURE__*/React.createElement("td", {
               className: "identify-attr-value"
-            }, _this.attribValue(result.properties[attrib], attrib, layer, result)));
+            }, _this.attribValue(feature.properties[attrib], attrib, layerid, feature)));
           });
         } else {
           rows = properties.map(function (attrib) {
-            if (_this.props.theme.skipEmptyFeatureAttributes && (result.properties[attrib] === "" || result.properties[attrib] === null || result.properties[attrib] === "NULL")) {
+            if (_this.props.theme.skipEmptyFeatureAttributes && (feature.properties[attrib] === "" || feature.properties[attrib] === null || feature.properties[attrib] === "NULL")) {
               return null;
             }
             return /*#__PURE__*/React.createElement("tr", {
@@ -629,10 +648,10 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
               className: "identify-attr-title " + _this.props.longAttributesDisplay
             }, /*#__PURE__*/React.createElement("i", null, attrib)), /*#__PURE__*/React.createElement("td", {
               className: "identify-attr-value " + _this.props.longAttributesDisplay
-            }, _this.attribValue(result.properties[attrib], attrib, layer, result)));
+            }, _this.attribValue(feature.properties[attrib], attrib, layerid, feature)));
           });
         }
-        (_rows = rows).push.apply(_rows, _toConsumableArray(_this.computeExtraAttributes(layer, result)));
+        (_rows = rows).push.apply(_rows, _toConsumableArray(_this.computeExtraAttributes(layerid, feature)));
         featureReports.forEach(function (report, idx) {
           rows.push(/*#__PURE__*/React.createElement("tr", {
             key: "__featurereport" + idx
@@ -641,7 +660,7 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
           }, /*#__PURE__*/React.createElement("i", null, LocaleUtils.tr("identify.featureReport") + ": " + report.title)), /*#__PURE__*/React.createElement("td", {
             className: "identify-attr-value " + _this.props.longAttributesDisplay
           }, /*#__PURE__*/React.createElement("a", {
-            href: _this.getFeatureReportUrl(report, result)
+            href: _this.getFeatureReportUrl(report, feature)
           }, LocaleUtils.tr("identify.link")))));
         });
         if (isEmpty(rows)) {
@@ -655,12 +674,12 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
           className: "attribute-list"
         }, /*#__PURE__*/React.createElement("tbody", null, rows)));
       }
-      if (!inlineExtaAttribs && (_this.props.attributeCalculator || !isEmpty(_this.state.reports[layer]))) {
+      if (!inlineExtaAttribs && (_this.props.attributeCalculator || !isEmpty(_this.state.reports[layerid]))) {
         extraattribs = /*#__PURE__*/React.createElement("div", {
           className: "identify-result-box"
         }, /*#__PURE__*/React.createElement("table", {
           className: "attribute-list"
-        }, /*#__PURE__*/React.createElement("tbody", null, _this.computeExtraAttributes(layer, result), featureReports.map(function (report, idx) {
+        }, /*#__PURE__*/React.createElement("tbody", null, _this.computeExtraAttributes(layerid, feature), featureReports.map(function (report, idx) {
           return /*#__PURE__*/React.createElement("tr", {
             key: "report" + idx
           }, /*#__PURE__*/React.createElement("td", {
@@ -668,26 +687,27 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
           }, /*#__PURE__*/React.createElement("i", null, LocaleUtils.tr("identify.featureReport") + ": " + report.title)), /*#__PURE__*/React.createElement("td", {
             className: "identify-attr-value " + _this.props.longAttributesDisplay
           }, /*#__PURE__*/React.createElement("a", {
-            href: _this.getFeatureReportUrl(report, result),
+            href: _this.getFeatureReportUrl(report, feature),
             rel: "noreferrer",
             target: "_blank"
           }, LocaleUtils.tr("identify.link"))));
         }))));
       }
       var zoomToFeatureButton = null;
-      if (result.bbox && result.crs) {
+      if (feature.bbox && feature.crs) {
         zoomToFeatureButton = /*#__PURE__*/React.createElement(Icon, {
           icon: "zoom",
           onClick: function onClick() {
-            return _this.zoomToResult(result);
+            return _this.zoomToResult(feature);
           }
         });
       }
-      var key = result + ":" + result.id;
-      var expanded = _this.state.expandedResults[key];
+      var key = layerid + "$" + feature.id;
+      var expanded = _this.state.expandedResults.has(key);
+      var pinned = _this.state.pinnedResults.has(key);
       return /*#__PURE__*/React.createElement("div", {
         className: resultClass,
-        key: "results-attributes"
+        key: key
       }, /*#__PURE__*/React.createElement("div", {
         className: "identify-result-title"
       }, _this.props.collapsible ? /*#__PURE__*/React.createElement(Icon, {
@@ -695,24 +715,167 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick() {
           return _this.setState(function (state) {
             return {
-              expandedResults: _objectSpread(_objectSpread({}, state.expandedResults), {}, _defineProperty({}, key, !expanded))
+              expandedResults: state.expandedResults.toggle(key)
             };
           });
         }
-      }) : null, /*#__PURE__*/React.createElement("span", null, (_this.props.showLayerTitles ? result.layertitle + ": " : "") + result.displayname), zoomToFeatureButton, /*#__PURE__*/React.createElement(Icon, {
+      }) : null, _this.props.enableCompare ? /*#__PURE__*/React.createElement(Icon, {
+        icon: pinned ? "unpin" : "pin",
+        onClick: function onClick() {
+          return _this.togglePinnedResult(key);
+        }
+      }) : null, /*#__PURE__*/React.createElement("span", null, (_this.props.showLayerTitles ? feature.layertitle + ": " : "") + feature.displayname), zoomToFeatureButton, /*#__PURE__*/React.createElement(Icon, {
         icon: "info-sign",
         onClick: function onClick() {
-          return _this.showLayerInfo(layer);
+          return _this.showLayerInfo(layerid);
         }
       }), /*#__PURE__*/React.createElement(Icon, {
         icon: "trash",
         onClick: function onClick() {
-          return _this.removeResult(layer, result);
+          return _this.removeResult(layerid, feature);
         }
       })), _this.props.collapsible && !expanded ? null : /*#__PURE__*/React.createElement("div", {
         className: "identify-result-container"
       }, resultbox, extraattribs));
     });
+    _defineProperty(_this, "togglePinnedResult", function (key) {
+      _this.setState(function (state) {
+        var pinnedResults = state.pinnedResults.toggle(key);
+        return {
+          pinnedResults: pinnedResults,
+          compareEnabled: pinnedResults.size > 1
+        };
+      });
+    });
+    _defineProperty(_this, "renderToolbar", function (resultCount) {
+      var toggleButton = function toggleButton(key, icon) {
+        return /*#__PURE__*/React.createElement("button", {
+          className: "button" + (_this.state[key] ? " pressed" : ""),
+          onClick: function onClick() {
+            return _this.setState(function (state) {
+              return _defineProperty({}, key, !state[key]);
+            });
+          }
+        }, /*#__PURE__*/React.createElement(Icon, {
+          icon: icon
+        }));
+      };
+      var infoLabel = null;
+      if (_this.state.compareEnabled) {
+        infoLabel = /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("identify.comparing", _this.state.pinnedResults.size()));
+      } else if (_this.props.resultDisplayMode !== 'paginated') {
+        infoLabel = /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("identify.featurecount", resultCount));
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "identify-toolbar"
+      }, toggleButton("settingsMenu", "cog"), _this.state.settingsMenu ? _this.renderSettingsMenu() : null, _this.state.pinnedResults.size() > 1 ? toggleButton("compareEnabled", "compare") : null, /*#__PURE__*/React.createElement("span", {
+        className: "identify-toolbar-spacer"
+      }), infoLabel, /*#__PURE__*/React.createElement("span", {
+        className: "identify-toolbar-spacer"
+      }), _this.props.resultDisplayMode === 'paginated' ? /*#__PURE__*/React.createElement(NavBar, {
+        currentPage: _this.state.currentPage,
+        nPages: resultCount,
+        pageChanged: function pageChanged(page) {
+          return _this.setState({
+            currentPage: page
+          });
+        },
+        pageSizes: [1]
+      }) : null);
+    });
+    _defineProperty(_this, "renderSettingsMenu", function () {
+      var _exporters$_this$stat;
+      var exporters = Object.fromEntries(_this.getExporters().map(function (exporter) {
+        return [exporter.id, exporter];
+      }));
+      var enabledExporters = Array.isArray(_this.props.enableExport) ? _this.props.enableExport : Object.keys(exporters);
+      var clipboardExportDisabled = ((_exporters$_this$stat = exporters[_this.state.exportFormat]) === null || _exporters$_this$stat === void 0 ? void 0 : _exporters$_this$stat.allowClipboard) !== true;
+      var exportEnabled = _this.props.enableExport === true || !isEmpty(_this.props.enableExport);
+      var reportsEnabled = _this.props.enableAggregatedReports && Object.keys(_this.state.reports).length > 0;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "identify-settings-menu"
+      }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("identify.results"), ":"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+        className: "controlgroup"
+      }, /*#__PURE__*/React.createElement("select", {
+        className: "controlgroup-expanditem",
+        onChange: function onChange(e) {
+          return _this.setState({
+            selectedLayer: e.target.value
+          });
+        }
+      }, /*#__PURE__*/React.createElement("option", {
+        value: ""
+      }, LocaleUtils.tr("identify.layerall")), Object.keys(_this.state.resultTree).filter(function (key) {
+        return _this.state.resultTree[key].length;
+      }).map(function (layer) {
+        return /*#__PURE__*/React.createElement("option", {
+          key: layer,
+          value: layer
+        }, _this.state.resultTree[layer][0].layertitle);
+      }))))), exportEnabled ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("identify.export"), ":"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+        className: "controlgroup"
+      }, /*#__PURE__*/React.createElement("select", {
+        className: "controlgroup-expanditem",
+        onChange: function onChange(ev) {
+          return _this.setState({
+            exportFormat: ev.target.value
+          });
+        },
+        value: _this.state.exportFormat
+      }, enabledExporters.map(function (id) {
+        var _exporters$id$title;
+        return /*#__PURE__*/React.createElement("option", {
+          key: id,
+          value: id
+        }, (_exporters$id$title = exporters[id].title) !== null && _exporters$id$title !== void 0 ? _exporters$id$title : LocaleUtils.tr(exporters[id].titleMsgId));
+      })), /*#__PURE__*/React.createElement("button", {
+        className: "button",
+        onClick: function onClick() {
+          return _this.exportResults();
+        },
+        title: LocaleUtils.tr("identify.download")
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "export"
+      })), /*#__PURE__*/React.createElement("button", {
+        className: "button",
+        disabled: clipboardExportDisabled,
+        onClick: function onClick() {
+          return _this.exportResults(true);
+        },
+        title: LocaleUtils.tr("identify.clipboard")
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "copy"
+      }))))) : null, reportsEnabled ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("identify.aggregatedreport"), ":"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+        className: "controlgroup"
+      }, /*#__PURE__*/React.createElement("select", {
+        className: "controlgroup-expanditem",
+        onChange: function onChange(ev) {
+          return _this.setState({
+            selectedAggregatedReport: ev.target.value
+          });
+        },
+        value: _this.state.selectedAggregatedReport
+      }, /*#__PURE__*/React.createElement("option", {
+        disabled: true,
+        value: ""
+      }, LocaleUtils.tr("identify.selectreport")), Object.entries(_this.state.reports).map(function (_ref19) {
+        var _ref20 = _slicedToArray(_ref19, 2),
+          layername = _ref20[0],
+          reports = _ref20[1];
+        return reports.map(function (report, idx) {
+          return /*#__PURE__*/React.createElement("option", {
+            key: layername + "::" + idx,
+            value: layername + "::" + idx
+          }, report.title);
+        });
+      })), /*#__PURE__*/React.createElement("button", {
+        className: "button",
+        disabled: !_this.state.selectedAggregatedReport || _this.state.generatingReport,
+        onClick: _this.downloadAggregatedReport
+      }, _this.state.generatingReport ? /*#__PURE__*/React.createElement(Spinner, null) : /*#__PURE__*/React.createElement(Icon, {
+        icon: "report"
+      }))))) : null)));
+    });
     _defineProperty(_this, "computeExtraAttributes", function (layer, result) {
       var _window$qwc;
       var rows = [];
@@ -925,6 +1088,7 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
         _this.props.changeLayerProperty(layer.id, "visibility", true, path);
       }
     });
+    _this.resultsTreeRef = null;
     _this.currentResultElRef = null;
     _this.scrollIntoView = false;
     _this.state.exportFormat = !Array.isArray(props.enableExport) ? 'geojson' : props.enableExport[0];
@@ -942,15 +1106,24 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       if (this.props.identifyResults !== prevProps.identifyResults) {
         this.updateResultTree();
       }
-      if (prevState.currentResult !== this.state.currentResult || prevState.resultTree !== this.state.resultTree) {
-        this.setHighlightedResults(this.state.currentResult === null ? null : [this.state.currentResult], this.state.resultTree);
+      if (prevState.currentResult !== this.state.currentResult || prevState.resultTree !== this.state.resultTree || this.state.currentPage !== prevState.currentPage) {
+        this.setHighlightedFeatures(this.state.currentResult ? [this.getCurrentResultFeature()] : null);
       }
       // Scroll to selected result
-      if (this.state.currentResult && this.state.currentResult !== prevState.currentResult && this.currentResultElRef && this.scrollIntoView) {
-        this.currentResultElRef.parentNode.scrollTop = this.currentResultElRef.offsetTop - this.currentResultElRef.parentNode.offsetTop;
+      if (this.state.currentResult && this.state.currentResult !== prevState.currentResult && this.resultsTreeRef && this.currentResultElRef && this.scrollIntoView) {
+        this.resultsTreeRef.scrollTop = this.currentResultElRef.offsetTop - 10;
         this.scrollIntoView = false;
         this.currentResultElRef = null;
       }
+      // Ensure currentPage is in range
+      if (this.state.resultTree !== prevState.resultTree || this.state.selectedLayer !== prevState.selectedLayer) {
+        var count = Object.values(this.state.selectedLayer !== '' ? _defineProperty({}, this.state.selectedLayer, this.state.resultTree[this.state.selectedLayer]) : this.state.resultTree).flat().length;
+        this.setState(function (state) {
+          return {
+            currentPage: Math.max(0, Math.min(state.currentPage, count - 1))
+          };
+        });
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -960,151 +1133,67 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this,
-        _exporters$this$state;
-      var tree = this.props.displayResultTree;
+      var _this2 = this;
       var body = null;
-      if (tree) {
-        var contents = Object.keys(this.state.resultTree).map(function (layer) {
-          return _this2.renderLayer(layer);
+      var resultTree = this.state.selectedLayer !== '' ? _defineProperty({}, this.state.selectedLayer, this.state.resultTree[this.state.selectedLayer]) : this.state.resultTree;
+      var flatResults = Object.entries(resultTree).map(function (_ref23) {
+        var _ref24 = _slicedToArray(_ref23, 2),
+          layerid = _ref24[0],
+          features = _ref24[1];
+        return features.map(function (feature) {
+          return [layerid, feature];
         });
-        var attributes = this.renderResultAttributes(this.state.currentLayer, this.state.currentResult, 'identify-result-tree-frame');
-        var resultsContainerStyle = {
-          maxHeight: attributes ? '10em' : 'initial'
-        };
-        body = [/*#__PURE__*/React.createElement("div", {
-          className: "identify-results-container",
-          key: "results-container",
-          style: resultsContainerStyle
-        }, contents), attributes];
-      } else {
+      }).flat();
+      if (this.state.compareEnabled) {
+        body = /*#__PURE__*/React.createElement("div", {
+          className: "identify-compare-results"
+        }, this.state.pinnedResults.entries().map(function (key) {
+          var _key$split = key.split("$"),
+            _key$split2 = _slicedToArray(_key$split, 2),
+            layerid = _key$split2[0],
+            featureid = _key$split2[1];
+          var feature = _this2.state.resultTree[layerid].find(function (f) {
+            return f.id === featureid;
+          });
+          return _this2.renderResultAttributes(layerid, feature, "identify-result-frame");
+        }));
+      } else if (this.props.resultDisplayMode === 'tree') {
+        var _this$state$currentRe6;
+        body = [this.renderResultTree(), this.renderResultAttributes((_this$state$currentRe6 = this.state.currentResult) === null || _this$state$currentRe6 === void 0 ? void 0 : _this$state$currentRe6.layerid, this.getCurrentResultFeature(), 'identify-result-tree-frame')];
+      } else if (this.props.resultDisplayMode === 'flat') {
         body = /*#__PURE__*/React.createElement("div", {
           className: "identify-flat-results-list"
-        }, this.props.showLayerSelector ? /*#__PURE__*/React.createElement("div", {
-          className: "identify-selectbox"
-        }, /*#__PURE__*/React.createElement("select", {
-          className: "identify-layer-select",
-          onChange: function onChange(e) {
-            var selectedLayer = e.target.value;
-            _this2.setState({
-              selectedLayer: selectedLayer
-            });
-          }
-        }, /*#__PURE__*/React.createElement("option", {
-          value: ""
-        }, LocaleUtils.tr("identify.layerall")), Object.keys(this.state.resultTree).filter(function (key) {
-          return _this2.state.resultTree[key].length;
-        }).map(function (layer) {
-          return /*#__PURE__*/React.createElement("option", {
-            key: layer,
-            value: layer
-          }, _this2.state.resultTree[layer][0].layertitle);
-        })), /*#__PURE__*/React.createElement("span", {
-          className: "identify-buttonbox-spacer"
-        }), /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("identify.featurecount"), ": ", Object.values(this.state.selectedLayer !== '' ? this.state.resultTree[this.state.selectedLayer] : this.state.resultTree).flat().length)) : null, Object.keys(this.state.selectedLayer !== '' ? _defineProperty({}, this.state.selectedLayer, this.state.resultTree[this.state.selectedLayer]) : this.state.resultTree).map(function (layer) {
-          var layerResults = _this2.state.resultTree[layer];
-          return layerResults.map(function (result) {
-            var resultClass = _this2.state.currentResult === result ? 'identify-result-frame-highlighted' : 'identify-result-frame-normal';
+        }, Object.entries(resultTree).map(function (_ref25) {
+          var _ref26 = _slicedToArray(_ref25, 2),
+            layerid = _ref26[0],
+            features = _ref26[1];
+          return features.map(function (feature) {
             return /*#__PURE__*/React.createElement("div", {
-              key: result.id,
+              key: layerid + "$" + feature.id,
               onMouseEnter: function onMouseEnter() {
-                return _this2.setState({
-                  currentResult: result,
-                  currentLayer: layer
-                });
+                return _this2.setHighlightedFeatures([feature]);
               },
               onMouseLeave: function onMouseLeave() {
-                return _this2.setState({
-                  currentResult: null,
-                  currentLayer: null
-                });
+                return _this2.setHighlightedFeatures(null);
               }
-            }, _this2.renderResultAttributes(layer, result, resultClass));
+            }, _this2.renderResultAttributes(layerid, feature, 'identify-result-frame'));
           });
         }));
+      } else if (this.props.resultDisplayMode === 'paginated' && this.state.currentPage < flatResults.length) {
+        var _flatResults$this$sta = _slicedToArray(flatResults[this.state.currentPage], 2),
+          layerid = _flatResults$this$sta[0],
+          feature = _flatResults$this$sta[1];
+        body = /*#__PURE__*/React.createElement("div", {
+          className: "identify-flat-results-list"
+        }, this.renderResultAttributes(layerid, feature, 'identify-result-frame'));
       }
       // "el.style.background='inherit'": HACK to trigger an additional repaint, since Safari/Chrome on iOS render the element cut off the first time
-      var exporters = Object.fromEntries(this.getExporters().map(function (exporter) {
-        return [exporter.id, exporter];
-      }));
-      var enabledExporters = Array.isArray(this.props.enableExport) ? this.props.enableExport : Object.keys(exporters);
-      var clipboardExportDisabled = ((_exporters$this$state = exporters[this.state.exportFormat]) === null || _exporters$this$state === void 0 ? void 0 : _exporters$this$state.allowClipboard) !== true;
       return /*#__PURE__*/React.createElement("div", {
         className: "identify-body",
         ref: function ref(el) {
           if (el) el.style.background = 'inherit';
         }
-      }, body, this.props.enableExport === true || !isEmpty(this.props.enableExport) ? /*#__PURE__*/React.createElement("div", {
-        className: "identify-buttonbox"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "identify-buttonbox-spacer"
-      }), /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("identify.export"), ":\xA0"), /*#__PURE__*/React.createElement("div", {
-        className: "controlgroup"
-      }, /*#__PURE__*/React.createElement("select", {
-        className: "combo identify-export-format",
-        onChange: function onChange(ev) {
-          return _this2.setState({
-            exportFormat: ev.target.value
-          });
-        },
-        value: this.state.exportFormat
-      }, enabledExporters.map(function (id) {
-        var _exporters$id$title;
-        return /*#__PURE__*/React.createElement("option", {
-          key: id,
-          value: id
-        }, (_exporters$id$title = exporters[id].title) !== null && _exporters$id$title !== void 0 ? _exporters$id$title : LocaleUtils.tr(exporters[id].titleMsgId));
-      })), /*#__PURE__*/React.createElement("button", {
-        className: "button",
-        onClick: function onClick() {
-          return _this2.exportResults();
-        },
-        title: LocaleUtils.tr("identify.download")
-      }, /*#__PURE__*/React.createElement(Icon, {
-        icon: "export"
-      })), /*#__PURE__*/React.createElement("button", {
-        className: "button",
-        disabled: clipboardExportDisabled,
-        onClick: function onClick() {
-          return _this2.exportResults(true);
-        },
-        title: LocaleUtils.tr("identify.clipboard")
-      }, /*#__PURE__*/React.createElement(Icon, {
-        icon: "copy"
-      })))) : null, this.props.enableAggregatedReports && Object.keys(this.state.reports).length > 0 ? /*#__PURE__*/React.createElement("div", {
-        className: "identify-buttonbox"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "identify-buttonbox-spacer"
-      }), /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("identify.aggregatedreport"), ":\xA0"), /*#__PURE__*/React.createElement("div", {
-        className: "controlgroup"
-      }, /*#__PURE__*/React.createElement("select", {
-        className: "combo identify-export-format",
-        onChange: function onChange(ev) {
-          return _this2.setState({
-            selectedAggregatedReport: ev.target.value
-          });
-        },
-        value: this.state.selectedAggregatedReport
-      }, /*#__PURE__*/React.createElement("option", {
-        disabled: true,
-        value: ""
-      }, LocaleUtils.tr("identify.selectreport")), Object.entries(this.state.reports).map(function (_ref16) {
-        var _ref17 = _slicedToArray(_ref16, 2),
-          layername = _ref17[0],
-          reports = _ref17[1];
-        return reports.map(function (report, idx) {
-          return /*#__PURE__*/React.createElement("option", {
-            key: layername + "::" + idx,
-            value: layername + "::" + idx
-          }, report.title);
-        });
-      })), /*#__PURE__*/React.createElement("button", {
-        className: "button",
-        disabled: !this.state.selectedAggregatedReport || this.state.generatingReport,
-        onClick: this.downloadAggregatedReport
-      }, this.state.generatingReport ? /*#__PURE__*/React.createElement(Spinner, null) : /*#__PURE__*/React.createElement(Icon, {
-        icon: "report"
-      })))) : null);
+      }, body, flatResults.length > 0 ? this.renderToolbar(flatResults.length) : null);
     }
   }]);
 }(React.Component);
@@ -1115,8 +1204,8 @@ _defineProperty(IdentifyViewer, "propTypes", {
   changeLayerProperty: PropTypes.func,
   collapsible: PropTypes.bool,
   customExporters: PropTypes.array,
-  displayResultTree: PropTypes.bool,
   enableAggregatedReports: PropTypes.bool,
+  enableCompare: PropTypes.bool,
   enableExport: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
   exportGeometry: PropTypes.bool,
   highlightAllResults: PropTypes.bool,
@@ -1128,6 +1217,7 @@ _defineProperty(IdentifyViewer, "propTypes", {
   openExternalUrl: PropTypes.func,
   removeLayer: PropTypes.func,
   replaceImageUrls: PropTypes.bool,
+  resultDisplayMode: PropTypes.string,
   setActiveLayerInfo: PropTypes.func,
   showLayerSelector: PropTypes.bool,
   showLayerTitles: PropTypes.bool,
@@ -1137,7 +1227,6 @@ _defineProperty(IdentifyViewer, "propTypes", {
 _defineProperty(IdentifyViewer, "defaultProps", {
   longAttributesDisplay: 'ellipsis',
   customExporters: [],
-  displayResultTree: true,
   attributeCalculator: function attributeCalculator(/* layer, feature */) {
     return [];
   },
@@ -1145,6 +1234,7 @@ _defineProperty(IdentifyViewer, "defaultProps", {
     return value;
   },
   enableAggregatedReports: true,
+  resultDisplayMode: 'flat',
   showLayerTitles: true,
   showLayerSelector: true,
   highlightAllResults: true