Feature/viewer 1392 sonar cloud issues on

.vscode/settings.json

@@ -1,4 +1,9 @@
 {
     "javascript.preferences.quoteStyle": "single",
-    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false
+    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
+    "sonarlint.connectedMode.project": {
+        "connectionId": "swisstopo",
+        "projectKey": "swisstopo_swissgeol-viewer-app"
+    },
+    "makefile.configureOnOpen": false
 }

ui/src/LimitCameraHeightToDepth.ts

@@ -3,8 +3,8 @@ import type {Scene} from 'cesium';
 
 
 export default class LimitCameraHeightToDepth {
-  private scene: Scene;
-  private depth: number;
+  private readonly scene: Scene;
+  private readonly depth: number;
 
   constructor(scene: Scene, depth: number) {
     this.scene = scene;

ui/src/MapChooser.ts

@@ -6,8 +6,8 @@ import type {BaseLayerConfig} from './viewer';
 import MainStore from './store/main';
 
 export default class MapChooser {
-  private viewer: Viewer;
-  private config: BaseLayerConfig[];
+  private readonly viewer: Viewer;
+  private readonly config: BaseLayerConfig[];
   public selectedMap: BaseLayerConfig;
   public elements: NgmMapChooser[] = [];
 

ui/src/NavigableVolumeLimiter.ts

@@ -7,8 +7,8 @@ import type {Scene, Rectangle} from 'cesium';
  */
 export default class NavigableVolumeLimiter {
   private blockLimiter = false;
-  private boundingSphere: BoundingSphere;
-  private ratioFunction: (height: number) => number;
+  private readonly boundingSphere: BoundingSphere;
+  private readonly ratioFunction: (height: number) => number;
 
   constructor(scene: Scene, rectangle: Rectangle, height: number, ratioFunction: (height: number) => number) {
     this.boundingSphere = BoundingSphere.fromRectangle3D(rectangle, Ellipsoid.WGS84, height);

ui/src/authService.ts

@@ -1,4 +1,4 @@
-import type {
+  import type {
   CognitoIdentityCredentialProvider,
   CognitoIdentityCredentials
 } from '@aws-sdk/credential-provider-cognito-identity';
@@ -47,11 +47,11 @@ export default class AuthService {
       if (params.has('access_token') && params.has('id_token') &&
         params.get('token_type') === 'Bearer' && params.get('state') === this.state()) {
         localStorage.setItem('rawCognitoResponse', response);
-        const token = params.get('access_token') || '';
+        const token = params.get('access_token') ?? '';
         const payload = atob(token.split('.')[1]);
         const claims = JSON.parse(payload);
         this.setUser(claims);
-        this.setAccessToken(params.get('id_token') || '');
+        this.setAccessToken(params.get('id_token') ?? '');
       }
     } else if (this.getUser()) {
       // this strange line sets up observable and autologout

ui/src/cesium-toolbar.ts

@@ -135,7 +135,7 @@ export class CesiumToolbar extends LitElement {
     super.updated(changedProperties);
   }
 
-  static styles = css`
+  static readonly styles = css`
     :host {
       position: absolute;
       background-color: #0000005c;

ui/src/draw/CesiumDraw.ts

@@ -61,10 +61,10 @@ export type DrawEndDetails = {
 }
 
 export class CesiumDraw extends EventTarget {
-  private viewer_: Viewer;
-  private strokeColor_: Color;
-  private strokeWidth_: number;
-  private fillColor_: Color;
+  private readonly viewer_: Viewer;
+  private readonly strokeColor_: Color;
+  private readonly strokeWidth_: number;
+  private readonly fillColor_: Color;
   private eventHandler_: ScreenSpaceEventHandler | undefined;
   private activePoints_: Cartesian3[] = [];
   private activePoint_: Cartesian3 | undefined;

ui/src/elements/dashboard/ngm-add-member-form.ts

@@ -29,16 +29,16 @@ export class NgmAddMemberForm extends LitElementI18n {
     accessor email: string | undefined;
     @state()
     accessor roleNotSelected = false;
-    private roleDropdownItems: DropdownItem[] = [
+    private readonly roleDropdownItems: DropdownItem[] = [
         {title: i18next.t('dashboard_project_viewer'), value: 'viewer'},
         {title: i18next.t('dashboard_project_editor'), value: 'editor'},
     ];
 
     onAdd() {
         if (!this.name || !this.surname || !isEmail(this.email) || !this.memberRole) {
-            this.name = this.name || '';
-            this.surname = this.surname || '';
-            this.email = this.email || '';
+            this.name = this.name ?? '';
+            this.surname = this.surname ?? '';
+            this.email = this.email ?? '';
             this.roleNotSelected = !this.memberRole;
             return;
         }
@@ -63,21 +63,21 @@ export class NgmAddMemberForm extends LitElementI18n {
         return html`
             <div class="ngm-member-add-form">
                 <div class="ngm-input ${classMap({'ngm-input-warning': !this.name && this.name !== undefined})}">
-                    <input type="text" placeholder="required" .value=${this.name || ''}
+                    <input type="text" placeholder="required" .value=${this.name ?? ''}
                            @input=${evt => {
                                this.name = evt.target.value;
                            }}/>
                     <span class="ngm-floating-label">${i18next.t('project_member_name')}</span>
                 </div>
                 <div class="ngm-input ${classMap({'ngm-input-warning': !this.surname && this.surname !== undefined})}">
-                    <input type="text" placeholder="required" .value=${this.surname || ''}
+                    <input type="text" placeholder="required" .value=${this.surname ?? ''}
                            @input=${evt => {
                                this.surname = evt.target.value;
                            }}/>
                     <span class="ngm-floating-label">${i18next.t('project_member_surname')}</span>
                 </div>
                 <div class="ngm-input ${classMap({'ngm-input-warning': !isEmail(this.email) && this.email !== undefined})}">
-                    <input type="email" placeholder="required" .value=${this.email || ''}
+                    <input type="email" placeholder="required" .value=${this.email ?? ''}
                            @input=${evt => {
                                this.email = evt.target.value;
                            }}/>
@@ -105,4 +105,4 @@ export class NgmAddMemberForm extends LitElementI18n {
         return this;
     }
 
-}
+}

ui/src/elements/dashboard/ngm-dashboard.ts

@@ -127,7 +127,7 @@ export class NgmDashboard extends LitElementI18n {
   private geometries: NgmGeometry[] = [];
   private recentlyViewedIds: Array<string> = [];
   private userEmail: string | undefined;
-  private tempKmlDataSource = new CustomDataSource('tempKmlDataSource');
+  private readonly tempKmlDataSource = new CustomDataSource('tempKmlDataSource');
 
   @consume({context: apiClientContext})
   accessor apiClient!: ApiClient;

ui/src/elements/dashboard/ngm-project-topic-overview.ts

@@ -51,7 +51,7 @@ export class NgmProjectTopicOverview extends LitElementI18n {
     if (!this.topicOrProject) return '';
     const project = isProject(this.topicOrProject) ? this.topicOrProject : undefined;
     const ownerEmail = project?.owner?.email;
-    const owner = ownerEmail || i18next.t('swisstopo');
+    const owner = ownerEmail ?? i18next.t('swisstopo');
     const date = this.topicOrProject?.modified ? this.topicOrProject?.modified : this.topicOrProject?.created;
     const backgroundImage = this.topicOrProject.image?.length ? `url('${this.topicOrProject.image}')` : 'none';
     const editorEmails = project?.editors?.map(m => m.email) || [];
@@ -161,7 +161,7 @@ export class NgmProjectTopicOverview extends LitElementI18n {
              @click=${() => this.duplicateToProject()}>
           ${i18next.t('duplicate_to_project')}
         </div>
-        <a class="item" target="_blank" href="mailto:?body=${encodeURIComponent(this.getLink() || '')}">
+        <a class="item" target="_blank" href="mailto:?body=${encodeURIComponent(this.getLink() ?? '')}">
           ${i18next.t('dashboard_share_topic_email')}
         </a>
         ${isProject(this.topicOrProject) && this.topicOrProject.owner.email !== this.userEmail ? '' : html`

ui/src/elements/hide-overflow.ts

@@ -4,7 +4,7 @@ import {customElement} from 'lit/decorators.js';
 
 @customElement('hide-overflow')
 export class HideOverflow extends LitElement {
-  private observer: IntersectionObserver;
+  private readonly observer: IntersectionObserver;
 
   constructor() {
     super();

ui/src/elements/ngm-coordinate-popup.ts

@@ -20,7 +20,7 @@ export class NgmCoordinatePopup extends LitElementI18n {
     @state()
     accessor terrainDistance = '';
     private eventHandler: ScreenSpaceEventHandler | undefined;
-    private integerFormat = new Intl.NumberFormat('de-CH', {
+    private readonly integerFormat = new Intl.NumberFormat('de-CH', {
         maximumFractionDigits: 1
     });
 
@@ -98,4 +98,4 @@ export class NgmCoordinatePopup extends LitElementI18n {
     createRenderRoot() {
         return this;
     }
-}
+}

ui/src/elements/ngm-cursor-information.ts

@@ -22,7 +22,7 @@ export class NgmCursorInformation extends LitElementI18n {
   private unlistenMoveStart: any;
   private unlistenMoveEnd: any;
   // always use the 'de-CH' locale to always have the simple tick as thousands separator
-  private integerFormat = new Intl.NumberFormat('de-CH', {
+  private readonly integerFormat = new Intl.NumberFormat('de-CH', {
     maximumFractionDigits: 1
   });
 

ui/src/elements/ngm-ion-modal.ts

@@ -86,7 +86,7 @@ export class NgmIonModal extends LitElementI18n {
         <div class="content-container">
             <div class="ngm-ion-load-container">
                 <div class="ngm-input ${classMap({'ngm-input-warning': !this.token && this.token !== null})}">
-                    <input type="text" placeholder="required" .value=${this.token || ''}
+                    <input type="text" placeholder="required" .value=${this.token ?? ''}
                            @input=${evt => {
                                this.token = evt.target.value;
                            }}/>
@@ -133,4 +133,4 @@ export class NgmIonModal extends LitElementI18n {
         // no shadow dom
         return this;
     }
-}
+}

ui/src/elements/ngm-map-configuration.ts

@@ -31,7 +31,7 @@ export class NgmMapConfiguration extends LitElementI18n {
   accessor baseMapId = 'ch.swisstopo.pixelkarte-grau';
   @query('ngm-map-chooser')
   accessor mapChooserElement;
-  private debouncedOpacityUpdate = debounce((evt: Event) => this.updateOpacity(Number((<HTMLInputElement>evt.target).value)), 250);
+  private readonly debouncedOpacityUpdate = debounce((evt: Event) => this.updateOpacity(Number((<HTMLInputElement>evt.target).value)), 250);
   private prevExaggeration: number = 1;
 
   constructor() {

ui/src/elements/ngm-nav-tools.ts

@@ -58,7 +58,7 @@ export class NgmNavTools extends LitElementI18n {
   private zoomingOut = false;
   private unlistenFromPostRender: Event.RemoveCallback | null = null;
   private eventHandler: ScreenSpaceEventHandler | undefined;
-  private stopZoomFunction: () => void = () => this.stopZoom();
+  private readonly stopZoomFunction: () => void = () => this.stopZoom();
   private refIcon: Entity = new Entity({
     position: Cartesian3.ZERO,
     show: false,
@@ -70,14 +70,14 @@ export class NgmNavTools extends LitElementI18n {
     }
   });
   private moveRef = false;
-  private julianDate = new JulianDate();
+  private readonly julianDate = new JulianDate();
   private axisDataSource: CustomDataSource | undefined;
   private axisCenter: Cartesian3 | undefined;
-  private oldPolylineUpdate: any = PolylineCollection.prototype.update;
-  private xyAxisCalculation = (axis, side) => [this.axisCenter, positionFromPxDistance(this.viewer!.scene, this.axisCenter!, AXIS_LENGTH, axis, side)];
-  private xAxisCallback = new CallbackProperty(() => this.xyAxisCalculation('x', -1), false);
-  private yAxisCallback = new CallbackProperty(() => this.xyAxisCalculation('y', 1), false);
-  private zAxisCallback = new CallbackProperty(() => this.xyAxisCalculation('z', -1), false);
+  private readonly oldPolylineUpdate: any = PolylineCollection.prototype.update;
+  private readonly xyAxisCalculation = (axis, side) => [this.axisCenter, positionFromPxDistance(this.viewer!.scene, this.axisCenter!, AXIS_LENGTH, axis, side)];
+  private readonly xAxisCallback = new CallbackProperty(() => this.xyAxisCalculation('x', -1), false);
+  private readonly yAxisCallback = new CallbackProperty(() => this.xyAxisCalculation('y', 1), false);
+  private readonly zAxisCallback = new CallbackProperty(() => this.xyAxisCalculation('z', -1), false);
   private exaggeration = 1;
 
   constructor() {

ui/src/elements/ngm-side-bar.ts

@@ -91,7 +91,7 @@ export class SideBar extends LitElementI18n {
   private zoomedToPosition = false;
   private accordionInited = false;
   private shareListenerAdded = false;
-  private shareDownListener = evt => {
+  private readonly shareDownListener = evt => {
     if (!evt.composedPath().includes(this)) this.activePanel = null;
   };
 
@@ -378,7 +378,7 @@ export class SideBar extends LitElementI18n {
       }
       layer.visible = urlLayer.visible;
       layer.opacity = urlLayer.opacity;
-      layer.wmtsCurrentTime = urlLayer.timestamp || layer.wmtsCurrentTime;
+      layer.wmtsCurrentTime = urlLayer.timestamp ?? layer.wmtsCurrentTime;
       layer.setOpacity && layer.setOpacity(layer.opacity);
       layer.displayed = true;
       layer.setVisibility && layer.setVisibility(layer.visible);
@@ -395,7 +395,7 @@ export class SideBar extends LitElementI18n {
           type: LayerType.tiles3d,
           assetId: Number(assetId),
           ionToken: ionToken,
-          label: ionAsset?.name || assetId,
+          label: ionAsset?.name ?? assetId,
           layer: assetId,
           visible: true,
           displayed: true,
@@ -607,12 +607,12 @@ export class SideBar extends LitElementI18n {
       config = searchLayer;
       config.visible = true;
       config.origin = 'layer';
-      config.label = searchLayer.title || searchLayer.label;
+      config.label = searchLayer.title ?? searchLayer.label;
       config.legend = config.type === LayerType.swisstopoWMTS ? config.layer : undefined;
     } else {
       config = {
         type: LayerType.swisstopoWMTS,
-        label: searchLayer.title || searchLayer.label,
+        label: searchLayer.title ?? searchLayer.label,
         layer: searchLayer.layer,
         visible: true,
         displayed: true,

ui/src/layers/helpers.ts

@@ -61,13 +61,13 @@ export async function create3DVoxelsTilesetFromConfig(viewer: Viewer, config: La
   });
 
   const searchParams = new URLSearchParams(location.search);
-  const stepSize = parseFloat(searchParams.get('stepSize') || '1');
+  const stepSize = parseFloat(searchParams.get('stepSize') ?? '1');
 
   primitive.nearestSampling = true;
   primitive.stepSize = stepSize;
   primitive.depthTest = true;
   primitive.show = !!config.visible;
-  primitive.pickable = config.pickable !== undefined ? config.pickable : false;
+  primitive.pickable = config.pickable ?? false;
   primitive.layer = config.layer;
 
   viewer.scene.primitives.add(primitive);
@@ -114,7 +114,7 @@ export async function create3DTilesetFromConfig(viewer: Viewer, config: LayerCon
     tileset.style = new Cesium3DTileStyle(config.style);
   }
 
-  tileset.pickable = config.pickable !== undefined ? config.pickable : false;
+  tileset.pickable = config.pickable ?? false;
   viewer.scene.primitives.add(tileset);
 
   config.setVisibility = visible => {
@@ -180,7 +180,7 @@ export async function createSwisstopoWMTSImageryLayer(viewer: Viewer, config: La
     }, 100);
   };
   viewer.scene.imageryLayers.add(layer);
-  layer.alpha = config.opacity || 1;
+  layer.alpha = config.opacity ?? 1;
   layer.show = !!config.visible;
   return layer;
 }

ui/src/layers/ngm-layers-item.ts

@@ -38,8 +38,8 @@ export class NgmLayersItem extends LitElementI18n {
   accessor movable = false;
   @query('.menu')
   accessor actionMenu!: HTMLElement;
-  private toggleItemSelection = () => this.movable ? Sortable.utils.select(this) : Sortable.utils.deselect(this);
-  private debouncedOpacityChange = debounce(() => this.changeOpacity(), 250, true);
+  private readonly toggleItemSelection = () => this.movable ? Sortable.utils.select(this) : Sortable.utils.deselect(this);
+  private readonly debouncedOpacityChange = debounce(() => this.changeOpacity(), 250, true);
 
   firstUpdated() {
     $(this.querySelector('.ui.dropdown')!).dropdown();
@@ -166,9 +166,9 @@ export class NgmLayersItem extends LitElementI18n {
             ${i18next.t('dtd_legend')}
           </div>` : ''}
         ${this.config?.geocatId ? html`
-          <a 
-            class="item" 
-            href="${this.geocatLink(this.config.geocatId)}" 
+          <a
+            class="item"
+            href="${this.geocatLink(this.config.geocatId)}"
             target="_blank" rel="noopener">
             Geocat.ch
           </a>` : ''}
@@ -240,7 +240,7 @@ export class NgmLayersItem extends LitElementI18n {
         <input type="range" class="ngm-slider ${classMap({disabled: this.changeOrderActive})}" ?hidden=${this.config.opacityDisabled}
                style="background-image: linear-gradient(to right, var(--ngm-interaction-active), var(--ngm-interaction-active) ${this.config.opacity! * 100}%, white ${this.config.opacity! * 100}%)"
                min=0 max=1 step=0.01
-               .value=${this.config.opacity?.toString() || '1'}
+               .value=${this.config.opacity?.toString() ?? '1'}
                @input=${this.inputOpacity}
                @mousedown=${e => this.changeOrderActive && e.preventDefault()}>
       </div>

ui/src/measure/MeasureTool.ts

@@ -28,7 +28,7 @@ export default class MeasureTool {
     private readonly measureDataSource = new CustomDataSource('measure');
     private readonly measureOptions: MeasureOptions;
     private measureToolActive = false;
-    private screenSpaceEventHandler: ScreenSpaceEventHandler | undefined;
+    private readonly screenSpaceEventHandler: ScreenSpaceEventHandler | undefined;
     private measurePositions: Cartesian3[] = [];
     private highlightEntity: Entity | undefined;
     private points: Entity[] = [];
@@ -164,4 +164,4 @@ export default class MeasureTool {
         this.measureDataSource.entities.removeAll();
         this.viewer?.scene.render();
     }
-}
+}

ui/src/ngm-app-boot.ts

@@ -10,7 +10,7 @@ import {ConfigService} from './api/config.service';
 
 @customElement('ngm-app-boot')
 export class NgmAppBoot extends LitElement {
-  private viewerInitialization = new Task(this, {
+  private readonly viewerInitialization = new Task(this, {
     task: async () => {
       const clientConfig = await new ConfigService().getConfig() as ClientConfig;
       if (!clientConfig) {

ui/src/ngm-app.ts

@@ -228,7 +228,7 @@ export class NgmApp extends LitElementI18n {
 
     // Temporarily increasing the maximum screen space error to load low LOD tiles.
     const searchParams = new URLSearchParams(document.location.search);
-    globe.maximumScreenSpaceError = parseFloat(searchParams.get('initialScreenSpaceError') || '2000');
+    globe.maximumScreenSpaceError = parseFloat(searchParams.get('initialScreenSpaceError') ?? '2000');
 
     let currentStep = 1;
     const unlisten = globe.tileLoadProgressEvent.addEventListener(queueLength => {