updating stable branch of genova

web/client/actions/__tests__/details-test.js

@@ -28,13 +28,21 @@ describe('details actions tests', () => {
         const a = closeDetailsPanel();
         expect(a.type).toBe(CLOSE_DETAILS_PANEL);
     });
-    it('detailsLoaded', () => {
+    it('detailsLoaded for map', () => {
         const mapId = 1;
         const detailsUri = "sada/da/";
         const a = detailsLoaded(mapId, detailsUri);
         expect(a.type).toBe(DETAILS_LOADED);
         expect(a.detailsUri).toBe(detailsUri);
-        expect(a.mapId).toBe(mapId);
+        expect(a.id).toBe(mapId);
+    });
+    it('detailsLoaded for dashboard', () => {
+        const dashboardId = 1;
+        const detailsUri = "sada/da/";
+        const a = detailsLoaded(dashboardId, detailsUri);
+        expect(a.type).toBe(DETAILS_LOADED);
+        expect(a.detailsUri).toBe(detailsUri);
+        expect(a.id).toBe(dashboardId);
     });
     it('updateDetails', () => {
         const a = updateDetails('text');

web/client/actions/catalog.js

@@ -45,6 +45,7 @@ export const SAVING_SERVICE = 'CATALOG:SAVING_SERVICE';
 export const CATALOG_INITED = 'CATALOG:INIT';
 export const GET_METADATA_RECORD_BY_ID = 'CATALOG:GET_METADATA_RECORD_BY_ID';
 export const SET_LOADING = 'CATALOG:SET_LOADING';
+export const SHOW_FORMAT_ERROR = 'CATALOG:SHOW_FORMAT_ERROR';
 export const TOGGLE_TEMPLATE = 'CATALOG:TOGGLE_TEMPLATE';
 export const TOGGLE_THUMBNAIL = 'CATALOG:TOGGLE_THUMBNAIL';
 export const TOGGLE_ADVANCED_SETTINGS = 'CATALOG:TOGGLE_ADVANCED_SETTINGS';
@@ -285,6 +286,7 @@ export const toggleThumbnail = () => ({type: TOGGLE_THUMBNAIL});
 export const formatOptionsFetch = (url, force) => ({type: FORMAT_OPTIONS_FETCH, url, force});
 export const formatsLoading = (loading) => ({type: FORMAT_OPTIONS_LOADING, loading});
 export const setSupportedFormats = (formats, url) => ({type: SET_FORMAT_OPTIONS, formats, url});
+export const showFormatError = (status) => ({type: SHOW_FORMAT_ERROR, status});
 
 import {error} from './notifications';
 

web/client/actions/details.js

@@ -17,19 +17,19 @@ export const NO_DETAILS_AVAILABLE = "NO_DETAILS_AVAILABLE";
  * @memberof actions.details
  * @return {action}        type `UPDATE_DETAILS`
 */
-export const updateDetails = (detailsText) => ({
+export const updateDetails = (detailsText, resourceId) => ({
     type: UPDATE_DETAILS,
-    detailsText
+    detailsText, id: resourceId
 });
 
 /**
  * detailsLoaded
  * @memberof actions.details
  * @return {action}        type `DETAILS_LOADED`
 */
-export const detailsLoaded = (mapId, detailsUri, detailsSettings) => ({
+export const detailsLoaded = (resourceId, detailsUri, detailsSettings) => ({
     type: DETAILS_LOADED,
-    mapId,
+    id: resourceId,
     detailsUri,
     detailsSettings
 });

web/client/components/TOC/fragments/settings/Display.jsx

@@ -21,6 +21,7 @@ import { ServerTypes } from '../../../../utils/LayersUtils';
 import Select from 'react-select';
 import { getSupportedFormat } from '../../../../api/WMS';
 import WMSCacheOptions from './WMSCacheOptions';
+import ThreeDTilesSettings from './ThreeDTilesSettings';
 export default class extends React.Component {
     static propTypes = {
         opacityText: PropTypes.node,
@@ -206,18 +207,10 @@ export default class extends React.Component {
                     </Col>
                 </Row>
 
-                {this.props.element.type === "3dtiles" && <Row>
-                    <Col xs={12}>
-                        <FormGroup>
-                            <ControlLabel><Message msgId="layerProperties.heightOffset"/></ControlLabel>
-                            <IntlNumberFormControl
-                                type="number"
-                                name={"heightOffset"}
-                                value={this.props.element.heightOffset || 0}
-                                onChange={(val)=> this.props.onChange("heightOffset", parseFloat(val))}/>
-                        </FormGroup>
-                    </Col>
-                </Row>}
+                <ThreeDTilesSettings
+                    layer={this.props.element}
+                    onChange={this.props.onChange}
+                />
 
                 {this.props.element.type === "wms" &&
                 <Row>

web/client/components/TOC/fragments/settings/PointCloudShadingSettings.jsx

@@ -0,0 +1,140 @@
+/*
+ * Copyright 2023, 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 from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, ControlLabel, InputGroup, Checkbox } from 'react-bootstrap';
+import DebouncedFormControl from '../../../misc/DebouncedFormControl';
+import Message from '../../../I18N/Message';
+import InfoPopover from '../../../widgets/widget/InfoPopover';
+
+/**
+ * PointCloudShadingSettings. This component shows the point cloud shading options available
+ * @prop {object} layer the layer options
+ * @prop {object} onChange callback on every on change event
+ */
+function PointCloudShadingSettings({
+    layer,
+    onChange
+}) {
+    if (!(layer?.type === '3dtiles' && layer?.format === 'pnts')) {
+        return null;
+    }
+    const { pointCloudShading = {} } = layer || {};
+    return (
+        <>
+            <div style={{ fontWeight: 'bold', padding: 8 }}><Message msgId="layerProperties.3dTiles.pointCloudShading.title"/></div>
+            <FormGroup className="form-group-flex">
+                <Checkbox
+                    checked={!!pointCloudShading.attenuation}
+                    onChange={(event) => onChange('pointCloudShading', {
+                        ...pointCloudShading,
+                        attenuation: event?.target?.checked,
+                        maximumAttenuation: pointCloudShading?.maximumAttenuation ?? 4,
+                        eyeDomeLighting: pointCloudShading?.eyeDomeLighting ?? true
+                    })}
+                >
+                    <Message msgId="layerProperties.3dTiles.pointCloudShading.attenuation" />
+                    {' '}<InfoPopover text={<Message msgId="layerProperties.3dTiles.pointCloudShading.attenuationInfo" />} />
+                </Checkbox>
+            </FormGroup>
+            <FormGroup className="form-group-flex">
+                <ControlLabel>
+                    <Message msgId="layerProperties.3dTiles.pointCloudShading.maximumAttenuation" />
+                </ControlLabel>
+                <InputGroup style={{ maxWidth: 90 }}>
+                    <DebouncedFormControl
+                        disabled={!pointCloudShading.attenuation}
+                        type="number"
+                        value={pointCloudShading.maximumAttenuation !== undefined
+                            ?  pointCloudShading.maximumAttenuation
+                            : 4}
+                        min={0}
+                        fallbackValue={4}
+                        onChange={(value) => {
+                            onChange('pointCloudShading', {
+                                ...pointCloudShading,
+                                maximumAttenuation: value !== undefined ? parseFloat(value) : undefined
+                            });
+                        }}
+                    />
+                    <InputGroup.Addon>
+                        px
+                    </InputGroup.Addon>
+                </InputGroup>
+            </FormGroup>
+            <FormGroup className="form-group-flex">
+                <Checkbox
+                    disabled={!pointCloudShading.attenuation}
+                    checked={!!pointCloudShading.eyeDomeLighting}
+                    onChange={(event) => onChange('pointCloudShading', {
+                        ...pointCloudShading,
+                        eyeDomeLighting: event?.target?.checked
+                    })}
+                >
+                    <Message msgId="layerProperties.3dTiles.pointCloudShading.eyeDomeLighting" />
+                    {' '}<InfoPopover text={<Message msgId="layerProperties.3dTiles.pointCloudShading.eyeDomeLightingInfo" />} />
+                </Checkbox>
+            </FormGroup>
+            <FormGroup className="form-group-flex">
+                <ControlLabel>
+                    <Message msgId="layerProperties.3dTiles.pointCloudShading.eyeDomeLightingStrength" />
+                </ControlLabel>
+                <InputGroup style={{ maxWidth: 90 }}>
+                    <DebouncedFormControl
+                        disabled={!pointCloudShading.eyeDomeLighting || !pointCloudShading.attenuation}
+                        type="number"
+                        value={pointCloudShading.eyeDomeLightingStrength !== undefined
+                            ?  pointCloudShading.eyeDomeLightingStrength
+                            : 1.0}
+                        min={0}
+                        fallbackValue={1.0}
+                        onChange={(value) => onChange('pointCloudShading', {
+                            ...pointCloudShading,
+                            eyeDomeLightingStrength: value !== undefined ? parseFloat(value) : undefined
+                        })}
+                    />
+                </InputGroup>
+            </FormGroup>
+            <FormGroup className="form-group-flex">
+                <ControlLabel>
+                    <Message msgId="layerProperties.3dTiles.pointCloudShading.eyeDomeLightingRadius" />
+                </ControlLabel>
+                <InputGroup style={{ maxWidth: 90 }}>
+                    <DebouncedFormControl
+                        disabled={!pointCloudShading.eyeDomeLighting || !pointCloudShading.attenuation}
+                        type="number"
+                        value={pointCloudShading.eyeDomeLightingRadius !== undefined
+                            ?  pointCloudShading.eyeDomeLightingRadius
+                            : 1.0}
+                        min={0}
+                        step={1}
+                        fallbackValue={1.0}
+                        onChange={(value) => onChange('pointCloudShading', {
+                            ...pointCloudShading,
+                            eyeDomeLightingRadius: value !== undefined ? parseFloat(value) : undefined
+                        })}
+                    />
+                </InputGroup>
+            </FormGroup>
+        </>
+    );
+}
+
+PointCloudShadingSettings.propTypes = {
+    layer: PropTypes.object,
+    onChange: PropTypes.func
+};
+
+PointCloudShadingSettings.defaultProps = {
+    layer: {},
+    onChange: () => {}
+};
+
+export default PointCloudShadingSettings;

web/client/components/TOC/fragments/settings/ThreeDTilesSettings.jsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2023, 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 from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, ControlLabel, InputGroup } from 'react-bootstrap';
+import DebouncedFormControl from '../../../misc/DebouncedFormControl';
+import Message from '../../../I18N/Message';
+import PointCloudShadingSettings from './PointCloudShadingSettings';
+import Select from 'react-select';
+
+/**
+ * ThreeDTilesSettings. This component shows the 3d tiles options available
+ * @prop {object} layer the layer options
+ * @prop {object} onChange callback on every on change event
+ */
+function ThreeDTilesSettings({
+    layer,
+    onChange
+}) {
+    if (layer?.type !== '3dtiles') {
+        return null;
+    }
+    return (
+        <div style={{ margin: '0 -8px' }}>
+            <FormGroup className="form-group-flex">
+                <ControlLabel><Message msgId="layerProperties.3dTiles.format"/></ControlLabel>
+                <InputGroup>
+                    <Select
+                        value={layer.format === 'pnts' ? 'pnts' : '3dmodel'}
+                        fallbackValue={0}
+                        clearable={false}
+                        options={[
+                            {
+                                value: '3dmodel',
+                                label: <Message msgId="layerProperties.3dTiles.3dModel"/>
+                            },
+                            {
+                                value: 'pnts',
+                                label: <Message msgId="layerProperties.3dTiles.pointCloud"/>
+                            }
+                        ]}
+                        onChange={(option)=> {
+                            onChange('format', option?.value);
+                        }}
+                    />
+                </InputGroup>
+            </FormGroup>
+            <FormGroup className="form-group-flex">
+                <ControlLabel><Message msgId="layerProperties.heightOffset"/></ControlLabel>
+                <InputGroup style={{ maxWidth: 120 }}>
+                    <DebouncedFormControl
+                        type="number"
+                        name={"heightOffset"}
+                        value={layer.heightOffset || 0}
+                        fallbackValue={0}
+                        onChange={(val)=> {
+                            onChange('heightOffset', val !== undefined ? parseFloat(val) : undefined);
+                        }}
+                    />
+                    <InputGroup.Addon>m</InputGroup.Addon>
+                </InputGroup>
+            </FormGroup>
+            <PointCloudShadingSettings
+                layer={layer}
+                onChange={onChange}
+            />
+        </div>
+    );
+}
+
+ThreeDTilesSettings.propTypes = {
+    layer: PropTypes.object,
+    onChange: PropTypes.func
+};
+
+ThreeDTilesSettings.defaultProps = {
+    layer: {},
+    onChange: () => {}
+};
+
+export default ThreeDTilesSettings;