geonetwork-ui 2.7.0-dev.d500b08cc → 2.7.0-dev.d6c0958d7

package/libs/util/shared/src/lib/utils/mobile-screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-screen.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/utils/mobile-screen.ts"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,uCAM1B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geonetwork-ui",
-  "version": "2.7.0-dev.d500b08cc",
+  "version": "2.7.0-dev.d6c0958d7",
   "engines": {
     "node": ">=20"
   },

package/src/libs/api/metadata-converter/src/lib/dcat-ap/utils/status.mapper.ts

@@ -11,8 +11,11 @@ export function getStatusFromStatusCode(statusCode: string): RecordStatus {
     case 'onGoing':
       return 'ongoing'
     case 'planned':
+      return 'planned'
     case 'required':
+      return 'required'
     case 'underDevelopment':
+      return 'under_development'
     default:
       return 'under_development'
   }

package/src/libs/api/metadata-converter/src/lib/iso19139/utils/status.mapper.ts

@@ -11,8 +11,11 @@ export function getStatusFromStatusCode(statusCode: string): RecordStatus {
     case 'onGoing':
       return 'ongoing'
     case 'planned':
+      return 'planned'
     case 'required':
+      return 'required'
     case 'underDevelopment':
+      return 'under_development'
     default:
       return 'under_development'
   }

package/src/libs/api/metadata-converter/src/lib/iso19139/write-parts.ts

@@ -183,6 +183,10 @@ export function getProgressCode(status: RecordStatus): string {
       return 'removed'
     case 'under_development':
       return 'underDevelopment'
+    case 'planned':
+      return 'planned'
+    case 'required':
+      return 'required'
     default:
       throw new Error(
         `Could not determine progress code from status: ${status}`

package/src/libs/api/repository/src/lib/gn4/elasticsearch/constant.ts

@@ -10,14 +10,12 @@ export const ES_SOURCE_SUMMARY = [
   'codelist_status_text',
   'link',
   'linkProtocol',
-  'contactForResource.organisation',
-  'contact.organisation',
-  'contact.email',
+  'contactForResource*.organisation*',
+  'contact*.organisation*',
+  'contact*.email',
   'userSavedCount',
-  'updateFrequency',
   'cl_topic',
   'cl_maintenanceAndUpdateFrequency',
-  'tag',
   'MD_LegalConstraints*Object',
   'qualityScore',
   'allKeywords',

package/src/libs/api/repository/src/lib/gn4/platform/gn4-platform.service.ts

@@ -46,6 +46,7 @@ import {
 } from 'rxjs'
 import { TranslateService } from '@ngx-translate/core'
 import { getLang3FromLang2 } from '../../../../../../../libs/util/i18n/src'
+import { DatavizConfigModel } from '../../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 
 const minApiVersion = '4.2.2'
 
@@ -323,10 +324,15 @@ export class Gn4PlatformService implements PlatformServiceInterface {
           ...(Array.isArray(onlines) ? onlines : []),
           ...(Array.isArray(thumbnails) ? thumbnails : []),
         ].map((resource) => Object.values(resource.url)[0])
-
-        const fileToDelete = attachments
-          .filter((attachment) => !urlsToKeep.includes(attachment.url))
-          .map((attachment) => attachment.filename)
+        const fileToDelete = attachments.reduce<string[]>((acc, attachment) => {
+          if (
+            !urlsToKeep.includes(attachment.url) &&
+            attachment.filename !== 'datavizConfig.json'
+          ) {
+            acc.push(attachment.filename)
+          }
+          return acc
+        }, [])
 
         return fileToDelete
       }),
@@ -385,6 +391,32 @@ export class Gn4PlatformService implements PlatformServiceInterface {
       )
   }
 
+  getFileContent(url: URL | string): Observable<any> {
+    return this.httpClient.get(url.toString(), { responseType: 'text' }).pipe(
+      map((text) => {
+        const parsed = JSON.parse(text)
+
+        if (typeof parsed === 'object') {
+          return parsed
+        }
+
+        const decoded = this.decodeBase64(parsed)
+        return JSON.parse(decoded)
+      })
+    )
+  }
+
+  decodeBase64(base64) {
+    const text = atob(base64)
+    const length = text.length
+    const bytes = new Uint8Array(length)
+    for (let i = 0; i < length; i++) {
+      bytes[i] = text.charCodeAt(i)
+    }
+    const decoder = new TextDecoder()
+    return decoder.decode(bytes)
+  }
+
   attachFileToRecord(
     recordUuid: string,
     file: File,

package/src/libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model.ts

@@ -24,4 +24,5 @@ export interface DatavizConfigModel {
   view: string
   source: DatasetOnlineResource
   chartConfig?: DatavizChartConfigModel
+  styleTMSIndex: number
 }

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -69,6 +69,8 @@ marker('domain.record.status.ongoing')
 marker('domain.record.status.under_development')
 marker('domain.record.status.deprecated')
 marker('domain.record.status.removed')
+marker('domain.record.status.planned')
+marker('domain.record.status.required')
 
 export const RecordStatusValues = [
   'completed',
@@ -76,6 +78,8 @@ export const RecordStatusValues = [
   'under_development',
   'deprecated',
   'removed',
+  'planned',
+  'required',
 ]
 export type RecordStatus = (typeof RecordStatusValues)[number]
 

package/src/libs/common/domain/src/lib/platform.service.interface.ts

@@ -3,6 +3,7 @@ import type { UserModel } from './model/user/user.model'
 import type { Organization } from './model/record/organization.model'
 import { CatalogRecord, Keyword, UserFeedback } from './model/record'
 import { KeywordType } from './model/thesaurus'
+import { DatavizConfigModel } from './model/dataviz/dataviz-configuration.model'
 
 export interface RecordAttachment {
   url: URL
@@ -55,4 +56,5 @@ export abstract class PlatformServiceInterface {
     file: File,
     removeDuplicate?: boolean
   ): Observable<UploadEvent>
+  abstract getFileContent(url: URL): Observable<any>
 }

package/src/libs/common/fixtures/src/lib/editor/editor.fixtures.ts

@@ -127,9 +127,6 @@ export const editorFieldSpatialExtentsFixture = () => ({
 export const editorFieldKeywordsFixture = () => ({
   model: 'keywords',
   hidden: false,
-  formFieldConfig: {
-    labelKey: 'editor.record.form.field.keywords',
-  },
 })
 
 export const editorFieldUniqueIdentifierFixture = () => ({

package/src/libs/feature/dataviz/src/lib/chart-view/chart-view.component.ts

@@ -28,7 +28,10 @@ import {
   tap,
 } from 'rxjs/operators'
 import { DataService } from '../service/data.service'
-import { InputChartType } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
+import {
+  DatavizChartConfigModel,
+  InputChartType,
+} from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import {
   DatasetFeatureCatalog,
   DatasetOnlineResource,
@@ -104,6 +107,12 @@ export class ChartViewComponent {
   }
   chartType$ = new BehaviorSubject<InputChartType>('bar')
 
+  @Input() set userChartConfig(config: DatavizChartConfigModel) {
+    this.aggregation$.next(config.aggregation)
+    this.xProperty$.next(config.xProperty)
+    this.yProperty$.next(config.yProperty)
+    this.chartType$.next(config.chartType)
+  }
   @Output() chartConfig$ = combineLatest([
     this.xProperty$.pipe(filter((value) => value !== undefined)),
     this.yProperty$.pipe(filter((value) => value !== undefined)),

package/src/libs/feature/editor/src/index.ts

@@ -9,3 +9,4 @@ export * from './lib/components/import-record/import-record.component'
 export * from './lib/components/record-form/record-form.component'
 export * from './lib/components/record-form/form-field'
 export * from './lib/components/multilingual-panel/multilingual-panel.component'
+export * from './lib/components/metadata-quality-panel/metadata-quality-panel.component'

package/src/libs/feature/editor/src/lib/components/metadata-quality-panel/metadata-quality-panel.component.html

@@ -0,0 +1,37 @@
+<div
+  class="flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-3 overflow-auto"
+  style="background-color: #fafaf9"
+>
+  <div class="flex flex-row px-2 justify-between">
+    <span class="text-3xl font-title text-black/80" translate
+      >editor.record.form.metadataQuality.title</span
+    >
+  </div>
+  <div
+    *ngFor="let properties of propertiesByPage; let i = index"
+    class="flex flex-col gap-2"
+  >
+    <gn-ui-button
+      *ngFor="let property of properties"
+      [extraClass]="getExtraClass(property.value)"
+      type="outline"
+      attr.data-cy="md-quality-btn-{{ property.label }}"
+    >
+      <span>{{ property.label | translate }}</span>
+      <div class="flex flex-row gap-2 items-center">
+        <ng-icon
+          *ngIf="property.value; else notChecked"
+          class="text-primary"
+          name="iconoirBadgeCheck"
+        ></ng-icon>
+        <ng-template #notChecked>
+          <ng-icon class="text-neutral-300" name="iconoirSystemShut"></ng-icon>
+        </ng-template>
+      </div>
+    </gn-ui-button>
+    <hr
+      *ngIf="i !== propertiesByPage.length - 1"
+      class="border-gray-300 w-11/12 mx-auto"
+    />
+  </div>
+</div>

package/src/libs/feature/editor/src/lib/components/metadata-quality-panel/metadata-quality-panel.component.ts

@@ -0,0 +1,90 @@
+import { CommonModule } from '@angular/common'
+import { Component, Input, OnChanges } from '@angular/core'
+import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import {
+  getAllKeysValidator,
+  getQualityValidators,
+  ValidatorMapperKeys,
+} from '../../../../../../../libs/util/shared/src'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirBadgeCheck, iconoirSystemShut } from '@ng-icons/iconoir'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+import { EditorConfig } from '../../models'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+//forced translations that are not available in fields.config.ts
+marker('editor.record.form.field.keywords')
+marker('editor.record.form.field.topics')
+marker('editor.record.form.field.contacts')
+marker('editor.record.form.field.organisation')
+@Component({
+  selector: 'gn-ui-metadata-quality-panel',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateDirective,
+    TranslatePipe,
+    ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirSystemShut,
+      iconoirBadgeCheck,
+    }),
+    provideNgIconsConfig({
+      size: '1.25em',
+    }),
+  ],
+  templateUrl: './metadata-quality-panel.component.html',
+  styleUrl: './metadata-quality-panel.component.css',
+})
+export class MetadataQualityPanelComponent implements OnChanges {
+  propsToValidate: ValidatorMapperKeys[] = getAllKeysValidator()
+  propertiesByPage: { label: string; value: boolean }[][] = []
+  @Input() editorConfig: EditorConfig
+  @Input() record: CatalogRecord
+
+  ngOnChanges() {
+    if (this.editorConfig && this.record) {
+      const fieldsByPage = this.editorConfig.pages.map((page) =>
+        page.sections.flatMap((section) =>
+          section.fields
+            .filter((field) => this.propsToValidate.includes(field.model))
+            .map((field) => field.model as ValidatorMapperKeys)
+        )
+      )
+      // FIXME: temporarily add topics and organisation to the first and third page
+      // as long as they are not handled by the editor
+      if (fieldsByPage.length > 0) {
+        fieldsByPage[0].includes('topics') || fieldsByPage[0].push('topics')
+        fieldsByPage[2].includes('organisation') ||
+          fieldsByPage[2].push('organisation')
+      }
+      this.propertiesByPage = fieldsByPage
+        .map((fields) =>
+          getQualityValidators(
+            this.record,
+            fields as ValidatorMapperKeys[]
+          ).map(({ name, validator }) => ({
+            label: `editor.record.form.field.${name}`, // use same translations as in fields.config.ts
+            value: validator(),
+          }))
+        )
+        .filter((arr) => arr.length > 0)
+    }
+  }
+
+  getExtraClass(checked: boolean): string {
+    const baseClasses =
+      'flex flex-row justify-between rounded mb-1 h-[34px] w-full focus:ring-0 hover:border-none border-none hover:text-black text-black cursor-default'
+    return checked
+      ? `${baseClasses} bg-neutral-100 hover:bg-neutral-100`
+      : `${baseClasses} bg-transparent hover:bg-transparent`
+  }
+}

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.html

@@ -1,5 +1,6 @@
 <div
-  class="flex flex-col h-full w-[302px] bg-neutral-100 border-l border-gray-300 py-8 px-3 gap-6 overflow-auto"
+  class="flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-6 overflow-auto"
+  style="background-color: #fafaf9"
 >
   <div class="flex flex-row px-2 justify-between">
     <span class="text-3xl font-title text-black/80" translate

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -63,8 +63,6 @@ export const RECORD_KEYWORDS_FIELD: EditorField = {
   model: 'keywords',
   formFieldConfig: {},
 }
-// keeping track of the label to not lose existing translation
-marker('editor.record.form.field.keywords')
 
 export const RECORD_RESOURCE_CREATED_FIELD: EditorField = {
   model: 'resourceCreated',

package/src/libs/feature/record/src/lib/data-view/data-view.component.html

@@ -9,6 +9,7 @@
       class="h-[44px] w-full"
       extraBtnClass="font-sans font-bold"
       [choices]="choices"
+      [selected]="_selectedChoice"
       (selectValue)="selectLink($event)"
     ></gn-ui-dropdown-selector>
   </div>
@@ -35,6 +36,7 @@
         [cacheActive]="cacheActive$ | async"
         [link]="selectedLink$ | async"
         [featureCatalog]="mdViewFacade.featureCatalog$ | async"
+        [userChartConfig]="_chartConfig"
       ></gn-ui-chart-view>
     </div>
   </ng-template>

package/src/libs/feature/record/src/lib/data-view/data-view.component.ts

@@ -5,15 +5,16 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { getLinkLabel, getLinkPriority } from '../../../../../../libs/util/shared/src'
+import {
+  getLinkId,
+  getLinkLabel,
+  getLinkPriority,
+} from '../../../../../../libs/util/shared/src'
 import { BehaviorSubject, combineLatest } from 'rxjs'
 import { map, tap } from 'rxjs/operators'
 import { MdViewFacade } from '../state'
 import { DatavizChartConfigModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
-import {
-  DatasetOnlineResource,
-  DatasetServiceDistribution,
-} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
 import {
   ChartViewComponent,
@@ -45,13 +46,28 @@ export class DataViewComponent {
   @Input() set exceedsLimit(value: boolean) {
     this.excludeWfs$.next(value)
   }
+  linkMap: Map<string, DatasetOnlineResource> = new Map()
   _selectedView = ''
+  _chartConfig = null
+  _selectedChoice = null
   @Input() set selectedView(value: string) {
     this._selectedView = value
-    if (value !== 'map') {
+    if (this.mode === value) {
       this.linkSelected.emit(this.selectedLink$.value)
     }
   }
+  @Input() set datavizConfig(value: any) {
+    this._selectedView = value.view
+    if (this.mode === value.view) {
+      if (!value.source) {
+        this.linkSelected.emit(this.selectedLink$.value)
+      } else {
+        this._chartConfig = value.chartConfig
+        this._selectedChoice = getLinkId(value.source)
+        this.selectedLink$.next(value.source)
+      }
+    }
+  }
   @Output() chartConfig$ = new BehaviorSubject<DatavizChartConfigModel>(null)
   @Output() linkSelected = new EventEmitter<DatasetOnlineResource>()
   cacheActive$ = this.mdViewFacade.isHighUpdateFrequency$.pipe(
@@ -69,15 +85,19 @@ export class DataViewComponent {
     })
   )
   dropdownChoices$ = this.compatibleDataLinks$.pipe(
-    tap((links) => {
-      if (links.indexOf(this.selectedLink$.value) === -1) {
-        this.selectLink(JSON.stringify(links[0]))
+    tap((links: DatasetOnlineResource[]) => {
+      this.linkMap.clear()
+      links.forEach((link: DatasetOnlineResource) =>
+        this.linkMap.set(getLinkId(link), link)
+      )
+      if (!links.some((l) => l.url === this.selectedLink$.value?.url)) {
+        this.selectLink(getLinkId(links[0]))
       }
     }),
     map((links) =>
-      links.map((link) => ({
+      links.map((link: DatasetOnlineResource) => ({
         label: getLinkLabel(link),
-        value: JSON.stringify(link),
+        value: getLinkId(link),
       }))
     )
   )
@@ -93,12 +113,11 @@ export class DataViewComponent {
     this.mdViewFacade.setChartConfig(event)
   }
 
-  selectLink(linkAsString: string) {
-    const link: DatasetOnlineResource = JSON.parse(linkAsString)
-    if (this._selectedView && this._selectedView !== 'map') {
+  selectLink(linkId: string) {
+    const link = this.linkMap.get(linkId)
+    if (this._selectedView && this._selectedView === this.mode) {
       this.linkSelected.emit(link)
     }
-    link.url = new URL(link.url)
     this.selectedLink$.next(link)
   }
 }

package/src/libs/feature/record/src/lib/map-view/map-view.component.html

@@ -8,6 +8,7 @@
       extraBtnClass="font-sans font-bold"
       [title]="'map.select.layer' | translate"
       [choices]="dropdownChoices$ | async"
+      [selected]="_selectedChoice"
       (selectValue)="selectLinkToDisplay($event)"
     ></gn-ui-dropdown-selector>
 
@@ -17,6 +18,7 @@
         extraBtnClass="font-sans font-bold"
         [title]="'map.select.style' | translate"
         [choices]="styleDropdownChoices$ | async"
+        [selected]="_styleFromConfig"
         (selectValue)="selectStyleToDisplay($event)"
       ></gn-ui-dropdown-selector>
     </ng-container>
@@ -85,7 +87,7 @@
         [hidden]="!showLegend || !legendExists"
       >
         <div class="flex justify-between items-center mb-2">
-          <div class="text-primary font-bold">Legend</div>
+          <div class="text-primary font-bold" translate>map.legend.title</div>
           <gn-ui-button
             type="light"
             (buttonClick)="toggleLegend()"
@@ -110,8 +112,9 @@
         type="outline"
         (buttonClick)="toggleLegend()"
         extraClass="absolute top-[1em] right-[1em] rounded p-1 text-xs bg-white"
+        translate
       >
-        Legend
+        map.legend.title
       </gn-ui-button>
 
       <gn-ui-loading-mask

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -9,7 +9,7 @@ import {
   ViewChild,
 } from '@angular/core'
 import { MapUtilsService } from '../../../../../../libs/feature/map/src'
-import { getLinkLabel } from '../../../../../../libs/util/shared/src'
+import { getLinkId, getLinkLabel } from '../../../../../../libs/util/shared/src'
 import {
   BehaviorSubject,
   combineLatest,
@@ -100,15 +100,28 @@ export class MapViewComponent implements AfterViewInit {
   @Input() set exceedsLimit(value: boolean) {
     this.excludeWfs$.next(value)
   }
+  linkFromConfig$ = new BehaviorSubject(null)
+  _selectedChoice = null
+  _styleFromConfig = null
+
+  linkMap: Map<string, DatasetOnlineResource> = new Map()
   @Input() set selectedView(value: string) {
-    if (value === 'map') {
-      this.selectedLink$.pipe(take(1)).subscribe((link) => {
-        this.linkSelected.emit(link)
-      })
+    this.selectedView$.next(value)
+  }
+  @Input() set datavizConfig(value: any) {
+    if (value.view === 'map') {
+      this.selectedView$.next(value.view)
+      if (value.styleTMSIndex) {
+        this._styleFromConfig = value.styleTMSIndex
+      }
+      if (value.source) {
+        this.linkFromConfig$.next(value.source)
+      }
     }
   }
   @Input() displaySource = true
   @Output() linkSelected = new EventEmitter<DatasetOnlineResource>()
+  @Output() styleSelected = new EventEmitter<number>()
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   excludeWfs$ = new BehaviorSubject(false)
@@ -119,12 +132,13 @@ export class MapViewComponent implements AfterViewInit {
   loading = false
   error = null
 
-  selectLinkToDisplay(i: number) {
-    this.selectedLinkIndex$.next(i)
+  selectLinkToDisplay(id: string) {
+    this.selectedLinkId$.next(id)
   }
 
   selectStyleToDisplay(i: number) {
-    this.selectedStyleIndex$.next(i)
+    this.selectedStyleId$.next(i)
+    this.styleSelected.emit(i)
   }
 
   toggleLegend() {
@@ -146,29 +160,54 @@ export class MapViewComponent implements AfterViewInit {
   )
 
   dropdownChoices$ = this.compatibleMapLinks$.pipe(
-    map((links) =>
-      links.length
-        ? links.map((link, index) => ({
+    map((links) => {
+      this.linkMap.clear()
+      links.forEach((link: DatasetOnlineResource) =>
+        this.linkMap.set(getLinkId(link), link)
+      )
+      return links.length
+        ? links.map((link) => ({
             label: getLinkLabel(link),
-            value: index,
+            value: getLinkId(link),
           }))
-        : [{ label: 'map.dropdown.placeholder', value: 0 }]
-    )
+        : [{ label: 'map.dropdown.placeholder', value: '' }]
+    })
   )
 
-  selectedLinkIndex$ = new BehaviorSubject(0)
-  private selectedStyleIndex$ = new BehaviorSubject(0)
+  selectedView$ = new BehaviorSubject(null)
+  selectedLinkId$ = new BehaviorSubject(null)
+  selectedStyleId$ = new BehaviorSubject(null)
 
   selectedSourceLink$ = combineLatest([
     this.compatibleMapLinks$,
-    this.selectedLinkIndex$.pipe(distinctUntilChanged()),
+    this.linkFromConfig$,
+    this.selectedLinkId$.pipe(distinctUntilChanged()),
+    this.selectedView$,
   ]).pipe(
     tap(() => {
       this.error = null
     }),
-    map(([links, index]) => {
-      this.linkSelected.emit(links[index])
-      return links[index]
+    map(([compatibleLinks, configLink, id, view]) => {
+      if (view === 'map') {
+        if (
+          configLink &&
+          !id &&
+          compatibleLinks.some(
+            (link) => getLinkId(link) === getLinkId(configLink)
+          )
+        ) {
+          this._selectedChoice = getLinkId(configLink)
+          this.linkSelected.emit(configLink)
+          return configLink
+        } else if (id) {
+          this._selectedChoice = id
+          this.linkSelected.emit(this.linkMap.get(id))
+          return this.linkMap.get(id)
+        } else {
+          this.linkSelected.emit(compatibleLinks[0])
+          return compatibleLinks[0]
+        }
+      }
     })
   )
 
@@ -205,7 +244,13 @@ export class MapViewComponent implements AfterViewInit {
       }
       return of([])
     }),
-    tap(() => this.selectedStyleIndex$.next(0)),
+    tap((styles) => {
+      if (this._styleFromConfig && this._styleFromConfig <= styles.length) {
+        this.selectedStyleId$.next(this._styleFromConfig)
+      } else {
+        this.selectedStyleId$.next(0)
+      }
+    }),
     shareReplay(1)
   )
 
@@ -228,7 +273,7 @@ export class MapViewComponent implements AfterViewInit {
   selectedLink$ = combineLatest([
     this.selectedSourceLink$,
     this.styleLinks$,
-    this.selectedStyleIndex$.pipe(distinctUntilChanged()),
+    this.selectedStyleId$.pipe(distinctUntilChanged()),
   ]).pipe(
     map(([src, styles, styleIdx]) => (styles.length ? styles[styleIdx] : src)),
     shareReplay(1)
@@ -344,7 +389,9 @@ export class MapViewComponent implements AfterViewInit {
     ) {
       // FIXME: here we're assuming that the TMS serves vector tiles only; should be checked with ogc-client first
       return of({
-        url: link.url.toString().replace(/\/?$/, '/{z}/{x}/{y}.pbf'),
+        url: link.url
+          .toString()
+          .replace(/\/?$/, `/${link.name}/{z}/{x}/{y}.pbf`),
         type: 'xyz',
         tileFormat: 'application/vnd.mapbox-vector-tile',
         name: link.name,