Update the layout of the dataset viewer for the non-spatial dataset (#2357)

---------

Co-authored-by: allyoucanmap <stefano.bovio@geosolutionsgroup.com>

Author: subashtiwari1010

geonode_mapstore_client/client/MapStore2

@@ -100,6 +100,7 @@ import {
     getCataloguePath,
     isDefaultDatasetSubtype,
     resourceHasPermission,
+    checkIfGeometryAttributeIsNull,
     canEditMap
 } from '@js/utils/ResourceUtils';
 import {
@@ -182,6 +183,7 @@ const resourceTypes = {
                     const [mapConfig, gnLayer, newLayer] = response;
                     const {minx, miny, maxx, maxy } = newLayer?.bbox?.bounds || {};
                     const extent = newLayer?.bbox?.bounds && [minx, miny, maxx, maxy ];
+                    const hasNoGeometry = checkIfGeometryAttributeIsNull(gnLayer.attribute_set);
                     const hasDownloadPermission = gnLayer?.perms?.includes('download_resourcebase');
                     return Observable.of(
                         configureMap({
@@ -206,9 +208,9 @@ const resourceTypes = {
                         setControlProperty('toolbar', 'expanded', false),
                         forceUpdateMapLayout(),
                         selectNode(newLayer.id, 'layer', false),
-                        ...(!options?.isSamePreviousResource ? [setResource(gnLayer)] : []),
+                        ...(!options?.isSamePreviousResource ? [setResource({...gnLayer, hasNoGeometry})] : []),
                         setResourceId(pk),
-                        ...(page === 'dataset_edit_data_viewer'
+                        ...((hasNoGeometry || page === 'dataset_edit_data_viewer')
                             ? [
                                 browseData(newLayer),
                                 ...(hasDownloadPermission ? [] : [setDatasetEditPermissionsError('gnviewer.noEditPermissions')])

geonode_mapstore_client/client/js/epics/gnresource.js

@@ -38,6 +38,7 @@ import gnresource from '@js/reducers/gnresource';
 import useDetectClickOut from '@js/hooks/useDetectClickOut';
 import tabComponents from '@js/plugins/ResourceDetails/containers/tabComponents';
 import DetailsPanel from '@js/plugins/ResourceDetails/containers/DetailsPanel';
+import { toggleEditMode } from '@mapstore/framework/actions/featuregrid';
 
 /**
 * @module ResourceDetails
@@ -219,7 +220,8 @@ function ResourceDetailsPanel({
             "type": "locations",
             "id": "locations",
             "labelId": "gnviewer.locations",
-            "items": "{getExtentObject(state('gnResourceData'))}"
+            "items": "{getExtentObject(state('gnResourceData'))}",
+            "disableIf": "{context.get(state('gnResourceData'), 'hasNoGeometry')}"
         },
         {
             "type": "relations",
@@ -453,6 +455,18 @@ export default createPlugin('ResourceDetails', {
             }),
             priority: 1,
             doNotHide: true
+        }, {
+            name: 'EditDataActionButton',
+            Component: connect(
+                () => ({}),
+                { onClick: toggleEditMode }
+            )(({ onClick, size }) => {
+                return <Button size={size} onClick={onClick}>
+                    <Message msgId="gnviewer.editData" />
+                </Button>;
+            }),
+            priority: 1,
+            doNotHide: true
         }],
         ResourcesGrid: {
             priority: 2,

geonode_mapstore_client/client/js/plugins/ResourceDetails/ResourceDetails.jsx

@@ -25,6 +25,7 @@ import { getPlugins } from '@mapstore/framework/utils/ModulePluginsUtils';
 import MapViewerLayout from '@mapstore/framework/containers/MapViewerLayout';
 
 const urlQuery = url.parse(window.location.href, true).query;
+const DATASET_VIEWER = 'dataset_viewer';
 
 const ConnectedPluginsContainer = connect(
     createShallowSelector(
@@ -55,6 +56,15 @@ function getPluginsConfiguration(name, pluginsConfig) {
     return pluginsConfig[name] || DEFAULT_PLUGINS_CONFIG;
 }
 
+function getPluginName(name, options = {}) {
+    const { hasNoGeometry } = options;
+    const isDatasetViewer = name === DATASET_VIEWER;
+    if (isDatasetViewer && typeof hasNoGeometry === 'boolean' && hasNoGeometry) {
+        return `${name}_non_spatial`;
+    }
+    return name;
+}
+
 function ViewerRoute({
     name,
     pluginsConfig: propPluginsConfig,
@@ -70,11 +80,18 @@ function ViewerRoute({
     loadingConfig,
     configError,
     loaderStyle,
+    loading: isResourceLoading,
     datasetEditPermissionError
 }) {
-
     const { pk } = match.params || {};
-    const pluginsConfig = getPluginsConfiguration(name, propPluginsConfig);
+
+    // determine the plugins name based on the view, resource type and geometry field
+    const pluginsName = getPluginName(name, { hasNoGeometry: resource?.hasNoGeometry });
+    const shouldInitPlugins = !isResourceLoading && (resource || name === DATASET_VIEWER);
+    // get the plugins configuration
+    const pluginsConfig = shouldInitPlugins
+        ? getPluginsConfiguration(pluginsName, propPluginsConfig)
+        : DEFAULT_PLUGINS_CONFIG;
     const pluginsCfgLength = pluginsConfig?.length;
 
     const { plugins: loadedPlugins, pending } = useModulePlugins({
@@ -109,7 +126,7 @@ function ViewerRoute({
         }
     }, [pluginLoading, pk]);
 
-    const loading = loadingConfig || pluginLoading;
+    const isLoading = isResourceLoading || loadingConfig || pluginLoading;
     const parsedPlugins = useMemo(() => ({ ...loadedPlugins, ...getPlugins(plugins) }), [loadedPlugins]);
     const Loader = loaderComponent;
     const className = `page-${resourceType || name}-viewer page-viewer`;
@@ -123,7 +140,7 @@ function ViewerRoute({
                 contentURL={resource?.detail_url}
                 content={resource?.abstract}
             />}
-            <ConnectedPluginsContainer
+            {!isLoading ? <ConnectedPluginsContainer
                 key={className}
                 id={className}
                 className={className}
@@ -132,8 +149,8 @@ function ViewerRoute({
                 plugins={parsedPlugins}
                 allPlugins={plugins}
                 params={params}
-            />
-            {loading && Loader && <Loader style={loaderStyle}/>}
+            /> : null}
+            {isLoading && Loader && <Loader style={loaderStyle}/>}
             {(configError || datasetEditPermissionError) && <MainEventView msgId={configError || datasetEditPermissionError}/>}
         </>
     );
@@ -149,12 +166,14 @@ const ConnectedViewerRoute = connect(
         state => state?.gnsettings?.siteName || 'GeoNode',
         state => state?.gnresource?.loadingResourceConfig,
         state => state?.gnresource?.configError,
+        state => state?.gnresource?.loading,
         state => state?.gnresource?.datasetEditPermissionError
-    ], (resource, siteName, loadingConfig, configError, datasetEditPermissionError) => ({
+    ], (resource, siteName, loadingConfig, configError, loading, datasetEditPermissionError) => ({
         resource,
         siteName,
         loadingConfig,
         configError,
+        loading,
         datasetEditPermissionError
     })),
     {

geonode_mapstore_client/client/js/routes/Viewer.jsx

@@ -17,6 +17,8 @@ import { excludeGoogleBackground, extractTileMatrixFromSources, ServerTypes } fr
 import { getGeoNodeLocalConfig, parseDevHostname } from '@js/utils/APIUtils';
 import { ProcessTypes, ProcessStatus } from '@js/utils/ResourceServiceUtils';
 import { determineResourceType } from '@js/utils/FileUtils';
+import { isGeometryType } from '@mapstore/framework/utils/ogc/WFS/base';
+
 import { createDefaultStyle } from '@mapstore/framework/utils/StyleUtils';
 /**
 * @module utils/ResourceUtils
@@ -994,6 +996,10 @@ export const canAccessPermissions = (resource) => {
     return perms?.includes('change_resourcebase_permissions');
 };
 
+export const checkIfGeometryAttributeIsNull = (attributeSet) => {
+    return isEmpty(attributeSet?.find(attribute => isGeometryType({ type: attribute.attribute_type })));
+};
+
 /**
  * Check if the resource can be edited (for map resources)
  * @param {Object} gnresource - The state of the resource

geonode_mapstore_client/client/js/utils/ResourceUtils.js

@@ -141,7 +141,8 @@ body {
 }
 
 .page-geostory-viewer {
-    .gn-viewer-layout-center {
+    .gn-viewer-layout-center,
+    .ms-map-viewer-layout-content {
         position: relative;
         .ms-geostory {
             position: absolute;
@@ -158,7 +159,8 @@ body {
 
 .page-dataset-viewer,
 .page-map-viewer {
-    .gn-viewer-layout-body {
+    .gn-viewer-layout-body,
+    .ms-map-viewer-layout-body {
         // needed to compute the position of ma toolbar and background selector
         // when the attribute table is open
         transform: translate(0, 0);
@@ -178,7 +180,8 @@ body {
 }
 
 .page-dashboard-viewer {
-    .gn-viewer-layout-center {
+    .gn-viewer-layout-center,
+    .ms-map-viewer-layout-content {
         overflow-y: auto;
         overflow-x: hidden;
         z-index: 1;

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

@@ -38,7 +38,8 @@
         background-color: rgba(0, 0, 0, 0.6);
     }
     .gn-upload-processing,
-    .gn-viewer-right-column {
+    .gn-viewer-right-column,
+    .ms-map-viewer-layout-right-column {
         --gn-button-color: #eeeeee;
         --gn-button-bg: transparent;
         --gn-button-action-border-color: transparent;

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

@@ -384,7 +384,8 @@ div#mapstore-globalspinner {
     top: 0;
 }
 
-.gn-viewer-layout-body {
+.gn-viewer-layout-body,
+.ms-map-viewer-layout-body {
     #mapstore-print-panel {
         &.modal-dialog {
             margin: 0;
@@ -393,6 +394,12 @@ div#mapstore-globalspinner {
             max-height: calc(100vh - 220px);
         }
     }
+    &:has(.ms-featuregrid-container) {
+        .ms-map-viewer-layout-bottom,
+        .ms-featuregrid-container {
+            height: 100%;
+        }
+    }
 }
 .gn-dataset-layersettings {
     .ms-header {