Merge commit '156b026963dcf8db6cc54c71e7bceb3b2d0f4f10' into sourceType

* commit '156b026963dcf8db6cc54c71e7bceb3b2d0f4f10':
  add ifc document viewer (GeoNode#1486)
  [create-pull-request] automated change (GeoNode#1526)
  GeoNode#1482: Use the available height for the abstract text in a card (GeoNode#1524)
  Fix italian tx for Cancel (GeoNode#1522)

geonode_mapstore_client/client/devServer.js

@@ -63,13 +63,15 @@ module.exports = (devServerDefault, projectConfig) => {
             {
                 context: [
                     '/static/mapstore/ms-translations/**',
-                    '/docs/**'
+                    '/docs/**',
+                    '/static/mapstore/dist/js/web-ifc/**'
                 ],
                 target: `${protocol}://${devServerHost}:8081`,
                 secure: false,
                 changeOrigin: true,
                 pathRewrite: {
-                    '/static/mapstore/ms-translations': '/node_modules/mapstore/web/client/translations'
+                    '/static/mapstore/ms-translations': '/node_modules/mapstore/web/client/translations',
+                    '/static/mapstore/dist/js/web-ifc': '/node_modules/web-ifc'
                 }
             }
         ]

geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx

@@ -29,6 +29,7 @@ const mediaMap = {
     pdf: PdfViewer,
     gltf: Scene3DViewer,
     pcd: Scene3DViewer,
+    ifc: Scene3DViewer,
     unsupported: UnsupportedViewer
 };
 

geonode_mapstore_client/client/js/components/MediaViewer/Scene3DViewer.jsx

@@ -6,13 +6,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState, useRef } from 'react';
 import * as THREE from 'three';
+import isString from 'lodash/isString';
+import isNumber from 'lodash/isNumber';
 import { Canvas, useLoader } from '@react-three/fiber';
 import { OrbitControls, PerspectiveCamera, Environment, Html, useProgress } from '@react-three/drei';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader';
-import { parseDevHostname } from '@js/utils/APIUtils';
+import { parseDevHostname, getGeoNodeLocalConfig } from '@js/utils/APIUtils';
+import { IFCLoader } from 'web-ifc-three/IFCLoader';
 
 function Loader() {
     const { progress } = useProgress();
@@ -42,7 +45,9 @@ function GLTFModel({ src, onChange }) {
     const { radius, center } = computeBoundingSphereFromGLTF(gltf);
 
     useEffect(() => {
-        onChange({ center: [center.x || 0, center.y || 0, center.z || 0], radius });
+        if (center) {
+            onChange({ center: [center.x || 0, center.y || 0, center.z || 0], radius });
+        }
     }, [radius, center?.x, center?.y, center?.z]);
 
     return gltf?.scene ? <primitive object={gltf.scene} /> : null;
@@ -58,14 +63,93 @@ function PCDModel({ src, onChange }) {
     }
     const { radius, center } = pcd?.geometry?.boundingSphere || {};
     useEffect(() => {
-        onChange({ center: [center.x || 0, center.y || 0, center.z || 0], radius });
+        if (center) {
+            onChange({ center: [center.x || 0, center.y || 0, center.z || 0], radius });
+        }
     }, [radius, center?.x, center?.y, center?.z]);
     return pcd ? <primitive object={pcd} /> : null;
 }
 
+const highlight = new THREE.MeshLambertMaterial({
+    transparent: true,
+    opacity: 0.6,
+    color: 0xff0000,
+    depthTest: false
+});
+
+// references for the IFC Model implementation
+// https://github.com/sebastianoscarlopez/ifc-react-fiber/tree/main
+// https://github.com/IFCjs/hello-world/pull/54
+function IFCModel({ src, sessionId, onChange, onUpdateInfo = () => {} }) {
+    const ifc = useLoader(IFCLoader, parseDevHostname(`${src}?_v_=${sessionId}`), (loader) => {
+        loader.ifcManager.setWasmPath(getGeoNodeLocalConfig('staticPath', '/static/') + 'mapstore/dist/js/web-ifc/');
+        loader.ifcManager.state.api.isWasmPathAbsolute = true;
+    });
+    useEffect(() => {
+        return () => {
+            if (ifc?.ifcManager?.dispose) {
+                ifc.ifcManager.dispose();
+            }
+        };
+    }, []);
+    const { radius, center } = ifc?.geometry?.boundingSphere || {};
+    useEffect(() => {
+        if (center) {
+            onChange({ center: [center.x || 0, center.y || 0, center.z || 0], radius });
+        }
+    }, [radius, center?.x, center?.y, center?.z]);
+    return ifc ? (
+        <primitive
+            object={ifc}
+            onPointerLeave={() => {
+                ifc.ifcManager.removeSubset(ifc.modelID, highlight);
+                onUpdateInfo({});
+            }}
+            onPointerMove={(event) => {
+                const { intersections = [] } = event || {};
+                const intersected = intersections[0];
+                const manager = intersected?.object?.ifcManager;
+                if (manager && intersected?.object?.geometry) {
+                    const index = intersected.faceIndex;
+                    const geometry = intersected.object.geometry;
+                    const modelID = intersected.object.modelID;
+                    const expressId = manager.getExpressId(geometry, index);
+                    manager.createSubset({
+                        modelID,
+                        ids: [ expressId ],
+                        material: highlight,
+                        scene: intersected?.object?.parent,
+                        removePrevious: true
+                    });
+                    manager.getItemProperties(modelID, expressId).
+                        then((props) => {
+                            onUpdateInfo({
+                                x: event.x,
+                                y: event.y,
+                                properties: Object.keys(props).reduce((acc, key) => {
+                                    const value = isString(props[key]) || isNumber(props[key])
+                                        ? props[key]
+                                        : props[key]?.value;
+                                    if (value === undefined || value === null) {
+                                        return acc;
+                                    }
+                                    return {
+                                        ...acc,
+                                        [key]: value
+                                    };
+                                }, {})
+                            });
+                        });
+                }
+            }}
+        />
+    ) : null;
+}
+
 const modelTypes = {
     gltf: GLTFModel,
-    pcd: PCDModel
+    pcd: PCDModel,
+    ifc: IFCModel
 };
 
 function Scene3DViewer({
@@ -75,20 +159,51 @@ function Scene3DViewer({
     // https://polyhaven.com/a/studio_small_03
     environmentFiles = '/static/mapstore/img/studio_small_03_1k.hdr'
 }) {
+    // for ifc model we need to append the sessionId to the src
+    // to avoid caching of the url
+    const [sessionId] = useState(Date.now());
+    const container = useRef();
     const [boundingSphere, setBoundingSphere] = useState({
         radius: 10,
         center: [0, 0, 0]
     });
+    const [info, setInfo] = useState({});
     const Model = modelTypes[mediaType];
+    const containetClientRect = container?.current?.getBoundingClientRect();
+    function handleInfoPosition() {
+        const minSize = 768;
+        if (containetClientRect.width < minSize || containetClientRect.height < minSize) {
+            return {
+                left: 0,
+                top: 0,
+                transform: 'translateX(1rem) translateY(1rem)'
+            };
+        }
+        const left = info?.x ? info.x - containetClientRect.left : 0;
+        const top = info?.y ? info.y - containetClientRect.top : 0;
+        const translateX = left > containetClientRect.width / 2 ? 'translateX(calc(-100% - 1rem))' : 'translateX(1rem)';
+        const translateY = top > containetClientRect.height / 2 ? 'translateY(calc(-100% - 1rem))' : 'translateY(1rem)';
+        return {
+            left,
+            top,
+            transform: `${translateX} ${translateY}`
+        };
+    }
+    function getMaxPropertyWidth() {
+        const maxKeyLength = Object.keys(info.properties || {}).reduce((previous, current) => previous.length > current.length ? previous : current);
+        return maxKeyLength.length ? `${maxKeyLength.length * 0.5}rem` : 'auto';
+    }
     return (
-        <div className="gn-media-scene-3d">
+        <div ref={container} className="gn-media-scene-3d">
             <Suspense fallback={null}>
                 <Canvas>
+                    <ambientLight intensity={0.5} />
+                    <directionalLight color="white" intensity={0.5} position={[10, 10, 10]} />
                     <Suspense fallback={null}>
                         <Environment files={environmentFiles} />
                     </Suspense>
                     <Suspense fallback={<Loader />}>
-                        <Model src={src} onChange={setBoundingSphere}/>
+                        <Model sessionId={sessionId} src={src} onChange={setBoundingSphere} onUpdateInfo={(newInfo) => setInfo(newInfo)}/>
                     </Suspense>
                     <OrbitControls
                         makeDefault
@@ -100,6 +215,37 @@ function Scene3DViewer({
                     <PerspectiveCamera makeDefault fov={65} far={boundingSphere.radius * 12} position={[boundingSphere.center[0], boundingSphere.center[1], boundingSphere.radius * 2]}/>
                 </Canvas>
             </Suspense>
+            {info?.properties && (
+                <div
+                    className="shadow gn-media-scene-3d-info gn-details-info-fields"
+                    style={{
+                        position: 'absolute',
+                        zIndex: 10,
+                        padding: '0.25rem',
+                        pointerEvents: 'none',
+                        maxWidth: containetClientRect.width * 3 / 2,
+                        wordBreak: 'break-word',
+                        transition: '0.3s all',
+                        minWidth: 300,
+                        userSelect: 'none',
+                        ...handleInfoPosition()
+                    }}
+                >
+                    <div className="gn-media-scene-3d-info-bg" style={{ opacity: 0.85, position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}/>
+                    {Object.keys(info.properties).map((key) => {
+                        return (
+                            <div key={key} className="gn-details-info-row">
+                                <div className="gn-details-info-label" style={{ width: getMaxPropertyWidth() }}>
+                                    {key}
+                                </div>
+                                <div className="gn-details-info-value" style={{ maxWidth: 'none'}}>
+                                    {info.properties[key]}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
         </div>
     );
 }

geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useState, useRef } from 'react';
 import Message from '@mapstore/framework/components/I18N/Message';
 import FaIcon from '@js/components/FaIcon';
 import Button from '@js/components/Button';
@@ -36,6 +36,7 @@ const ResourceCard = forwardRef(({
         pathname: `/detail/${res.resource_type}/${res.pk}`
     })
 }, ref) => {
+    const abstractRef = useRef();
     const res = data;
     const types = getTypesInfo();
     const { icon } = types[res.subtype] || types[res.resource_type] || {};
@@ -54,15 +55,22 @@ const ResourceCard = forwardRef(({
     function handleClick() {
         onClick(data);
     }
-    const imgClassName = layoutCardsStyle === 'list' ? 'card-img-left' : 'card-img-top';
+    const isCardLayoutList = layoutCardsStyle === 'list';
+    const imgClassName = isCardLayoutList ? 'card-img-left' : 'card-img-top';
+
+    const renderEllipsis = () => {
+        const isOverflowing = isCardLayoutList && abstractRef?.current?.clientHeight < abstractRef?.current?.scrollHeight;
+        return isOverflowing ? <span className="ellipsis">...</span> : null;
+    };
+
     return (
         <div
             ref={ref}
             onClick={handleClick}
             className={`gn-resource-card${active ? ' active' : ''}${
                 readOnly ? ' read-only' : ''
             } gn-card-type-${layoutCardsStyle} ${
-                layoutCardsStyle === 'list' ? 'rounded-0' : ''
+                isCardLayoutList ? 'rounded-0' : ''
             }${className ? ` ${className}` : ''}`}
         >
             {!readOnly && (
@@ -74,7 +82,7 @@ const ResourceCard = forwardRef(({
             {!readOnly &&
                 options &&
                 options.length > 0 &&
-                layoutCardsStyle === 'grid' && (
+                !isCardLayoutList && (
                 <ActionButtons
                     buildHrefByTemplate={buildHrefByTemplate}
                     resource={res}
@@ -130,13 +138,14 @@ const ResourceCard = forwardRef(({
                                 <ResourceStatus resource={res} />
                             </div>
                         </div>
-                        <p className="card-text gn-card-description">
+                        <p ref={abstractRef} className={`card-text gn-card-description ${layoutCardsStyle}`}>
                             {res.raw_abstract ? res.raw_abstract : '...'}
                         </p>
+                        {renderEllipsis()}
                         {!readOnly &&
                             options &&
                             options.length > 0 &&
-                            layoutCardsStyle === 'list' && (
+                            isCardLayoutList && (
                             <ActionButtons
                                 buildHrefByTemplate={buildHrefByTemplate}
                                 resource={res}

geonode_mapstore_client/client/js/utils/FileUtils.js

@@ -27,6 +27,7 @@ export const imageExtensions = ['jpg', 'jpeg', 'png'];
 export const videoExtensions = ['mp4', 'mpg', 'avi', 'm4v', 'mp2', '3gp', 'flv', 'vdo', 'afl', 'mpga', 'webm'];
 export const gltfExtensions = ['glb', 'gltf'];
 export const pcdExtensions = ['pcd'];
+export const ifcExtensions = ['ifc'];
 
 /**
 * check if a resource extension is supported for display in the media viewer
@@ -39,6 +40,7 @@ export const determineResourceType = extension => {
     if (videoExtensions.includes(extension)) return 'video';
     if (gltfExtensions.includes(extension)) return 'gltf';
     if (pcdExtensions.includes(extension)) return 'pcd';
+    if (ifcExtensions.includes(extension)) return 'ifc';
     return 'unsupported';
 };
 

geonode_mapstore_client/client/package.json

@@ -41,7 +41,8 @@
     "react-helmet": "6.1.0",
     "react-intl": "2.3.0",
     "three": "0.138.3",
-    "three-stdlib": "2.8.9"
+    "three-stdlib": "2.8.9",
+    "web-ifc-three": "0.0.125"
   },
   "mapstore": {
     "output": "dist",

geonode_mapstore_client/client/postCompile.js

@@ -17,11 +17,14 @@ const distDirectory = 'dist';
 });
 
 // copy compiled files
+fs.copySync(path.resolve(appDirectory, 'node_modules', 'web-ifc'), path.resolve(appDirectory, distDirectory, 'js', 'web-ifc'));
+message.title('copy ifc files in dist folder');
 fs.moveSync(path.resolve(appDirectory, distDirectory, 'ms-translations'), path.resolve(appDirectory, staticPath, 'ms-translations'), { overwrite: true });
 message.title('copy ms-translations from MapStore Core');
 fs.moveSync(path.resolve(appDirectory, distDirectory), path.resolve(appDirectory, staticPath, distDirectory), { overwrite: true });
 message.title('copy dist folder to static/mapstore directory');
 
+
 // create new version file
 const versionString = `${name}-v${version}-${commit}`;
 fs.writeFileSync(path.resolve(appDirectory, 'version.txt'), versionString);

geonode_mapstore_client/client/themes/geonode/less/_media-viewer.less

@@ -10,6 +10,9 @@
             .background-color-var(@theme-vars[success]);
         }
     }
+    .gn-media-scene-3d-info-bg {
+        .background-color-var(@theme-vars[main-variant-bg]);
+    }
 }
 
 // **************

geonode_mapstore_client/client/themes/geonode/less/_resource-card.less

@@ -186,6 +186,14 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        &.list {
+            white-space: unset;
+            max-height: 2.2rem;
+            &+.ellipsis {
+                position: absolute;
+                bottom: 0.625rem;
+            }
+        }
         .gn-spinner {
             margin-right: 0.4rem;
         }

geonode_mapstore_client/client/version.txt

@@ -1 +1 @@
-geonode-mapstore-client-v4.0.0-77b4057606008bcff075f63380c5f6b5d2c9def9
+geonode-mapstore-client-v4.0.0-4d9a72da7e48da6fe820ae67d2fc2713979b0121