Add Legend plugin to dataset page (#611)

geonode_mapstore_client/client/js/plugins/Legend.jsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2021, GeoSolutions Sas.
+ * 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, { useState, Fragment } from 'react';
+import { createPlugin } from '@mapstore/framework/utils/PluginsUtils';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import LegendImage from '@mapstore/framework/components/TOC/fragments/legend/Legend';
+import { layersSelector } from '@mapstore/framework/selectors/layers';
+
+function Legend({
+    layers,
+    hideLayerTitle
+}) {
+
+    const [expandLegend, setExpandLegend] = useState(false);
+
+    const expand = () => {
+        setExpandLegend(ex => !ex);
+    };
+
+    return layers.length > 0 && <div className="shadow gn-legend-wrapper" style={{width: expandLegend ? 'auto' : '80px'}}>
+        <div onClick={expand}>
+            <span role="button" className={`identify-icon glyphicon glyphicon-chevron-${expandLegend ? 'down' : 'right'}`} title="Expand layer legend" />
+            <span className="gn-legend-list-item">Legend</span>
+        </div>
+        <ul className="gn-legend-list" style={{height: expandLegend ? 'fit-content' : 0, overflowY: expandLegend ? 'auto' : 'hidden'}}>
+            {layers.map((layer, ind) => <Fragment key={ind}>
+                {!hideLayerTitle &&
+                    <li className="gn-legend-list-item"><p>{layer.title}</p></li>
+                }
+                <li>
+                    <LegendImage layer={layer} />
+                </li>
+            </Fragment>
+            )}
+        </ul>
+    </div>;
+}
+
+const ConnectedLegend = connect(
+    createSelector([layersSelector], (layers) => ({layers: layers.filter(layer => layer.group !== 'background' && layer.type === 'wms')})),
+    {}
+)(Legend);
+
+export default createPlugin('Legend', {
+    component: ConnectedLegend,
+    containers: {},
+    epics: {},
+    reducers: {}
+});

geonode_mapstore_client/client/js/plugins/__tests__/legend-test.jsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2021, GeoSolutions Sas.
+ * 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 expect from 'expect';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { getPluginForTest } from '@mapstore/framework/plugins/__tests__/pluginsTestUtils';
+import Legend from '../Legend';
+
+
+describe('Share Plugin', () => {
+    beforeEach((done) => {
+        document.body.innerHTML = '<div id="container"></div>';
+        window.__DEVTOOLS__ = true;
+        setTimeout(done);
+    });
+
+    afterEach((done) => {
+        ReactDOM.unmountComponentAtNode(document.getElementById('container'));
+        document.body.innerHTML = '';
+        window.__DEVTOOLS__ = undefined;
+        setTimeout(done);
+    });
+
+    const testState = {
+        layers: {
+            flat: [{name: 'test', id: 1, title: 'test layer', type: 'wms', url: 'https://gs-stable.geo-solutions.it/geoserver/wms' }]
+        }
+    };
+
+    it('render Legend plugin', () => {
+        const { Plugin } = getPluginForTest(Legend, testState);
+        ReactDOM.render(<Plugin />, document.getElementById('container'));
+        const container = document.querySelector('.gn-legend-wrapper');
+        expect(container).toBeTruthy();
+    });
+});

geonode_mapstore_client/client/js/plugins/index.js

@@ -380,8 +380,11 @@ export const plugins = {
     VisualStyleEditorPlugin: toLazyPlugin(
         'VisualStyleEditor',
         () => import(/* webpackChunkName: 'plugins/visual-style-editor-plugin' */ '@js/plugins/VisualStyleEditor')
+    ),
+    LegendPlugin: toLazyPlugin(
+        'Legend',
+        () => import(/* webpackChunkName: 'plugins/legend-plugin' */ '@js/plugins/Legend')
     )
-
 };
 
 const pluginsDefinition = {

geonode_mapstore_client/client/static/mapstore/configs/localConfig.json

@@ -1161,6 +1161,12 @@
             },
             {
                 "name": "FitBounds"
+            },
+            {
+                "name": "Legend",
+                "cfg": {
+                    "hideLayerTitle": true
+                }
             }
         ],
         "dataset_edit_data_viewer": [

geonode_mapstore_client/client/themes/geonode/less/_legend.less

@@ -0,0 +1,54 @@
+// **************
+// Theme
+// **************
+
+#gn-components-theme(@theme-vars) {
+    .gn-legend-wrapper {
+        .color-var(@theme-vars[main-color]);
+        .background-color-var(@theme-vars[main-bg]);
+    }
+}
+
+// **************
+// Layout
+// **************
+
+.gn-legend-wrapper {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    z-index: 9999;
+    padding: .5rem;
+    min-width: 120px;
+    max-height: 180px;
+    border-radius: 2px;
+
+    .gn-legend-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .gn-legend-list-item {
+            margin: 0;
+            margin-bottom: .5rem;
+            font-weight: bold;
+        p {
+            margin: 0;
+            font-weight: normal;
+        }
+    }
+
+    span {
+        margin: 0;
+    }
+
+    span.gn-legend-list-item {
+                margin-left: .5rem;
+    }
+
+    .identify-icon {
+        font-size: small;
+    }
+}
+

geonode_mapstore_client/client/themes/geonode/less/geonode.less

@@ -19,6 +19,7 @@
 @import '_home-container.less';
 @import '_sub-flat-menu.less';
 @import '_visual-style-editor.less';
+@import '_legend.less';
 
 @import '_mixins.less';
 @import '_bootstrap-variables.less';