Enhance dataset viewer and saving of layer settings (#2054)

Author: dsuren1

geonode_mapstore_client/client/js/epics/gnresource.js

@@ -32,7 +32,6 @@ import {
     deleteResourceThumbnail
 } from '@js/api/geonode/v2';
 import { configureMap } from '@mapstore/framework/actions/config';
-import { mapSelector } from '@mapstore/framework/selectors/map';
 import { isMapInfoOpen } from '@mapstore/framework/selectors/mapInfo';
 import { getSelectedLayer } from '@mapstore/framework/selectors/layers';
 import { isLoggedIn, userSelector } from '@mapstore/framework/selectors/security';
@@ -130,7 +129,7 @@ const FIT_BOUNDS_CONTROL = 'fitBounds';
 const resourceTypes = {
     [ResourceTypes.DATASET]: {
         resourceObservable: (pk, options) => {
-            const { page, selectedLayer, map: currentMap } = options || {};
+            const { page, selectedLayer } = options || {};
             const { subtype, query } = options?.params || {};
             return Observable.defer(() =>
                 axios.all([
@@ -152,7 +151,9 @@ const resourceTypes = {
                     })
                     .then((response) => {
                         const [mapConfig, gnLayer, timeseries] = response;
-                        const newLayer = resourceToLayerConfig(gnLayer);
+                        const newLayer = options?.isSamePreviousResource
+                            ? selectedLayer // keep configuration for other pages when resource id is the same (eg: filters)
+                            : resourceToLayerConfig(gnLayer);
                         const _gnLayer = {...gnLayer, layerSettings: gnLayer.data};
                         return [mapConfig, {..._gnLayer, timeseries}, newLayer];
                     })
@@ -166,26 +167,24 @@ const resourceTypes = {
                             ...mapConfig,
                             map: {
                                 ...mapConfig.map,
-                                ...currentMap, // keep configuration for other pages when resource id is the same (eg: center, zoom)
                                 visualizationMode: ['3dtiles'].includes(subtype) ? VisualizationModes._3D : VisualizationModes._2D,
                                 layers: [
                                     ...mapConfig.map.layers,
                                     {
-                                        ...selectedLayer, // keep configuration for other pages when resource id is the same (eg: filters)
                                         ...newLayer,
                                         isDataset: true,
                                         _v_: Date.now()
                                     }
                                 ]
                             }
                         }),
-                        ...((extent && !currentMap)
+                        ...(extent
                             ? [ setControlProperty(FIT_BOUNDS_CONTROL, 'geometry', extent) ]
                             : []),
                         setControlProperty('toolbar', 'expanded', false),
                         forceUpdateMapLayout(),
                         selectNode(newLayer.id, 'layer', false),
-                        setResource(gnLayer),
+                        ...(!options?.isSamePreviousResource ? [setResource(gnLayer)] : []),
                         setResourceId(pk),
                         ...(page === 'dataset_edit_data_viewer'
                             ? [
@@ -524,7 +523,6 @@ export const gnViewerRequestResourceConfig = (action$, store) =>
                     isSamePreviousResource,
                     resourceData,
                     selectedLayer: isSamePreviousResource && getSelectedLayer(state),
-                    map: isSamePreviousResource && mapSelector(state),
                     params: {...action?.options?.params, query}
                 }),
                 Observable.of(

geonode_mapstore_client/client/js/epics/gnsave.js

@@ -10,6 +10,7 @@ import axios from '@mapstore/framework/libs/ajax';
 import { Observable } from 'rxjs';
 import get from 'lodash/get';
 import castArray from 'lodash/castArray';
+import omit from 'lodash/omit';
 
 import { mapInfoSelector } from '@mapstore/framework/selectors/map';
 import { userSelector } from '@mapstore/framework/selectors/security';
@@ -36,7 +37,8 @@ import {
     loadingResourceConfig,
     enableMapThumbnailViewer,
     updateResource,
-    manageLinkedResource
+    manageLinkedResource,
+    setSelectedLayer
 } from '@js/actions/gnresource';
 import {
     getResourceByPk,
@@ -60,7 +62,8 @@ import {
     getResourceId,
     getDataPayload,
     getCompactPermissions,
-    getExtentPayload
+    getExtentPayload,
+    getSelectedLayer
 } from '@js/selectors/resource';
 
 import {
@@ -83,8 +86,10 @@ import {
     ProcessStatus
 } from '@js/utils/ResourceServiceUtils';
 import { updateDatasetTimeSeries } from '@js/api/geonode/v2/index';
-import { updateNode } from '@mapstore/framework/actions/layers';
-import { layersSelector } from '@mapstore/framework/selectors/layers';
+import { updateNode, updateSettingsParams } from '@mapstore/framework/actions/layers';
+import { layersSelector, getSelectedLayer as getSelectedNode } from '@mapstore/framework/selectors/layers';
+import { styleServiceSelector, getUpdatedLayer, selectedStyleSelector } from '@mapstore/framework/selectors/styleeditor';
+import LayersAPI from '@mapstore/framework/api/geoserver/Layers';
 
 const RESOURCE_MANAGEMENT_PROPERTIES_KEYS = Object.keys(RESOURCE_MANAGEMENT_PROPERTIES);
 
@@ -96,6 +101,30 @@ function parseMapBody(body) {
     };
 }
 
+const setDefaultStyle = (state, id) => {
+    const {style: currentStyle} = getSelectedNode(state) ?? {};
+    const {style: initalStyle} = getSelectedLayer(state) ?? {};
+
+    const layer = getUpdatedLayer(state);
+    const styleName = selectedStyleSelector(state);
+    const defaultStyle = layer.availableStyles.filter(({ name }) => styleName === name);
+    const filteredStyles = layer.availableStyles.filter(({ name }) => styleName !== name);
+    const availableStyles = [...defaultStyle, ...filteredStyles];
+
+    if (id && currentStyle !== initalStyle) {
+        const { baseUrl = '' } = styleServiceSelector(state);
+        return {
+            request: () => LayersAPI.updateDefaultStyle({
+                baseUrl,
+                layerName: layer.name,
+                styleName
+            }),
+            actions: [updateSettingsParams({ availableStyles }, true), setSelectedLayer(layer)]
+        };
+    }
+    return {request: () => Promise.resolve(), actions: []};
+};
+
 const SaveAPI = {
     [ResourceTypes.MAP]: (state, id, body) => {
         return id
@@ -134,18 +163,20 @@ const SaveAPI = {
             ...body,
             ...(timeseries && { has_time: timeseries?.has_time })
         };
-        return (id
+        const { request, actions } = setDefaultStyle(state, id); // set default style, if modified
+        return request().then(() => (id
             ? axios.all([updateDataset(id, updatedBody), updateDatasetTimeSeries(id, timeseries)])
-            : Promise.resolve([]))
-            .then(([resource]) => {
+            : Promise.resolve())
+            .then(([_resource]) => {
+                let resource = omit(_resource, 'default_style');
                 if (timeseries) {
                     const dimensions = resource?.has_time ? getDimensions({...resource, has_time: true}) : [];
                     const layerId = layersSelector(state)?.find((l) => l.pk === resource?.pk)?.id;
                     // actions to be dispacted are added to response array
-                    return [resource, updateNode(layerId, 'layers', { dimensions: dimensions?.length > 0 ? dimensions : undefined })];
+                    return [resource, updateNode(layerId, 'layers', { dimensions: dimensions?.length > 0 ? dimensions : undefined }), ...actions];
                 }
-                return resource;
-            });
+                return [resource, ...actions];
+            }));
     },
     [ResourceTypes.VIEWER]: (state, id, body) => {
         const user = userSelector(state);

geonode_mapstore_client/client/js/selectors/resource.js

@@ -25,8 +25,10 @@ import pick from 'lodash/pick';
 import isEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
 import omitBy from 'lodash/omitBy';
+import isNil from 'lodash/isNil';
 import { generateContextResource } from '@mapstore/framework/selectors/contextcreator';
 import { layerSettingSelector, getSelectedLayer as getSelectedNode } from '@mapstore/framework/selectors/layers';
+import { saveLayer } from '@mapstore/framework/utils/LayersUtils';
 
 const RESOURCE_MANAGEMENT_PROPERTIES_KEYS = Object.keys(RESOURCE_MANAGEMENT_PROPERTIES);
 
@@ -171,10 +173,13 @@ export const getDataPayload = (state, resourceType) => {
         currentLayerSettings = omitBy(currentLayerSettings,
             (value, key) => key === "opacity" && value === 1); // skip default value
         const selectedLayer = getSelectedNode(state);
+        const omitKeys = ['extendedParams', 'availableStyles', 'infoFormats', 'style'];
+        const data = saveLayer(selectedLayer ?? {});
         return omit({
+            ...data,
             ...currentLayerSettings,
-            ...(selectedLayer && {fields: selectedLayer?.fields ?? {}})},
-        ['availableStyles', 'infoFormats']);
+            ...(selectedLayer && {fields: selectedLayer?.fields ?? {}})
+        }, omitKeys);
     }
     default:
         return null;
@@ -194,9 +199,10 @@ const compareObjects = (obj1, obj2) => {
         return Object.keys(obj1).every((key) => {
             const val1 = obj1[key];
             const val2 = obj2?.[key];
+            if (isNil(val2)) return true;
             if (typeof val1 === 'boolean') return val1 === (val2 ?? false);
             if (typeof val1 === 'number') return val1 === (val2 ?? 0);
-            if (isEmpty(val1) && isEmpty(val2)) return false;
+            if (isEmpty(val1) && isEmpty(val2)) return true;
             return isEqual(obj2?.[key], obj1[key]);
         });
     }
@@ -291,15 +297,16 @@ function isResourceDataEqual(state, initialData = {}, currentData = {}) {
     }
     case ResourceTypes.DATASET: {
         const selectedLayer = getSelectedNode(state);
-        const selectedLayerInitialState = getSelectedLayer(state);
-        const layerSettingsInitial = {...selectedLayerInitialState, ...initialData};
+        const selectedLayerInitial = getSelectedLayer(state);
+        const initialLayerData = {...selectedLayerInitial, ...initialData};
 
-        const isSettingsEqual = compareObjects(currentData, layerSettingsInitial);
-        const isAttributesEqual = !isEmpty(layerSettingsInitial)
+        const isSettingsEqual = compareObjects(currentData, initialLayerData);
+        const isStyleEqual = selectedLayer?.style === initialLayerData?.style;
+        const isAttributesEqual = !isEmpty(initialLayerData)
             && !isEmpty(selectedLayer)
-            && isEqual(layerSettingsInitial?.fields, selectedLayer.fields);
+            && isEqual(initialLayerData?.fields, selectedLayer.fields);
 
-        return isSettingsEqual && isAttributesEqual;
+        return isSettingsEqual && isAttributesEqual && isStyleEqual;
     }
     default:
         return true;

geonode_mapstore_client/static/mapstore/configs/localConfig.json

@@ -1357,8 +1357,8 @@
             {
                 "name": "Save",
                 "cfg": {
-                    "saveMsgId": "gnhome.apply",
-                    "className": "gn-apply-settings"
+                    "className": "gn-apply-settings",
+                    "variant": "default"
                 }
             },
             {
@@ -1370,10 +1370,7 @@
                 }  
             },
             {
-                "name": "StyleEditor",
-                "cfg": {
-                    "enableSetDefaultStyle": true
-                }
+                "name": "StyleEditor"
             },
             {
                 "name": "Identify",