add switchcase to decide which cell type to display

src/app/map/components/feature-info-overlay/feature-info-content/feature-info-content.component.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component, Inject, Input, OnDestroy, OnInit, QueryList, Renderer2, ViewChildren} from '@angular/core';
 import {ConfigService} from '../../../../shared/services/config.service';
-import {FeatureInfoResultLayer} from '../../../../shared/interfaces/feature-info.interface';
+import {FeatureInfoResultFeatureField, FeatureInfoResultLayer} from '../../../../shared/interfaces/feature-info.interface';
 import {FeatureInfoActions} from '../../../../state/map/actions/feature-info.actions';
 import {Store} from '@ngrx/store';
 import {selectPinnedFeatureId} from '../../../../state/map/reducers/feature-info.reducer';
@@ -10,8 +10,6 @@ import {TableColumnIdentifierDirective} from './table-column-identifier.directiv
 import {GeometryWithSrs} from '../../../../shared/interfaces/geojson-types-with-srs.interface';
 import {MAP_SERVICE} from '../../../../app.module';
 import {MapService} from '../../../interfaces/map.service';
-import {LinkObject} from '../../../../shared/interfaces/link-object.interface';
-import {Image} from '../../../../shared/interfaces/image.interface';
 
 type CellType = 'text' | 'url' | 'image';
 
@@ -245,30 +243,27 @@ export class FeatureInfoContentComponent implements OnInit, OnDestroy, AfterView
     return {displayValue, fid, hasGeometry};
   }
 
-  private createTableCellForFeatureAndField(fid: number, value: string | LinkObject | Image | null): TableCell {
-    const displayValue = value ?? DEFAULT_CELL_VALUE;
-
-    if (typeof displayValue === 'string') {
-      return {cellType: 'text', fid, displayValue};
-    }
-
-    if ('alt' in displayValue) {
-      return {
-        cellType: 'image',
-        fid,
-        displayValue: displayValue.src.title ?? displayValue.src.href,
-        url: displayValue.url.href,
-        src: displayValue.src.href,
-        alt: displayValue.alt,
-      };
+  private createTableCellForFeatureAndField(fid: number, feature: FeatureInfoResultFeatureField): TableCell {
+    switch (feature.type) {
+      case 'text':
+        return {cellType: 'text', fid, displayValue: feature.value ?? DEFAULT_CELL_VALUE};
+      case 'image':
+        return {
+          cellType: 'image',
+          fid,
+          displayValue: feature.value.src.title ?? feature.value.src.href,
+          url: feature.value.url.href,
+          src: feature.value.src.href,
+          alt: feature.value.alt,
+        };
+      case 'link':
+        return {
+          cellType: 'url',
+          fid,
+          displayValue: feature.value.title ?? feature.value.href,
+          url: feature.value.href,
+        };
     }
-
-    return {
-      cellType: 'url',
-      fid,
-      displayValue: displayValue.title ?? displayValue.href,
-      url: displayValue.href,
-    };
   }
 
   /**
@@ -287,15 +282,15 @@ export class FeatureInfoContentComponent implements OnInit, OnDestroy, AfterView
       const tableHeader = this.createTableHeaderForFeature(fid, featureIdx, features.length, !!geometry);
       this.tableHeaders.push(tableHeader);
 
-      fields.forEach(({label, value}) => {
-        const tableCell = this.createTableCellForFeatureAndField(fid, value);
+      fields.forEach((feature) => {
+        const tableCell = this.createTableCellForFeatureAndField(fid, feature);
 
-        if (this.tableRows.has(label)) {
+        if (this.tableRows.has(feature.label)) {
           // see: https://stackoverflow.com/questions/70723319/object-is-possibly-undefined-using-es6-map-get-right-after-map-set
           // -> it should never happen, but IF it were to happen, we are not doing anything.
-          this.tableRows.get(label)?.push(tableCell);
+          this.tableRows.get(feature.label)?.push(tableCell);
         } else {
-          this.tableRows.set(label, [tableCell]);
+          this.tableRows.set(feature.label, [tableCell]);
         }
       });
     });

src/app/shared/interfaces/feature-info.interface.ts

@@ -4,11 +4,33 @@ import {IsSingleLayer} from './single-layer.interface';
 import {LinkObject} from './link-object.interface';
 import {Image} from './image.interface';
 
-export interface FeatureInfoResultFeatureField {
+export type FeatureInfoResultFeatureFieldType = 'image' | 'link' | 'text';
+
+export interface AbstractFeatureInfoResultFeatureField {
   label: string;
-  value: string | LinkObject | Image | null;
+  type: FeatureInfoResultFeatureFieldType;
+}
+
+export interface FeatureInfoResultFeatureImageField extends AbstractFeatureInfoResultFeatureField {
+  value: Image;
+  type: 'image';
+}
+
+export interface FeatureInfoResultFeatureLinkField extends AbstractFeatureInfoResultFeatureField {
+  value: LinkObject;
+  type: 'link';
+}
+
+export interface FeatureInfoResultFeatureTextField extends AbstractFeatureInfoResultFeatureField {
+  value: string | null;
+  type: 'text';
 }
 
+export type FeatureInfoResultFeatureField =
+  | FeatureInfoResultFeatureImageField
+  | FeatureInfoResultFeatureLinkField
+  | FeatureInfoResultFeatureTextField;
+
 interface FeatureInfoResultFeature {
   fid: number;
   fields: FeatureInfoResultFeatureField[];

src/app/shared/services/apis/gb3/gb3-topics.service.ts

@@ -31,14 +31,12 @@ import {Gb3ApiService} from './gb3-api.service';
 import {InvalidTimeSliderConfiguration} from '../../../errors/map.errors';
 import {QueryTopic} from '../../../interfaces/query-topic.interface';
 import {ApiGeojsonGeometryToGb3ConverterUtils} from '../../../utils/api-geojson-geometry-to-gb3-converter.utils';
-import {LinkObject} from '../../../interfaces/link-object.interface';
 import {GeometryWithSrs} from '../../../interfaces/geojson-types-with-srs.interface';
 import {HttpClient} from '@angular/common/http';
 import {ConfigService} from '../../config.service';
 import {TIME_SERVICE} from '../../../../app.module';
 import {TimeService} from '../../../interfaces/time-service.interface';
 import {TimeSliderService} from '../../../../map/services/time-slider.service';
-import {Image} from '../../../interfaces/image.interface';
 
 const INACTIVE_STRING_FILTER_VALUE = '';
 const INACTIVE_NUMBER_FILTER_VALUE = -1;
@@ -348,10 +346,7 @@ export class Gb3TopicsService extends Gb3ApiService {
                 return {
                   fid: feature.fid,
                   fields: feature.fields.map((field): FeatureInfoResultFeatureField => {
-                    return {
-                      label: field.label,
-                      value: this.createFeatureInfoFieldValue(field),
-                    };
+                    return this.createFeatureInfoField(field);
                   }),
                   geometry: feature.geometry ? this.convertGeometryToSupportedGeometry(feature.geometry) : undefined,
                 };
@@ -370,17 +365,21 @@ export class Gb3TopicsService extends Gb3ApiService {
     };
   }
 
-  private createFeatureInfoFieldValue(field: InfoFeatureField): string | LinkObject | Image | null {
+  private createFeatureInfoField(field: InfoFeatureField): FeatureInfoResultFeatureField {
     switch (field.type) {
       case 'image':
-        return field.value;
+        return {type: field.type, value: field.value, label: field.label};
       case 'link':
         return {
-          title: field.value.title,
-          href: field.value.href,
+          type: field.type,
+          value: {
+            title: field.value.title,
+            href: field.value.href,
+          },
+          label: field.label,
         };
       case 'text':
-        return typeof field.value === 'number' ? field.value.toString() : null;
+        return {type: field.type, value: typeof field.value === 'number' ? field.value.toString() : null, label: field.label};
     }
   }
 }