@c8y/tutorial 1024.15.7 → 1024.15.16

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1024.15.7",
+  "version": "1024.15.16",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
     "@angular/animations": "^21.2.0",
     "@angular/cdk": "^21.2.0",
-    "@c8y/bootstrap": "1024.15.7",
-    "@c8y/client": "1024.15.7",
-    "@c8y/ngx-components": "1024.15.7",
-    "@c8y/style": "1024.15.7",
+    "@c8y/bootstrap": "1024.15.16",
+    "@c8y/client": "1024.15.16",
+    "@c8y/ngx-components": "1024.15.16",
+    "@c8y/style": "1024.15.16",
     "gridstack": "^12.4.2",
     "leaflet": "1.9.4",
     "monaco-editor": "~0.53.0",
@@ -17,8 +17,8 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@c8y/devkit": "1024.15.7",
-    "@c8y/options": "1024.15.7"
+    "@c8y/devkit": "1024.15.16",
+    "@c8y/options": "1024.15.16"
   },
   "peerDependencies": {
     "@angular/common": ">=21 <22"

package/src/__mocks/index.ts

@@ -12,6 +12,7 @@ import { InventoryInterceptor } from './global-mocks/inventory.interceptor';
 import { MeasurementsInterceptor } from './global-mocks/measurements.interceptor';
 import { API_MOCK_CONFIG, ApiMockConfig } from './mock.model';
 import { RealtimeSubjectServiceWithMocking } from './mock.realtime';
+import { ClusterMapInterceptor } from './scoped-mocks/cluster-map';
 import { ContextDashboardInterceptor } from './scoped-mocks/context-dashboard';
 import { DeviceDataGridInterceptor } from './scoped-mocks/device-data-grid';
 import { ListsInterceptor } from './scoped-mocks/lists';
@@ -29,17 +30,16 @@ import { ProviderConfigurationsApiInterceptor } from './global-mocks/provider-co
 
 export function provideAPIMock() {
   return [
-    // TODO: ask Jan about mocking clusters maps/cluster
-    // {
-    //   provide: API_MOCK_CONFIG,
-    //   useValue: {
-    //     id: 'a-cluster-map-interceptor',
-    //     path: 'maps/cluster',
-    //     mockService: BoilerplateInterceptor,
-    //     debug: true
-    //   } as ApiMockConfig,
-    //   multi: true
-    // },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        // Scoped to both cluster map examples, `maps/cluster` and `maps/cluster-root-node`.
+        id: 'a-cluster-map-interceptor',
+        path: 'maps/cluster',
+        mockService: ClusterMapInterceptor
+      } as ApiMockConfig,
+      multi: true
+    },
     {
       provide: API_MOCK_CONFIG,
       useValue: {

package/src/__mocks/mock.model.ts

@@ -39,8 +39,7 @@ export enum Channels {
   BulkOperations = '/bulkOperations/*',
   Measurements = '/measurements/*',
   Alarms = '/alarms/*',
-  Events = '/events/*',
-  MangedObjectsMap = '/managedobjects/1'
+  Events = '/events/*'
 }
 /**
  * path and mockService

package/src/__mocks/scoped-mocks/cluster-map.ts

@@ -0,0 +1,207 @@
+import { IFetchResponse, IManagedObject } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { from, Observable } from 'rxjs';
+import { generateResponse } from '../utils/common';
+import {
+  getClusterMapSampleSites,
+  getClusterMapSiteGroups,
+  SampleSiteDevices
+} from '../utils/generators/clusterDevices';
+
+/**
+ * What a cluster map query asks for. The cluster map loads its devices per bounding box, counts
+ * them before loading them and asks for the outermost device to fit the map to all devices.
+ */
+interface PositionQuery {
+  latMin?: number;
+  latMax?: number;
+  lngMin?: number;
+  lngMax?: number;
+  /**
+   * True if the bounding box crosses the antimeridian. The longitudes are combined with `or`
+   * instead of `and` in that case.
+   */
+  lngWraps: boolean;
+  orderBy?: {
+    coordinate: 'lat' | 'lng';
+    ascending: boolean;
+  };
+  /**
+   * Id of the managed object the query is restricted to, if the map uses a root node.
+   */
+  scopedToId?: string;
+}
+
+/**
+ * Leaflet is lazy loaded. Answering too fast leads to markers that are not rendered.
+ */
+const LEAFLET_LAZY_LOAD_DELAY_MS = 300;
+
+/**
+ * A number in a query, optionally suffixed by the `f` or `d` type marker the platform uses.
+ */
+const QUERY_NUMBER = '(-?\\d+(?:\\.\\d+)?)[fd]?';
+
+/**
+ * Answers the inventory queries of the cluster map examples with a fixed set of sample devices,
+ * spread over places around the world. Queries the cluster map does not send, for example the ones
+ * of the asset selector, are passed on to the global inventory mock.
+ */
+export class ClusterMapInterceptor implements HttpInterceptor {
+  private readonly sites: SampleSiteDevices[] = getClusterMapSampleSites();
+  private readonly devices: IManagedObject[] = this.sites.flatMap(site => site.devices);
+
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    const params = (req?.options?.params ?? {}) as Record<string, unknown>;
+    const query = [params.query, params.q].find(value => typeof value === 'string') as string;
+    const { method = 'GET' } = req?.options || {};
+
+    if (method !== 'GET' || !req?.url?.includes('inventory/managedObjects')) {
+      return next.handle(req);
+    }
+
+    if (query?.includes('has(c8y_Position)')) {
+      return from(this.mockPositionQuery(query, params));
+    }
+
+    // The asset selector of the root node example lists the places as selectable groups.
+    if (isRootGroupQuery(query, params)) {
+      return from(this.mockGroupQuery());
+    }
+
+    return next.handle(req);
+  }
+
+  private async mockGroupQuery() {
+    await new Promise(resolve => setTimeout(resolve, LEAFLET_LAZY_LOAD_DELAY_MS));
+    const groups = getClusterMapSiteGroups();
+
+    return generateResponse(() => ({ managedObjects: groups }), {
+      totalPages: 1,
+      pageSize: groups.length,
+      currentPage: 1
+    });
+  }
+
+  private async mockPositionQuery(query: string, params: Record<string, unknown>) {
+    await new Promise(resolve => setTimeout(resolve, LEAFLET_LAZY_LOAD_DELAY_MS));
+
+    const matching = this.getMatchingDevices(parsePositionQuery(query));
+    const pageSize = Number(params?.pageSize) || matching.length || 1;
+
+    return generateResponse(() => ({ managedObjects: matching.slice(0, pageSize) }), {
+      // The cluster map counts the devices of a bounding box by requesting a single one and
+      // reading the total pages, so this has to reflect the number of matching devices.
+      totalPages: Math.ceil(matching.length / pageSize),
+      pageSize,
+      currentPage: 1
+    });
+  }
+
+  private getMatchingDevices(query: PositionQuery): IManagedObject[] {
+    const searched = query.scopedToId ? this.getDevicesOfRootNode(query.scopedToId) : this.devices;
+    const matching = searched.filter(device => isInBounds(device, query));
+
+    if (!query.orderBy) {
+      return matching;
+    }
+
+    const { coordinate, ascending } = query.orderBy;
+    return [...matching].sort(
+      (a, b) => (getCoordinate(a, coordinate) - getCoordinate(b, coordinate)) * (ascending ? 1 : -1)
+    );
+  }
+
+  /**
+   * Returns the devices a map with a root node shows. A root node that is one of the place groups
+   * resolves to the devices of that place, one that is a sample device to that single device, so
+   * that selecting a place in the asset selector shows exactly its devices.
+   * @param id Id of the root node.
+   * @returns The devices belonging to the root node.
+   */
+  private getDevicesOfRootNode(id: string): IManagedObject[] {
+    const site = this.sites.find(({ id: siteId }) => siteId === id);
+    if (site) {
+      return site.devices;
+    }
+
+    const device = this.devices.find(({ id: deviceId }) => deviceId === id);
+    if (device) {
+      return [device];
+    }
+
+    const siteIndex = Math.abs(Number(id) || 0) % this.sites.length;
+    return this.sites[siteIndex].devices;
+  }
+}
+
+/**
+ * Whether the request is the asset selector asking for its root groups. A user with inventory
+ * roles gets a `has(c8y_IsDeviceGroup)` query; the `noLogin` user of the examples lacks those
+ * roles, so the asset selector falls back to a `fragmentType=c8y_IsDeviceGroup` parameter instead.
+ */
+function isRootGroupQuery(query: string, params: Record<string, unknown>): boolean {
+  return query?.includes('c8y_IsDeviceGroup') || params.fragmentType === 'c8y_IsDeviceGroup';
+}
+
+function parsePositionQuery(query: string): PositionQuery {
+  const lngConditions = new RegExp(
+    `\\(c8y_Position\\.lng gt ${QUERY_NUMBER}\\)\\s*(and|or)\\s*\\(c8y_Position\\.lng lt`
+  ).exec(query);
+
+  return {
+    latMin: parseCondition(query, 'lat', 'gt'),
+    latMax: parseCondition(query, 'lat', 'lt'),
+    lngMin: parseCondition(query, 'lng', 'gt'),
+    lngMax: parseCondition(query, 'lng', 'lt'),
+    lngWraps: lngConditions?.[2] === 'or',
+    orderBy: parseOrderBy(query),
+    scopedToId: parseScopedToId(query)
+  };
+}
+
+function parseCondition(
+  query: string,
+  coordinate: 'lat' | 'lng',
+  operator: 'gt' | 'lt'
+): number | undefined {
+  const match = new RegExp(`c8y_Position\\.${coordinate} ${operator} ${QUERY_NUMBER}`).exec(query);
+  return match ? Number(match[1]) : undefined;
+}
+
+function parseOrderBy(query: string): PositionQuery['orderBy'] {
+  const match = /\$orderby=c8y_Position\.(lat|lng) (asc|desc)/.exec(query);
+  return match
+    ? { coordinate: match[1] as 'lat' | 'lng', ascending: match[2] === 'asc' }
+    : undefined;
+}
+
+function parseScopedToId(query: string): string | undefined {
+  // The platform writes these as a function call, `bygroupid(1)`, and the id of a managed object
+  // as a quoted value, `id eq '1'`.
+  const ofGroup = /(?:bygroupid|isinhierarchyof)(?:\(|\s+eq\s+)'?(\d+)'?/.exec(query);
+  const ofManagedObject = /\bid eq '?(\d+)'?/.exec(query);
+
+  return (ofGroup ?? ofManagedObject)?.[1];
+}
+
+function isInBounds(device: IManagedObject, query: PositionQuery): boolean {
+  const lat = getCoordinate(device, 'lat');
+  const lng = getCoordinate(device, 'lng');
+
+  if (query.latMin !== undefined && lat <= query.latMin) {
+    return false;
+  }
+  if (query.latMax !== undefined && lat >= query.latMax) {
+    return false;
+  }
+
+  const afterMin = query.lngMin === undefined || lng > query.lngMin;
+  const beforeMax = query.lngMax === undefined || lng < query.lngMax;
+
+  return query.lngWraps ? afterMin || beforeMax : afterMin && beforeMax;
+}
+
+function getCoordinate(device: IManagedObject, coordinate: 'lat' | 'lng'): number {
+  return Number(device.c8y_Position?.[coordinate]);
+}

package/src/__mocks/utils/generators/clusterDevices.ts

@@ -0,0 +1,203 @@
+import { IManagedObject } from '@c8y/client';
+import { getMOCommonProps } from './managedObjects';
+
+/**
+ * A place around which sample devices are positioned.
+ */
+interface SampleSite {
+  /**
+   * Name of the place, used to name its devices.
+   */
+  name: string;
+  lat: number;
+  lng: number;
+  /**
+   * How many devices are positioned around the place.
+   */
+  deviceCount: number;
+  /**
+   * Radius in degrees over which the devices are spread.
+   */
+  spread: number;
+}
+
+/**
+ * The devices of one place, plus the group that holds them.
+ */
+export interface SampleSiteDevices {
+  /**
+   * Id of the group managed object that represents the place in the asset selector.
+   */
+  id: string;
+  name: string;
+  /**
+   * Center of the place, used to center the map on the group when it is selected.
+   */
+  lat: number;
+  lng: number;
+  devices: IManagedObject[];
+}
+
+/**
+ * The places the sample devices are positioned around. The amounts are chosen so that the cluster
+ * map has something to cluster: zoomed out, the places are merged into a few markers with a count,
+ * while zooming into a place reveals its individual devices.
+ */
+const SAMPLE_SITES: SampleSite[] = [
+  { name: 'Düsseldorf', lat: 51.2254, lng: 6.7763, deviceCount: 120, spread: 0.08 },
+  { name: 'Berlin', lat: 52.52, lng: 13.405, deviceCount: 90, spread: 0.08 },
+  { name: 'Munich', lat: 48.1372, lng: 11.5755, deviceCount: 40, spread: 0.06 },
+  { name: 'London', lat: 51.5074, lng: -0.1278, deviceCount: 70, spread: 0.08 },
+  { name: 'Paris', lat: 48.8566, lng: 2.3522, deviceCount: 55, spread: 0.06 },
+  { name: 'Madrid', lat: 40.4168, lng: -3.7038, deviceCount: 25, spread: 0.05 },
+  { name: 'Rome', lat: 41.9028, lng: 12.4964, deviceCount: 20, spread: 0.05 },
+  { name: 'Stockholm', lat: 59.3293, lng: 18.0686, deviceCount: 12, spread: 0.04 },
+  { name: 'New York', lat: 40.7128, lng: -74.006, deviceCount: 65, spread: 0.08 },
+  { name: 'San Francisco', lat: 37.7749, lng: -122.4194, deviceCount: 35, spread: 0.06 },
+  { name: 'Chicago', lat: 41.8781, lng: -87.6298, deviceCount: 18, spread: 0.05 },
+  { name: 'São Paulo', lat: -23.5505, lng: -46.6333, deviceCount: 14, spread: 0.05 },
+  { name: 'Tokyo', lat: 35.6762, lng: 139.6503, deviceCount: 22, spread: 0.06 },
+  { name: 'Singapore', lat: 1.3521, lng: 103.8198, deviceCount: 10, spread: 0.04 },
+  { name: 'Sydney', lat: -33.8688, lng: 151.2093, deviceCount: 8, spread: 0.04 }
+];
+
+/**
+ * Angle of Vogel's spiral, used to spread the devices of a place evenly. Compared to random
+ * positions this keeps the sample data the same on every request, so panning and zooming the map
+ * does not make devices jump around.
+ */
+const GOLDEN_ANGLE = 2.399963229728653;
+
+/**
+ * The id the generated devices start at. High enough to not collide with the randomly generated
+ * ids of the other mocks.
+ */
+const FIRST_DEVICE_ID = 700000;
+
+/**
+ * The id the site groups start at. Kept above the device ids so the two never collide.
+ */
+const FIRST_GROUP_ID = 800000;
+
+/**
+ * Severities the devices with an active alarm cycle through, so that the map shows the status
+ * colors of single devices and of a cluster of devices.
+ */
+const ALARM_SEVERITIES = ['critical', 'major', 'minor', 'warning'] as const;
+
+/**
+ * Every n-th device gets an active alarm.
+ */
+const DEVICE_WITH_ALARM_INTERVAL = 7;
+
+/**
+ * How far a device moves per realtime update.
+ */
+const MOVE_STEP_DEGREES = 0.0015;
+
+/**
+ * The sample devices, created once so that every mock works with the same devices and a device
+ * that moved stays where it moved to.
+ */
+let sampleSites: SampleSiteDevices[];
+
+/**
+ * How often each device moved already, used to move it along a circle.
+ */
+const moveCount = new Map<string, number>();
+
+/**
+ * Returns the sample devices of every place, positioned around it.
+ * @returns The devices per place.
+ */
+export function getClusterMapSampleSites(): SampleSiteDevices[] {
+  if (!sampleSites) {
+    let id = FIRST_DEVICE_ID;
+    sampleSites = SAMPLE_SITES.map((site, siteIndex) => ({
+      id: `${FIRST_GROUP_ID + siteIndex}`,
+      name: site.name,
+      lat: site.lat,
+      lng: site.lng,
+      devices: [...Array(site.deviceCount)].map((_, index) => createDevice(site, index, id++))
+    }));
+  }
+
+  return sampleSites;
+}
+
+/**
+ * Returns one group managed object per place, so that the asset selector of the cluster map with
+ * a root node lists the places as selectable groups.
+ * @returns The group of every place.
+ */
+export function getClusterMapSiteGroups(): IManagedObject[] {
+  return getClusterMapSampleSites().map(
+    site =>
+      ({
+        id: site.id,
+        name: site.name,
+        ...getMOCommonProps(),
+        type: 'c8y_DeviceGroup',
+        c8y_IsDeviceGroup: {},
+        // Lets the example center the map on the place when its group is selected.
+        c8y_Position: { lat: site.lat, lng: site.lng, alt: 0, accuracy: 0 }
+      }) as IManagedObject
+  );
+}
+
+/**
+ * Moves the sample device with the given id a bit further along a circle around its place, so that
+ * a map following the device shows it moving instead of jumping to an unrelated position.
+ * @param id Id of the device to move.
+ * @returns The moved device, or `undefined` if the id is not one of the sample devices.
+ */
+export function moveClusterMapSampleDevice(id: string): IManagedObject | undefined {
+  const device = getClusterMapSampleSites()
+    .flatMap(site => site.devices)
+    .find(sampleDevice => sampleDevice.id === id);
+
+  if (!device) {
+    return undefined;
+  }
+
+  const step = (moveCount.get(id) ?? 0) + 1;
+  moveCount.set(id, step);
+  const angle = step * GOLDEN_ANGLE;
+  device.c8y_Position = {
+    ...device.c8y_Position,
+    lat: round(device.c8y_Position.lat + MOVE_STEP_DEGREES * Math.cos(angle)),
+    lng: round(device.c8y_Position.lng + MOVE_STEP_DEGREES * Math.sin(angle))
+  };
+
+  return device;
+}
+
+function createDevice(site: SampleSite, index: number, id: number): IManagedObject {
+  const radius = site.spread * Math.sqrt((index + 1) / site.deviceCount);
+  const angle = index * GOLDEN_ANGLE;
+  // Compensating the latitude keeps the devices spread in a circle instead of an ellipse.
+  const lngScale = 1 / Math.cos((site.lat * Math.PI) / 180);
+  const severity =
+    id % DEVICE_WITH_ALARM_INTERVAL === 0
+      ? ALARM_SEVERITIES[id % ALARM_SEVERITIES.length]
+      : undefined;
+
+  return {
+    id: `${id}`,
+    name: `${site.name} sensor ${index + 1}`,
+    ...getMOCommonProps(),
+    type: 'c8y_SensorPhone',
+    c8y_IsDevice: {},
+    c8y_Position: {
+      lat: round(site.lat + radius * Math.cos(angle)),
+      lng: round(site.lng + radius * Math.sin(angle) * lngScale),
+      alt: 0,
+      accuracy: 10
+    },
+    ...(severity ? { c8y_ActiveAlarmsStatus: { [severity]: 1 } } : {})
+  } as IManagedObject;
+}
+
+function round(coordinate: number): number {
+  return Math.round(coordinate * 1e6) / 1e6;
+}

package/src/__mocks/utils/generators/managedObjects.ts

@@ -1,5 +1,6 @@
 import { IManagedObject, IManagedObjectReferences } from '@c8y/client';
 import { generateId } from '../common';
+import { moveClusterMapSampleDevice } from './clusterDevices';
 
 const cords = [
   {
@@ -44,11 +45,27 @@ const cords = [
   }
 ];
 
-export function generateRealtimeDeviceMO(): IManagedObject {
-  return generateDevice<{ id: string; customFragment: string }>({
-    id: '1',
+/**
+ * Returns the managed object a realtime update is sent for.
+ * @param id Id of the device the update is for. Realtime updates of the sample devices of the
+ * cluster map examples move that device, any other id gets a generated device.
+ * @returns The managed object of the update.
+ */
+export function generateRealtimeDeviceMO(id?: string): IManagedObject {
+  const movedSampleDevice = id ? moveClusterMapSampleDevice(id) : undefined;
+  if (movedSampleDevice) {
+    return movedSampleDevice;
+  }
+
+  const device = generateDevice<{ id: string; customFragment: string }>({
+    id: id ?? '1',
     customFragment: 'customFragment'
   });
+  // Give the device an active alarm so the map does not render it as muted. A muted pin ignores
+  // the color set through the map config, which the simple map "Change color" example relies on;
+  // keeping it here means the device stays colorable across realtime updates too.
+  device.c8y_ActiveAlarmsStatus = { critical: 0, major: 0, minor: 0, warning: 1 };
+  return device;
 }
 
 export function generateDevice<T>(customAttributes?: T): IManagedObject {
@@ -135,7 +152,7 @@ export function generateRandomMo() {
   return generators[randomPosition]();
 }
 
-function getMOCommonProps() {
+export function getMOCommonProps() {
   return {
     creationTime: new Date().toISOString(),
     lastUpdated: new Date().toISOString(),

package/src/__mocks/utils/realtime.ts

@@ -9,9 +9,8 @@ import { getFakeOperation, getFakeOperationBulk } from './generators/operations'
 /**
  * Map of generators for various channels. Each generator function generates a mock data of specific type.
  */
-const generators = {
+const generators: Record<string, (id?: string) => IAnyData> = {
   [Channels.ManagedObjects]: generateRealtimeDeviceMO,
-  [Channels.MangedObjectsMap]: generateRealtimeDeviceMO,
   [Channels.Operations]: getFakeOperation,
   [Channels.BulkOperations]: getFakeOperationBulk,
   [Channels.Measurements]: getFakeMeasurement,
@@ -27,7 +26,7 @@ const generators = {
  * @throws - Throws an error if there's no generator available for the given channel.
  */
 export function getFakeData<T>(channel: string): RealtimeMessage<T> {
-  const generator = generators[channel];
+  const { generator, subscribedId } = resolveGenerator(channel);
   if (!generator) {
     throw new Error(
       `No fake data generator for channel ${channel}, either stay with the supported mocked channels (${Object.keys(
@@ -35,7 +34,11 @@ export function getFakeData<T>(channel: string): RealtimeMessage<T> {
       )}), provide a generator for your channel or remove the "noLogin" query parameter and login.`
     );
   }
-  const data: IAnyData = generator();
+  const data: IAnyData = generator(subscribedId);
+  if (subscribedId) {
+    // A channel of a single entity only delivers data of that entity.
+    data.id = subscribedId;
+  }
   const message: RealtimeMessage<T> = {
     id: (data?.id).toString(),
     channel: data?.id ? channel.replace('*', (data?.id).toString()) : channel,
@@ -45,6 +48,26 @@ export function getFakeData<T>(channel: string): RealtimeMessage<T> {
   return message;
 }
 
+/**
+ * Resolves the generator of a channel. A channel of a single entity, for example
+ * `/managedobjects/1`, is served by the generator of its wildcard channel, `/managedobjects/*`.
+ *
+ * @param channel - The channel to resolve the generator for.
+ * @returns The generator and, for a channel of a single entity, the id of that entity.
+ */
+function resolveGenerator(channel: string): {
+  generator?: (id?: string) => IAnyData;
+  subscribedId?: string;
+} {
+  if (generators[channel]) {
+    return { generator: generators[channel] };
+  }
+
+  const [, wildcardChannel, subscribedId] = /^(.*\/)([^/*]+)$/.exec(channel) ?? [];
+
+  return { generator: generators[`${wildcardChannel}*`], subscribedId };
+}
+
 /**
  * Function to generate a random RealtimeAction.
  * It returns 'UPDATE' in 80% of the cases, otherwise, it returns either 'CREATE' or 'DELETE' randomly.

package/src/maps/cluster-map-root-node/cluster-map-root-node-example.component.html

@@ -1,16 +1,19 @@
 <c8y-title>Cluster map with root node</c8y-title>
 
 <div class="d-flex">
-  <div class="d-flex d-col" style="width: 280px;">
+  <div
+    class="d-flex d-col"
+    style="width: 280px"
+  >
     <c8y-asset-selector
+      class="bg-level-1 min-height-0"
+      style="height: 420px"
       [(ngModel)]="rootNode"
       [config]="{
         groupsSelectable: true,
         groupsOnly: false
       }"
-      (change)="resetConfig()"
-      class="bg-level-1 min-height-0"
-      style="height: 420px;"
+      (onSelected)="onGroupSelected($event)"
     ></c8y-asset-selector>
   </div>
   <!-- important -->
@@ -40,7 +43,7 @@
   <!-- /important -->
   <div
     class="a-s-stretch p-16 d-col bg-info-light"
-    style="width: 320px; height: 420px;"
+    style="width: 320px; height: 420px"
   >
     <label>RootNode</label>
     <pre style="height: 120px">{{ rootNode | json }}  </pre>

package/src/maps/cluster-map-root-node/cluster-map-root-node-example.component.ts

@@ -2,7 +2,16 @@ import { Component } from '@angular/core';
 import { ClusterMapConfig, defaultMapConfig, MapModule } from '@c8y/ngx-components/map';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@c8y/ngx-components';
-import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import {
+  AssetSelectionChangeEvent,
+  AssetSelectorModule
+} from '@c8y/ngx-components/assets-navigator';
+
+/**
+ * Zoom level the map uses when it centers on a selected group, chosen so that the devices of one
+ * place fill the map.
+ */
+const GROUP_ZOOM_LEVEL = 11;
 
 @Component({
   selector: 'tut-cluster-map-root-node-example',
@@ -17,6 +26,25 @@ export class ClusterMapRootNodeExampleComponent {
   rootNode: unknown;
   oldRootNode: unknown;
 
+  /**
+   * Centers the map on the selected group. The asset selector passes the full managed object as
+   * `change.item` (its model value is simplified to id and name), so the group position is read
+   * from there.
+   * @param event The selection change emitted by the asset selector.
+   */
+  onGroupSelected(event: AssetSelectionChangeEvent) {
+    this.resetConfig();
+
+    const position = event?.change?.isSelected ? event.change.item?.c8y_Position : undefined;
+    if (position) {
+      this.followConfig = {
+        ...this.followConfig,
+        center: [position.lat, position.lng],
+        zoomLevel: GROUP_ZOOM_LEVEL
+      };
+    }
+  }
+
   toggleAutorefresh() {
     this.config = {
       ...this.config,

package/src/maps/simple-map/simple-map-example.component.ts

@@ -44,7 +44,11 @@ export class SimpleMapExampleComponent implements OnInit {
   }
 
   setCenter() {
-    this.config = { ...this.config, center: defaultMapConfig.center };
+    this.config = {
+      ...this.config,
+      center: [defaultMapConfig.center[0], defaultMapConfig.center[1]],
+      zoomLevel: 12
+    };
   }
 
   changeIcon() {

package/src/maps/simple-map-custom-config/map-layer.service.ts

@@ -3,6 +3,11 @@ import { defaultLayer } from '@c8y/ngx-components/map';
 import { MapTileLayer } from '@c8y/options';
 import { BehaviorSubject, Observable } from 'rxjs';
 
+/**
+ * The tile layers this example can switch to, next to the default layer.
+ */
+export type CustomMapTileLayerName = 'Carto' | 'OpenTopo';
+
 @Injectable({
   providedIn: 'root'
 })
@@ -17,7 +22,7 @@ export class MapLayerService implements CumulocityServiceRegistry.MapTileLayerPr
     return true;
   }
 
-  changeLayer(name: 'Carto' | 'OpenTopo') {
+  changeLayer(name: CustomMapTileLayerName) {
     if (name === 'Carto') {
       this.maps$.next([
         {

package/src/maps/simple-map-custom-config/simple-map-custom-config.component.html

@@ -1,27 +1,50 @@
 <c8y-title>Simple map with custom config</c8y-title>
 
 <div class="d-flex">
-  <div class="d-flex d-col j-c-center p-r-16" style="width: 280px; height: 420px">
+  <div
+    class="d-flex d-col j-c-center p-r-16"
+    style="width: 280px; height: 420px"
+  >
     <button
       class="btn btn-default btn-block"
-      (click)="mapLayerService?.changeLayer('Carto')"
+      [class.active]="selectedLayer() === 'Carto'"
+      [attr.aria-pressed]="selectedLayer() === 'Carto'"
+      (click)="showLayer('Carto')"
     >
       Change to Carto layer
     </button>
     <button
       class="btn btn-default btn-block"
-      (click)="mapLayerService?.changeLayer('OpenTopo')"
+      [class.active]="selectedLayer() === 'OpenTopo'"
+      [attr.aria-pressed]="selectedLayer() === 'OpenTopo'"
+      (click)="showLayer('OpenTopo')"
     >
       Change to OpenTopo layer
     </button>
     <button
       class="btn btn-default btn-block"
-      (click)="mapLayerService?.revert()"
+      [class.active]="selectedLayer() === 'default'"
+      [attr.aria-pressed]="selectedLayer() === 'default'"
+      (click)="showLayer('default')"
     >
       Change to default
     </button>
   </div>
   <div class="flex-grow p-relative a-s-stretch">
-    <c8y-map></c8y-map>
+    <!--
+      The map picks up the layers of `MapLayerService` while it initializes. Rendering one map per
+      layer re-creates it whenever another layer is selected, so the new layer is applied.
+    -->
+    @switch (selectedLayer()) {
+      @case ('Carto') {
+        <c8y-map></c8y-map>
+      }
+      @case ('OpenTopo') {
+        <c8y-map></c8y-map>
+      }
+      @default {
+        <c8y-map></c8y-map>
+      }
+    }
   </div>
 </div>

package/src/maps/simple-map-custom-config/simple-map-custom-config.component.ts

@@ -1,16 +1,37 @@
 import { CommonModule } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { CoreModule } from '@c8y/ngx-components';
 import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 import { MapModule } from '@c8y/ngx-components/map';
-import { MapLayerService } from './map-layer.service';
+import { CustomMapTileLayerName, MapLayerService } from './map-layer.service';
 
 @Component({
   selector: 'c8y-simple-map-custom-config',
   templateUrl: './simple-map-custom-config.component.html',
   standalone: true,
-  imports: [CommonModule, MapModule, CoreModule, AssetSelectorModule]
+  imports: [CommonModule, MapModule, CoreModule, AssetSelectorModule],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SimpleMapCustomConfigComponent {
-  mapLayerService = inject(MapLayerService);
+  /**
+   * The layer the map is currently showing. `c8y-map` reads the layers provided via
+   * `mapTileLayerHook` while it initializes, so the template uses this value to re-create the
+   * map whenever another layer is selected.
+   */
+  protected readonly selectedLayer = signal<CustomMapTileLayerName | 'default'>('default');
+
+  private readonly mapLayerService = inject(MapLayerService);
+
+  /**
+   * Provides the given layer through `MapLayerService` and shows the map with it.
+   * @param layer The layer to show, or `default` for the layer the map ships with.
+   */
+  protected showLayer(layer: CustomMapTileLayerName | 'default') {
+    if (layer === 'default') {
+      this.mapLayerService.revert();
+    } else {
+      this.mapLayerService.changeLayer(layer);
+    }
+    this.selectedLayer.set(layer);
+  }
 }

package/src/modal/ngx-modal-accessibility/ngx-modal-accessibility-example.component.ts

@@ -5,7 +5,9 @@ import {
   CoreModule,
   FormsModule,
   HeaderModule,
-  ModalModule
+  ModalModule,
+  ModalService,
+  Status
 } from '@c8y/ngx-components';
 import { SimpleModalAccessibilityExampleComponent } from './simple-modal-accessibility-example.component';
 
@@ -21,6 +23,12 @@ import { SimpleModalAccessibilityExampleComponent } from './simple-modal-accessi
       >
         Create component modal with with ModalComponent and custom ids
       </button>
+      <button class="btn btn-default m-8" type="button" (click)="closeDashboardDetails()">
+        Confirm modal with default ids and initial focus
+      </button>
+      @if (lastConfirmChoice) {
+        <p class="text-muted" role="status">You chose: {{ lastConfirmChoice }}</p>
+      }
     </div>
   </div>`,
   standalone: true,
@@ -34,7 +42,13 @@ import { SimpleModalAccessibilityExampleComponent } from './simple-modal-accessi
   ]
 })
 export class NgxModalAccessibilityExampleComponent {
-  constructor(private modalService: BsModalService) {}
+  /** The label of the button the user picked in the confirm dialog, shown instead of logging it. */
+  lastConfirmChoice = '';
+
+  constructor(
+    private modalService: BsModalService,
+    private modal: ModalService
+  ) {}
 
   openComponentModalWithContentSelectors() {
     this.modalService.show(SimpleModalAccessibilityExampleComponent, {
@@ -42,6 +56,25 @@ export class NgxModalAccessibilityExampleComponent {
       ariaDescribedby: 'modal-body-custom',
       ariaLabelledBy: 'modal-title-custom',
       ignoreBackdropClick: true
-    }).content as SimpleModalAccessibilityExampleComponent;
+    });
+  }
+
+  /**
+   * `ModalService.confirm` already points `aria-labelledby` and `aria-describedby` at the
+   * default `modal-title` and `modal-body` ids, so the title and the warning are announced
+   * when the dialog opens, and focus starts on "Cancel".
+   */
+  async closeDashboardDetails() {
+    try {
+      await this.modal.confirm(
+        'Close dashboard details',
+        'Are you sure you want to close dashboard details? All unsaved changes will be lost.',
+        Status.WARNING,
+        { ok: 'Close', cancel: 'Cancel' }
+      );
+      this.lastConfirmChoice = 'Close';
+    } catch {
+      this.lastConfirmChoice = 'Cancel';
+    }
   }
 }