Enable layer preview in the new homepage (#79)

* add embed layer page and app * remove configurations * update client bundle * improve preview loader * update detail placeholder loading * update client bundle * fix loading of detail thumbnail * update client bundle
GeoNode · Feb 17, 2021 · 2702acc · 2702acc
1 parent 8fef01f
commit 2702acc
Show file tree

Hide file tree

Showing 288 changed files with 5,508 additions and 435 deletions.
diff --git a/geonode_mapstore_client/client/MapStore2 b/geonode_mapstore_client/client/MapStore2
diff --git a/geonode_mapstore_client/client/js/apps/gn-home.jsx b/geonode_mapstore_client/client/js/apps/gn-home.jsx
@@ -10,17 +10,8 @@ import main from '@mapstore/framework/components/app/main';
 import Router, { withRoutes } from '@js/components/app/Router';
 import MainLoader from '@js/components/app/MainLoader';
 import { connect } from 'react-redux';
-import {
-    setConfigProp,
-    setLocalConfigurationFile,
-    getConfigProp
-} from '@mapstore/framework/utils/ConfigUtils';
-import {
-    getSupportedLocales,
-    setSupportedLocales
-} from '@mapstore/framework/utils/LocaleUtils';
+
 import security from '@mapstore/framework/reducers/security';
-import { setRegGeoserverRule } from '@mapstore/framework/utils/LayersUtils';
 
 import Home from '@js/routes/Home';
 
@@ -36,11 +27,10 @@ import {
     getResourcesTotalCount
 } from '@js/api/geonode/v2';
 
-import axios from '@mapstore/framework/libs/ajax';
-
-// Set X-CSRFToken in axios;
-axios.defaults.xsrfHeaderName = "X-CSRFToken";
-axios.defaults.xsrfCookieName = "csrftoken";
+import {
+    setupConfiguration,
+    initializeApp
+} from '@js/utils/AppUtils';
 
 // TODO: we should compile .scss as .less file in MapStore
 // and add a link tag with the compiled css in the template
@@ -70,34 +60,7 @@ const routes = [
     }
 ];
 
-setLocalConfigurationFile('');
-setRegGeoserverRule(/\/[\w- ]*geoserver[\w- ]*\/|\/[\w- ]*gs[\w- ]*\//);
-
-const getVersion = () => {
-    if (!__DEVTOOLS__) {
-        return __GEONODE_PROJECT_CONFIG__.version;
-    }
-    return 'dev';
-};
-
-const pathsNeedVersion = [
-    'static/mapstore/',
-    'print.json'
-];
-axios.interceptors.request.use(
-    config => {
-        if (config.url && pathsNeedVersion.filter(url => config.url.match(url))[0]) {
-            return {
-                ...config,
-                params: {
-                    ...config.params,
-                    v: getVersion()
-                }
-            };
-        }
-        return config;
-    }
-);
+initializeApp();
 
 Promise.all([
     getConfiguration('/static/mapstore/configs/localConfig.json'),
@@ -106,41 +69,23 @@ Promise.all([
     getEndpoints()
 ])
     .then(([localConfig, user, resourcesTotalCount]) => {
+
         const {
-            geoNodeConfiguration,
-            supportedLocales: defaultSupportedLocales,
-            ...config
-        } = localConfig;
-        const geoNodePageConfig = window.__GEONODE_PAGE_CONFIG__ || {};
-        Object.keys(config).forEach((key) => {
-            setConfigProp(key, config[key]);
+            securityState,
+            geoNodeConfiguration
+        } = setupConfiguration({
+            localConfig,
+            user,
+            resourcesTotalCount
         });
-        setConfigProp('translationsPath', config.translationsPath
-            ? config.translationsPath
-            : __GEONODE_PROJECT_CONFIG__.translationsPath
-        );
-        const supportedLocales = defaultSupportedLocales || getSupportedLocales();
-        setSupportedLocales(supportedLocales);
-        const locale = supportedLocales[geoNodePageConfig.languageCode]?.code;
-        setConfigProp('locale', locale);
-        const menuFilters = geoNodeConfiguration?.menu?.items?.filter(({ type }) => type === 'filter');
-        setConfigProp('menuFilters', menuFilters);
-        const geoNodeResourcesInfo = getConfigProp('geoNodeResourcesInfo') || {};
-        setConfigProp('geoNodeResourcesInfo', { ...geoNodeResourcesInfo, ...resourcesTotalCount });
-        const securityInitialState = user?.info?.access_token
-            && {
-                security: {
-                    user: user,
-                    token: user.info.access_token
-                }
-            };
+
         // home app entry point
         main({
             appComponent: withRoutes(routes)(ConnectedRouter),
             loaderComponent: MainLoader,
             initialState: {
                 defaultState: {
-                    ...securityInitialState
+                    ...securityState
                 }
             },
             pluginsConfig: localConfig.plugins || [],

diff --git a/geonode_mapstore_client/client/js/apps/gn-map.js b/geonode_mapstore_client/client/js/apps/gn-map.js
@@ -0,0 +1,134 @@
+/*
+ * Copyright 2020, 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 main from '@mapstore/framework/components/app/main';
+import Router, { withRoutes } from '@js/components/app/Router';
+import MainLoader from '@js/components/app/MainLoader';
+import { connect } from 'react-redux';
+import { getConfigProp, setConfigProp } from '@mapstore/framework/utils/ConfigUtils';
+import { configureMap } from '@mapstore/framework/actions/config';
+import { loadPrintCapabilities } from '@mapstore/framework/actions/print';
+import { setControlProperty } from '@mapstore/framework/actions/controls';
+import controls from '@mapstore/framework/reducers/controls';
+import maptype from '@mapstore/framework/reducers/maptype';
+import security from '@mapstore/framework/reducers/security';
+import print from '@mapstore/framework/reducers/print';
+import {
+    standardReducers,
+    standardEpics,
+    standardRootReducerFunc
+} from '@mapstore/framework/stores/defaultOptions';
+
+import MapView from '@js/routes/MapView';
+
+import gnresource from '@js/reducers/gnresource';
+import gnlocaleEpics from '@js/epics/gnlocale';
+
+import { getConfiguration } from '@js/api/geonode/v2';
+
+import isArray from 'lodash/isArray';
+
+import {
+    setupConfiguration,
+    getVersion,
+    initializeApp
+} from '@js/utils/AppUtils';
+
+
+import {
+    updateMapLayoutEpic
+} from '@js/epics';
+import maplayout from '@mapstore/framework/reducers/maplayout';
+import 'react-widgets/dist/css/react-widgets.css';
+import 'react-select/dist/react-select.css';
+
+const DEFAULT_LOCALE = {};
+const ConnectedRouter = connect((state) => ({
+    locale: state?.locale || DEFAULT_LOCALE
+}))(Router);
+
+const routes = [
+    {
+        name: 'map-viewer',
+        path: '/',
+        component: MapView
+    }
+];
+
+initializeApp();
+
+Promise.all([ getConfiguration('/static/mapstore/configs/localConfig.json') ])
+    .then(([localConfig, user]) => {
+
+        const {
+            securityState,
+            geoNodeConfiguration,
+            pluginsConfigKey,
+            geoNodePageConfig,
+            query
+        } = setupConfiguration({
+            localConfig,
+            user
+        });
+
+        // get the correct map layout
+        const mapLayout = getConfigProp('mapLayout') || {};
+        setConfigProp('mapLayout', mapLayout[query.theme] || mapLayout.viewer);
+
+        main({
+            appComponent: withRoutes(routes)(ConnectedRouter),
+            loaderComponent: MainLoader,
+            initialState: {
+                defaultState: {
+                    ...securityState,
+                    maptype: {
+                        mapType: 'openlayers'
+                    }
+                }
+            },
+            pluginsConfig: isArray(localConfig.plugins)
+                ? localConfig.plugins
+                : localConfig.plugins
+                    ? localConfig.plugins[pluginsConfigKey] || localConfig.plugins
+                    : [],
+            themeCfg: {
+                path: '/static/mapstore/dist/themes',
+                prefixContainer: '#container',
+                version: getVersion(),
+                prefix: 'msgapi',
+                theme: query.theme
+            },
+            printEnabled: true,
+            rootReducerFunc: standardRootReducerFunc,
+            appReducers: {
+                ...standardReducers,
+                gnresource,
+                security,
+                maptype,
+                print,
+                maplayout,
+                controls
+            },
+            appEpics: {
+                ...standardEpics,
+                ...gnlocaleEpics,
+                updateMapLayoutEpic
+            },
+            geoNodeConfiguration,
+            initialActions: [
+                setControlProperty.bind(null, 'toolbar', 'expanded', false),
+                loadPrintCapabilities.bind(null, getConfigProp('printUrl')),
+                configureMap.bind(
+                    null,
+                    geoNodePageConfig.resourceConfig,
+                    1,
+                    true
+                )
+            ]
+        });
+    });
diff --git a/geonode_mapstore_client/client/js/components/app/MainLoader.jsx b/geonode_mapstore_client/client/js/components/app/MainLoader.jsx
@@ -22,7 +22,7 @@ function MainLoader({
 }
 
 MainLoader.defaultProps = {
-    text: 'GeoNode'
+    text: ''
 };
 
 export default MainLoader;
diff --git a/geonode_mapstore_client/client/js/components/app/Router.jsx b/geonode_mapstore_client/client/js/components/app/Router.jsx
@@ -32,7 +32,7 @@ function ThemeLoader({
 }) {
     const [loading, setLoading] = useState(true);
     const Loader = loaderComponent;
-    // explict remove load theme
+    // explicit remove load theme
     if (themeCfg === null) {
         return children;
     }
@@ -93,6 +93,7 @@ const Router = forwardRef(({
                                             component={(props) =>
                                                 <Component
                                                     {...props}
+                                                    name={route.name}
                                                     plugins={plugins}
                                                     pluginsConfig={pluginsConfig}
                                                     loaderComponent={loaderComponent}

diff --git a/geonode_mapstore_client/client/js/components/home/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/home/DetailsPanel.jsx
@@ -28,6 +28,37 @@ function formatResourceLinkUrl(resourceUrl = '') {
     return `${protocol}://${host}${path}`;
 }
 
+function ThumbnailPreview({
+    src,
+    style,
+    ...props
+}) {
+
+    const [loading, setLoading] = useState();
+
+    useEffect(() => {
+        if (src && !loading) {
+            setLoading(true);
+        }
+    }, [src]);
+
+    return (
+        <img
+            {...props}
+            src={src}
+            onLoad={() => setLoading(false)}
+            onError={() => setLoading(false)}
+            style={{
+                ...style,
+                ...(loading && {
+                    backgroundColor: 'transparent'
+                }),
+                objectFit: 'contain'
+            }}
+        />
+    );
+}
+
 function DetailsPanel({
     resource,
     // filters,
@@ -64,11 +95,11 @@ function DetailsPanel({
 
     const types = getTypesInfo();
     const {
-        embed,
+        formatEmbedUrl = embedUrl => embedUrl,
         icon,
         name
     } = resource && (types[resource.doc_type] || types[resource.resource_type]) || {};
-    const embedUrl = embed && embed.replace('{pk}', resource.pk);
+    const embedUrl = resource?.embed_url && formatEmbedUrl(resource.embed_url);
     return (
         <div
             ref={detailsContainerNode}
@@ -87,8 +118,21 @@ function DetailsPanel({
                     </Button>
                 </div>
                 <div className="gn-details-panel-preview">
+                    <div
+                        className="gn-loader-placeholder"
+                        style={{
+                            position: 'absolute',
+                            width: '100%',
+                            height: '100%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        }}>
+                        <FaIcon name={icon}/>
+                    </div>
                     {embedUrl
                         ? <iframe
+                            key={embedUrl}
                             src={embedUrl}
                             style={{
                                 position: 'absolute',
@@ -97,19 +141,16 @@ function DetailsPanel({
                             }}
                             frameBorder="0"
                         />
-                        : <div style={{
-                            position: 'absolute',
-                            width: '100%',
-                            height: '100%',
-                            top: 0,
-                            left: 0,
-                            ...(resource?.thumbnail_url && {
-                                backgroundImage: 'url(' + resource.thumbnail_url + ')',
-                                backgroundPosition: 'center',
-                                backgroundSize: 'contain',
-                                backgroundRepeat: 'no-repeat'
-                            })
-                        }}/>
+                        : <ThumbnailPreview
+                            src={resource?.thumbnail_url}
+                            style={{
+                                position: 'absolute',
+                                width: '100%',
+                                height: '100%',
+                                top: 0,
+                                left: 0,
+                                backgroundColor: 'inherit'
+                            }}/>
                     }
                     {loading && <div
                         className="gn-details-panel-preview-loader"