raain-app 1.6.21 → 1.6.24

package/fesm2020/raain-app.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, Input, Output, ViewChild, HostListener, ChangeDetectionStrategy, Pipe, Directive, NgModule, Optional, SkipSelf } from '@angular/core';
-import { CartesianTools, GaugeNode, SpeedMatrixContainer, RadarNode, CartesianMeasureValue, TeamNode, Link, EventNode, BuildQueryString, RainNode, RainComputationMap, RainComputationQuality, GaugeMeasure } from 'raain-model';
+import { CartesianTools, GaugeNode, SpeedMatrixContainer, RadarNode, CartesianMeasureValue, Link, EventNode, BuildQueryString, TeamNode, RainNode, RainComputationMap, RainComputationQuality, GaugeMeasure } from 'raain-model';
 import { RaainDivIcon, ElementsFactory, MapLatLng, ChartScaleColors, ScaleElementInput, CompareElementInput, ConfigurationElementInput, Tools, DateRange, DateStatusElementInput, DynamicDateStatusElementInput, SpeedMatrixElementInput, EarthMapElementInput, TimeframeContainers, CartesianMapValue, PolarMapValue } from 'raain-ui';
 import * as i2$1 from 'fidj-angular';
 import { LocalStorage, LoggerLevelEnum } from 'fidj-angular';
@@ -1303,10 +1303,10 @@ class RaainCompareStackComponent {
     }
 }
 RaainCompareStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RaainCompareStackComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-RaainCompareStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RaainCompareStackComponent, selector: "raain-compare-stack", inputs: { compareManager: "compareManager", currentHeight: "currentHeight", cumulative: "cumulative" }, outputs: { selectedPoint: "selectedPoint" }, ngImport: i0, template: "<div *ngIf=\"cumulative\">\n    <ion-col size-md=\"6\" size-xs=\"12\">\n        <ion-card class=\"card-compare\">\n            <ion-card-header>Cumulative\n                [{{ compareManager.compareDates[0] | date:'yyyy-MM-dd HH:mm' }}\n                - {{ compareManager.compareDates[compareManager.compareDates.length - 1] | date:'yyyy-MM-dd HH:mm' }}]\n            </ion-card-header>\n            <ion-card-content *ngIf=\"compareManager.globalComparePoints?.length\">\n                <raain-compare\n                        (selectedPoint)=\"onClick($event)\"\n                        [compareIndex]=\"0\"\n                        [currentHeight]=\"500\"\n                        [pointMax]=\"compareManager.globalComparePointsMax\"\n                        [points]=\"compareManager.globalComparePoints\"></raain-compare>\n            </ion-card-content>\n        </ion-card>\n    </ion-col>\n\n    <ion-button (click)=\"exportCumulativeToCsv()\" *ngIf=\"compareManager.globalComparePoints?.length\" fill=\"outline\" size=\"small\">\n        <ion-icon name=\"download-outline\" slot=\"start\"></ion-icon>\n        Export CSV\n    </ion-button>\n</div>\n\n<div *ngIf=\"!cumulative\">\n    <ion-col *ngFor=\"let compare of  compareManager?.uiCompares; index as compareIndex\" size-md=\"6\" size-xs=\"12\">\n        <ion-card class=\"card-compare\">\n            <ion-card-header>Gauges filled {{ compare.name }} {{ compare.remarks }}\n            </ion-card-header>\n            <ion-card-content *ngIf=\"compare.comparePoints?.length\">\n                <raain-compare\n                        (selectedPoint)=\"onClick($event)\"\n                        [compareIndex]=\"compareIndex\"\n                        [currentHeight]=\"500\"\n                        [pointMax]=\"compare.comparePointsMax\"\n                        [points]=\"compare.comparePoints\"></raain-compare>\n            </ion-card-content>\n        </ion-card>\n    </ion-col>\n\n    <ion-button (click)=\"exportGranularToCsv()\" *ngIf=\"compareManager.uiCompares?.length\" fill=\"outline\" size=\"small\">\n        <ion-icon name=\"download-outline\" slot=\"start\"></ion-icon>\n        Export CSV\n    </ion-button>\n</div>\n", styles: ["#card-matrix{width:170px}.card-compare{min-width:300px}ion-card-header{padding:0 0 0 10px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i4.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i4.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i4.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i4.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: RaainCompareComponent, selector: "raain-compare", inputs: ["points", "pointMax", "remarks", "compareIndex", "currentHeight", "currentWidth"], outputs: ["selectedPoint"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+RaainCompareStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RaainCompareStackComponent, selector: "raain-compare-stack", inputs: { compareManager: "compareManager", currentHeight: "currentHeight", cumulative: "cumulative" }, outputs: { selectedPoint: "selectedPoint" }, ngImport: i0, template: "<div *ngIf=\"cumulative\">\n    <ion-col size-md=\"6\" size-xs=\"12\">\n        <ion-card class=\"card-compare\">\n            <ion-card-header>Cumulative\n                [{{ compareManager.compareDates[0] | date:'yyyy-MM-dd HH:mm' }}\n                - {{ compareManager.compareDates[compareManager.compareDates.length - 1] | date:'yyyy-MM-dd HH:mm' }}[\n            </ion-card-header>\n            <ion-card-content *ngIf=\"compareManager.globalComparePoints?.length\">\n                <raain-compare\n                        (selectedPoint)=\"onClick($event)\"\n                        [compareIndex]=\"0\"\n                        [currentHeight]=\"500\"\n                        [pointMax]=\"compareManager.globalComparePointsMax\"\n                        [points]=\"compareManager.globalComparePoints\"></raain-compare>\n            </ion-card-content>\n        </ion-card>\n    </ion-col>\n\n    <ion-button (click)=\"exportCumulativeToCsv()\" *ngIf=\"compareManager.globalComparePoints?.length\" fill=\"outline\"\n                size=\"small\">\n        <ion-icon name=\"download-outline\" slot=\"start\"></ion-icon>\n        Export CSV\n    </ion-button>\n</div>\n\n<div *ngIf=\"!cumulative\">\n    <ion-col *ngFor=\"let compare of  compareManager?.uiCompares; index as compareIndex\" size-md=\"6\" size-xs=\"12\">\n        <ion-card class=\"card-compare\">\n            <ion-card-header>Gauges filled {{ compare.name }} {{ compare.remarks }}\n            </ion-card-header>\n            <ion-card-content *ngIf=\"compare.comparePoints?.length\">\n                <raain-compare\n                        (selectedPoint)=\"onClick($event)\"\n                        [compareIndex]=\"compareIndex\"\n                        [currentHeight]=\"500\"\n                        [pointMax]=\"compare.comparePointsMax\"\n                        [points]=\"compare.comparePoints\"></raain-compare>\n            </ion-card-content>\n        </ion-card>\n    </ion-col>\n\n    <ion-button (click)=\"exportGranularToCsv()\" *ngIf=\"compareManager.uiCompares?.length\" fill=\"outline\" size=\"small\">\n        <ion-icon name=\"download-outline\" slot=\"start\"></ion-icon>\n        Export CSV\n    </ion-button>\n</div>\n", styles: ["#card-matrix{width:170px}.card-compare{min-width:300px}ion-card-header{padding:0 0 0 10px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i4.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i4.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i4.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i4.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: RaainCompareComponent, selector: "raain-compare", inputs: ["points", "pointMax", "remarks", "compareIndex", "currentHeight", "currentWidth"], outputs: ["selectedPoint"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RaainCompareStackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'raain-compare-stack', template: "<div *ngIf=\"cumulative\">\n    <ion-col size-md=\"6\" size-xs=\"12\">\n        <ion-card class=\"card-compare\">\n            <ion-card-header>Cumulative\n                [{{ compareManager.compareDates[0] | date:'yyyy-MM-dd HH:mm' }}\n                - {{ compareManager.compareDates[compareManager.compareDates.length - 1] | date:'yyyy-MM-dd HH:mm' }}]\n            </ion-card-header>\n            <ion-card-content *ngIf=\"compareManager.globalComparePoints?.length\">\n                <raain-compare\n                        (selectedPoint)=\"onClick($event)\"\n                        [compareIndex]=\"0\"\n                        [currentHeight]=\"500\"\n                        [pointMax]=\"compareManager.globalComparePointsMax\"\n                        [points]=\"compareManager.globalComparePoints\"></raain-compare>\n            </ion-card-content>\n        </ion-card>\n    </ion-col>\n\n    <ion-button (click)=\"exportCumulativeToCsv()\" *ngIf=\"compareManager.globalComparePoints?.length\" fill=\"outline\" size=\"small\">\n        <ion-icon name=\"download-outline\" slot=\"start\"></ion-icon>\n        Export CSV\n    </ion-button>\n</div>\n\n<div *ngIf=\"!cumulative\">\n    <ion-col *ngFor=\"let compare of  compareManager?.uiCompares; index as compareIndex\" size-md=\"6\" size-xs=\"12\">\n        <ion-card class=\"card-compare\">\n            <ion-card-header>Gauges filled {{ compare.name }} {{ compare.remarks }}\n            </ion-card-header>\n            <ion-card-content *ngIf=\"compare.comparePoints?.length\">\n                <raain-compare\n                        (selectedPoint)=\"onClick($event)\"\n                        [compareIndex]=\"compareIndex\"\n                        [currentHeight]=\"500\"\n                        [pointMax]=\"compare.comparePointsMax\"\n                        [points]=\"compare.comparePoints\"></raain-compare>\n            </ion-card-content>\n        </ion-card>\n    </ion-col>\n\n    <ion-button (click)=\"exportGranularToCsv()\" *ngIf=\"compareManager.uiCompares?.length\" fill=\"outline\" size=\"small\">\n        <ion-icon name=\"download-outline\" slot=\"start\"></ion-icon>\n        Export CSV\n    </ion-button>\n</div>\n", styles: ["#card-matrix{width:170px}.card-compare{min-width:300px}ion-card-header{padding:0 0 0 10px}\n"] }]
+            args: [{ selector: 'raain-compare-stack', template: "<div *ngIf=\"cumulative\">\n    <ion-col size-md=\"6\" size-xs=\"12\">\n        <ion-card class=\"card-compare\">\n            <ion-card-header>Cumulative\n                [{{ compareManager.compareDates[0] | date:'yyyy-MM-dd HH:mm' }}\n                - {{ compareManager.compareDates[compareManager.compareDates.length - 1] | date:'yyyy-MM-dd HH:mm' }}[\n            </ion-card-header>\n            <ion-card-content *ngIf=\"compareManager.globalComparePoints?.length\">\n                <raain-compare\n                        (selectedPoint)=\"onClick($event)\"\n                        [compareIndex]=\"0\"\n                        [currentHeight]=\"500\"\n                        [pointMax]=\"compareManager.globalComparePointsMax\"\n                        [points]=\"compareManager.globalComparePoints\"></raain-compare>\n            </ion-card-content>\n        </ion-card>\n    </ion-col>\n\n    <ion-button (click)=\"exportCumulativeToCsv()\" *ngIf=\"compareManager.globalComparePoints?.length\" fill=\"outline\"\n                size=\"small\">\n        <ion-icon name=\"download-outline\" slot=\"start\"></ion-icon>\n        Export CSV\n    </ion-button>\n</div>\n\n<div *ngIf=\"!cumulative\">\n    <ion-col *ngFor=\"let compare of  compareManager?.uiCompares; index as compareIndex\" size-md=\"6\" size-xs=\"12\">\n        <ion-card class=\"card-compare\">\n            <ion-card-header>Gauges filled {{ compare.name }} {{ compare.remarks }}\n            </ion-card-header>\n            <ion-card-content *ngIf=\"compare.comparePoints?.length\">\n                <raain-compare\n                        (selectedPoint)=\"onClick($event)\"\n                        [compareIndex]=\"compareIndex\"\n                        [currentHeight]=\"500\"\n                        [pointMax]=\"compare.comparePointsMax\"\n                        [points]=\"compare.comparePoints\"></raain-compare>\n            </ion-card-content>\n        </ion-card>\n    </ion-col>\n\n    <ion-button (click)=\"exportGranularToCsv()\" *ngIf=\"compareManager.uiCompares?.length\" fill=\"outline\" size=\"small\">\n        <ion-icon name=\"download-outline\" slot=\"start\"></ion-icon>\n        Export CSV\n    </ion-button>\n</div>\n", styles: ["#card-matrix{width:170px}.card-compare{min-width:300px}ion-card-header{padding:0 0 0 10px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { compareManager: [{
                 type: Input
             }], currentHeight: [{
@@ -1460,10 +1460,10 @@ class CompareManager {
         this.uiCompares = uiCompares;
         this.onChanges();
     }
-    async refreshGlobalCompareQuality(targetsOrdered, withCompareDuplicate, cumulativeHours = 0) {
+    async refreshGlobalCompareQuality(targetsOrdered, period, withCompareDuplicate, cumulativeHours = 0) {
         try {
             await this.fetchRainComputationQualities(targetsOrdered, cumulativeHours);
-            await this.buildComparesTimeline(targetsOrdered, withCompareDuplicate);
+            await this.buildComparesTimeline(targetsOrdered, period, withCompareDuplicate);
             if (!this.buildCompares.compareCumulative) {
                 // throw Error('needs cumulative compare');
                 return;
@@ -1478,6 +1478,9 @@ class CompareManager {
         }
     }
     async setGaugesInMap() {
+        // Get all gauge IDs linked to this rainNode
+        const rainNodeGaugeIds = this.rainNode.getLinks(GaugeNode.TYPE).map((l) => l.getId());
+        // Fetch gauges from API (may be filtered/limited)
         let gaugesToFilter = await this.profileService.getGauges(this.rainNode?.id, this.rainNode.getCenter());
         gaugesToFilter = gaugesToFilter
             .sort((a, b) => {
@@ -1485,9 +1488,29 @@ class CompareManager {
                 b.approxDistanceFrom(this.rainNode.getCenter()));
         })
             .filter((v, index) => index < 200);
-        const rainNodeGaugeIds = this.rainNode.getLinks(GaugeNode.TYPE).map((l) => l.getId());
-        const visibleGauges = gaugesToFilter.filter((g) => rainNodeGaugeIds.indexOf(g.id) > -1);
-        console.log('visibleGauges:', visibleGauges);
+        // Build a map of gauges from API response
+        const gaugesFromApi = new Map();
+        for (const gauge of gaugesToFilter) {
+            gaugesFromApi.set(gauge.id, gauge);
+        }
+        // Fetch missing gauges individually (those linked but not in API response)
+        const missingGaugeIds = rainNodeGaugeIds.filter((id) => !gaugesFromApi.has(id));
+        for (const gaugeId of missingGaugeIds) {
+            try {
+                const gauge = await this.profileService.getGauge(gaugeId);
+                if (gauge) {
+                    gaugesFromApi.set(gauge.id, gauge);
+                }
+            }
+            catch (e) {
+                console.warn(`Failed to fetch gauge ${gaugeId}:`, e);
+            }
+        }
+        // Filter to only gauges linked to this rainNode
+        const visibleGauges = rainNodeGaugeIds
+            .map((id) => gaugesFromApi.get(id))
+            .filter((g) => !!g);
+        console.log('visibleGauges:', visibleGauges.length, '/', rainNodeGaugeIds.length);
         const gaugesLatLng = [];
         for (const gauge of visibleGauges) {
             gaugesLatLng.push(new MapLatLng(gauge.latitude, gauge.longitude, undefined, gauge.id, gauge.name));
@@ -1595,13 +1618,13 @@ class CompareManager {
         }
         return result.sort((a, b) => a.date.getTime() - b.date.getTime());
     }
-    async buildComparesTimeline(targetsOrdered, withCompareDuplicate) {
+    async buildComparesTimeline(targetsOrdered, period, withCompareDuplicate) {
         const compareDates = targetsOrdered.map((t) => t.date);
         const qualities = compareDates
             .filter((d) => !!d)
             .map((d) => this.getRainComputationQuality(d))
             .filter((rcq) => !!rcq);
-        this.compareDates = compareDates; // compareDates.slice(1, -1);
+        this.compareDates = compareDates?.length > 1 ? compareDates : [period.begin, period.end]; // compareDates.slice(1, -1);
         this.buildCompares = SpeedMatrixContainer.BuildCompares(qualities, !withCompareDuplicate);
         return this.buildCompares;
     }
@@ -1967,7 +1990,7 @@ class RefreshManager {
             const cumulativeHours = this.cumulative
                 ? (this.period.end.getTime() - this.period.begin.getTime()) / (60 * 60 * 1000)
                 : 0;
-            await this.compareManager.refreshGlobalCompareQuality(targets, !this.removeDuplicate, cumulativeHours);
+            await this.compareManager.refreshGlobalCompareQuality(targets, this.period, !this.removeDuplicate, cumulativeHours);
         }
         catch (e) {
             console.error('refreshGlobalCompareReport', e);
@@ -2065,1377 +2088,1690 @@ function mapDateRangeToString(range) {
     }
 }
 
-let TEST_DETECTION = 0;
-class RaainDetailsComponent {
-    constructor(storage, cdr) {
+class FidjStorageNode {
+    constructor() {
+        this.radars = [];
+        this.rains = [];
+        this.gauges = [];
+        this.events = [];
+        this.infos = {};
+    }
+    static getEmptyNode() {
+        return new FidjStorageNode();
+    }
+    static getDemoNode() {
+        const demoNode = new FidjStorageNode();
+        const link = new Link('rain', 'https://demo/api/rains/2');
+        /*
+    demoNode.radars = [
+      new RadarNode({
+        id: '5efd04569cb1f4161bd69dc7',
+        name: 'demo radar A',
+        links: [link],
+        latitude: 48.774569,
+        longitude: 2.008407
+      }),
+      new RadarNode({
+        id: 'dr2',
+        name: 'demo radar B',
+        links: [link],
+        latitude: 0.11,
+        longitude: -0.753
+      }),
+      new RadarNode({
+        id: 'dr3',
+        name: 'demo radar C',
+        latitude: 0.13,
+        longitude: -0.753,
+        links: []
+      }),
+      new RadarNode({
+        id: 'dr4',
+        name: 'demo radar D',
+        latitude: 0.14,
+        longitude: -0.74,
+        links: []
+      })];
+    demoNode.rains = [
+      new RainNode({
+        id: '5efd04569cb1f4161bd69dc8',
+        name: 'Demo rain zone A',
+        links: [new Link('radar', 'https://demo/api/radars/5efcfe619cb1f4161bd69dc3')],
+        status: 0,
+        quality: 75,
+        latitude: 48.774569,
+        longitude: 2.008407
+      }),
+      new RainNode({
+        id: 'dz2',
+        name: 'Demo rain zone B',
+        radars: [demoNode.radars[0], demoNode.radars[1]],
+        status: 1,
+        quality: 50,
+        latitude: 48.774569,
+        longitude: 2.008407
+      }),
+      new RainNode({
+        id: 'dz3',
+        name: 'Demo rain zone C',
+        radars: [demoNode.radars[0], demoNode.radars[1]],
+        status: 2,
+        quality: 75,
+        latitude: 48.774569,
+        longitude: 2.008407
+      }),
+      new RainNode({
+        id: 'dz4',
+        name: 'Demo rain zone D',
+        radars: [demoNode.radars[0], demoNode.radars[1]],
+        status: 3,
+        quality: 95,
+        latitude: 48.774569,
+        longitude: 2.008407
+      })];
+
+    demoNode.gauges = [
+      new GaugeNode({
+        id: 'g1',
+        name: 'Gauge A',
+        latitude: 48.7748,
+        longitude: 2.28407,
+      }),
+      new GaugeNode({
+        id: 'g2',
+        name: 'Gauge B',
+        latitude: 48.874569,
+        longitude: 2.108407,
+      })];
+    demoNode.events = [{
+      id: 'e2',
+      title: 'Need support ?',
+      status: 0,
+      red: false,
+      description: 'This area is dedicated to support you and your team. Support is made on Radar or Rain quality, ' +
+        'or any feedback we can have about your production system. Our goal : improving your data.',
+      created: new Date(),
+      modified: new Date()
+    }];
+    demoNode.team = {
+      id: 'p1',
+      email: 'demo@demo.com',
+      name: 'demo guy',
+      description: 'the demo guy'
+    };
+
+     */
+        return demoNode;
+    }
+}
+class FidjStorageResult {
+}
+class FidjStorage {
+    constructor(storage) {
         this.storage = storage;
-        this.cdr = cdr;
-        this.availableProviders = [];
-        this.availableTimeSteps = [];
-        this.showPixelMarkers = false;
-        this.qualityIndicators = [];
-        this.qualityIndicatorsLoading = false;
-        // Cached computed values (to avoid method calls in templates)
-        this.percentOfComputations = 0;
-        this.percentOfImages = 0;
-        this.truncatedError = '';
-        this.cumulativeDurationInMinutes = 10;
-        this.DateRange = DateRange;
-        // Wrapper function that preserves the async nature of fetchData
-        this.fetchDataWrapper = async (focusDate, focusRange) => {
-            return await this.fetchData(focusDate, focusRange);
-        };
+        this.node = FidjStorageNode.getEmptyNode();
+        this.fidjMetaResult = { data: new FidjStorageNode() };
     }
-    static PeriodDisplay(date) {
-        let d = new Date();
-        if (date) {
-            d = new Date(date);
-            const userTimezoneOffset = d.getTimezoneOffset() * 60000;
-            d = new Date(d.getTime() - userTimezoneOffset);
+    async storeData(fidjService, data) {
+        this.node = JSON.parse(JSON.stringify(data));
+        this.fidjMetaResult.data = this.node;
+        if (this.isDemoMode) {
+            this.storage.set('fidjMetaResult', JSON.stringify(this.fidjMetaResult));
+            return;
         }
-        const exampleFormattedDate = '2017-06-01T08:30';
-        return d.toISOString().substring(0, exampleFormattedDate.length);
+        await fidjService.put(this.fidjMetaResult);
     }
-    static DateUTC(date) {
-        const hasISOFormat = date.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/);
-        let d = new Date(date);
-        if (!hasISOFormat) {
-            const userTimezoneOffset = d.getTimezoneOffset() * 60000;
-            d = new Date(d.getTime() - userTimezoneOffset);
+    async getRefreshedNodeCopy(fidjService) {
+        if (this.isDemoMode) {
+            const fidjMetaResult = this.storage.get('fidjMetaResult');
+            if (fidjMetaResult) {
+                this.fidjMetaResult = JSON.parse(fidjMetaResult);
+                this.node = this.fidjMetaResult.data;
+            }
+            return JSON.parse(JSON.stringify(this.node));
         }
-        return d;
-    }
-    static MapCountToDateValue(c) {
-        return {
-            date: RaainDetailsComponent.DateUTC(c.name),
-            value: Math.min(100, c.x),
+        const firstDemoData = async () => {
+            this.node = FidjStorageNode.getDemoNode();
+            await this.storeData(fidjService, this.node);
         };
-    }
-    async openQualityModal() {
-        this.showQualityModal = true;
-        this.qualityIndicatorsLoading = true;
-        this.qualityIndicators = [];
-        this.cdr.markForCheck();
-        if (this.rainNode?.id) {
-            const result = await this.profileService.getIndicators(this.rainNode.id);
-            this.qualityIndicators = result.indicators;
+        await fidjService.sync(firstDemoData);
+        const fidjFindAllResults = await fidjService.findAll();
+        if (fidjFindAllResults && fidjFindAllResults.length > 0) {
+            if (fidjFindAllResults[0].data) {
+                this.fidjMetaResult = fidjFindAllResults[0];
+                this.node = this.fidjMetaResult.data;
+            }
         }
-        this.qualityIndicatorsLoading = false;
-        this.cdr.markForCheck();
+        return JSON.parse(JSON.stringify(this.node));
     }
-    closeQualityModal() {
-        this.showQualityModal = false;
+    setDemoMode(isDemo) {
+        this.isDemoMode = isDemo;
     }
-    formatDate(dateStr) {
-        const date = new Date(dateStr);
-        return (date.toLocaleDateString() +
-            ' ' +
-            date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+}
+
+class ProfileService {
+    constructor(storage, fidjService, httpClient, router) {
+        this.storage = storage;
+        this.fidjService = fidjService;
+        this.httpClient = httpClient;
+        this.router = router;
+        this.email = this.storage.get('raain-email');
+        this.asTeamId = this.storage.get('raain-asTeamId');
+        this.readyForSync = new BehaviorSubject(false);
+        this.roles = [];
+        this.fidjStorage = new FidjStorage(storage);
+        this.isDemoMode = false;
     }
-    async fetchData(focusDate, focusRange) {
-        const values = [];
-        for (let i = 0; i < 10; i++) {
-            values.push({ date: new Date(2020 + i, 0), value: 10 });
+    get isDemoMode() {
+        return this.isDemo;
+    }
+    set isDemoMode(mode) {
+        this.isDemo = mode ? mode : true;
+        this.fidjStorage.setDemoMode(this.isDemo);
+    }
+    get defaultUrlForAPI() {
+        return this.storage.get('raain-urlForAPI');
+    }
+    set defaultUrlForAPI(url) {
+        this.storage.set('raain-urlForAPI', url);
+    }
+    async refreshProfile() {
+        try {
+            this.nodeData = await this.fidjStorage.getRefreshedNodeCopy(this.fidjService);
+            this.setRoles(await this.fidjService.getRoles());
+            return this.nodeData;
         }
-        const fakeData = [
-            {
-                label: '% Rainy',
-                style: 'bar',
-                values,
-            },
-            {
-                label: '% Images',
-                style: 'bar',
-                values,
-            },
-            //  {
-            //      label: '% Quality',
-            //      style: 'line',
-            //      values,
-            //  },
-        ];
-        const range = mapDateRangeToString(focusRange);
-        let data = fakeData;
-        if (!this.rainNode) {
-            return data;
+        catch (e) {
+            await this.checkError(e);
         }
-        if (focusRange === DateRange.CENTURY) {
-            // fake
+    }
+    async isConnected() {
+        return this.fidjService.isConnected();
+    }
+    getEmail() {
+        return this.email ?? this.storage.get('raain-email', this.email);
+    }
+    setEmail(email) {
+        this.email = email;
+        this.storage.set('raain-email', this.email);
+    }
+    async logout(fidjKey, fidjProd) {
+        // this.storage.remove('raain-email');
+        if (!fidjKey) {
+            try {
+                await this.fidjService.loginInDemoMode();
+                this.readyForSync.next(true);
+            }
+            catch (err) {
+                console.error('initFidj catch pb: ', err);
+            }
+            return;
         }
-        else if (focusRange === DateRange.HOUR) {
-            const hourCounts = await this.profileService.getCountsHour(this.rainNode.id, {
-                periodBegin: focusDate,
+        await this.fidjService.logout(true);
+        try {
+            await this.fidjService.init(fidjKey, {
+                logLevel: LoggerLevelEnum.WARN,
+                crypto: false,
+                prod: fidjProd,
+                useDB: false,
             });
-            data = [
-                {
-                    label: 'Rainy Count',
-                    style: 'line',
-                    values: hourCounts.rainyCount.map(RaainDetailsComponent.MapCountToDateValue),
-                },
-                {
-                    label: '% Images',
-                    style: 'bar',
-                    values: hourCounts.percentImages.map(RaainDetailsComponent.MapCountToDateValue),
-                },
-                {
-                    label: 'Rainy Sum',
-                    style: 'line',
-                    values: hourCounts.rainySum.map(RaainDetailsComponent.MapCountToDateValue),
-                },
-            ];
+            this.readyForSync.next(true);
         }
-        else {
-            const counts = await this.profileService.getCounts(this.rainNode.id, {
-                range,
-                periodBegin: focusDate,
-            });
-            data = [
-                {
-                    label: '% Rainy',
-                    style: 'bar',
-                    values: counts.percentRainy.map(RaainDetailsComponent.MapCountToDateValue),
-                },
-                {
-                    label: '% Images',
-                    style: 'bar',
-                    values: counts.percentImages.map(RaainDetailsComponent.MapCountToDateValue),
-                },
-            ];
+        catch (err) {
+            console.error('initFidj catch pb: ', err);
         }
-        // console.log(`fetchData DONE ${range}`, data);
-        return data;
-    }
-    ngOnChanges(changes) {
-        this.change(changes).then((ignored) => { });
-    }
-    ngOnDestroy() {
-        this.cleanAll();
     }
-    async onEnableCountHistoryTab(rain) {
-        if (!this.toggleHistory) {
-            this.countPoints = [];
+    async checkError(error) {
+        if (error.code === 401) {
+            console.warn('Pb on auth');
+            if (this.router.url.indexOf('login') < 0) {
+                try {
+                    await this.fidjService.logout();
+                }
+                catch (ignored) {
+                    // Ignore logout errors as we're redirecting to logout page anyway
+                }
+                return this.gotoLout();
+            }
         }
     }
-    async onPeriodBeginChange(event) {
-        const newValue = event?.target?.value ?? this.periodBeginAsString;
-        this.periodBegin = new Date(newValue);
-        this.periodBeginAsString = RaainDetailsComponent.PeriodDisplay(this.periodBegin);
-        this.storage.set('raain-periodBegin', this.periodBegin);
-        await this.onPeriodDurationChange(event);
-    }
-    async onPeriodEndChange(event) {
-        const newValue = event?.target?.value ?? this.periodEndAsString;
-        this.periodEnd = new Date(newValue);
-        this.periodEndAsString = RaainDetailsComponent.PeriodDisplay(this.periodEnd);
-        this.storage.set('raain-periodEnd', this.periodEnd);
-        this.periodBegin = new Date(this.periodEnd.getTime() - this.getDurationInHours() * RaainDetailsComponent.HOUR_MS);
-        this.periodBeginAsString = RaainDetailsComponent.PeriodDisplay(this.periodBegin);
-        this.storage.set('raain-periodBegin', this.periodBegin);
-        this.updateRefreshManagerPeriod();
-    }
-    async onPeriodDurationChange(_event) {
-        const durationInHours = this.getDurationInHours();
-        this.periodEnd = new Date(this.periodBegin.getTime() + durationInHours * RaainDetailsComponent.HOUR_MS);
-        this.periodEndAsString = RaainDetailsComponent.PeriodDisplay(this.periodEnd);
-        this.storage.set('raain-periodEnd', this.periodEnd);
-        this.storage.set('raain-periodDurationInHours', durationInHours);
-        this.updateRefreshManagerPeriod();
-        this.updateCumulativeDurationInMinutes();
-    }
-    async onDateChangeInCount(dateChanged) {
-        const dateString = dateChanged.toISOString().substring(0, 11) +
-            dateChanged.toLocaleTimeString().substring(0, 5);
-        this.periodDurationAsString = '1';
-        if (this.toggleCumulative) {
-            // Cumulative: select periodEnd
-            this.periodEndAsString = dateString;
-            await this.onPeriodEndChange(null);
+    async gotoLout() {
+        try {
+            if (this.router.url.indexOf('login') > -1) {
+                return;
+            }
+            await this.router.navigateByUrl('/logout', {
+                skipLocationChange: true,
+                replaceUrl: true,
+            });
         }
-        else {
-            // Granular: select periodBegin
-            this.periodBeginAsString = dateString;
-            await this.onPeriodBeginChange(null);
+        catch (e) {
+            console.error('gotoLout error: ', e);
         }
-        await this.refreshManager.refresh(false, this.toggleAdmin);
-    }
-    async onDateChangeInMap(dateShown) {
-        this.dateShown = dateShown;
-        await this.fetchAndUpdateMap();
-        await this.refreshManager.setReportPeriod(this.dateShown);
-    }
-    async onSumChangeInMap(sum) {
-        this.sumDetails = sum;
     }
-    async onGaugeSelectInMap(mapLatLng) {
-        const gaugesFiltered = this.compareManager.gaugesInMap.filter((g) => g.lat === mapLatLng.lat && g.lng === mapLatLng.lng);
-        if (gaugesFiltered.length !== 1) {
+    async gotoLogin() {
+        if (this.router.url.indexOf('login') > -1) {
             return;
         }
-        const gaugeSelected = gaugesFiltered[0];
-        await this.refreshGaugeValues({ id: gaugeSelected.id, name: gaugeSelected.name });
-        await this.compareManager.selectGauge(gaugeSelected.id, 0);
+        // await this.router.navigateByUrl('/', {skipLocationChange: true});
+        await this.router.navigate(['/login']);
     }
-    async refreshGaugeValues(gaugeSelected) {
-        const gaugeValueShowBegin = new Date(this.periodBegin.getTime() - RaainDetailsComponent.DAY_MS);
-        const gaugeValueShowEnd = new Date(this.periodEnd.getTime() + RaainDetailsComponent.DAY_MS);
-        gaugeValueShowBegin.setHours(0, 0);
-        gaugeValueShowEnd.setHours(23, 59);
-        const gaugeMeasures = await this.profileService.getGaugeMeasures(gaugeSelected.id, gaugeValueShowBegin, gaugeValueShowEnd);
-        const gaugeValues = gaugeMeasures.map((gm) => {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const cartesianMeasureValue = new CartesianMeasureValue(gm.values[0]);
-            return {
-                date: gm.date,
-                value: cartesianMeasureValue.getCartesianValues()[0].value,
-            };
-        });
-        this.gaugeSelectedPoints = [
-            {
-                label: gaugeSelected.name,
-                style: 'bar',
-                values: gaugeValues,
-            },
-        ];
-        this.cdr.markForCheck();
+    isLoggedIn() {
+        const loggedIn = this.fidjService.isLoggedIn();
+        console.log('isLoggedIn: ', loggedIn);
+        return loggedIn;
     }
-    async onGaugeSelectInCompare(e) {
-        await this.refreshGaugeValues({ id: e.point.id, name: e.point.name });
-        await this.compareManager.selectGauge(e.point.id, e.compareIndex);
+    needsConnectionRefresh() {
+        return this.fidjService.needsRefresh();
     }
-    async onToggleMap($event) {
-        // if (this.toggleMap) {
-        //    await this.refreshMap();
-        // }
+    async connectionRefresh() {
+        await this.fidjService.refresh();
     }
-    onTogglePixelMarkers() {
-        // Toggle is bound to showPixelMarkers, raain-map handles marker display
+    async storeAll() {
+        return this.fidjStorage.storeData(this.fidjService, this.nodeData);
     }
-    async toggleCumulativeChanged(_$event) {
-        this.storage.set('raain-toggleCumulative', this.toggleCumulative);
-        this.dateShown = this.getDateBasedOnCumulativeMode(this.timeframeDates);
-        this.updateCumulativeDurationInMinutes();
-        if (this.toggleMap) {
-            this.updateRefreshManagerPeriod(); // Update cumulative flag before refresh
-            await this.refreshManager.refresh(false, this.toggleAdmin);
-        }
+    isAdmin() {
+        return this.roles.indexOf('admin') > -1;
     }
-    updateCumulativeDurationInMinutes() {
-        if (this.toggleCumulative) {
-            // Cumulative mode: use period duration
-            this.cumulativeDurationInMinutes = parseFloat(this.periodDurationAsString) * 60;
+    // === Notifications ===
+    async createNotification(rainId, message) {
+        const data = {
+            rain: rainId,
+            message,
+        };
+        try {
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'notifications',
+                verb: 'POST',
+                defaultKeyUrl: this.defaultUrlForAPI + '/notifications',
+                data,
+            });
+            return new EventNode(resp.data);
         }
-        else {
-            // Granular mode: use selectedTimeStep
-            this.cumulativeDurationInMinutes = this.selectedTimeStep || 10;
+        catch (e) {
+            await this.checkError(e);
         }
+        return null;
     }
-    async onProviderChanged($event) {
-        this.selectedProvider = $event?.detail?.value;
-        this.storage.set('raain-selectedProvider', this.selectedProvider);
-        await this.applyRefreshManagerSettings();
-    }
-    async onTimeStepChanged($event) {
-        this.selectedTimeStep = $event?.detail?.value;
-        this.storage.set('raain-selectedTimeStep', this.selectedTimeStep);
-        this.updateCumulativeDurationInMinutes();
-        await this.applyRefreshManagerSettings();
-    }
-    async loadProviders() {
-        if (!this.rainNode?.id) {
-            return;
-        }
+    async getNotifications(rainId) {
         try {
-            const result = await this.profileService.getProviders(this.rainNode.id);
-            this.availableProviders = result.providers;
-            this.availableTimeSteps = result.timeStepInMinutes;
-            // Load saved selections or use defaults
-            this.selectedProvider =
-                this.storage.get('raain-selectedProvider') ||
-                    (this.availableProviders.length > 0 ? this.availableProviders[0] : 'Raain');
-            this.selectedTimeStep =
-                this.storage.get('raain-selectedTimeStep') ||
-                    (this.availableTimeSteps.length > 0 ? this.availableTimeSteps[0] : 10);
+            const params = { rain: rainId };
+            const queryString = BuildQueryString(params);
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'notifications',
+                verb: 'GET',
+                relativePath: queryString ? '?' + queryString : '',
+                defaultKeyUrl: this.defaultUrlForAPI + '/notifications',
+            });
+            return resp.data.notifications.map((n) => new EventNode(n));
         }
         catch (e) {
-            // Set fallback values
-            this.availableProviders = ['Raain'];
-            this.availableTimeSteps = [5, 10, 15, 30, 60];
-            this.selectedProvider = 'Raain';
-            this.selectedTimeStep = 10;
-        }
-        // Set provider and timeStep on refreshManager
-        if (this.refreshManager) {
-            this.refreshManager.provider = this.selectedProvider;
-            this.refreshManager.timeStepInMinutes = this.selectedTimeStep;
+            await this.checkError(e);
         }
-        this.cdr.markForCheck();
-    }
-    onChangeDetectionTest(rainNode) {
-        console.log(TEST_DETECTION++, 'onChangeDetectionTest');
-        return '';
+        return null;
     }
-    updateTruncatedError() {
-        const error = this.refreshManager?.lastError || '';
-        if (error.length <= 80) {
-            this.truncatedError = error;
-            return;
+    async getAllNotifications() {
+        try {
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'notifications',
+                verb: 'GET',
+                defaultKeyUrl: this.defaultUrlForAPI + '/notifications',
+            });
+            return resp.data.notifications.map((n) => new EventNode(n));
         }
-        this.truncatedError = error.substring(0, 80) + '...';
-    }
-    updateCachedValues() {
-        this.updatePercentOfImages();
-        this.updatePercentOfComputations();
-        this.updateTruncatedError();
-        this.updateCumulativeDurationInMinutes();
-    }
-    async refreshMap() {
-        this.gaugeSelectedPoints = [];
-        this.dateShown = this.getDateBasedOnCumulativeMode();
-        this.borders = [];
-        this.compareManager.cleanAll();
-        await this.compareManager.setGaugesInMap();
-        await this.refreshManager.refresh(false, this.toggleAdmin);
-        this.cdr.markForCheck();
-    }
-    async setPeriodOfNow() {
-        const last30mn = new Date();
-        last30mn.setMinutes(last30mn.getMinutes() - 30);
-        this.periodBeginAsString =
-            last30mn.toISOString().substring(0, 11) + last30mn.toLocaleTimeString().substring(0, 5);
-        this.periodDurationAsString = '1';
-        await this.onPeriodBeginChange(null);
-        await this.refreshManager.refresh(false, this.toggleAdmin);
+        catch (e) {
+            await this.checkError(e);
+        }
+        return [];
     }
-    updatePercentOfImages() {
-        if (!this.countsPeriod?.percentImages?.length) {
-            this.percentOfImages = 0;
-            return;
+    // === Teams ===
+    async getTeams() {
+        const teams = [];
+        const params = {};
+        const queryString = BuildQueryString(params);
+        try {
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'teams',
+                verb: 'GET',
+                relativePath: queryString ? '?' + queryString : '',
+                defaultKeyUrl: this.defaultUrlForAPI + '/teams',
+            });
+            for (const team of resp.data.teams) {
+                teams.push(new TeamNode(team));
+            }
         }
-        const duringPeriod = this.countsPeriod.percentImages.filter((a) => this.periodBegin.getTime() <= new Date(a.name).getTime() &&
-            new Date(a.name).getTime() <= this.periodEnd.getTime());
-        const summed = duringPeriod.reduce((a, b) => a + (b.x ?? 0), 0);
-        this.percentOfImages = Math.round(summed / duringPeriod.length);
+        catch (e) {
+            await this.checkError(e);
+        }
+        return teams;
     }
-    updatePercentOfComputations() {
-        const timeline = this.refreshManager?.getTimelineFrameSet();
-        if (!timeline?.length) {
-            this.percentOfComputations = 0;
-            return;
+    async getTeam(teamId) {
+        try {
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'teams',
+                verb: 'GET',
+                relativePath: teamId,
+                defaultKeyUrl: this.defaultUrlForAPI + '/teams',
+            });
+            return new TeamNode(resp.data);
         }
-        const timelineWithComputation = timeline.filter((a) => !!a.rainComputationCumulativeId || !!a.rainComputationId);
-        const ratio = timelineWithComputation.length / timeline.length;
-        this.percentOfComputations = Math.round(ratio * 100);
+        catch (e) {
+            await this.checkError(e);
+        }
+        return null;
     }
-    getDateBasedOnCumulativeMode(fallbackDates) {
-        if (fallbackDates?.length > 0) {
-            const dateExists = fallbackDates.some((d) => d.getTime() === this.dateShown?.getTime());
-            if (!dateExists) {
-                return this.toggleCumulative
-                    ? fallbackDates[fallbackDates.length - 1]
-                    : fallbackDates[0];
+    // === Radars ===
+    async getRadars(name) {
+        const radars = [];
+        const params = {};
+        if (name) {
+            params.name = name;
+        }
+        const queryString = BuildQueryString(params);
+        try {
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'radars',
+                verb: 'GET',
+                relativePath: queryString ? '?' + queryString : '',
+                defaultKeyUrl: this.defaultUrlForAPI + '/radars',
+            });
+            for (const r of resp.data.radars) {
+                const radar = new RadarNode(r);
+                radars.push(radar);
             }
         }
-        return this.toggleCumulative ? this.periodEnd : this.periodBegin;
-    }
-    getCumulativeHours() {
-        return this.toggleCumulative ? parseFloat(this.periodDurationAsString) : 0;
+        catch (e) {
+            await this.checkError(e);
+        }
+        return radars;
     }
-    getDurationInHours() {
-        return parseFloat(this.periodDurationAsString);
+    async getRadar(id) {
+        try {
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'radars',
+                verb: 'GET',
+                relativePath: id,
+                defaultKeyUrl: this.defaultUrlForAPI + '/radars',
+            });
+            return new RadarNode(resp.data);
+        }
+        catch (e) {
+            await this.checkError(e);
+        }
+        return null;
     }
-    updateRefreshManagerPeriod() {
-        this.refreshManager.cumulative = this.toggleCumulative;
-        // Align dates to 5-minute boundaries (floor) for consistency with raain-ground
-        const alignTo5minFloor = (date) => {
-            const minutes = date.getMinutes();
-            const alignedMinutes = Math.floor(minutes / 5) * 5;
-            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), alignedMinutes, 0, 0);
-        };
-        this.refreshManager.period = {
-            begin: alignTo5minFloor(this.periodBegin),
-            end: alignTo5minFloor(this.periodEnd),
+    async putRadar(radarNode) {
+        const data = {
+            name: radarNode.name,
         };
+        try {
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'radars',
+                relativePath: radarNode.id,
+                verb: 'PUT',
+                data,
+                defaultKeyUrl: this.defaultUrlForAPI + '/radars/',
+            });
+            return new RadarNode(resp.data);
+        }
+        catch (e) {
+            await this.checkError(e);
+        }
     }
-    async fetchAndUpdateMap() {
-        await this.refreshManager.fetch(this.dateShown, this.toggleGaugeMeasures, this.getCumulativeHours());
-        this.currentTimeframeTarget = this.refreshManager.getTimelineSelectedFrameSet();
-        this.cdr.markForCheck();
-    }
-    async applyRefreshManagerSettings() {
-        if (!this.refreshManager) {
-            return;
+    async getLonelyRadars(rains) {
+        try {
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'radars',
+                verb: 'GET',
+                defaultKeyUrl: this.defaultUrlForAPI + '/radars',
+            });
+            const lonelyRadars = [];
+            const radars = resp.data.radars;
+            radars.forEach((radar) => {
+                let found = false;
+                rains.forEach((rain) => {
+                    const rdId = rain.getLink(RadarNode.TYPE).getId();
+                    if (rdId === radar.id) {
+                        found = true;
+                    }
+                });
+                if (!found) {
+                    lonelyRadars.push(new RadarNode(radar));
+                }
+            });
+            return lonelyRadars;
         }
-        this.refreshManager.provider = this.selectedProvider;
-        this.refreshManager.timeStepInMinutes = this.selectedTimeStep;
-        await this.refreshManager.refresh(false, this.toggleAdmin);
+        catch (e) {
+            await this.checkError(e);
+        }
+        return [];
     }
-    cleanAll() {
-        this.borders = [];
-        this.isAdmin = false;
-        this.timeframeContainers = new TimeframeContainers([]);
-        this.currentTimeframeTarget = null;
-        this.timeframeDates = [];
-        this.countPoints = [];
-        this.countsPeriod = { progress: 0, queueRunning: 0, percentImages: [] };
-        this.gaugeSelectedPoints = [];
-        this.toggleHistory = false;
-        this.toggleMap = true;
-        this.toggleCompare = false;
-        this.toggleGaugeMeasures = false;
-        this.toggleRemoveCompareDuplicate = true;
-        this.toggleCumulative = this.storage.get('raain-toggleCumulative');
-        this.periodBegin = new Date(this.storage.get('raain-periodBegin'));
-        this.periodEnd = new Date(this.storage.get('raain-periodEnd'));
-        this.periodBeginAsString = RaainDetailsComponent.PeriodDisplay(this.periodBegin);
-        this.periodEndAsString = RaainDetailsComponent.PeriodDisplay(this.periodEnd);
-        const durationMs = this.periodEnd.getTime() - this.periodBegin.getTime();
-        this.periodDurationAsString = '' + durationMs / RaainDetailsComponent.HOUR_MS;
-        this.dateShown = this.getDateBasedOnCumulativeMode();
-        this.refreshInProgress = false;
-        this.showFullError = false;
-        this.showQualityModal = false;
-        this.qualityIndicators = [];
-        this.qualityIndicatorsLoading = false;
-        this.compareManager?.cleanAll();
-        this.refreshManager?.cleanAll();
-    }
-    async init() {
-        this.cleanAll();
-        this.updateCachedValues();
-        await this.initRain();
-        this.cdr.markForCheck();
-    }
-    async initRain() {
-        if (!this.rainNode) {
-            return;
+    async getRainTimeframe(rainId, begin, end, forced = false, provider = 'Raain', timeStepInMinutes = 10, windowInMinutes = 0) {
+        try {
+            const params = {
+                format: 'timeframeCumulative',
+                provider,
+                timeStepInMinutes: String(timeStepInMinutes),
+                begin: begin?.toISOString(),
+                end: end?.toISOString(),
+            };
+            if (forced) {
+                params.forced = 'true';
+            }
+            params.windowInMinutes = String(windowInMinutes);
+            const queryString = BuildQueryString(params);
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
+                verb: 'GET',
+                relativePath: rainId + (queryString ? '?' + queryString : ''),
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
+            });
+            const rainNode = new RainNode(resp.data.timeframeCumulative);
+            rainNode.name += '.radar.timeframeCumulative';
+            return rainNode;
         }
-        this.isAdmin = this.profileService.isAdmin();
-        this.refreshManager.rainNode = this.rainNode;
-        this.compareManager.rainNode = this.rainNode;
-        // Load providers and set on refreshManager
-        await this.loadProviders();
-        this.refreshManager.setMethods(this.onRefreshInProgress.bind(this), this.onRefreshDone.bind(this), this.onFetchDone.bind(this));
-        const center = this.rainNode.getCenter();
-        this.coordinates = new MapLatLng(center.lat, center.lng);
-        this.teamNode = await this.profileService.getTeam(this.rainNode.getLink(TeamNode.TYPE).getId());
-        if (this.periodBegin && this.periodEnd) {
-            this.updateRefreshManagerPeriod();
-            await this.refreshManager.refresh(false, this.toggleAdmin);
+        catch (e) {
+            await this.checkError(e);
         }
+        return null;
     }
-    async onRefreshInProgress(countPeriods, timeframeDates) {
-        this.refreshInProgress = true;
-        this.countsPeriod = countPeriods;
-        this.timeframeDates = timeframeDates;
-        this.updateCachedValues();
-        this.cdr.markForCheck();
-    }
-    async onRefreshDone(timeframeDates) {
-        this.timeframeDates = timeframeDates;
-        this.refreshInProgress = false;
-        this.updateCachedValues();
-        this.cdr.markForCheck();
-        if (this.toggleMap && timeframeDates.length > 0) {
-            this.dateShown = this.getDateBasedOnCumulativeMode(timeframeDates);
-            if (this.dateShown) {
-                await this.fetchAndUpdateMap();
+    // === Rains ===
+    async getRains(name) {
+        const rains = [];
+        const params = {};
+        if (name) {
+            params.name = name;
+        }
+        const queryString = BuildQueryString(params);
+        try {
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
+                verb: 'GET',
+                relativePath: queryString ? '?' + queryString : '',
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
+            });
+            for (const rain of resp.data.rains) {
+                rains.push(new RainNode(rain));
             }
         }
-    }
-    async onFetchDone(timeframeContainers) {
-        if (timeframeContainers) {
-            this.timeframeContainers = timeframeContainers;
+        catch (e) {
+            await this.checkError(e);
         }
-        this.cdr.markForCheck();
+        return rains;
     }
-    async change(_changes) {
-        await this.init();
+    async getRain(id) {
+        try {
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
+                relativePath: id,
+                verb: 'GET',
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains/',
+            });
+            return new RainNode(resp.data);
+        }
+        catch (e) {
+            await this.checkError(e);
+        }
+        return null;
     }
-}
-RaainDetailsComponent.HOUR_MS = 60 * 60000;
-RaainDetailsComponent.DAY_MS = 24 * 60 * 60 * 1000;
-RaainDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RaainDetailsComponent, deps: [{ token: Storage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-RaainDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RaainDetailsComponent, selector: "raain-details", inputs: { toggleAdmin: "toggleAdmin", rainNode: "rainNode", compareManager: "compareManager", refreshManager: "refreshManager", profileService: "profileService", radarService: "radarService" }, usesOnChanges: true, ngImport: i0, template: "<!-- Main content container -->\n<div *ngIf=\"rainNode\" class=\"raain-details-container\">\n\n    <!-- Period selection section -->\n    <ion-card class=\"period-card\">\n        <ion-card-content>\n            <div class=\"period-controls\">\n                <div class=\"period-row\">\n\n                    <ion-button (click)=\"toggleHistory = !toggleHistory; onEnableCountHistoryTab(rainNode)\"\n                                fill=\"outline\">\n                        <ion-icon name=\"calendar-clear-outline\" slot=\"start\"></ion-icon>\n                        <ion-icon [name]=\"toggleHistory ? 'chevron-down' : 'chevron-forward'\" slot=\"end\"></ion-icon>\n                    </ion-button>\n\n                    <div class=\"period-start ion-hide-md-down\">\n                        <input (change)=\"onPeriodBeginChange($event)\"\n                               [disabled]=\"toggleCumulative\"\n                               [value]=\"periodBeginAsString\"\n                               class=\"datetime-input\"\n                               type=\"datetime-local\">\n                    </div>\n\n                    <div class=\"period-duration ion-hide-md-down\">\n                        <ion-select (ionDismiss)=\"onPeriodDurationChange($event)\"\n                                    [(ngModel)]=\"periodDurationAsString\"\n                                    class=\"duration-select\"\n                                    id=\"periodDuration\"\n                                    interface=\"popover\">\n                            <ion-select-option value=\"0.25\">15 minutes</ion-select-option>\n                            <ion-select-option value=\"0.5\">30 minutes</ion-select-option>\n                            <ion-select-option value=\"1\">1 hour</ion-select-option>\n                            <ion-select-option value=\"2\">2 hours</ion-select-option>\n                            <ion-select-option value=\"3\">3 hours</ion-select-option>\n                            <ion-select-option value=\"4\">4 hours</ion-select-option>\n                            <ion-select-option value=\"5\">5 hours</ion-select-option>\n                            <ion-select-option value=\"6\">6 hours</ion-select-option>\n                            <ion-select-option value=\"8\">8 hours</ion-select-option>\n                            <ion-select-option value=\"10\">10 hours</ion-select-option>\n                            <ion-select-option value=\"12\">12 hours</ion-select-option>\n                            <ion-select-option *ngIf=\"isAdmin\" value=\"24\">24 hours</ion-select-option>\n                        </ion-select>\n                    </div>\n\n                    <div class=\"period-start ion-hide-md-down\">\n                        <input (change)=\"onPeriodEndChange($event)\"\n                               [disabled]=\"!toggleCumulative\"\n                               [value]=\"periodEndAsString\"\n                               class=\"datetime-input\"\n                               type=\"datetime-local\">\n                    </div>\n\n                    <div class=\"toggle-cumulative\">\n                        <ion-label [class.text-primary]=\"toggleCumulative\">\n                            {{ toggleCumulative ? 'Cumulative' : 'Granular' }}\n                        </ion-label>\n                        <ion-toggle (ionChange)=\"toggleCumulativeChanged($event)\"\n                                    [(ngModel)]=\"toggleCumulative\"\n                                    [checked]=\"toggleCumulative\">\n                        </ion-toggle>\n                    </div>\n                </div>\n\n                <!-- Hidden label for change detection (uncomment to debug)\n                <div class=\"hidden-label\">{{ onChangeDetectionTest(rainNode) }}</div>\n                -->\n            </div>\n\n            <!-- Historical map section -->\n            <div *ngIf=\"toggleHistory\" class=\"period-controls\">\n                <raain-date-dynamic (changedDate)=\"onDateChangeInCount($event)\"\n                                    [currentHeight]=\"300\"\n                                    [fetchData]=\"fetchDataWrapper\"\n                                    [points]=\"countPoints\">\n                </raain-date-dynamic>\n            </div>\n        </ion-card-content>\n    </ion-card>\n\n    <!-- Map performance -->\n    <ion-grid class=\"map-performance\">\n        <ion-row id=\"progressAndRefresh\">\n            <ion-col class=\"provider-selection\" size=\"12\" size-md=\"6\">\n                <ion-button (click)=\"openQualityModal()\" class=\"quality-info-button\" fill=\"clear\">\n                    {{ refreshManager.rainComputationMapVersion }}\n                    <ion-icon name=\"help-circle-outline\" slot=\"end\"></ion-icon>\n                </ion-button>\n                <div *ngIf=\"availableProviders.length > 0 || availableTimeSteps.length > 0\" class=\"selection-row\">\n                    <ion-select (ionChange)=\"onProviderChanged($event)\"\n                                [value]=\"selectedProvider\"\n                                interface=\"popover\"\n                                label=\"Provider\"\n                                placeholder=\"Select Provider\">\n                        <ion-select-option *ngFor=\"let provider of availableProviders\" [value]=\"provider\">\n                            {{ provider }}\n                        </ion-select-option>\n                    </ion-select>\n\n                    <ion-select (ionChange)=\"onTimeStepChanged($event)\"\n                                [value]=\"selectedTimeStep\"\n                                interface=\"popover\"\n                                label=\"Time Step\"\n                                placeholder=\"Select Time Step\">\n                        <ion-select-option *ngFor=\"let step of availableTimeSteps\" [value]=\"step\">\n                            {{ step }} min\n                        </ion-select-option>\n                    </ion-select>\n                </div>\n            </ion-col>\n            <ion-col class=\"ion-text-right\" size=\"12\" size-md=\"6\">\n                <ion-label class=\"ion-margin-end\">\n                            <span *ngIf=\"percentOfComputations\">\n                                {{ percentOfComputations }}% Images\n                                <i *ngIf=\"countsPeriod.progress\" class=\"progress-indicator\">\n                                    In Progress: {{ countsPeriod.progress }}...\n                                </i>\n                            </span>\n                    <span *ngIf=\"!percentOfComputations\">\n                                No image available\n                            </span>\n\n                </ion-label>\n\n                <ion-button (click)=\"refreshMap()\" [disabled]=\"refreshInProgress\" class=\"refresh-button\">\n                    Refresh Map\n                </ion-button>\n            </ion-col>\n        </ion-row>\n\n        <!-- status update row -->\n        <ion-row>\n            <!-- Progress col -->\n            <ion-progress-bar\n                    [buffer]=\"(countsPeriod.progress / ((timeframeDates?.length || 10) +3))+0.01\"\n                    [style.visibility]=\"refreshInProgress ? 'visible' : 'hidden'\"\n                    [value]=\"countsPeriod.progress / ((timeframeDates?.length || 10) +3)\"\n                    color=\"primary\">\n            </ion-progress-bar>\n\n            <!-- Error col -->\n            <ion-col (click)=\"showFullError = !showFullError\" *ngIf=\"refreshManager.lastError\" class=\"error-row\"\n                     size=\"12\">\n                <div class=\"error-content\">\n                    <ion-icon class=\"error-icon\" name=\"warning-outline\"></ion-icon>\n                    <span [class.expanded]=\"showFullError\" class=\"error-text\">\n                        {{ showFullError ? refreshManager.lastError : truncatedError }}\n                    </span>\n                    <ion-icon [name]=\"showFullError ? 'chevron-up' : 'chevron-down'\" class=\"error-caret\"></ion-icon>\n                </div>\n            </ion-col>\n        </ion-row>\n    </ion-grid>\n\n    <!-- Map section -->\n    <ion-card class=\"map-card\">\n        <ion-card-content class=\"map-content\">\n            <ion-grid>\n                <ion-row *ngIf=\"toggleMap && percentOfImages\">\n                    <!-- Map component -->\n                    <ion-col class=\"map-column\" size-lg=\"7\" size-md=\"12\">\n                        <div class=\"map-container\">\n                            <raain-map #raainMapRef\n                                       (changedDate)=\"onDateChangeInMap($event)\"\n                                       (changedSum)=\"onSumChangeInMap($event)\"\n                                       (selectedMarker)=\"onGaugeSelectInMap($event)\"\n                                       [coordinates]=\"coordinates\"\n                                       [cumulativeDurationInMinutes]=\"cumulativeDurationInMinutes\"\n                                       [currentHeight]=\"500\"\n                                       [defaultDate]=\"dateShown\"\n                                       [markers]=\"{\n                                        borders,\n                                        gauges: compareManager.gaugesInMap,\n                                        gaugesInCompare: compareManager.gaugesInCompare,\n                                        selectedGauges: compareManager.selectedGauges,\n                                        pixels: compareManager.selectedPixels,\n                                        pixelsSolution: compareManager.pixelsSolutions?.length ? compareManager.pixelsSolutions[0] : [],\n                                        speeds: compareManager.speeds\n                                    }\"\n                                       [showCumulative]=\"toggleCumulative\"\n                                       [showVisiblePixelMarkers]=\"showPixelMarkers\"\n                                       [sumFn]=\"refreshManager.sumFn\"\n                                       [sumValues]=\"refreshManager.sumValues\"\n                                       [timeframeContainers]=\"timeframeContainers\"\n                                       [timeframeDates]=\"timeframeDates\">\n                            </raain-map>\n                        </div>\n\n                        <div class=\"data-column\">\n                            <!-- Technical details (collapsible for cleaner UI) -->\n                            <details class=\"technical-details\">\n                                <summary>Image Details</summary>\n                                <div class=\"details-content\">\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Computed:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapDoneDate | date:'yyyy-MM-dd HH:mm' }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Version:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapVersion }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Launched by:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapLaunchedBy }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Time spent:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapTimeSpentInMs }}\n                                            ms</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Date:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapDate?.toISOString() }}\n                                            | {{ refreshManager.rainComputationMapDate | date:'yyyy-MM-dd HH:mm' }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Water in the map:</span>\n                                        <span class=\"detail-value\">{{ sumDetails }}</span>\n                                        <ion-toggle\n                                                (ionChange)=\"onTogglePixelMarkers()\"\n                                                [(ngModel)]=\"showPixelMarkers\"\n                                                style=\"margin-left: 8px; transform: scale(0.7);\">\n                                        </ion-toggle>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Source DBZ min:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapOriginalMin }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Source DBZ max:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapOriginalMax }}</span>\n                                    </div>\n                                </div>\n                            </details>\n                        </div>\n                    </ion-col>\n\n                    <!-- Data panel -->\n                    <ion-col *ngIf=\"!!compareManager.compareVersion\" class=\"data-column\" size-lg=\"5\" size-md=\"12\">\n                        <div class=\"data-panel\">\n                            <!-- Compare stack component -->\n                            <div class=\"compare-stack\">\n                                <raain-compare-stack\n                                        (selectedPoint)=\"onGaugeSelectInCompare($event)\"\n                                        [compareManager]=\"compareManager\"\n                                        [cumulative]=\"toggleCumulative\">\n                                </raain-compare-stack>\n                            </div>\n\n                            <!-- Technical details (collapsible for cleaner UI) -->\n                            <details class=\"technical-details\">\n                                <summary>Compare Details</summary>\n                                <div class=\"details-content\">\n                                    <div [ngClass]=\"{'warning': refreshManager.rainComputationMapDoneDate?.getTime() > compareManager.currentQualityDoneDate?.getTime() + 60000}\"\n                                         class=\"detail-row\">\n                                        <span class=\"detail-label\">Computed:</span>\n                                        <span class=\"detail-value\">{{ compareManager.currentQualityDoneDate | date:'yyyy-MM-dd HH:mm' }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Version:</span>\n                                        <span class=\"detail-value\">{{ compareManager.compareVersion }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Launched by:</span>\n                                        <span class=\"detail-value\">{{ compareManager.currentQualityLaunchedBy }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Time spent:</span>\n                                        <span class=\"detail-value\">{{ compareManager.currentQualityTimeSpentInMs }}\n                                            ms</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Gauges:</span>\n                                        <span class=\"detail-value\">{{ compareManager.gaugesInCompare.length }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Points:</span>\n                                        <span class=\"detail-value\">{{ compareManager.globalComparePoints.length }}</span>\n                                    </div>\n                                </div>\n                            </details>\n                        </div>\n                    </ion-col>\n                </ion-row>\n                <ion-row>\n                    <!-- Bottom progress bar -->\n                    <ion-progress-bar *ngIf=\"refreshInProgress\"\n                                      [buffer]=\"(countsPeriod.progress / ((timeframeDates?.length || 10) +3))+0.01\"\n                                      [value]=\"countsPeriod.progress / ((timeframeDates?.length || 10) +3)\"\n                                      color=\"primary\">\n                    </ion-progress-bar>\n                </ion-row>\n            </ion-grid>\n        </ion-card-content>\n    </ion-card>\n\n    <!-- Gauge values section -->\n    <ion-card *ngIf=\"gaugeSelectedPoints.length && gaugeSelectedPoints[0].values.length\" class=\"gauge-card\">\n        <ion-card-header>\n            <ion-card-title>\n                <ion-icon name=\"analytics-outline\"></ion-icon>\n                Selected Gauge Data\n            </ion-card-title>\n        </ion-card-header>\n        <ion-card-content>\n            <raain-date-focus\n                    [currentHeight]=\"300\"\n                    [focusDate]=\"periodBegin\"\n                    [focusRange]=\"DateRange.DAY\"\n                    [points]=\"gaugeSelectedPoints\"\n                    [withoutAll]=\"true\">\n            </raain-date-focus>\n        </ion-card-content>\n    </ion-card>\n\n    <!-- Quality Performance Modal -->\n    <div (click)=\"closeQualityModal()\" *ngIf=\"showQualityModal\" class=\"quality-modal-overlay\">\n        <div (click)=\"$event.stopPropagation()\" class=\"quality-modal-content\">\n            <div class=\"quality-modal-header\">\n                <h2>Model Quality Performance</h2>\n                <ion-button (click)=\"closeQualityModal()\" fill=\"clear\">\n                    <ion-icon name=\"close-outline\"></ion-icon>\n                </ion-button>\n            </div>\n            <div class=\"quality-modal-body\">\n                <div *ngIf=\"qualityIndicatorsLoading\" class=\"quality-loading\">\n                    <ion-spinner name=\"crescent\"></ion-spinner>\n                    <span>Loading indicators...</span>\n                </div>\n                <div *ngIf=\"!qualityIndicatorsLoading && qualityIndicators.length === 0\" class=\"quality-empty\">\n                    No quality indicators available for this year.\n                </div>\n                <table *ngIf=\"!qualityIndicatorsLoading && qualityIndicators.length > 0\" class=\"quality-table\">\n                    <thead>\n                    <tr>\n                        <th>Model</th>\n                        <th>Compare</th>\n                        <th>Gauges</th>\n                        <th>Period</th>\n                        <th>Avg Quality</th>\n                        <th>Updated</th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <tr *ngFor=\"let indicator of qualityIndicators\">\n                        <td>{{ indicator.computingVersion }}</td>\n                        <td>{{ indicator.qualityVersion }}</td>\n                        <td>{{ indicator.provider }}<br>{{ indicator.timeStepInMinutes }} min</td>\n                        <td>{{ formatDate(indicator.startDate) }}<br>{{ formatDate(indicator.endDate) }}</td>\n                        <td>{{ indicator.averageQuality | number:'1.2-2' }}</td>\n                        <td>{{ formatDate(indicator.lastUpdatedAt) }}</td>\n                    </tr>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </div>\n\n</div>\n", styles: [".raain-details-container{max-width:var(--app-max-width);margin:0 auto;padding:0 0 24px}.raain-details-card{width:100%;margin-bottom:20px}.raain-details-card ion-card-header{border-bottom:1px solid rgba(var(--ion-color-medium-rgb),.2)}.raain-details-card ion-card-header ion-card-title{display:flex;align-items:center}.raain-details-card ion-card-header ion-card-title ion-icon{margin-right:8px;color:var(--ion-color-primary)}.node-info-card{background-color:var(--ion-color-light)}.node-info-card .node-header{display:flex;align-items:center}.node-info-card .node-header .node-status{margin-right:16px}.node-info-card .node-header .node-status ion-icon{font-size:24px}.node-info-card .node-header .node-titles{flex:1}.node-info-card .node-header .node-titles ion-card-title{margin:0;font-size:1.4rem;font-weight:600;color:var(--ion-color-dark)}.node-info-card .node-header .node-titles ion-card-subtitle{padding-left:0;margin:4px 0 0;font-size:.9rem;color:var(--ion-color-medium)}.count-map-card,.period-card{background-color:var(--ion-color-light)}.period-card ion-card-title{display:flex;align-items:center}.period-card ion-card-title ion-icon{margin-right:8px;color:var(--ion-color-primary);font-size:20px}.period-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;position:relative}.now-button{min-width:100px}#all-dates{display:flex;align-items:center;margin-left:auto}#all-dates .toggle-label{margin-right:8px;white-space:nowrap}.refresh-button ion-icon{margin-right:4px;color:var(--ion-color-light)}.provider-selection{display:flex;align-items:center}.quality-info-button{--padding-start: 8px;--padding-end: 8px;font-size:.85rem;color:var(--ion-color-medium)}.quality-info-button ion-icon{font-size:18px;margin-left:4px}.selection-row{display:flex;flex-direction:row;align-items:center;gap:12px}.selection-row ion-select{flex:0 0 auto;min-width:100px;margin-bottom:0;padding:4px 8px;border:1px solid rgba(var(--ion-color-medium-rgb),.3);border-radius:var(--ion-border-radius);background-color:var(--ion-color-light)}.period-start,.period-duration{display:flex;align-items:center}.toggle-cumulative{display:flex;align-items:center;gap:8px;margin-left:auto}.toggle-cumulative .text-primary{color:var(--ion-color-primary);font-weight:600}.hidden-label{display:none}.datetime-input,#periodDuration,.duration-select{padding:8px 12px;border:1px solid rgba(var(--ion-color-medium-rgb),.3);border-radius:var(--ion-border-radius);background-color:var(--ion-color-light);font-family:var(--ion-font-family)}.datetime-input:focus,#periodDuration:focus,.duration-select:focus{outline:none;border-color:var(--ion-color-primary)}#periodDuration,.duration-select{min-width:150px}.gauge-card{background-color:var(--ion-color-light)}.gauge-card ion-card-title{display:flex;align-items:center}.gauge-card ion-card-title ion-icon{margin-right:8px;color:var(--ion-color-primary);font-size:20px}.error-row{cursor:pointer;background-color:rgba(var(--ion-color-danger-rgb),.1);border-left:3px solid var(--ion-color-danger);margin-top:8px;border-radius:4px;transition:background-color .2s ease}.error-row:hover{background-color:rgba(var(--ion-color-danger-rgb),.15)}.error-row .error-content{display:flex;align-items:flex-start;padding:8px 12px;gap:8px}.error-row .error-icon{color:var(--ion-color-danger);font-size:18px;flex-shrink:0;margin-top:2px}.error-row .error-text{flex:1;color:var(--ion-color-danger-shade);font-size:.9rem;word-break:break-word}.error-row .error-text.expanded{white-space:pre-wrap}.error-row .error-caret{color:var(--ion-color-danger);font-size:16px;flex-shrink:0;margin-top:2px}raain-compare-stack{width:100%;display:block}@media (max-width: 768px){.period-row{flex-direction:row;justify-content:space-between;align-items:center}#all-dates{margin-left:auto;padding-left:8px}#all-dates .toggle-label{font-size:.9rem}.map-header{flex-direction:row;justify-content:space-between;align-items:center;gap:16px}}.quality-modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999}.quality-modal-content{background-color:var(--ion-background-color, #fff);border-radius:12px;width:95%;max-width:900px;max-height:80vh;overflow:auto;box-shadow:0 4px 24px #0003}.quality-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(var(--ion-color-medium-rgb),.2)}.quality-modal-header h2{margin:0;font-size:1.25rem;font-weight:600;color:var(--ion-color-dark)}.quality-modal-header ion-button{--padding-start: 8px;--padding-end: 8px}.quality-modal-body{padding:20px}.quality-table{width:100%;border-collapse:collapse;margin-top:16px;table-layout:fixed}.quality-table th,.quality-table td{width:16.66%;padding:12px 16px;text-align:center;vertical-align:top;border-bottom:1px solid rgba(var(--ion-color-medium-rgb),.2)}.quality-table th{background-color:rgba(var(--ion-color-primary-rgb),.1);font-weight:600;color:var(--ion-color-dark)}.quality-table td{color:var(--ion-color-dark-tint);font-size:.7rem}.quality-table tbody tr:hover{background-color:rgba(var(--ion-color-primary-rgb),.05)}.quality-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--ion-color-medium)}.quality-loading ion-spinner{margin-bottom:12px}.quality-empty{text-align:center;padding:40px 20px;color:var(--ion-color-medium);font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i4.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i4.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i4.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i4.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i4.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i4.IonRow, selector: "ion-row" }, { kind: "component", type: i4.IonSelect, selector: "ion-select", inputs: ["cancelText", "compareWith", "disabled", "interface", "interfaceOptions", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "value"] }, { kind: "component", type: i4.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: i4.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i4.IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "mode", "name", "value"] }, { kind: "directive", type: i4.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i4.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: RaainMapComponent, selector: "raain-map", inputs: ["coordinates", "markers", "timeframeContainers", "autoplay", "showMarkers", "showSpeedMarkers", "showVisiblePixelMarkers", "showCumulative", "cumulativeDurationInMinutes", "currentHeight", "timeframeDates", "defaultDate", "sumValues", "sumFn"], outputs: ["selectedMarker", "changedDate", "changedSum"] }, { kind: "component", type: RaainCompareStackComponent, selector: "raain-compare-stack", inputs: ["compareManager", "currentHeight", "cumulative"], outputs: ["selectedPoint"] }, { kind: "component", type: RaainDateFocusComponent, selector: "raain-date-focus", inputs: ["points", "focusDate", "focusRange", "withoutAll", "currentHeight"] }, { kind: "component", type: RaainDateDynamicComponent, selector: "raain-date-dynamic", inputs: ["points", "focusDate", "focusRange", "withoutAll", "currentHeight", "fetchData"], outputs: ["changedDate"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RaainDetailsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'raain-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Main content container -->\n<div *ngIf=\"rainNode\" class=\"raain-details-container\">\n\n    <!-- Period selection section -->\n    <ion-card class=\"period-card\">\n        <ion-card-content>\n            <div class=\"period-controls\">\n                <div class=\"period-row\">\n\n                    <ion-button (click)=\"toggleHistory = !toggleHistory; onEnableCountHistoryTab(rainNode)\"\n                                fill=\"outline\">\n                        <ion-icon name=\"calendar-clear-outline\" slot=\"start\"></ion-icon>\n                        <ion-icon [name]=\"toggleHistory ? 'chevron-down' : 'chevron-forward'\" slot=\"end\"></ion-icon>\n                    </ion-button>\n\n                    <div class=\"period-start ion-hide-md-down\">\n                        <input (change)=\"onPeriodBeginChange($event)\"\n                               [disabled]=\"toggleCumulative\"\n                               [value]=\"periodBeginAsString\"\n                               class=\"datetime-input\"\n                               type=\"datetime-local\">\n                    </div>\n\n                    <div class=\"period-duration ion-hide-md-down\">\n                        <ion-select (ionDismiss)=\"onPeriodDurationChange($event)\"\n                                    [(ngModel)]=\"periodDurationAsString\"\n                                    class=\"duration-select\"\n                                    id=\"periodDuration\"\n                                    interface=\"popover\">\n                            <ion-select-option value=\"0.25\">15 minutes</ion-select-option>\n                            <ion-select-option value=\"0.5\">30 minutes</ion-select-option>\n                            <ion-select-option value=\"1\">1 hour</ion-select-option>\n                            <ion-select-option value=\"2\">2 hours</ion-select-option>\n                            <ion-select-option value=\"3\">3 hours</ion-select-option>\n                            <ion-select-option value=\"4\">4 hours</ion-select-option>\n                            <ion-select-option value=\"5\">5 hours</ion-select-option>\n                            <ion-select-option value=\"6\">6 hours</ion-select-option>\n                            <ion-select-option value=\"8\">8 hours</ion-select-option>\n                            <ion-select-option value=\"10\">10 hours</ion-select-option>\n                            <ion-select-option value=\"12\">12 hours</ion-select-option>\n                            <ion-select-option *ngIf=\"isAdmin\" value=\"24\">24 hours</ion-select-option>\n                        </ion-select>\n                    </div>\n\n                    <div class=\"period-start ion-hide-md-down\">\n                        <input (change)=\"onPeriodEndChange($event)\"\n                               [disabled]=\"!toggleCumulative\"\n                               [value]=\"periodEndAsString\"\n                               class=\"datetime-input\"\n                               type=\"datetime-local\">\n                    </div>\n\n                    <div class=\"toggle-cumulative\">\n                        <ion-label [class.text-primary]=\"toggleCumulative\">\n                            {{ toggleCumulative ? 'Cumulative' : 'Granular' }}\n                        </ion-label>\n                        <ion-toggle (ionChange)=\"toggleCumulativeChanged($event)\"\n                                    [(ngModel)]=\"toggleCumulative\"\n                                    [checked]=\"toggleCumulative\">\n                        </ion-toggle>\n                    </div>\n                </div>\n\n                <!-- Hidden label for change detection (uncomment to debug)\n                <div class=\"hidden-label\">{{ onChangeDetectionTest(rainNode) }}</div>\n                -->\n            </div>\n\n            <!-- Historical map section -->\n            <div *ngIf=\"toggleHistory\" class=\"period-controls\">\n                <raain-date-dynamic (changedDate)=\"onDateChangeInCount($event)\"\n                                    [currentHeight]=\"300\"\n                                    [fetchData]=\"fetchDataWrapper\"\n                                    [points]=\"countPoints\">\n                </raain-date-dynamic>\n            </div>\n        </ion-card-content>\n    </ion-card>\n\n    <!-- Map performance -->\n    <ion-grid class=\"map-performance\">\n        <ion-row id=\"progressAndRefresh\">\n            <ion-col class=\"provider-selection\" size=\"12\" size-md=\"6\">\n                <ion-button (click)=\"openQualityModal()\" class=\"quality-info-button\" fill=\"clear\">\n                    {{ refreshManager.rainComputationMapVersion }}\n                    <ion-icon name=\"help-circle-outline\" slot=\"end\"></ion-icon>\n                </ion-button>\n                <div *ngIf=\"availableProviders.length > 0 || availableTimeSteps.length > 0\" class=\"selection-row\">\n                    <ion-select (ionChange)=\"onProviderChanged($event)\"\n                                [value]=\"selectedProvider\"\n                                interface=\"popover\"\n                                label=\"Provider\"\n                                placeholder=\"Select Provider\">\n                        <ion-select-option *ngFor=\"let provider of availableProviders\" [value]=\"provider\">\n                            {{ provider }}\n                        </ion-select-option>\n                    </ion-select>\n\n                    <ion-select (ionChange)=\"onTimeStepChanged($event)\"\n                                [value]=\"selectedTimeStep\"\n                                interface=\"popover\"\n                                label=\"Time Step\"\n                                placeholder=\"Select Time Step\">\n                        <ion-select-option *ngFor=\"let step of availableTimeSteps\" [value]=\"step\">\n                            {{ step }} min\n                        </ion-select-option>\n                    </ion-select>\n                </div>\n            </ion-col>\n            <ion-col class=\"ion-text-right\" size=\"12\" size-md=\"6\">\n                <ion-label class=\"ion-margin-end\">\n                            <span *ngIf=\"percentOfComputations\">\n                                {{ percentOfComputations }}% Images\n                                <i *ngIf=\"countsPeriod.progress\" class=\"progress-indicator\">\n                                    In Progress: {{ countsPeriod.progress }}...\n                                </i>\n                            </span>\n                    <span *ngIf=\"!percentOfComputations\">\n                                No image available\n                            </span>\n\n                </ion-label>\n\n                <ion-button (click)=\"refreshMap()\" [disabled]=\"refreshInProgress\" class=\"refresh-button\">\n                    Refresh Map\n                </ion-button>\n            </ion-col>\n        </ion-row>\n\n        <!-- status update row -->\n        <ion-row>\n            <!-- Progress col -->\n            <ion-progress-bar\n                    [buffer]=\"(countsPeriod.progress / ((timeframeDates?.length || 10) +3))+0.01\"\n                    [style.visibility]=\"refreshInProgress ? 'visible' : 'hidden'\"\n                    [value]=\"countsPeriod.progress / ((timeframeDates?.length || 10) +3)\"\n                    color=\"primary\">\n            </ion-progress-bar>\n\n            <!-- Error col -->\n            <ion-col (click)=\"showFullError = !showFullError\" *ngIf=\"refreshManager.lastError\" class=\"error-row\"\n                     size=\"12\">\n                <div class=\"error-content\">\n                    <ion-icon class=\"error-icon\" name=\"warning-outline\"></ion-icon>\n                    <span [class.expanded]=\"showFullError\" class=\"error-text\">\n                        {{ showFullError ? refreshManager.lastError : truncatedError }}\n                    </span>\n                    <ion-icon [name]=\"showFullError ? 'chevron-up' : 'chevron-down'\" class=\"error-caret\"></ion-icon>\n                </div>\n            </ion-col>\n        </ion-row>\n    </ion-grid>\n\n    <!-- Map section -->\n    <ion-card class=\"map-card\">\n        <ion-card-content class=\"map-content\">\n            <ion-grid>\n                <ion-row *ngIf=\"toggleMap && percentOfImages\">\n                    <!-- Map component -->\n                    <ion-col class=\"map-column\" size-lg=\"7\" size-md=\"12\">\n                        <div class=\"map-container\">\n                            <raain-map #raainMapRef\n                                       (changedDate)=\"onDateChangeInMap($event)\"\n                                       (changedSum)=\"onSumChangeInMap($event)\"\n                                       (selectedMarker)=\"onGaugeSelectInMap($event)\"\n                                       [coordinates]=\"coordinates\"\n                                       [cumulativeDurationInMinutes]=\"cumulativeDurationInMinutes\"\n                                       [currentHeight]=\"500\"\n                                       [defaultDate]=\"dateShown\"\n                                       [markers]=\"{\n                                        borders,\n                                        gauges: compareManager.gaugesInMap,\n                                        gaugesInCompare: compareManager.gaugesInCompare,\n                                        selectedGauges: compareManager.selectedGauges,\n                                        pixels: compareManager.selectedPixels,\n                                        pixelsSolution: compareManager.pixelsSolutions?.length ? compareManager.pixelsSolutions[0] : [],\n                                        speeds: compareManager.speeds\n                                    }\"\n                                       [showCumulative]=\"toggleCumulative\"\n                                       [showVisiblePixelMarkers]=\"showPixelMarkers\"\n                                       [sumFn]=\"refreshManager.sumFn\"\n                                       [sumValues]=\"refreshManager.sumValues\"\n                                       [timeframeContainers]=\"timeframeContainers\"\n                                       [timeframeDates]=\"timeframeDates\">\n                            </raain-map>\n                        </div>\n\n                        <div class=\"data-column\">\n                            <!-- Technical details (collapsible for cleaner UI) -->\n                            <details class=\"technical-details\">\n                                <summary>Image Details</summary>\n                                <div class=\"details-content\">\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Computed:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapDoneDate | date:'yyyy-MM-dd HH:mm' }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Version:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapVersion }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Launched by:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapLaunchedBy }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Time spent:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapTimeSpentInMs }}\n                                            ms</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Date:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapDate?.toISOString() }}\n                                            | {{ refreshManager.rainComputationMapDate | date:'yyyy-MM-dd HH:mm' }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Water in the map:</span>\n                                        <span class=\"detail-value\">{{ sumDetails }}</span>\n                                        <ion-toggle\n                                                (ionChange)=\"onTogglePixelMarkers()\"\n                                                [(ngModel)]=\"showPixelMarkers\"\n                                                style=\"margin-left: 8px; transform: scale(0.7);\">\n                                        </ion-toggle>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Source DBZ min:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapOriginalMin }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Source DBZ max:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapOriginalMax }}</span>\n                                    </div>\n                                </div>\n                            </details>\n                        </div>\n                    </ion-col>\n\n                    <!-- Data panel -->\n                    <ion-col *ngIf=\"!!compareManager.compareVersion\" class=\"data-column\" size-lg=\"5\" size-md=\"12\">\n                        <div class=\"data-panel\">\n                            <!-- Compare stack component -->\n                            <div class=\"compare-stack\">\n                                <raain-compare-stack\n                                        (selectedPoint)=\"onGaugeSelectInCompare($event)\"\n                                        [compareManager]=\"compareManager\"\n                                        [cumulative]=\"toggleCumulative\">\n                                </raain-compare-stack>\n                            </div>\n\n                            <!-- Technical details (collapsible for cleaner UI) -->\n                            <details class=\"technical-details\">\n                                <summary>Compare Details</summary>\n                                <div class=\"details-content\">\n                                    <div [ngClass]=\"{'warning': refreshManager.rainComputationMapDoneDate?.getTime() > compareManager.currentQualityDoneDate?.getTime() + 60000}\"\n                                         class=\"detail-row\">\n                                        <span class=\"detail-label\">Computed:</span>\n                                        <span class=\"detail-value\">{{ compareManager.currentQualityDoneDate | date:'yyyy-MM-dd HH:mm' }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Version:</span>\n                                        <span class=\"detail-value\">{{ compareManager.compareVersion }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Launched by:</span>\n                                        <span class=\"detail-value\">{{ compareManager.currentQualityLaunchedBy }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Time spent:</span>\n                                        <span class=\"detail-value\">{{ compareManager.currentQualityTimeSpentInMs }}\n                                            ms</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Gauges:</span>\n                                        <span class=\"detail-value\">{{ compareManager.gaugesInCompare.length }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Points:</span>\n                                        <span class=\"detail-value\">{{ compareManager.globalComparePoints.length }}</span>\n                                    </div>\n                                </div>\n                            </details>\n                        </div>\n                    </ion-col>\n                </ion-row>\n                <ion-row>\n                    <!-- Bottom progress bar -->\n                    <ion-progress-bar *ngIf=\"refreshInProgress\"\n                                      [buffer]=\"(countsPeriod.progress / ((timeframeDates?.length || 10) +3))+0.01\"\n                                      [value]=\"countsPeriod.progress / ((timeframeDates?.length || 10) +3)\"\n                                      color=\"primary\">\n                    </ion-progress-bar>\n                </ion-row>\n            </ion-grid>\n        </ion-card-content>\n    </ion-card>\n\n    <!-- Gauge values section -->\n    <ion-card *ngIf=\"gaugeSelectedPoints.length && gaugeSelectedPoints[0].values.length\" class=\"gauge-card\">\n        <ion-card-header>\n            <ion-card-title>\n                <ion-icon name=\"analytics-outline\"></ion-icon>\n                Selected Gauge Data\n            </ion-card-title>\n        </ion-card-header>\n        <ion-card-content>\n            <raain-date-focus\n                    [currentHeight]=\"300\"\n                    [focusDate]=\"periodBegin\"\n                    [focusRange]=\"DateRange.DAY\"\n                    [points]=\"gaugeSelectedPoints\"\n                    [withoutAll]=\"true\">\n            </raain-date-focus>\n        </ion-card-content>\n    </ion-card>\n\n    <!-- Quality Performance Modal -->\n    <div (click)=\"closeQualityModal()\" *ngIf=\"showQualityModal\" class=\"quality-modal-overlay\">\n        <div (click)=\"$event.stopPropagation()\" class=\"quality-modal-content\">\n            <div class=\"quality-modal-header\">\n                <h2>Model Quality Performance</h2>\n                <ion-button (click)=\"closeQualityModal()\" fill=\"clear\">\n                    <ion-icon name=\"close-outline\"></ion-icon>\n                </ion-button>\n            </div>\n            <div class=\"quality-modal-body\">\n                <div *ngIf=\"qualityIndicatorsLoading\" class=\"quality-loading\">\n                    <ion-spinner name=\"crescent\"></ion-spinner>\n                    <span>Loading indicators...</span>\n                </div>\n                <div *ngIf=\"!qualityIndicatorsLoading && qualityIndicators.length === 0\" class=\"quality-empty\">\n                    No quality indicators available for this year.\n                </div>\n                <table *ngIf=\"!qualityIndicatorsLoading && qualityIndicators.length > 0\" class=\"quality-table\">\n                    <thead>\n                    <tr>\n                        <th>Model</th>\n                        <th>Compare</th>\n                        <th>Gauges</th>\n                        <th>Period</th>\n                        <th>Avg Quality</th>\n                        <th>Updated</th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <tr *ngFor=\"let indicator of qualityIndicators\">\n                        <td>{{ indicator.computingVersion }}</td>\n                        <td>{{ indicator.qualityVersion }}</td>\n                        <td>{{ indicator.provider }}<br>{{ indicator.timeStepInMinutes }} min</td>\n                        <td>{{ formatDate(indicator.startDate) }}<br>{{ formatDate(indicator.endDate) }}</td>\n                        <td>{{ indicator.averageQuality | number:'1.2-2' }}</td>\n                        <td>{{ formatDate(indicator.lastUpdatedAt) }}</td>\n                    </tr>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </div>\n\n</div>\n", styles: [".raain-details-container{max-width:var(--app-max-width);margin:0 auto;padding:0 0 24px}.raain-details-card{width:100%;margin-bottom:20px}.raain-details-card ion-card-header{border-bottom:1px solid rgba(var(--ion-color-medium-rgb),.2)}.raain-details-card ion-card-header ion-card-title{display:flex;align-items:center}.raain-details-card ion-card-header ion-card-title ion-icon{margin-right:8px;color:var(--ion-color-primary)}.node-info-card{background-color:var(--ion-color-light)}.node-info-card .node-header{display:flex;align-items:center}.node-info-card .node-header .node-status{margin-right:16px}.node-info-card .node-header .node-status ion-icon{font-size:24px}.node-info-card .node-header .node-titles{flex:1}.node-info-card .node-header .node-titles ion-card-title{margin:0;font-size:1.4rem;font-weight:600;color:var(--ion-color-dark)}.node-info-card .node-header .node-titles ion-card-subtitle{padding-left:0;margin:4px 0 0;font-size:.9rem;color:var(--ion-color-medium)}.count-map-card,.period-card{background-color:var(--ion-color-light)}.period-card ion-card-title{display:flex;align-items:center}.period-card ion-card-title ion-icon{margin-right:8px;color:var(--ion-color-primary);font-size:20px}.period-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;position:relative}.now-button{min-width:100px}#all-dates{display:flex;align-items:center;margin-left:auto}#all-dates .toggle-label{margin-right:8px;white-space:nowrap}.refresh-button ion-icon{margin-right:4px;color:var(--ion-color-light)}.provider-selection{display:flex;align-items:center}.quality-info-button{--padding-start: 8px;--padding-end: 8px;font-size:.85rem;color:var(--ion-color-medium)}.quality-info-button ion-icon{font-size:18px;margin-left:4px}.selection-row{display:flex;flex-direction:row;align-items:center;gap:12px}.selection-row ion-select{flex:0 0 auto;min-width:100px;margin-bottom:0;padding:4px 8px;border:1px solid rgba(var(--ion-color-medium-rgb),.3);border-radius:var(--ion-border-radius);background-color:var(--ion-color-light)}.period-start,.period-duration{display:flex;align-items:center}.toggle-cumulative{display:flex;align-items:center;gap:8px;margin-left:auto}.toggle-cumulative .text-primary{color:var(--ion-color-primary);font-weight:600}.hidden-label{display:none}.datetime-input,#periodDuration,.duration-select{padding:8px 12px;border:1px solid rgba(var(--ion-color-medium-rgb),.3);border-radius:var(--ion-border-radius);background-color:var(--ion-color-light);font-family:var(--ion-font-family)}.datetime-input:focus,#periodDuration:focus,.duration-select:focus{outline:none;border-color:var(--ion-color-primary)}#periodDuration,.duration-select{min-width:150px}.gauge-card{background-color:var(--ion-color-light)}.gauge-card ion-card-title{display:flex;align-items:center}.gauge-card ion-card-title ion-icon{margin-right:8px;color:var(--ion-color-primary);font-size:20px}.error-row{cursor:pointer;background-color:rgba(var(--ion-color-danger-rgb),.1);border-left:3px solid var(--ion-color-danger);margin-top:8px;border-radius:4px;transition:background-color .2s ease}.error-row:hover{background-color:rgba(var(--ion-color-danger-rgb),.15)}.error-row .error-content{display:flex;align-items:flex-start;padding:8px 12px;gap:8px}.error-row .error-icon{color:var(--ion-color-danger);font-size:18px;flex-shrink:0;margin-top:2px}.error-row .error-text{flex:1;color:var(--ion-color-danger-shade);font-size:.9rem;word-break:break-word}.error-row .error-text.expanded{white-space:pre-wrap}.error-row .error-caret{color:var(--ion-color-danger);font-size:16px;flex-shrink:0;margin-top:2px}raain-compare-stack{width:100%;display:block}@media (max-width: 768px){.period-row{flex-direction:row;justify-content:space-between;align-items:center}#all-dates{margin-left:auto;padding-left:8px}#all-dates .toggle-label{font-size:.9rem}.map-header{flex-direction:row;justify-content:space-between;align-items:center;gap:16px}}.quality-modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999}.quality-modal-content{background-color:var(--ion-background-color, #fff);border-radius:12px;width:95%;max-width:900px;max-height:80vh;overflow:auto;box-shadow:0 4px 24px #0003}.quality-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(var(--ion-color-medium-rgb),.2)}.quality-modal-header h2{margin:0;font-size:1.25rem;font-weight:600;color:var(--ion-color-dark)}.quality-modal-header ion-button{--padding-start: 8px;--padding-end: 8px}.quality-modal-body{padding:20px}.quality-table{width:100%;border-collapse:collapse;margin-top:16px;table-layout:fixed}.quality-table th,.quality-table td{width:16.66%;padding:12px 16px;text-align:center;vertical-align:top;border-bottom:1px solid rgba(var(--ion-color-medium-rgb),.2)}.quality-table th{background-color:rgba(var(--ion-color-primary-rgb),.1);font-weight:600;color:var(--ion-color-dark)}.quality-table td{color:var(--ion-color-dark-tint);font-size:.7rem}.quality-table tbody tr:hover{background-color:rgba(var(--ion-color-primary-rgb),.05)}.quality-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--ion-color-medium)}.quality-loading ion-spinner{margin-bottom:12px}.quality-empty{text-align:center;padding:40px 20px;color:var(--ion-color-medium);font-style:italic}\n"] }]
-        }], ctorParameters: function () { return [{ type: Storage }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { toggleAdmin: [{
-                type: Input
-            }], rainNode: [{
-                type: Input
-            }], compareManager: [{
-                type: Input
-            }], refreshManager: [{
-                type: Input
-            }], profileService: [{
-                type: Input
-            }], radarService: [{
-                type: Input
-            }] } });
-
-class Cache {
-    constructor() {
-        this._cache = {};
+    // === Count
+    async getCounts(rainId, options) {
+        try {
+            const params = {
+                range: options.range,
+                begin: options.periodBegin.toISOString(),
+            };
+            const queryString = BuildQueryString(params);
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
+                relativePath: rainId + '/counts' + (queryString ? '?' + queryString : ''),
+                verb: 'GET',
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains/',
+            });
+            const counts = resp.data.counts.result;
+            const percentImages = [], percentRainy = [], percentQ = [];
+            counts.forEach((c) => {
+                const label = this.setDateComponents(options.periodBegin, c);
+                percentImages.push(new XYType(c.percentImages ?? 0, NaN, NaN, label));
+                percentRainy.push(new XYType(c.percentRainy ?? 0, NaN, NaN, label));
+                percentQ.push(new XYType(c.percentQ ?? 0, NaN, NaN, label));
+            });
+            return {
+                percentImages,
+                percentRainy,
+                percentQ,
+                queueRunning: resp.data.queueRunning,
+            };
+        }
+        catch (e) {
+            await this.checkError(e);
+        }
+        return null;
     }
-    async getValue(key, asyncGetter) {
-        if (!Object.prototype.hasOwnProperty.call(this._cache, key)) {
-            console.log('cache not done: ', key);
-            this.putValue(key, await asyncGetter());
+    async getCountsHour(rainId, options) {
+        try {
+            const params = {
+                range: 'hour',
+                begin: options.periodBegin.toISOString(),
+            };
+            const queryString = BuildQueryString(params);
+            const resp = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
+                relativePath: rainId + '/counts' + (queryString ? '?' + queryString : ''),
+                verb: 'GET',
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains/',
+            });
+            const counts = resp.data.counts.result;
+            const percentImages = [], rainySum = [], rainyCount = [];
+            counts.forEach((c) => {
+                const label = this.setDateComponents(options.periodBegin, c);
+                percentImages.push(new XYType(c.percentImages ?? 0, NaN, NaN, label));
+                rainyCount.push(new XYType(c.rainyCount ?? 0, NaN, NaN, label));
+                rainySum.push(new XYType(c.rainySum ?? 0, NaN, NaN, label));
+            });
+            return {
+                percentImages,
+                rainyCount,
+                rainySum,
+                queueRunning: resp.data.queueRunning,
+            };
         }
-        else {
-            console.log('cache done: ', key);
+        catch (e) {
+            await this.checkError(e);
         }
-        return this._cache[key];
+        return null;
     }
-    putValue(key, value) {
-        this._cache[key] = value;
-        const length = Object.getOwnPropertyNames(this._cache).length;
-        if (length > 30) {
-            console.warn('Pb on cache size exceed ? do a restart ?', length);
+    // === Computing ===
+    async getRainComputationCumulativeCartesianMapById(rainId, rainComputationCumulativeId) {
+        const params = { format: 'cartesian-map' };
+        const queryString = BuildQueryString(params);
+        try {
+            const response = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
+                verb: 'GET',
+                relativePath: `${rainId}/cumulatives/${rainComputationCumulativeId}?${queryString}`,
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
+            });
+            if (!response.data['cartesian-map']) {
+                return null;
+            }
+            const rainComputationMap = new RainComputationMap(response.data['cartesian-map']);
+            rainComputationMap.name = rainId + '.rain.cartesian-map';
+            return rainComputationMap;
+        }
+        catch (e) {
+            await this.checkError(e);
         }
+        return null;
     }
-}
-Cache.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Cache, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-Cache.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Cache, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Cache, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class FidjStorageNode {
-    constructor() {
-        this.radars = [];
-        this.rains = [];
-        this.gauges = [];
-        this.events = [];
-        this.infos = {};
-    }
-    static getEmptyNode() {
-        return new FidjStorageNode();
-    }
-    static getDemoNode() {
-        const demoNode = new FidjStorageNode();
-        const link = new Link('rain', 'https://demo/api/rains/2');
-        /*
-    demoNode.radars = [
-      new RadarNode({
-        id: '5efd04569cb1f4161bd69dc7',
-        name: 'demo radar A',
-        links: [link],
-        latitude: 48.774569,
-        longitude: 2.008407
-      }),
-      new RadarNode({
-        id: 'dr2',
-        name: 'demo radar B',
-        links: [link],
-        latitude: 0.11,
-        longitude: -0.753
-      }),
-      new RadarNode({
-        id: 'dr3',
-        name: 'demo radar C',
-        latitude: 0.13,
-        longitude: -0.753,
-        links: []
-      }),
-      new RadarNode({
-        id: 'dr4',
-        name: 'demo radar D',
-        latitude: 0.14,
-        longitude: -0.74,
-        links: []
-      })];
-    demoNode.rains = [
-      new RainNode({
-        id: '5efd04569cb1f4161bd69dc8',
-        name: 'Demo rain zone A',
-        links: [new Link('radar', 'https://demo/api/radars/5efcfe619cb1f4161bd69dc3')],
-        status: 0,
-        quality: 75,
-        latitude: 48.774569,
-        longitude: 2.008407
-      }),
-      new RainNode({
-        id: 'dz2',
-        name: 'Demo rain zone B',
-        radars: [demoNode.radars[0], demoNode.radars[1]],
-        status: 1,
-        quality: 50,
-        latitude: 48.774569,
-        longitude: 2.008407
-      }),
-      new RainNode({
-        id: 'dz3',
-        name: 'Demo rain zone C',
-        radars: [demoNode.radars[0], demoNode.radars[1]],
-        status: 2,
-        quality: 75,
-        latitude: 48.774569,
-        longitude: 2.008407
-      }),
-      new RainNode({
-        id: 'dz4',
-        name: 'Demo rain zone D',
-        radars: [demoNode.radars[0], demoNode.radars[1]],
-        status: 3,
-        quality: 95,
-        latitude: 48.774569,
-        longitude: 2.008407
-      })];
-
-    demoNode.gauges = [
-      new GaugeNode({
-        id: 'g1',
-        name: 'Gauge A',
-        latitude: 48.7748,
-        longitude: 2.28407,
-      }),
-      new GaugeNode({
-        id: 'g2',
-        name: 'Gauge B',
-        latitude: 48.874569,
-        longitude: 2.108407,
-      })];
-    demoNode.events = [{
-      id: 'e2',
-      title: 'Need support ?',
-      status: 0,
-      red: false,
-      description: 'This area is dedicated to support you and your team. Support is made on Radar or Rain quality, ' +
-        'or any feedback we can have about your production system. Our goal : improving your data.',
-      created: new Date(),
-      modified: new Date()
-    }];
-    demoNode.team = {
-      id: 'p1',
-      email: 'demo@demo.com',
-      name: 'demo guy',
-      description: 'the demo guy'
-    };
-
-     */
-        return demoNode;
-    }
-}
-class FidjStorageResult {
-}
-class FidjStorage {
-    constructor(storage) {
-        this.storage = storage;
-        this.node = FidjStorageNode.getEmptyNode();
-        this.fidjMetaResult = { data: new FidjStorageNode() };
-    }
-    async storeData(fidjService, data) {
-        this.node = JSON.parse(JSON.stringify(data));
-        this.fidjMetaResult.data = this.node;
-        if (this.isDemoMode) {
-            this.storage.set('fidjMetaResult', JSON.stringify(this.fidjMetaResult));
-            return;
-        }
-        await fidjService.put(this.fidjMetaResult);
-    }
-    async getRefreshedNodeCopy(fidjService) {
-        if (this.isDemoMode) {
-            const fidjMetaResult = this.storage.get('fidjMetaResult');
-            if (fidjMetaResult) {
-                this.fidjMetaResult = JSON.parse(fidjMetaResult);
-                this.node = this.fidjMetaResult.data;
-            }
-            return JSON.parse(JSON.stringify(this.node));
-        }
-        const firstDemoData = async () => {
-            this.node = FidjStorageNode.getDemoNode();
-            await this.storeData(fidjService, this.node);
-        };
-        await fidjService.sync(firstDemoData);
-        const fidjFindAllResults = await fidjService.findAll();
-        if (fidjFindAllResults && fidjFindAllResults.length > 0) {
-            if (fidjFindAllResults[0].data) {
-                this.fidjMetaResult = fidjFindAllResults[0];
-                this.node = this.fidjMetaResult.data;
-            }
-        }
-        return JSON.parse(JSON.stringify(this.node));
-    }
-    setDemoMode(isDemo) {
-        this.isDemoMode = isDemo;
-    }
-}
-
-class ProfileService {
-    constructor(storage, fidjService, httpClient, router) {
-        this.storage = storage;
-        this.fidjService = fidjService;
-        this.httpClient = httpClient;
-        this.router = router;
-        this.email = this.storage.get('raain-email');
-        this.asTeamId = this.storage.get('raain-asTeamId');
-        this.readyForSync = new BehaviorSubject(false);
-        this.roles = [];
-        this.fidjStorage = new FidjStorage(storage);
-        this.isDemoMode = false;
-    }
-    get isDemoMode() {
-        return this.isDemo;
-    }
-    set isDemoMode(mode) {
-        this.isDemo = mode ? mode : true;
-        this.fidjStorage.setDemoMode(this.isDemo);
-    }
-    get defaultUrlForAPI() {
-        return this.storage.get('raain-urlForAPI');
-    }
-    set defaultUrlForAPI(url) {
-        this.storage.set('raain-urlForAPI', url);
-    }
-    async refreshProfile() {
+    async getRainComputationCumulativeCumulativesMapById(rainId, rainComputationCumulativeId, cumulativeHours) {
+        const queryPath = `${rainId}/cumulatives/${rainComputationCumulativeId}/cumulative/${cumulativeHours}`;
         try {
-            this.nodeData = await this.fidjStorage.getRefreshedNodeCopy(this.fidjService);
-            this.setRoles(await this.fidjService.getRoles());
-            return this.nodeData;
+            const response = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
+                verb: 'GET',
+                relativePath: queryPath,
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
+            });
+            if (!response.data['cumulative']) {
+                return null;
+            }
+            const rainComputationMap = new RainComputationMap(response.data['cumulative']);
+            rainComputationMap.name = rainId + '.rain.cumulative-cumulative';
+            return rainComputationMap;
         }
         catch (e) {
             await this.checkError(e);
         }
+        return null;
     }
-    async isConnected() {
-        return this.fidjService.isConnected();
-    }
-    getEmail() {
-        return this.email ?? this.storage.get('raain-email', this.email);
-    }
-    setEmail(email) {
-        this.email = email;
-        this.storage.set('raain-email', this.email);
-    }
-    async logout(fidjKey, fidjProd) {
-        // this.storage.remove('raain-email');
-        if (!fidjKey) {
-            try {
-                await this.fidjService.loginInDemoMode();
-                this.readyForSync.next(true);
-            }
-            catch (err) {
-                console.error('initFidj catch pb: ', err);
-            }
-            return;
-        }
-        await this.fidjService.logout(true);
+    async getRainCumulativeCompareByDate(rainNode, rainComputationCumulativeId, date) {
+        const params = { date: date.toISOString() };
+        const queryString = BuildQueryString(params);
         try {
-            await this.fidjService.init(fidjKey, {
-                logLevel: LoggerLevelEnum.WARN,
-                crypto: false,
-                prod: fidjProd,
-                useDB: false,
+            const response = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
+                verb: 'GET',
+                relativePath: `${rainNode.id}/cumulatives/${rainComputationCumulativeId}/compares?${queryString}`,
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
             });
-            this.readyForSync.next(true);
-        }
-        catch (err) {
-            console.error('initFidj catch pb: ', err);
+            const qualityJson = response.data.qualities[0];
+            const rainComputationQuality = new RainComputationQuality(qualityJson);
+            rainComputationQuality.qualitySpeedMatrixContainer =
+                SpeedMatrixContainer.CreateFromJson(rainComputationQuality.qualitySpeedMatrixContainer);
+            return rainComputationQuality;
         }
-    }
-    async checkError(error) {
-        if (error.code === 401) {
-            console.warn('Pb on auth');
-            if (this.router.url.indexOf('login') < 0) {
-                try {
-                    await this.fidjService.logout();
-                }
-                catch (ignored) {
-                    // Ignore logout errors as we're redirecting to logout page anyway
-                }
-                return this.gotoLout();
-            }
+        catch (e) {
+            await this.checkError(e);
         }
+        return null;
     }
-    async gotoLout() {
+    async getRainCumulativeCumulativesCompareByDate(rainNode, rainComputationCumulativeId, date, cumulativeHours) {
+        const params = {
+            date: date.toISOString(),
+            cumulativeHours,
+        };
+        const queryString = BuildQueryString(params);
         try {
-            if (this.router.url.indexOf('login') > -1) {
-                return;
-            }
-            await this.router.navigateByUrl('/logout', {
-                skipLocationChange: true,
-                replaceUrl: true,
+            const response = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
+                verb: 'GET',
+                relativePath: `${rainNode.id}/cumulatives/${rainComputationCumulativeId}/compares?${queryString}`,
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
             });
+            const qualityJson = response.data.qualities[0];
+            const rainComputationQuality = new RainComputationQuality(qualityJson);
+            rainComputationQuality.qualitySpeedMatrixContainer =
+                SpeedMatrixContainer.CreateFromJson(rainComputationQuality.qualitySpeedMatrixContainer);
+            return rainComputationQuality;
         }
         catch (e) {
-            console.error('gotoLout error: ', e);
-        }
-    }
-    async gotoLogin() {
-        if (this.router.url.indexOf('login') > -1) {
-            return;
+            await this.checkError(e);
         }
-        // await this.router.navigateByUrl('/', {skipLocationChange: true});
-        await this.router.navigate(['/login']);
-    }
-    isLoggedIn() {
-        const loggedIn = this.fidjService.isLoggedIn();
-        console.log('isLoggedIn: ', loggedIn);
-        return loggedIn;
-    }
-    needsConnectionRefresh() {
-        return this.fidjService.needsRefresh();
-    }
-    async connectionRefresh() {
-        await this.fidjService.refresh();
-    }
-    async storeAll() {
-        return this.fidjStorage.storeData(this.fidjService, this.nodeData);
-    }
-    isAdmin() {
-        return this.roles.indexOf('admin') > -1;
+        return null;
     }
-    // === Notifications ===
-    async createNotification(rainId, message) {
-        const data = {
-            rain: rainId,
-            message,
-        };
+    async getRainProgress(rainId) {
         try {
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'notifications',
-                verb: 'POST',
-                defaultKeyUrl: this.defaultUrlForAPI + '/notifications',
-                data,
+            const queryPath = '' + rainId + '/progress';
+            const response = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
+                verb: 'GET',
+                relativePath: queryPath,
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
             });
-            return new EventNode(resp.data);
+            // return response.data.inProgress;
+            return response.data.inQueue;
         }
         catch (e) {
             await this.checkError(e);
         }
-        return null;
+        return 0;
     }
-    async getNotifications(rainId) {
+    async getIndicators(rainId) {
         try {
-            const params = { rain: rainId };
+            const params = {
+                cumulative: 'true',
+            };
             const queryString = BuildQueryString(params);
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'notifications',
+            const response = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
                 verb: 'GET',
-                relativePath: queryString ? '?' + queryString : '',
-                defaultKeyUrl: this.defaultUrlForAPI + '/notifications',
+                relativePath: rainId + '/indicators' + (queryString ? '?' + queryString : ''),
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
             });
-            return resp.data.notifications.map((n) => new EventNode(n));
+            return response.data;
         }
         catch (e) {
             await this.checkError(e);
         }
-        return null;
+        return { indicators: [] };
     }
-    async getAllNotifications() {
+    // GET /rains/:rainId/cumulatives - List available cumulative periods
+    async getCumulativePeriods(rainId, filters) {
         try {
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'notifications',
+            const params = {};
+            if (filters?.windowInMinutes !== undefined) {
+                params.windowInMinutes = filters.windowInMinutes;
+            }
+            if (filters?.provider) {
+                params.provider = filters.provider;
+            }
+            if (filters?.isReady !== undefined) {
+                params.isReady = filters.isReady;
+            }
+            if (filters?.forced !== undefined) {
+                params.forced = filters.forced;
+            }
+            const queryString = BuildQueryString(params);
+            const response = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
                 verb: 'GET',
-                defaultKeyUrl: this.defaultUrlForAPI + '/notifications',
+                relativePath: rainId + '/cumulatives' + (queryString ? '?' + queryString : ''),
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
             });
-            return resp.data.notifications.map((n) => new EventNode(n));
+            return response.data;
         }
         catch (e) {
             await this.checkError(e);
         }
-        return [];
+        return { periods: [], total: 0 };
     }
-    // === Teams ===
-    async getTeams() {
-        const teams = [];
-        const params = {};
-        const queryString = BuildQueryString(params);
+    // POST /rains/:rainId/cumulatives - Trigger cumulative computation
+    async createCumulativePeriod(rainId, params) {
         try {
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'teams',
-                verb: 'GET',
-                relativePath: queryString ? '?' + queryString : '',
-                defaultKeyUrl: this.defaultUrlForAPI + '/teams',
+            const body = {
+                periodBegin: params.periodBegin.toISOString(),
+                periodEnd: params.periodEnd.toISOString(),
+                provider: params.provider,
+                confName: params.confName || 'admin',
+                timeStepInMinutes: params.timeStepInMinutes || 5,
+            };
+            const response = await this.fidjService.sendOnEndpoint({
+                key: 'rains',
+                verb: 'POST',
+                relativePath: rainId + '/cumulatives',
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
+                data: body,
             });
-            for (const team of resp.data.teams) {
-                teams.push(new TeamNode(team));
-            }
+            return response.data;
         }
         catch (e) {
             await this.checkError(e);
         }
-        return teams;
+        return null;
     }
-    async getTeam(teamId) {
+    // === Gauges ===
+    async getGauge(gaugeId) {
         try {
             const resp = await this.fidjService.sendOnEndpoint({
-                key: 'teams',
+                key: 'gauges',
                 verb: 'GET',
-                relativePath: teamId,
-                defaultKeyUrl: this.defaultUrlForAPI + '/teams',
+                relativePath: gaugeId,
+                defaultKeyUrl: this.defaultUrlForAPI + '/gauges',
             });
-            return new TeamNode(resp.data);
+            return new GaugeNode(resp.data);
         }
         catch (e) {
             await this.checkError(e);
         }
-        return null;
     }
-    // === Radars ===
-    async getRadars(name) {
-        const radars = [];
-        const params = {};
-        if (name) {
-            params.name = name;
+    async getGauges(rainId, aroundLatLng, pageCount = 1) {
+        const baseParams = {
+            aroundLatLng: `${aroundLatLng.lat},${aroundLatLng.lng}`,
+            rainId,
+        };
+        if (this.asTeamId) {
+            baseParams.teamId = this.asTeamId;
         }
-        const queryString = BuildQueryString(params);
+        const gauges = [];
         try {
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'radars',
-                verb: 'GET',
-                relativePath: queryString ? '?' + queryString : '',
-                defaultKeyUrl: this.defaultUrlForAPI + '/radars',
-            });
-            for (const r of resp.data.radars) {
-                const radar = new RadarNode(r);
-                radars.push(radar);
+            for (let count = 1; count <= pageCount; count++) {
+                const params = { ...baseParams, page: count };
+                const queryString = BuildQueryString(params);
+                const resp = await this.fidjService.sendOnEndpoint({
+                    key: 'gauges',
+                    verb: 'GET',
+                    relativePath: queryString ? '?' + queryString : '',
+                    defaultKeyUrl: this.defaultUrlForAPI + '/gauges',
+                });
+                for (const gauge of resp.data.gauges) {
+                    gauges.push(new GaugeNodeFilter(gauge));
+                }
             }
         }
         catch (e) {
             await this.checkError(e);
         }
-        return radars;
+        return gauges;
     }
-    async getRadar(id) {
+    async getGaugeMeasures(gaugeId, begin, end) {
+        const params = {
+            begin: begin.toISOString(),
+            end: end.toISOString(),
+        };
+        const queryString = BuildQueryString(params);
+        const resp = await this.fidjService.sendOnEndpoint({
+            key: 'gauges',
+            verb: 'GET',
+            relativePath: gaugeId + '/measures' + (queryString ? '?' + queryString : ''),
+            defaultKeyUrl: this.defaultUrlForAPI + '/gauges',
+        });
+        const gaugeMeasures = [];
+        for (const gaugeMeasure of resp.data.gaugeMeasures) {
+            gaugeMeasures.push(new GaugeMeasure(gaugeMeasure));
+        }
+        return gaugeMeasures;
+    }
+    async getProviders(rainId) {
         try {
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'radars',
+            const response = await this.fidjService.sendOnEndpoint({
                 verb: 'GET',
-                relativePath: id,
-                defaultKeyUrl: this.defaultUrlForAPI + '/radars',
+                key: 'rains',
+                relativePath: rainId + '/providers',
+                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
             });
-            return new RadarNode(resp.data);
+            return {
+                providers: response.data.providers || [],
+                timeStepInMinutes: response.data.timeStepInMinutes || [5, 10, 15, 30, 60],
+            };
         }
         catch (e) {
-            await this.checkError(e);
+            console.error('getProviders error:', e);
+            return {
+                providers: [],
+                timeStepInMinutes: [5, 10, 15, 30, 60],
+            };
         }
-        return null;
     }
-    async putRadar(radarNode) {
-        const data = {
-            name: radarNode.name,
-        };
+    setRoles(roles) {
+        this.roles = roles;
+    }
+    setDateComponents(date, c) {
+        const dateToShow = new Date(date);
+        if (c.year !== undefined) {
+            dateToShow.setUTCFullYear(c.year);
+        }
+        if (c.month !== undefined) {
+            dateToShow.setUTCMonth(c.month - 1);
+        }
+        if (c.day !== undefined) {
+            dateToShow.setUTCDate(c.day);
+        }
+        if (c.hour !== undefined) {
+            dateToShow.setUTCHours(c.hour);
+        }
+        if (c.minute !== undefined) {
+            dateToShow.setUTCMinutes(c.minute);
+        }
+        return dateToShow.toISOString();
+    }
+}
+ProfileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProfileService, deps: [{ token: Storage }, { token: i2$1.FidjService }, { token: i3$1.HttpClient }, { token: i4$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+ProfileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProfileService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProfileService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: Storage }, { type: i2$1.FidjService }, { type: i3$1.HttpClient }, { type: i4$1.Router }]; } });
+
+class CumulativeSelectorComponent {
+    constructor(profileService, cdr) {
+        this.profileService = profileService;
+        this.cdr = cdr;
+        this.timeStepInMinutes = 5;
+        this.isAdmin = false;
+        this.periodSelected = new EventEmitter();
+        this.cancelled = new EventEmitter();
+        this.availablePeriods = [];
+        this.baseCumulatives = null;
+        this.loading = true;
+        this.creating = false;
+        this.creationProgress = '';
+        this.errorMessage = '';
+        this.coveragePercent = 0;
+        this.canCreateNew = false;
+        this.currentWindowMinutes = 0;
+        this.POLL_TIMEOUT_MS = 900000; // 900 seconds
+        this.POLL_INTERVAL_MS = 3000;
+    }
+    async ngOnInit() {
+        this.currentWindowMinutes = Math.round((this.currentPeriodEnd.getTime() - this.currentPeriodBegin.getTime()) / 60000);
+        await this.loadAvailablePeriods();
+    }
+    async loadAvailablePeriods() {
+        this.loading = true;
+        this.errorMessage = '';
+        this.cdr.markForCheck();
         try {
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'radars',
-                relativePath: radarNode.id,
-                verb: 'PUT',
-                data,
-                defaultKeyUrl: this.defaultUrlForAPI + '/radars/',
+            // Fetch all cumulative periods (admin sees all, non-admin sees only customer-launched)
+            const response = await this.profileService.getCumulativePeriods(this.rainId, {
+                provider: this.provider,
+                forced: this.isAdmin,
             });
-            return new RadarNode(resp.data);
+            // Filter for existing custom cumulatives (window > 0)
+            this.availablePeriods = response.periods.filter((p) => p.windowInMinutes > 0);
+            // Get base cumulatives (window = 0) to check coverage
+            this.baseCumulatives = response.periods.find((p) => p.windowInMinutes === 0);
+            this.calculateCoverage();
         }
         catch (e) {
-            await this.checkError(e);
+            this.errorMessage = 'Failed to load cumulative periods';
+            console.error('Error loading cumulative periods:', e);
         }
+        this.loading = false;
+        this.cdr.markForCheck();
     }
-    async getLonelyRadars(rains) {
+    calculateCoverage() {
+        if (!this.baseCumulatives) {
+            this.coveragePercent = 0;
+            this.canCreateNew = false;
+            return;
+        }
+        const baseBegin = new Date(this.baseCumulatives.periodBegin);
+        const baseEnd = new Date(this.baseCumulatives.periodEnd);
+        // Check if current period is within base coverage
+        const currentInRange = this.currentPeriodBegin >= baseBegin && this.currentPeriodEnd <= baseEnd;
+        if (!currentInRange) {
+            this.coveragePercent = 0;
+            this.canCreateNew = false;
+            return;
+        }
+        // Calculate expected number of base cumulatives needed
+        const expectedCount = Math.ceil(this.currentWindowMinutes / this.timeStepInMinutes);
+        // Check if enough base cumulatives exist
+        // We assume coverage is complete if count >= expected (simplified check)
+        if (this.baseCumulatives.count >= expectedCount) {
+            this.coveragePercent = 100;
+            this.canCreateNew = true;
+        }
+        else {
+            this.coveragePercent = Math.round((this.baseCumulatives.count / expectedCount) * 100);
+            this.canCreateNew = this.coveragePercent >= 100;
+        }
+    }
+    selectPeriod(period) {
+        this.periodSelected.emit({
+            periodBegin: new Date(period.periodBegin),
+            periodEnd: new Date(period.periodEnd),
+            windowInMinutes: period.windowInMinutes,
+        });
+    }
+    async createNewPeriod() {
+        if (!this.canCreateNew || this.creating) {
+            return;
+        }
+        this.creating = true;
+        this.creationProgress = 'Starting cumulative computation...';
+        this.errorMessage = '';
+        this.cdr.markForCheck();
         try {
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'radars',
-                verb: 'GET',
-                defaultKeyUrl: this.defaultUrlForAPI + '/radars',
+            // Trigger cumulative creation
+            const result = await this.profileService.createCumulativePeriod(this.rainId, {
+                periodBegin: this.currentPeriodBegin,
+                periodEnd: this.currentPeriodEnd,
+                provider: this.provider,
+                timeStepInMinutes: this.timeStepInMinutes,
             });
-            const lonelyRadars = [];
-            const radars = resp.data.radars;
-            radars.forEach((radar) => {
-                let found = false;
-                rains.forEach((rain) => {
-                    const rdId = rain.getLink(RadarNode.TYPE).getId();
-                    if (rdId === radar.id) {
-                        found = true;
-                    }
+            if (!result) {
+                throw new Error('Failed to trigger cumulative computation');
+            }
+            this.creationProgress = `Jobs queued. Polling for completion...`;
+            this.cdr.markForCheck();
+            // Poll for completion
+            const success = await this.pollForCompletion();
+            if (success) {
+                this.periodSelected.emit({
+                    periodBegin: this.currentPeriodBegin,
+                    periodEnd: this.currentPeriodEnd,
+                    windowInMinutes: this.currentWindowMinutes,
                 });
-                if (!found) {
-                    lonelyRadars.push(new RadarNode(radar));
-                }
-            });
-            return lonelyRadars;
+            }
+            else {
+                this.errorMessage = 'Timeout waiting for cumulative computation';
+            }
         }
         catch (e) {
-            await this.checkError(e);
+            this.errorMessage = `Error: ${e.message || 'Unknown error'}`;
+            console.error('Error creating cumulative:', e);
         }
-        return [];
+        this.creating = false;
+        this.cdr.markForCheck();
     }
-    async getRainTimeframe(rainId, begin, end, forced = false, provider = 'Raain', timeStepInMinutes = 10, windowInMinutes = 0) {
-        try {
-            const params = {
-                format: 'timeframeCumulative',
-                provider,
-                timeStepInMinutes: String(timeStepInMinutes),
-                begin: begin?.toISOString(),
-                end: end?.toISOString(),
-            };
-            if (forced) {
-                params.forced = 'true';
+    async pollForCompletion() {
+        const startTime = Date.now();
+        while (Date.now() - startTime < this.POLL_TIMEOUT_MS) {
+            try {
+                const progress = await this.profileService.getRainProgress(this.rainId);
+                if (progress === 0) {
+                    // Queue is empty, check if cumulative exists (admin sees all cumulatives)
+                    const response = await this.profileService.getCumulativePeriods(this.rainId, {
+                        provider: this.provider,
+                        windowInMinutes: this.currentWindowMinutes,
+                        forced: this.isAdmin,
+                    });
+                    const found = response.periods.find((p) => p.windowInMinutes === this.currentWindowMinutes);
+                    if (found) {
+                        return true;
+                    }
+                }
+                const elapsed = Math.round((Date.now() - startTime) / 1000);
+                this.creationProgress = `Computing... (${elapsed}s, queue: ${progress})`;
+                this.cdr.markForCheck();
+                await this.sleep(this.POLL_INTERVAL_MS);
+            }
+            catch (e) {
+                console.warn('Poll error:', e);
+                await this.sleep(this.POLL_INTERVAL_MS);
             }
-            params.windowInMinutes = String(windowInMinutes);
-            const queryString = BuildQueryString(params);
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'rains',
-                verb: 'GET',
-                relativePath: rainId + (queryString ? '?' + queryString : ''),
-                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
-            });
-            const rainNode = new RainNode(resp.data.timeframeCumulative);
-            rainNode.name += '.radar.timeframeCumulative';
-            return rainNode;
         }
-        catch (e) {
-            await this.checkError(e);
+        return false;
+    }
+    sleep(ms) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+    cancel() {
+        this.cancelled.emit();
+    }
+    formatPeriod(period) {
+        const begin = new Date(period.periodBegin);
+        const end = new Date(period.periodEnd);
+        return `${begin.toLocaleString()} → ${end.toLocaleString()}`;
+    }
+    formatWindow(minutes) {
+        if (minutes < 60) {
+            return `${minutes} min`;
         }
-        return null;
+        const hours = minutes / 60;
+        return hours === 1 ? '1 hour' : `${hours} hours`;
+    }
+}
+CumulativeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CumulativeSelectorComponent, deps: [{ token: ProfileService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CumulativeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CumulativeSelectorComponent, selector: "cumulative-selector", inputs: { rainId: "rainId", currentPeriodBegin: "currentPeriodBegin", currentPeriodEnd: "currentPeriodEnd", provider: "provider", timeStepInMinutes: "timeStepInMinutes", isAdmin: "isAdmin" }, outputs: { periodSelected: "periodSelected", cancelled: "cancelled" }, ngImport: i0, template: "<div class=\"cumulative-selector-overlay\">\n    <div class=\"cumulative-selector-modal\">\n        <div class=\"modal-header\">\n            <h2>Select Cumulative Period</h2>\n            <ion-button fill=\"clear\" (click)=\"cancel()\">\n                <ion-icon name=\"close\"></ion-icon>\n            </ion-button>\n        </div>\n\n        <div class=\"modal-content\">\n            <!-- Loading state -->\n            <div *ngIf=\"loading\" class=\"loading-state\">\n                <ion-spinner name=\"crescent\"></ion-spinner>\n                <p>Loading available periods...</p>\n            </div>\n\n            <!-- Error message -->\n            <div *ngIf=\"errorMessage\" class=\"error-message\">\n                <ion-icon name=\"warning-outline\"></ion-icon>\n                <span>{{ errorMessage }}</span>\n            </div>\n\n            <!-- Available periods list -->\n            <div *ngIf=\"!loading && availablePeriods.length > 0\" class=\"periods-section\">\n                <h3>Available Cumulative Periods</h3>\n                <ion-list>\n                    <ion-item *ngFor=\"let period of availablePeriods\"\n                              button\n                              (click)=\"selectPeriod(period)\"\n                              [disabled]=\"creating\">\n                        <ion-icon name=\"layers-outline\" slot=\"start\"></ion-icon>\n                        <ion-label>\n                            <h2>{{ formatWindow(period.windowInMinutes) }}</h2>\n                            <p>{{ formatPeriod(period) }}</p>\n                            <p class=\"count-info\">{{ period.count }} cumulative(s)</p>\n                        </ion-label>\n                        <ion-icon name=\"chevron-forward\" slot=\"end\"></ion-icon>\n                    </ion-item>\n                </ion-list>\n            </div>\n\n            <!-- No periods available -->\n            <div *ngIf=\"!loading && availablePeriods.length === 0\" class=\"no-periods\">\n                <ion-icon name=\"information-circle-outline\"></ion-icon>\n                <p>No cumulative periods available yet.</p>\n            </div>\n\n            <!-- Create new section (admin only) -->\n            <div *ngIf=\"!loading && isAdmin\" class=\"create-section\">\n                <h3>Create New Cumulative</h3>\n                <div class=\"create-info\">\n                    <p>\n                        <strong>Period:</strong>\n                        {{ currentPeriodBegin?.toLocaleString() }} \u2192 {{ currentPeriodEnd?.toLocaleString() }}\n                    </p>\n                    <p>\n                        <strong>Window:</strong> {{ formatWindow(currentWindowMinutes) }}\n                    </p>\n                    <p *ngIf=\"baseCumulatives\" class=\"coverage-info\"\n                       [class.coverage-ok]=\"coveragePercent >= 100\"\n                       [class.coverage-warn]=\"coveragePercent > 0 && coveragePercent < 100\"\n                       [class.coverage-error]=\"coveragePercent === 0\">\n                        <ion-icon [name]=\"coveragePercent >= 100 ? 'checkmark-circle' : 'alert-circle'\"></ion-icon>\n                        Base data coverage: {{ coveragePercent }}%\n                    </p>\n                    <p *ngIf=\"!baseCumulatives\" class=\"coverage-error\">\n                        <ion-icon name=\"alert-circle\"></ion-icon>\n                        No base cumulatives available\n                    </p>\n                </div>\n\n                <!-- Creation progress -->\n                <div *ngIf=\"creating\" class=\"creation-progress\">\n                    <ion-spinner name=\"crescent\"></ion-spinner>\n                    <span>{{ creationProgress }}</span>\n                </div>\n\n                <ion-button [disabled]=\"!canCreateNew || creating\"\n                            expand=\"block\"\n                            (click)=\"createNewPeriod()\">\n                    <ion-icon name=\"add-circle-outline\" slot=\"start\"></ion-icon>\n                    Create {{ formatWindow(currentWindowMinutes) }} Cumulative\n                </ion-button>\n\n                <p *ngIf=\"!canCreateNew && !creating\" class=\"create-hint\">\n                    Create is disabled because base 5-min cumulatives don't fully cover the selected period.\n                </p>\n            </div>\n        </div>\n\n        <div class=\"modal-footer\">\n            <ion-button fill=\"outline\" (click)=\"cancel()\" [disabled]=\"creating\">\n                Cancel\n            </ion-button>\n        </div>\n    </div>\n</div>\n", styles: [".cumulative-selector-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.cumulative-selector-modal{background:var(--ion-background-color, #fff);border-radius:12px;max-width:500px;width:90%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 4px 20px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--ion-border-color, #ddd)}.modal-header h2{margin:0;font-size:1.25rem;font-weight:600}.modal-header ion-button{--padding-start: 8px;--padding-end: 8px}.modal-content{flex:1;overflow-y:auto;padding:16px 20px}.loading-state{display:flex;flex-direction:column;align-items:center;padding:40px 0}.loading-state ion-spinner{margin-bottom:16px}.loading-state p{color:var(--ion-color-medium)}.error-message{display:flex;align-items:center;gap:8px;padding:12px;background:var(--ion-color-danger-tint);color:var(--ion-color-danger);border-radius:8px;margin-bottom:16px}.error-message ion-icon{font-size:1.25rem}.periods-section{margin-bottom:24px}.periods-section h3{font-size:1rem;font-weight:600;margin-bottom:12px;color:var(--ion-color-dark)}.periods-section ion-list{border-radius:8px;overflow:hidden}.periods-section ion-item{--padding-start: 12px;--padding-end: 12px}.periods-section ion-item ion-label h2{font-weight:500}.periods-section ion-item ion-label p{font-size:.85rem;color:var(--ion-color-medium)}.periods-section ion-item ion-label .count-info{font-size:.75rem;color:var(--ion-color-primary)}.no-periods{display:flex;flex-direction:column;align-items:center;padding:24px;text-align:center;color:var(--ion-color-medium)}.no-periods ion-icon{font-size:2rem;margin-bottom:8px}.create-section{border-top:1px solid var(--ion-border-color, #ddd);padding-top:16px}.create-section h3{font-size:1rem;font-weight:600;margin-bottom:12px;color:var(--ion-color-dark)}.create-section .create-info{background:var(--ion-color-light);padding:12px;border-radius:8px;margin-bottom:16px}.create-section .create-info p{margin:4px 0;font-size:.9rem}.create-section .coverage-info{display:flex;align-items:center;gap:6px}.create-section .coverage-info ion-icon{font-size:1.1rem}.create-section .coverage-ok{color:var(--ion-color-success)}.create-section .coverage-warn{color:var(--ion-color-warning)}.create-section .coverage-error{color:var(--ion-color-danger)}.create-section .creation-progress{display:flex;align-items:center;gap:12px;padding:16px;background:var(--ion-color-primary-tint);border-radius:8px;margin-bottom:16px}.create-section .creation-progress ion-spinner{--color: var(--ion-color-primary)}.create-section .creation-progress span{color:var(--ion-color-primary);font-size:.9rem}.create-section .create-hint{font-size:.8rem;color:var(--ion-color-medium);text-align:center;margin-top:8px}.modal-footer{padding:16px 20px;border-top:1px solid var(--ion-border-color, #ddd);display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i4.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CumulativeSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cumulative-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cumulative-selector-overlay\">\n    <div class=\"cumulative-selector-modal\">\n        <div class=\"modal-header\">\n            <h2>Select Cumulative Period</h2>\n            <ion-button fill=\"clear\" (click)=\"cancel()\">\n                <ion-icon name=\"close\"></ion-icon>\n            </ion-button>\n        </div>\n\n        <div class=\"modal-content\">\n            <!-- Loading state -->\n            <div *ngIf=\"loading\" class=\"loading-state\">\n                <ion-spinner name=\"crescent\"></ion-spinner>\n                <p>Loading available periods...</p>\n            </div>\n\n            <!-- Error message -->\n            <div *ngIf=\"errorMessage\" class=\"error-message\">\n                <ion-icon name=\"warning-outline\"></ion-icon>\n                <span>{{ errorMessage }}</span>\n            </div>\n\n            <!-- Available periods list -->\n            <div *ngIf=\"!loading && availablePeriods.length > 0\" class=\"periods-section\">\n                <h3>Available Cumulative Periods</h3>\n                <ion-list>\n                    <ion-item *ngFor=\"let period of availablePeriods\"\n                              button\n                              (click)=\"selectPeriod(period)\"\n                              [disabled]=\"creating\">\n                        <ion-icon name=\"layers-outline\" slot=\"start\"></ion-icon>\n                        <ion-label>\n                            <h2>{{ formatWindow(period.windowInMinutes) }}</h2>\n                            <p>{{ formatPeriod(period) }}</p>\n                            <p class=\"count-info\">{{ period.count }} cumulative(s)</p>\n                        </ion-label>\n                        <ion-icon name=\"chevron-forward\" slot=\"end\"></ion-icon>\n                    </ion-item>\n                </ion-list>\n            </div>\n\n            <!-- No periods available -->\n            <div *ngIf=\"!loading && availablePeriods.length === 0\" class=\"no-periods\">\n                <ion-icon name=\"information-circle-outline\"></ion-icon>\n                <p>No cumulative periods available yet.</p>\n            </div>\n\n            <!-- Create new section (admin only) -->\n            <div *ngIf=\"!loading && isAdmin\" class=\"create-section\">\n                <h3>Create New Cumulative</h3>\n                <div class=\"create-info\">\n                    <p>\n                        <strong>Period:</strong>\n                        {{ currentPeriodBegin?.toLocaleString() }} \u2192 {{ currentPeriodEnd?.toLocaleString() }}\n                    </p>\n                    <p>\n                        <strong>Window:</strong> {{ formatWindow(currentWindowMinutes) }}\n                    </p>\n                    <p *ngIf=\"baseCumulatives\" class=\"coverage-info\"\n                       [class.coverage-ok]=\"coveragePercent >= 100\"\n                       [class.coverage-warn]=\"coveragePercent > 0 && coveragePercent < 100\"\n                       [class.coverage-error]=\"coveragePercent === 0\">\n                        <ion-icon [name]=\"coveragePercent >= 100 ? 'checkmark-circle' : 'alert-circle'\"></ion-icon>\n                        Base data coverage: {{ coveragePercent }}%\n                    </p>\n                    <p *ngIf=\"!baseCumulatives\" class=\"coverage-error\">\n                        <ion-icon name=\"alert-circle\"></ion-icon>\n                        No base cumulatives available\n                    </p>\n                </div>\n\n                <!-- Creation progress -->\n                <div *ngIf=\"creating\" class=\"creation-progress\">\n                    <ion-spinner name=\"crescent\"></ion-spinner>\n                    <span>{{ creationProgress }}</span>\n                </div>\n\n                <ion-button [disabled]=\"!canCreateNew || creating\"\n                            expand=\"block\"\n                            (click)=\"createNewPeriod()\">\n                    <ion-icon name=\"add-circle-outline\" slot=\"start\"></ion-icon>\n                    Create {{ formatWindow(currentWindowMinutes) }} Cumulative\n                </ion-button>\n\n                <p *ngIf=\"!canCreateNew && !creating\" class=\"create-hint\">\n                    Create is disabled because base 5-min cumulatives don't fully cover the selected period.\n                </p>\n            </div>\n        </div>\n\n        <div class=\"modal-footer\">\n            <ion-button fill=\"outline\" (click)=\"cancel()\" [disabled]=\"creating\">\n                Cancel\n            </ion-button>\n        </div>\n    </div>\n</div>\n", styles: [".cumulative-selector-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.cumulative-selector-modal{background:var(--ion-background-color, #fff);border-radius:12px;max-width:500px;width:90%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 4px 20px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--ion-border-color, #ddd)}.modal-header h2{margin:0;font-size:1.25rem;font-weight:600}.modal-header ion-button{--padding-start: 8px;--padding-end: 8px}.modal-content{flex:1;overflow-y:auto;padding:16px 20px}.loading-state{display:flex;flex-direction:column;align-items:center;padding:40px 0}.loading-state ion-spinner{margin-bottom:16px}.loading-state p{color:var(--ion-color-medium)}.error-message{display:flex;align-items:center;gap:8px;padding:12px;background:var(--ion-color-danger-tint);color:var(--ion-color-danger);border-radius:8px;margin-bottom:16px}.error-message ion-icon{font-size:1.25rem}.periods-section{margin-bottom:24px}.periods-section h3{font-size:1rem;font-weight:600;margin-bottom:12px;color:var(--ion-color-dark)}.periods-section ion-list{border-radius:8px;overflow:hidden}.periods-section ion-item{--padding-start: 12px;--padding-end: 12px}.periods-section ion-item ion-label h2{font-weight:500}.periods-section ion-item ion-label p{font-size:.85rem;color:var(--ion-color-medium)}.periods-section ion-item ion-label .count-info{font-size:.75rem;color:var(--ion-color-primary)}.no-periods{display:flex;flex-direction:column;align-items:center;padding:24px;text-align:center;color:var(--ion-color-medium)}.no-periods ion-icon{font-size:2rem;margin-bottom:8px}.create-section{border-top:1px solid var(--ion-border-color, #ddd);padding-top:16px}.create-section h3{font-size:1rem;font-weight:600;margin-bottom:12px;color:var(--ion-color-dark)}.create-section .create-info{background:var(--ion-color-light);padding:12px;border-radius:8px;margin-bottom:16px}.create-section .create-info p{margin:4px 0;font-size:.9rem}.create-section .coverage-info{display:flex;align-items:center;gap:6px}.create-section .coverage-info ion-icon{font-size:1.1rem}.create-section .coverage-ok{color:var(--ion-color-success)}.create-section .coverage-warn{color:var(--ion-color-warning)}.create-section .coverage-error{color:var(--ion-color-danger)}.create-section .creation-progress{display:flex;align-items:center;gap:12px;padding:16px;background:var(--ion-color-primary-tint);border-radius:8px;margin-bottom:16px}.create-section .creation-progress ion-spinner{--color: var(--ion-color-primary)}.create-section .creation-progress span{color:var(--ion-color-primary);font-size:.9rem}.create-section .create-hint{font-size:.8rem;color:var(--ion-color-medium);text-align:center;margin-top:8px}.modal-footer{padding:16px 20px;border-top:1px solid var(--ion-border-color, #ddd);display:flex;justify-content:flex-end}\n"] }]
+        }], ctorParameters: function () { return [{ type: ProfileService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { rainId: [{
+                type: Input
+            }], currentPeriodBegin: [{
+                type: Input
+            }], currentPeriodEnd: [{
+                type: Input
+            }], provider: [{
+                type: Input
+            }], timeStepInMinutes: [{
+                type: Input
+            }], isAdmin: [{
+                type: Input
+            }], periodSelected: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }] } });
+
+let TEST_DETECTION = 0;
+class RaainDetailsComponent {
+    constructor(storage, cdr) {
+        this.storage = storage;
+        this.cdr = cdr;
+        this.availableProviders = [];
+        this.availableTimeSteps = [];
+        this.showPixelMarkers = false;
+        this.qualityIndicators = [];
+        this.qualityIndicatorsLoading = false;
+        this.showCumulativeSelector = false;
+        // Cached computed values (to avoid method calls in templates)
+        this.percentOfComputations = 0;
+        this.percentOfImages = 0;
+        this.truncatedError = '';
+        this.cumulativeDurationInMinutes = 10;
+        this.DateRange = DateRange;
+        // Wrapper function that preserves the async nature of fetchData
+        this.fetchDataWrapper = async (focusDate, focusRange) => {
+            return await this.fetchData(focusDate, focusRange);
+        };
     }
-    // === Rains ===
-    async getRains(name) {
-        const rains = [];
-        const params = {};
-        if (name) {
-            params.name = name;
-        }
-        const queryString = BuildQueryString(params);
-        try {
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'rains',
-                verb: 'GET',
-                relativePath: queryString ? '?' + queryString : '',
-                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
-            });
-            for (const rain of resp.data.rains) {
-                rains.push(new RainNode(rain));
-            }
-        }
-        catch (e) {
-            await this.checkError(e);
+    static PeriodDisplay(date) {
+        let d = new Date();
+        if (date) {
+            d = new Date(date);
+            const userTimezoneOffset = d.getTimezoneOffset() * 60000;
+            d = new Date(d.getTime() - userTimezoneOffset);
         }
-        return rains;
+        const exampleFormattedDate = '2017-06-01T08:30';
+        return d.toISOString().substring(0, exampleFormattedDate.length);
     }
-    async getRain(id) {
-        try {
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'rains',
-                relativePath: id,
-                verb: 'GET',
-                defaultKeyUrl: this.defaultUrlForAPI + '/rains/',
-            });
-            return new RainNode(resp.data);
+    static DateUTC(date) {
+        const hasISOFormat = date.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/);
+        let d = new Date(date);
+        if (!hasISOFormat) {
+            const userTimezoneOffset = d.getTimezoneOffset() * 60000;
+            d = new Date(d.getTime() - userTimezoneOffset);
         }
-        catch (e) {
-            await this.checkError(e);
+        return d;
+    }
+    static MapCountToDateValue(c) {
+        return {
+            date: RaainDetailsComponent.DateUTC(c.name),
+            value: Math.min(100, c.x),
+        };
+    }
+    async openQualityModal() {
+        this.showQualityModal = true;
+        this.qualityIndicatorsLoading = true;
+        this.qualityIndicators = [];
+        this.cdr.markForCheck();
+        if (this.rainNode?.id) {
+            const result = await this.profileService.getIndicators(this.rainNode.id);
+            this.qualityIndicators = result.indicators;
         }
-        return null;
+        this.qualityIndicatorsLoading = false;
+        this.cdr.markForCheck();
     }
-    // === Count
-    async getCounts(rainId, options) {
-        try {
-            const params = {
-                range: options.range,
-                begin: options.periodBegin.toISOString(),
-            };
-            const queryString = BuildQueryString(params);
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'rains',
-                relativePath: rainId + '/counts' + (queryString ? '?' + queryString : ''),
-                verb: 'GET',
-                defaultKeyUrl: this.defaultUrlForAPI + '/rains/',
-            });
-            const counts = resp.data.counts.result;
-            const percentImages = [], percentRainy = [], percentQ = [];
-            counts.forEach((c) => {
-                const label = this.setDateComponents(options.periodBegin, c);
-                percentImages.push(new XYType(c.percentImages ?? 0, NaN, NaN, label));
-                percentRainy.push(new XYType(c.percentRainy ?? 0, NaN, NaN, label));
-                percentQ.push(new XYType(c.percentQ ?? 0, NaN, NaN, label));
-            });
-            return {
-                percentImages,
-                percentRainy,
-                percentQ,
-                queueRunning: resp.data.queueRunning,
-            };
+    closeQualityModal() {
+        this.showQualityModal = false;
+    }
+    formatDate(dateStr) {
+        const date = new Date(dateStr);
+        return (date.toLocaleDateString() +
+            ' ' +
+            date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+    }
+    async fetchData(focusDate, focusRange) {
+        const values = [];
+        for (let i = 0; i < 10; i++) {
+            values.push({ date: new Date(2020 + i, 0), value: 10 });
         }
-        catch (e) {
-            await this.checkError(e);
+        const fakeData = [
+            {
+                label: '% Rainy',
+                style: 'bar',
+                values,
+            },
+            {
+                label: '% Images',
+                style: 'bar',
+                values,
+            },
+            //  {
+            //      label: '% Quality',
+            //      style: 'line',
+            //      values,
+            //  },
+        ];
+        const range = mapDateRangeToString(focusRange);
+        let data = fakeData;
+        if (!this.rainNode) {
+            return data;
         }
-        return null;
-    }
-    async getCountsHour(rainId, options) {
-        try {
-            const params = {
-                range: 'hour',
-                begin: options.periodBegin.toISOString(),
-            };
-            const queryString = BuildQueryString(params);
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'rains',
-                relativePath: rainId + '/counts' + (queryString ? '?' + queryString : ''),
-                verb: 'GET',
-                defaultKeyUrl: this.defaultUrlForAPI + '/rains/',
+        if (focusRange === DateRange.CENTURY) {
+            // fake
+        }
+        else if (focusRange === DateRange.HOUR) {
+            const hourCounts = await this.profileService.getCountsHour(this.rainNode.id, {
+                periodBegin: focusDate,
             });
-            const counts = resp.data.counts.result;
-            const percentImages = [], rainySum = [], rainyCount = [];
-            counts.forEach((c) => {
-                const label = this.setDateComponents(options.periodBegin, c);
-                percentImages.push(new XYType(c.percentImages ?? 0, NaN, NaN, label));
-                rainyCount.push(new XYType(c.rainyCount ?? 0, NaN, NaN, label));
-                rainySum.push(new XYType(c.rainySum ?? 0, NaN, NaN, label));
+            data = [
+                {
+                    label: 'Rainy Count',
+                    style: 'line',
+                    values: hourCounts.rainyCount.map(RaainDetailsComponent.MapCountToDateValue),
+                },
+                {
+                    label: '% Images',
+                    style: 'bar',
+                    values: hourCounts.percentImages.map(RaainDetailsComponent.MapCountToDateValue),
+                },
+                {
+                    label: 'Rainy Sum',
+                    style: 'line',
+                    values: hourCounts.rainySum.map(RaainDetailsComponent.MapCountToDateValue),
+                },
+            ];
+        }
+        else {
+            const counts = await this.profileService.getCounts(this.rainNode.id, {
+                range,
+                periodBegin: focusDate,
             });
-            return {
-                percentImages,
-                rainyCount,
-                rainySum,
-                queueRunning: resp.data.queueRunning,
-            };
+            data = [
+                {
+                    label: '% Rainy',
+                    style: 'bar',
+                    values: counts.percentRainy.map(RaainDetailsComponent.MapCountToDateValue),
+                },
+                {
+                    label: '% Images',
+                    style: 'bar',
+                    values: counts.percentImages.map(RaainDetailsComponent.MapCountToDateValue),
+                },
+            ];
         }
-        catch (e) {
-            await this.checkError(e);
+        // console.log(`fetchData DONE ${range}`, data);
+        return data;
+    }
+    ngOnChanges(changes) {
+        this.change(changes).then((ignored) => { });
+    }
+    ngOnDestroy() {
+        this.cleanAll();
+    }
+    async onEnableCountHistoryTab(rain) {
+        if (!this.toggleHistory) {
+            this.countPoints = [];
         }
-        return null;
     }
-    // === Computing ===
-    async getRainComputationCumulativeCartesianMapById(rainId, rainComputationCumulativeId) {
-        const params = { format: 'cartesian-map' };
-        const queryString = BuildQueryString(params);
-        try {
-            const response = await this.fidjService.sendOnEndpoint({
-                key: 'rains',
-                verb: 'GET',
-                relativePath: `${rainId}/cumulatives/${rainComputationCumulativeId}?${queryString}`,
-                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
-            });
-            if (!response.data['cartesian-map']) {
-                return null;
-            }
-            const rainComputationMap = new RainComputationMap(response.data['cartesian-map']);
-            rainComputationMap.name = rainId + '.rain.cartesian-map';
-            return rainComputationMap;
+    async onPeriodBeginChange(event) {
+        const newValue = event?.target?.value ?? this.periodBeginAsString;
+        this.periodBegin = new Date(newValue);
+        this.periodBeginAsString = RaainDetailsComponent.PeriodDisplay(this.periodBegin);
+        this.storage.set('raain-periodBegin', this.periodBegin);
+        await this.onPeriodDurationChange(event);
+    }
+    async onPeriodEndChange(event) {
+        const newValue = event?.target?.value ?? this.periodEndAsString;
+        this.periodEnd = new Date(newValue);
+        this.periodEndAsString = RaainDetailsComponent.PeriodDisplay(this.periodEnd);
+        this.storage.set('raain-periodEnd', this.periodEnd);
+        this.periodBegin = new Date(this.periodEnd.getTime() - this.getDurationInHours() * RaainDetailsComponent.HOUR_MS);
+        this.periodBeginAsString = RaainDetailsComponent.PeriodDisplay(this.periodBegin);
+        this.storage.set('raain-periodBegin', this.periodBegin);
+        this.updateRefreshManagerPeriod();
+    }
+    async onPeriodDurationChange(_event) {
+        const durationInHours = this.getDurationInHours();
+        this.periodEnd = new Date(this.periodBegin.getTime() + durationInHours * RaainDetailsComponent.HOUR_MS);
+        this.periodEndAsString = RaainDetailsComponent.PeriodDisplay(this.periodEnd);
+        this.storage.set('raain-periodEnd', this.periodEnd);
+        this.storage.set('raain-periodDurationInHours', durationInHours);
+        this.updateRefreshManagerPeriod();
+        this.updateCumulativeDurationInMinutes();
+    }
+    async onDateChangeInCount(dateChanged) {
+        const dateString = dateChanged.toISOString().substring(0, 11) +
+            dateChanged.toLocaleTimeString().substring(0, 5);
+        this.periodDurationAsString = '1';
+        if (this.toggleCumulative) {
+            // Cumulative: select periodEnd
+            this.periodEndAsString = dateString;
+            await this.onPeriodEndChange(null);
         }
-        catch (e) {
-            await this.checkError(e);
+        else {
+            // Granular: select periodBegin
+            this.periodBeginAsString = dateString;
+            await this.onPeriodBeginChange(null);
         }
-        return null;
+        await this.refreshManager.refresh(false, this.toggleAdmin);
     }
-    async getRainComputationCumulativeCumulativesMapById(rainId, rainComputationCumulativeId, cumulativeHours) {
-        const queryPath = `${rainId}/cumulatives/${rainComputationCumulativeId}/cumulative/${cumulativeHours}`;
-        try {
-            const response = await this.fidjService.sendOnEndpoint({
-                key: 'rains',
-                verb: 'GET',
-                relativePath: queryPath,
-                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
-            });
-            if (!response.data['cumulative']) {
-                return null;
-            }
-            const rainComputationMap = new RainComputationMap(response.data['cumulative']);
-            rainComputationMap.name = rainId + '.rain.cumulative-cumulative';
-            return rainComputationMap;
-        }
-        catch (e) {
-            await this.checkError(e);
+    async onDateChangeInMap(dateShown) {
+        this.dateShown = dateShown;
+        await this.fetchAndUpdateMap();
+        await this.refreshManager.setReportPeriod(this.dateShown);
+    }
+    async onSumChangeInMap(sum) {
+        this.sumDetails = sum;
+    }
+    async onGaugeSelectInMap(mapLatLng) {
+        const gaugesFiltered = this.compareManager.gaugesInMap.filter((g) => g.lat === mapLatLng.lat && g.lng === mapLatLng.lng);
+        if (gaugesFiltered.length !== 1) {
+            return;
         }
-        return null;
+        const gaugeSelected = gaugesFiltered[0];
+        await this.refreshGaugeValues({ id: gaugeSelected.id, name: gaugeSelected.name });
+        await this.compareManager.selectGauge(gaugeSelected.id, 0);
     }
-    async getRainCumulativeCompareByDate(rainNode, rainComputationCumulativeId, date) {
-        const params = { date: date.toISOString() };
-        const queryString = BuildQueryString(params);
-        try {
-            const response = await this.fidjService.sendOnEndpoint({
-                key: 'rains',
-                verb: 'GET',
-                relativePath: `${rainNode.id}/cumulatives/${rainComputationCumulativeId}/compares?${queryString}`,
-                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
-            });
-            const qualityJson = response.data.qualities[0];
-            const rainComputationQuality = new RainComputationQuality(qualityJson);
-            rainComputationQuality.qualitySpeedMatrixContainer =
-                SpeedMatrixContainer.CreateFromJson(rainComputationQuality.qualitySpeedMatrixContainer);
-            return rainComputationQuality;
+    async refreshGaugeValues(gaugeSelected) {
+        const gaugeValueShowBegin = new Date(this.periodBegin.getTime() - RaainDetailsComponent.DAY_MS);
+        const gaugeValueShowEnd = new Date(this.periodEnd.getTime() + RaainDetailsComponent.DAY_MS);
+        gaugeValueShowBegin.setHours(0, 0);
+        gaugeValueShowEnd.setHours(23, 59);
+        const gaugeMeasures = await this.profileService.getGaugeMeasures(gaugeSelected.id, gaugeValueShowBegin, gaugeValueShowEnd);
+        const gaugeValues = gaugeMeasures.map((gm) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const cartesianMeasureValue = new CartesianMeasureValue(gm.values[0]);
+            return {
+                date: gm.date,
+                value: cartesianMeasureValue.getCartesianValues()[0].value,
+            };
+        });
+        this.gaugeSelectedPoints = [
+            {
+                label: gaugeSelected.name,
+                style: 'bar',
+                values: gaugeValues,
+            },
+        ];
+        this.cdr.markForCheck();
+    }
+    async onGaugeSelectInCompare(e) {
+        await this.refreshGaugeValues({ id: e.point.id, name: e.point.name });
+        await this.compareManager.selectGauge(e.point.id, e.compareIndex);
+    }
+    async onToggleMap($event) {
+        // if (this.toggleMap) {
+        //    await this.refreshMap();
+        // }
+    }
+    onTogglePixelMarkers() {
+        // Toggle is bound to showPixelMarkers, raain-map handles marker display
+    }
+    async onCumulativeToggleClick($event) {
+        console.log('[CumulativeToggle] click event', {
+            currentValue: this.toggleCumulative,
+            eventType: $event.type,
+            target: $event.target?.tagName,
+        });
+        $event.preventDefault();
+        $event.stopPropagation();
+        if (!this.toggleCumulative) {
+            console.log('[CumulativeToggle] showing popup, toggle stays OFF');
+            // Currently OFF, user wants to enable - show selector popup
+            this.showCumulativeSelector = true;
+            // Force reset the toggle visual state after ion-toggle's internal handler
+            setTimeout(() => {
+                if (this.cumulativeToggleRef) {
+                    this.cumulativeToggleRef.checked = false;
+                    console.log('[CumulativeToggle] force reset toggle to OFF');
+                }
+            }, 0);
+            this.cdr.markForCheck();
         }
-        catch (e) {
-            await this.checkError(e);
+        else {
+            console.log('[CumulativeToggle] turning OFF');
+            // Currently ON, user wants to disable - direct toggle off
+            this.toggleCumulative = false;
+            this.storage.set('raain-toggleCumulative', false);
+            this.dateShown = this.getDateBasedOnCumulativeMode(this.timeframeDates);
+            this.updateCumulativeDurationInMinutes();
+            if (this.toggleMap) {
+                this.updateRefreshManagerPeriod();
+                await this.refreshManager.refresh(false, this.toggleAdmin);
+            }
+            this.cdr.markForCheck();
         }
-        return null;
+        console.log('[CumulativeToggle] after handler, toggleCumulative =', this.toggleCumulative);
     }
-    async getRainCumulativeCumulativesCompareByDate(rainNode, rainComputationCumulativeId, date, cumulativeHours) {
-        const params = {
-            date: date.toISOString(),
-            cumulativeHours,
-        };
-        const queryString = BuildQueryString(params);
-        try {
-            const response = await this.fidjService.sendOnEndpoint({
-                key: 'rains',
-                verb: 'GET',
-                relativePath: `${rainNode.id}/cumulatives/${rainComputationCumulativeId}/compares?${queryString}`,
-                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
-            });
-            const qualityJson = response.data.qualities[0];
-            const rainComputationQuality = new RainComputationQuality(qualityJson);
-            rainComputationQuality.qualitySpeedMatrixContainer =
-                SpeedMatrixContainer.CreateFromJson(rainComputationQuality.qualitySpeedMatrixContainer);
-            return rainComputationQuality;
-        }
-        catch (e) {
-            await this.checkError(e);
+    async onCumulativePeriodSelected(selection) {
+        this.showCumulativeSelector = false;
+        // Update period to match selection
+        this.periodBegin = selection.periodBegin;
+        this.periodEnd = selection.periodEnd;
+        this.periodBeginAsString = RaainDetailsComponent.PeriodDisplay(this.periodBegin);
+        this.periodEndAsString = RaainDetailsComponent.PeriodDisplay(this.periodEnd);
+        // Calculate duration in hours
+        const durationMs = this.periodEnd.getTime() - this.periodBegin.getTime();
+        const durationHours = durationMs / RaainDetailsComponent.HOUR_MS;
+        this.periodDurationAsString = String(durationHours);
+        // Store cumulative period
+        this.storage.set('raain-periodBegin', this.periodBegin);
+        this.storage.set('raain-periodEnd', this.periodEnd);
+        this.storage.set('raain-periodDurationInHours', durationHours);
+        // Enable cumulative mode
+        this.toggleCumulative = true;
+        this.storage.set('raain-toggleCumulative', true);
+        this.dateShown = this.getDateBasedOnCumulativeMode(this.timeframeDates);
+        this.updateCumulativeDurationInMinutes();
+        // Refresh map
+        if (this.toggleMap) {
+            this.updateRefreshManagerPeriod();
+            await this.refreshManager.refresh(false, this.toggleAdmin);
         }
-        return null;
+        this.cdr.markForCheck();
     }
-    async getRainProgress(rainId) {
-        try {
-            const queryPath = '' + rainId + '/progress';
-            const response = await this.fidjService.sendOnEndpoint({
-                key: 'rains',
-                verb: 'GET',
-                relativePath: queryPath,
-                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
-            });
-            // return response.data.inProgress;
-            return response.data.inQueue;
+    onCumulativeSelectorCancelled() {
+        console.log('[CumulativeToggle] cancelled, toggleCumulative =', this.toggleCumulative);
+        this.showCumulativeSelector = false;
+        this.cdr.markForCheck();
+    }
+    updateCumulativeDurationInMinutes() {
+        if (this.toggleCumulative) {
+            // Cumulative mode: use period duration
+            this.cumulativeDurationInMinutes = parseFloat(this.periodDurationAsString) * 60;
         }
-        catch (e) {
-            await this.checkError(e);
+        else {
+            // Granular mode: use selectedTimeStep
+            this.cumulativeDurationInMinutes = this.selectedTimeStep || 10;
         }
-        return 0;
     }
-    async getIndicators(rainId) {
+    async onProviderChanged($event) {
+        this.selectedProvider = $event?.detail?.value;
+        this.storage.set('raain-selectedProvider', this.selectedProvider);
+        await this.applyRefreshManagerSettings();
+    }
+    async onTimeStepChanged($event) {
+        this.selectedTimeStep = $event?.detail?.value;
+        this.storage.set('raain-selectedTimeStep', this.selectedTimeStep);
+        this.updateCumulativeDurationInMinutes();
+        await this.applyRefreshManagerSettings();
+    }
+    async loadProviders() {
+        if (!this.rainNode?.id) {
+            return;
+        }
         try {
-            const params = {
-                cumulative: 'true',
-            };
-            const queryString = BuildQueryString(params);
-            const response = await this.fidjService.sendOnEndpoint({
-                key: 'rains',
-                verb: 'GET',
-                relativePath: rainId + '/indicators' + (queryString ? '?' + queryString : ''),
-                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
-            });
-            return response.data;
+            const result = await this.profileService.getProviders(this.rainNode.id);
+            this.availableProviders = result.providers;
+            this.availableTimeSteps = result.timeStepInMinutes;
+            // Load saved selections or use defaults
+            this.selectedProvider =
+                this.storage.get('raain-selectedProvider') ||
+                    (this.availableProviders.length > 0 ? this.availableProviders[0] : 'Raain');
+            this.selectedTimeStep =
+                this.storage.get('raain-selectedTimeStep') ||
+                    (this.availableTimeSteps.length > 0 ? this.availableTimeSteps[0] : 10);
         }
         catch (e) {
-            await this.checkError(e);
+            // Set fallback values
+            this.availableProviders = ['Raain'];
+            this.availableTimeSteps = [5, 10, 15, 30, 60];
+            this.selectedProvider = 'Raain';
+            this.selectedTimeStep = 10;
         }
-        return { indicators: [] };
+        // Set provider and timeStep on refreshManager
+        if (this.refreshManager) {
+            this.refreshManager.provider = this.selectedProvider;
+            this.refreshManager.timeStepInMinutes = this.selectedTimeStep;
+        }
+        this.cdr.markForCheck();
     }
-    // === Gauges ===
-    async getGauge(gaugeId) {
-        try {
-            const resp = await this.fidjService.sendOnEndpoint({
-                key: 'gauges',
-                verb: 'GET',
-                relativePath: gaugeId,
-                defaultKeyUrl: this.defaultUrlForAPI + '/gauges',
-            });
-            return new GaugeNode(resp.data);
+    onChangeDetectionTest(rainNode) {
+        console.log(TEST_DETECTION++, 'onChangeDetectionTest');
+        return '';
+    }
+    updateTruncatedError() {
+        const error = this.refreshManager?.lastError || '';
+        if (error.length <= 80) {
+            this.truncatedError = error;
+            return;
         }
-        catch (e) {
-            await this.checkError(e);
+        this.truncatedError = error.substring(0, 80) + '...';
+    }
+    updateCachedValues() {
+        this.updatePercentOfImages();
+        this.updatePercentOfComputations();
+        this.updateTruncatedError();
+        this.updateCumulativeDurationInMinutes();
+    }
+    async refreshMap() {
+        this.gaugeSelectedPoints = [];
+        this.dateShown = this.getDateBasedOnCumulativeMode();
+        this.borders = [];
+        this.compareManager.cleanAll();
+        await this.compareManager.setGaugesInMap();
+        await this.refreshManager.refresh(false, this.toggleAdmin);
+        this.cdr.markForCheck();
+    }
+    async setPeriodOfNow() {
+        const last30mn = new Date();
+        last30mn.setMinutes(last30mn.getMinutes() - 30);
+        this.periodBeginAsString =
+            last30mn.toISOString().substring(0, 11) + last30mn.toLocaleTimeString().substring(0, 5);
+        this.periodDurationAsString = '1';
+        await this.onPeriodBeginChange(null);
+        await this.refreshManager.refresh(false, this.toggleAdmin);
+    }
+    updatePercentOfImages() {
+        if (!this.countsPeriod?.percentImages?.length) {
+            this.percentOfImages = 0;
+            return;
         }
+        const duringPeriod = this.countsPeriod.percentImages.filter((a) => this.periodBegin.getTime() <= new Date(a.name).getTime() &&
+            new Date(a.name).getTime() <= this.periodEnd.getTime());
+        const summed = duringPeriod.reduce((a, b) => a + (b.x ?? 0), 0);
+        this.percentOfImages = Math.round(summed / duringPeriod.length);
     }
-    async getGauges(rainId, aroundLatLng, pageCount = 1) {
-        const baseParams = {
-            aroundLatLng: `${aroundLatLng.lat},${aroundLatLng.lng}`,
-            rainId,
-        };
-        if (this.asTeamId) {
-            baseParams.teamId = this.asTeamId;
+    updatePercentOfComputations() {
+        const timeline = this.refreshManager?.getTimelineFrameSet();
+        if (!timeline?.length) {
+            this.percentOfComputations = 0;
+            return;
         }
-        const gauges = [];
-        try {
-            for (let count = 1; count <= pageCount; count++) {
-                const params = { ...baseParams, page: count };
-                const queryString = BuildQueryString(params);
-                const resp = await this.fidjService.sendOnEndpoint({
-                    key: 'gauges',
-                    verb: 'GET',
-                    relativePath: queryString ? '?' + queryString : '',
-                    defaultKeyUrl: this.defaultUrlForAPI + '/gauges',
-                });
-                for (const gauge of resp.data.gauges) {
-                    gauges.push(new GaugeNodeFilter(gauge));
-                }
+        const timelineWithComputation = timeline.filter((a) => !!a.rainComputationCumulativeId || !!a.rainComputationId);
+        const ratio = timelineWithComputation.length / timeline.length;
+        this.percentOfComputations = Math.round(ratio * 100);
+    }
+    getDateBasedOnCumulativeMode(fallbackDates) {
+        if (fallbackDates?.length > 0) {
+            const dateExists = fallbackDates.some((d) => d.getTime() === this.dateShown?.getTime());
+            if (!dateExists) {
+                return this.toggleCumulative
+                    ? fallbackDates[fallbackDates.length - 1]
+                    : fallbackDates[0];
             }
         }
-        catch (e) {
-            await this.checkError(e);
-        }
-        return gauges;
+        return this.toggleCumulative ? this.periodEnd : this.periodBegin;
     }
-    async getGaugeMeasures(gaugeId, begin, end) {
-        const params = {
-            begin: begin.toISOString(),
-            end: end.toISOString(),
+    getCumulativeHours() {
+        return this.toggleCumulative ? parseFloat(this.periodDurationAsString) : 0;
+    }
+    getDurationInHours() {
+        return parseFloat(this.periodDurationAsString);
+    }
+    updateRefreshManagerPeriod() {
+        this.refreshManager.cumulative = this.toggleCumulative;
+        // Align dates to 5-minute boundaries (floor) for consistency with raain-ground
+        const alignTo5minFloor = (date) => {
+            const minutes = date.getMinutes();
+            const alignedMinutes = Math.floor(minutes / 5) * 5;
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), alignedMinutes, 0, 0);
         };
-        const queryString = BuildQueryString(params);
-        const resp = await this.fidjService.sendOnEndpoint({
-            key: 'gauges',
-            verb: 'GET',
-            relativePath: gaugeId + '/measures' + (queryString ? '?' + queryString : ''),
-            defaultKeyUrl: this.defaultUrlForAPI + '/gauges',
-        });
-        const gaugeMeasures = [];
-        for (const gaugeMeasure of resp.data.gaugeMeasures) {
-            gaugeMeasures.push(new GaugeMeasure(gaugeMeasure));
+        this.refreshManager.period = {
+            begin: alignTo5minFloor(this.periodBegin),
+            end: alignTo5minFloor(this.periodEnd),
+        };
+    }
+    async fetchAndUpdateMap() {
+        await this.refreshManager.fetch(this.dateShown, this.toggleGaugeMeasures, this.getCumulativeHours());
+        this.currentTimeframeTarget = this.refreshManager.getTimelineSelectedFrameSet();
+        this.cdr.markForCheck();
+    }
+    async applyRefreshManagerSettings() {
+        if (!this.refreshManager) {
+            return;
         }
-        return gaugeMeasures;
+        this.refreshManager.provider = this.selectedProvider;
+        this.refreshManager.timeStepInMinutes = this.selectedTimeStep;
+        await this.refreshManager.refresh(false, this.toggleAdmin);
     }
-    async getProviders(rainId) {
-        try {
-            const response = await this.fidjService.sendOnEndpoint({
-                verb: 'GET',
-                key: 'rains',
-                relativePath: rainId + '/providers',
-                defaultKeyUrl: this.defaultUrlForAPI + '/rains',
-            });
-            return {
-                providers: response.data.providers || [],
-                timeStepInMinutes: response.data.timeStepInMinutes || [5, 10, 15, 30, 60],
-            };
+    cleanAll() {
+        this.borders = [];
+        this.isAdmin = false;
+        this.timeframeContainers = new TimeframeContainers([]);
+        this.currentTimeframeTarget = null;
+        this.timeframeDates = [];
+        this.countPoints = [];
+        this.countsPeriod = { progress: 0, queueRunning: 0, percentImages: [] };
+        this.gaugeSelectedPoints = [];
+        this.toggleHistory = false;
+        this.toggleMap = true;
+        this.toggleCompare = false;
+        this.toggleGaugeMeasures = false;
+        this.toggleRemoveCompareDuplicate = true;
+        this.toggleCumulative = this.storage.get('raain-toggleCumulative');
+        this.periodBegin = new Date(this.storage.get('raain-periodBegin'));
+        this.periodEnd = new Date(this.storage.get('raain-periodEnd'));
+        this.periodBeginAsString = RaainDetailsComponent.PeriodDisplay(this.periodBegin);
+        this.periodEndAsString = RaainDetailsComponent.PeriodDisplay(this.periodEnd);
+        const durationMs = this.periodEnd.getTime() - this.periodBegin.getTime();
+        this.periodDurationAsString = '' + durationMs / RaainDetailsComponent.HOUR_MS;
+        this.dateShown = this.getDateBasedOnCumulativeMode();
+        this.refreshInProgress = false;
+        this.showFullError = false;
+        this.showQualityModal = false;
+        this.qualityIndicators = [];
+        this.qualityIndicatorsLoading = false;
+        this.compareManager?.cleanAll();
+        this.refreshManager?.cleanAll();
+    }
+    async init() {
+        this.cleanAll();
+        this.updateCachedValues();
+        await this.initRain();
+        this.cdr.markForCheck();
+    }
+    async initRain() {
+        if (!this.rainNode) {
+            return;
         }
-        catch (e) {
-            console.error('getProviders error:', e);
-            return {
-                providers: [],
-                timeStepInMinutes: [5, 10, 15, 30, 60],
-            };
+        this.isAdmin = this.profileService.isAdmin();
+        this.refreshManager.rainNode = this.rainNode;
+        this.compareManager.rainNode = this.rainNode;
+        // Load providers and set on refreshManager
+        await this.loadProviders();
+        this.refreshManager.setMethods(this.onRefreshInProgress.bind(this), this.onRefreshDone.bind(this), this.onFetchDone.bind(this));
+        const center = this.rainNode.getCenter();
+        this.coordinates = new MapLatLng(center.lat, center.lng);
+        this.teamNode = await this.profileService.getTeam(this.rainNode.getLink(TeamNode.TYPE).getId());
+        // Load all gauges linked to the rainNode on map
+        await this.compareManager.setGaugesInMap();
+        if (this.periodBegin && this.periodEnd) {
+            this.updateRefreshManagerPeriod();
+            await this.refreshManager.refresh(false, this.toggleAdmin);
         }
     }
-    setRoles(roles) {
-        this.roles = roles;
+    async onRefreshInProgress(countPeriods, timeframeDates) {
+        this.refreshInProgress = true;
+        this.countsPeriod = countPeriods;
+        this.timeframeDates = timeframeDates;
+        this.updateCachedValues();
+        this.cdr.markForCheck();
     }
-    setDateComponents(date, c) {
-        const dateToShow = new Date(date);
-        if (c.year !== undefined) {
-            dateToShow.setUTCFullYear(c.year);
+    async onRefreshDone(timeframeDates) {
+        this.timeframeDates = timeframeDates;
+        this.refreshInProgress = false;
+        this.updateCachedValues();
+        this.cdr.markForCheck();
+        if (this.toggleMap && timeframeDates.length > 0) {
+            this.dateShown = this.getDateBasedOnCumulativeMode(timeframeDates);
+            if (this.dateShown) {
+                await this.fetchAndUpdateMap();
+            }
         }
-        if (c.month !== undefined) {
-            dateToShow.setUTCMonth(c.month - 1);
+    }
+    async onFetchDone(timeframeContainers) {
+        if (timeframeContainers) {
+            this.timeframeContainers = timeframeContainers;
         }
-        if (c.day !== undefined) {
-            dateToShow.setUTCDate(c.day);
+        this.cdr.markForCheck();
+    }
+    async change(_changes) {
+        await this.init();
+    }
+}
+RaainDetailsComponent.HOUR_MS = 60 * 60000;
+RaainDetailsComponent.DAY_MS = 24 * 60 * 60 * 1000;
+RaainDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RaainDetailsComponent, deps: [{ token: Storage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+RaainDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RaainDetailsComponent, selector: "raain-details", inputs: { toggleAdmin: "toggleAdmin", rainNode: "rainNode", compareManager: "compareManager", refreshManager: "refreshManager", profileService: "profileService", radarService: "radarService" }, viewQueries: [{ propertyName: "cumulativeToggleRef", first: true, predicate: ["cumulativeToggle"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Main content container -->\n<div *ngIf=\"rainNode\" class=\"raain-details-container\">\n\n    <!-- Period selection section -->\n    <ion-card class=\"period-card\">\n        <ion-card-content>\n            <div class=\"period-controls\">\n                <div class=\"period-row\">\n\n                    <ion-button (click)=\"toggleHistory = !toggleHistory; onEnableCountHistoryTab(rainNode)\"\n                                fill=\"outline\">\n                        <ion-icon name=\"calendar-clear-outline\" slot=\"start\"></ion-icon>\n                        <ion-icon [name]=\"toggleHistory ? 'chevron-down' : 'chevron-forward'\" slot=\"end\"></ion-icon>\n                    </ion-button>\n\n                    <div class=\"period-start ion-hide-md-down\">\n                        <input (change)=\"onPeriodBeginChange($event)\"\n                               [disabled]=\"toggleCumulative\"\n                               [value]=\"periodBeginAsString\"\n                               class=\"datetime-input\"\n                               type=\"datetime-local\">\n                    </div>\n\n                    <div class=\"period-duration ion-hide-md-down\">\n                        <ion-select (ionDismiss)=\"onPeriodDurationChange($event)\"\n                                    [(ngModel)]=\"periodDurationAsString\"\n                                    [disabled]=\"toggleCumulative\"\n                                    class=\"duration-select\"\n                                    id=\"periodDuration\"\n                                    interface=\"popover\">\n                            <ion-select-option value=\"0.25\">15 minutes</ion-select-option>\n                            <ion-select-option value=\"0.5\">30 minutes</ion-select-option>\n                            <ion-select-option value=\"1\">1 hour</ion-select-option>\n                            <ion-select-option value=\"2\">2 hours</ion-select-option>\n                            <ion-select-option value=\"3\">3 hours</ion-select-option>\n                            <ion-select-option value=\"4\">4 hours</ion-select-option>\n                            <ion-select-option value=\"5\">5 hours</ion-select-option>\n                            <ion-select-option value=\"6\">6 hours</ion-select-option>\n                            <ion-select-option value=\"8\">8 hours</ion-select-option>\n                            <ion-select-option value=\"10\">10 hours</ion-select-option>\n                            <ion-select-option value=\"12\">12 hours</ion-select-option>\n                            <ion-select-option *ngIf=\"isAdmin\" value=\"24\">24 hours</ion-select-option>\n                        </ion-select>\n                    </div>\n\n                    <div class=\"period-start ion-hide-md-down\">\n                        <input (change)=\"onPeriodEndChange($event)\"\n                               [disabled]=\"toggleCumulative\"\n                               [value]=\"periodEndAsString\"\n                               class=\"datetime-input\"\n                               type=\"datetime-local\">\n                    </div>\n\n                    <div class=\"toggle-cumulative\" (click)=\"onCumulativeToggleClick($event)\">\n                        <ion-label [class.text-primary]=\"toggleCumulative\">\n                            {{ toggleCumulative ? 'Cumulative' : 'Granular' }}\n                        </ion-label>\n                        <ion-toggle #cumulativeToggle [checked]=\"toggleCumulative\">\n                        </ion-toggle>\n                    </div>\n                </div>\n\n                <!-- Hidden label for change detection (uncomment to debug)\n                <div class=\"hidden-label\">{{ onChangeDetectionTest(rainNode) }}</div>\n                -->\n            </div>\n\n            <!-- Historical map section -->\n            <div *ngIf=\"toggleHistory\" class=\"period-controls\">\n                <raain-date-dynamic (changedDate)=\"onDateChangeInCount($event)\"\n                                    [currentHeight]=\"300\"\n                                    [fetchData]=\"fetchDataWrapper\"\n                                    [points]=\"countPoints\">\n                </raain-date-dynamic>\n            </div>\n        </ion-card-content>\n    </ion-card>\n\n    <!-- Map performance -->\n    <ion-grid class=\"map-performance\">\n        <ion-row id=\"progressAndRefresh\">\n            <ion-col class=\"provider-selection\" size=\"12\" size-md=\"6\">\n                <ion-button (click)=\"openQualityModal()\" class=\"quality-info-button\" fill=\"clear\">\n                    {{ refreshManager.rainComputationMapVersion }}\n                    <ion-icon name=\"help-circle-outline\" slot=\"end\"></ion-icon>\n                </ion-button>\n                <div *ngIf=\"availableProviders.length > 0 || availableTimeSteps.length > 0\" class=\"selection-row\">\n                    <ion-select (ionChange)=\"onProviderChanged($event)\"\n                                [value]=\"selectedProvider\"\n                                interface=\"popover\"\n                                label=\"Provider\"\n                                placeholder=\"Select Provider\">\n                        <ion-select-option *ngFor=\"let provider of availableProviders\" [value]=\"provider\">\n                            {{ provider }}\n                        </ion-select-option>\n                    </ion-select>\n\n                    <ion-select (ionChange)=\"onTimeStepChanged($event)\"\n                                [value]=\"selectedTimeStep\"\n                                interface=\"popover\"\n                                label=\"Time Step\"\n                                placeholder=\"Select Time Step\">\n                        <ion-select-option *ngFor=\"let step of availableTimeSteps\" [value]=\"step\">\n                            {{ step }} min\n                        </ion-select-option>\n                    </ion-select>\n                </div>\n            </ion-col>\n            <ion-col class=\"ion-text-right\" size=\"12\" size-md=\"6\">\n                <ion-label class=\"ion-margin-end\">\n                            <span *ngIf=\"percentOfComputations\">\n                                {{ percentOfComputations }}% Images\n                                <i *ngIf=\"countsPeriod.progress\" class=\"progress-indicator\">\n                                    In Progress: {{ countsPeriod.progress }}...\n                                </i>\n                            </span>\n                    <span *ngIf=\"!percentOfComputations\">\n                                No image available\n                            </span>\n\n                </ion-label>\n\n                <ion-button (click)=\"refreshMap()\" [disabled]=\"refreshInProgress\" class=\"refresh-button\">\n                    Refresh Map\n                </ion-button>\n            </ion-col>\n        </ion-row>\n\n        <!-- status update row -->\n        <ion-row>\n            <!-- Progress col -->\n            <ion-progress-bar\n                    [buffer]=\"(countsPeriod.progress / ((timeframeDates?.length || 10) +3))+0.01\"\n                    [style.visibility]=\"refreshInProgress ? 'visible' : 'hidden'\"\n                    [value]=\"countsPeriod.progress / ((timeframeDates?.length || 10) +3)\"\n                    color=\"primary\">\n            </ion-progress-bar>\n\n            <!-- Error col -->\n            <ion-col (click)=\"showFullError = !showFullError\" *ngIf=\"refreshManager.lastError\" class=\"error-row\"\n                     size=\"12\">\n                <div class=\"error-content\">\n                    <ion-icon class=\"error-icon\" name=\"warning-outline\"></ion-icon>\n                    <span [class.expanded]=\"showFullError\" class=\"error-text\">\n                        {{ showFullError ? refreshManager.lastError : truncatedError }}\n                    </span>\n                    <ion-icon [name]=\"showFullError ? 'chevron-up' : 'chevron-down'\" class=\"error-caret\"></ion-icon>\n                </div>\n            </ion-col>\n        </ion-row>\n    </ion-grid>\n\n    <!-- Map section -->\n    <ion-card class=\"map-card\">\n        <ion-card-content class=\"map-content\">\n            <ion-grid>\n                <ion-row *ngIf=\"toggleMap && percentOfImages\">\n                    <!-- Map component -->\n                    <ion-col class=\"map-column\" size-lg=\"7\" size-md=\"12\">\n                        <div class=\"map-container\">\n                            <raain-map #raainMapRef\n                                       (changedDate)=\"onDateChangeInMap($event)\"\n                                       (changedSum)=\"onSumChangeInMap($event)\"\n                                       (selectedMarker)=\"onGaugeSelectInMap($event)\"\n                                       [coordinates]=\"coordinates\"\n                                       [cumulativeDurationInMinutes]=\"cumulativeDurationInMinutes\"\n                                       [currentHeight]=\"500\"\n                                       [defaultDate]=\"dateShown\"\n                                       [markers]=\"{\n                                        borders,\n                                        gauges: compareManager.gaugesInMap,\n                                        gaugesInCompare: compareManager.gaugesInCompare,\n                                        selectedGauges: compareManager.selectedGauges,\n                                        pixels: compareManager.selectedPixels,\n                                        pixelsSolution: compareManager.pixelsSolutions?.length ? compareManager.pixelsSolutions[0] : [],\n                                        speeds: compareManager.speeds\n                                    }\"\n                                       [showCumulative]=\"toggleCumulative\"\n                                       [showVisiblePixelMarkers]=\"showPixelMarkers\"\n                                       [sumFn]=\"refreshManager.sumFn\"\n                                       [sumValues]=\"refreshManager.sumValues\"\n                                       [timeframeContainers]=\"timeframeContainers\"\n                                       [timeframeDates]=\"timeframeDates\">\n                            </raain-map>\n                        </div>\n\n                        <div class=\"data-column\">\n                            <!-- Technical details (collapsible for cleaner UI) -->\n                            <details class=\"technical-details\">\n                                <summary>Image Details</summary>\n                                <div class=\"details-content\">\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Computed:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapDoneDate | date:'yyyy-MM-dd HH:mm' }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Version:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapVersion }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Launched by:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapLaunchedBy }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Time spent:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapTimeSpentInMs }}\n                                            ms</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Date:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapDate?.toISOString() }}\n                                            | {{ refreshManager.rainComputationMapDate | date:'yyyy-MM-dd HH:mm' }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Water in the map:</span>\n                                        <span class=\"detail-value\">{{ sumDetails }}</span>\n                                        <ion-toggle\n                                                (ionChange)=\"onTogglePixelMarkers()\"\n                                                [(ngModel)]=\"showPixelMarkers\"\n                                                style=\"margin-left: 8px; transform: scale(0.7);\">\n                                        </ion-toggle>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Source DBZ min:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapOriginalMin }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Source DBZ max:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapOriginalMax }}</span>\n                                    </div>\n                                </div>\n                            </details>\n                        </div>\n                    </ion-col>\n\n                    <!-- Data panel -->\n                    <ion-col *ngIf=\"!!compareManager.compareVersion\" class=\"data-column\" size-lg=\"5\" size-md=\"12\">\n                        <div class=\"data-panel\">\n                            <!-- Compare stack component -->\n                            <div class=\"compare-stack\">\n                                <raain-compare-stack\n                                        (selectedPoint)=\"onGaugeSelectInCompare($event)\"\n                                        [compareManager]=\"compareManager\"\n                                        [cumulative]=\"toggleCumulative\">\n                                </raain-compare-stack>\n                            </div>\n\n                            <!-- Technical details (collapsible for cleaner UI) -->\n                            <details class=\"technical-details\">\n                                <summary>Compare Details</summary>\n                                <div class=\"details-content\">\n                                    <div [ngClass]=\"{'warning': refreshManager.rainComputationMapDoneDate?.getTime() > compareManager.currentQualityDoneDate?.getTime() + 60000}\"\n                                         class=\"detail-row\">\n                                        <span class=\"detail-label\">Computed:</span>\n                                        <span class=\"detail-value\">{{ compareManager.currentQualityDoneDate | date:'yyyy-MM-dd HH:mm' }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Version:</span>\n                                        <span class=\"detail-value\">{{ compareManager.compareVersion }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Launched by:</span>\n                                        <span class=\"detail-value\">{{ compareManager.currentQualityLaunchedBy }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Time spent:</span>\n                                        <span class=\"detail-value\">{{ compareManager.currentQualityTimeSpentInMs }}\n                                            ms</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Gauges:</span>\n                                        <span class=\"detail-value\">{{ compareManager.gaugesInCompare.length }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Points:</span>\n                                        <span class=\"detail-value\">{{ compareManager.globalComparePoints.length }}</span>\n                                    </div>\n                                </div>\n                            </details>\n                        </div>\n                    </ion-col>\n                </ion-row>\n                <ion-row>\n                    <!-- Bottom progress bar -->\n                    <ion-progress-bar *ngIf=\"refreshInProgress\"\n                                      [buffer]=\"(countsPeriod.progress / ((timeframeDates?.length || 10) +3))+0.01\"\n                                      [value]=\"countsPeriod.progress / ((timeframeDates?.length || 10) +3)\"\n                                      color=\"primary\">\n                    </ion-progress-bar>\n                </ion-row>\n            </ion-grid>\n        </ion-card-content>\n    </ion-card>\n\n    <!-- Gauge values section -->\n    <ion-card *ngIf=\"gaugeSelectedPoints.length && gaugeSelectedPoints[0].values.length\" class=\"gauge-card\">\n        <ion-card-header>\n            <ion-card-title>\n                <ion-icon name=\"analytics-outline\"></ion-icon>\n                Selected Gauge Data\n            </ion-card-title>\n        </ion-card-header>\n        <ion-card-content>\n            <raain-date-focus\n                    [currentHeight]=\"300\"\n                    [focusDate]=\"periodBegin\"\n                    [focusRange]=\"DateRange.DAY\"\n                    [points]=\"gaugeSelectedPoints\"\n                    [withoutAll]=\"true\">\n            </raain-date-focus>\n        </ion-card-content>\n    </ion-card>\n\n    <!-- Quality Performance Modal -->\n    <div (click)=\"closeQualityModal()\" *ngIf=\"showQualityModal\" class=\"quality-modal-overlay\">\n        <div (click)=\"$event.stopPropagation()\" class=\"quality-modal-content\">\n            <div class=\"quality-modal-header\">\n                <h2>Model Quality Performance</h2>\n                <ion-button (click)=\"closeQualityModal()\" fill=\"clear\">\n                    <ion-icon name=\"close-outline\"></ion-icon>\n                </ion-button>\n            </div>\n            <div class=\"quality-modal-body\">\n                <div *ngIf=\"qualityIndicatorsLoading\" class=\"quality-loading\">\n                    <ion-spinner name=\"crescent\"></ion-spinner>\n                    <span>Loading indicators...</span>\n                </div>\n                <div *ngIf=\"!qualityIndicatorsLoading && qualityIndicators.length === 0\" class=\"quality-empty\">\n                    No quality indicators available for this year.\n                </div>\n                <table *ngIf=\"!qualityIndicatorsLoading && qualityIndicators.length > 0\" class=\"quality-table\">\n                    <thead>\n                    <tr>\n                        <th>Model</th>\n                        <th>Compare</th>\n                        <th>Gauges</th>\n                        <th>Period</th>\n                        <th>Avg Quality</th>\n                        <th>Updated</th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <tr *ngFor=\"let indicator of qualityIndicators\">\n                        <td>{{ indicator.computingVersion }}</td>\n                        <td>{{ indicator.qualityVersion }}</td>\n                        <td>{{ indicator.provider }}<br>{{ indicator.timeStepInMinutes }} min</td>\n                        <td>{{ formatDate(indicator.startDate) }}<br>{{ formatDate(indicator.endDate) }}</td>\n                        <td>{{ indicator.averageQuality | number:'1.2-2' }}</td>\n                        <td>{{ formatDate(indicator.lastUpdatedAt) }}</td>\n                    </tr>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </div>\n\n    <!-- Cumulative Selector Modal -->\n    <cumulative-selector *ngIf=\"showCumulativeSelector\"\n                         [rainId]=\"rainNode?.id\"\n                         [currentPeriodBegin]=\"periodBegin\"\n                         [currentPeriodEnd]=\"periodEnd\"\n                         [provider]=\"selectedProvider\"\n                         [timeStepInMinutes]=\"selectedTimeStep\"\n                         [isAdmin]=\"toggleAdmin\"\n                         (periodSelected)=\"onCumulativePeriodSelected($event)\"\n                         (cancelled)=\"onCumulativeSelectorCancelled()\">\n    </cumulative-selector>\n\n</div>\n", styles: [".raain-details-container{max-width:var(--app-max-width);margin:0 auto;padding:0 0 24px}.raain-details-card{width:100%;margin-bottom:20px}.raain-details-card ion-card-header{border-bottom:1px solid rgba(var(--ion-color-medium-rgb),.2)}.raain-details-card ion-card-header ion-card-title{display:flex;align-items:center}.raain-details-card ion-card-header ion-card-title ion-icon{margin-right:8px;color:var(--ion-color-primary)}.node-info-card{background-color:var(--ion-color-light)}.node-info-card .node-header{display:flex;align-items:center}.node-info-card .node-header .node-status{margin-right:16px}.node-info-card .node-header .node-status ion-icon{font-size:24px}.node-info-card .node-header .node-titles{flex:1}.node-info-card .node-header .node-titles ion-card-title{margin:0;font-size:1.4rem;font-weight:600;color:var(--ion-color-dark)}.node-info-card .node-header .node-titles ion-card-subtitle{padding-left:0;margin:4px 0 0;font-size:.9rem;color:var(--ion-color-medium)}.count-map-card,.period-card{background-color:var(--ion-color-light)}.period-card ion-card-title{display:flex;align-items:center}.period-card ion-card-title ion-icon{margin-right:8px;color:var(--ion-color-primary);font-size:20px}.period-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;position:relative}.now-button{min-width:100px}#all-dates{display:flex;align-items:center;margin-left:auto}#all-dates .toggle-label{margin-right:8px;white-space:nowrap}.refresh-button ion-icon{margin-right:4px;color:var(--ion-color-light)}.provider-selection{display:flex;align-items:center}.quality-info-button{--padding-start: 8px;--padding-end: 8px;font-size:.85rem;color:var(--ion-color-medium)}.quality-info-button ion-icon{font-size:18px;margin-left:4px}.selection-row{display:flex;flex-direction:row;align-items:center;gap:12px}.selection-row ion-select{flex:0 0 auto;min-width:100px;margin-bottom:0;padding:4px 8px;border:1px solid rgba(var(--ion-color-medium-rgb),.3);border-radius:var(--ion-border-radius);background-color:var(--ion-color-light)}.period-start,.period-duration{display:flex;align-items:center}.toggle-cumulative{display:flex;align-items:center;gap:8px;margin-left:auto}.toggle-cumulative .text-primary{color:var(--ion-color-primary);font-weight:600}.hidden-label{display:none}.datetime-input,#periodDuration,.duration-select{padding:8px 12px;border:1px solid rgba(var(--ion-color-medium-rgb),.3);border-radius:var(--ion-border-radius);background-color:var(--ion-color-light);font-family:var(--ion-font-family)}.datetime-input:focus,#periodDuration:focus,.duration-select:focus{outline:none;border-color:var(--ion-color-primary)}#periodDuration,.duration-select{min-width:150px}.gauge-card{background-color:var(--ion-color-light)}.gauge-card ion-card-title{display:flex;align-items:center}.gauge-card ion-card-title ion-icon{margin-right:8px;color:var(--ion-color-primary);font-size:20px}.error-row{cursor:pointer;background-color:rgba(var(--ion-color-danger-rgb),.1);border-left:3px solid var(--ion-color-danger);margin-top:8px;border-radius:4px;transition:background-color .2s ease}.error-row:hover{background-color:rgba(var(--ion-color-danger-rgb),.15)}.error-row .error-content{display:flex;align-items:flex-start;padding:8px 12px;gap:8px}.error-row .error-icon{color:var(--ion-color-danger);font-size:18px;flex-shrink:0;margin-top:2px}.error-row .error-text{flex:1;color:var(--ion-color-danger-shade);font-size:.9rem;word-break:break-word}.error-row .error-text.expanded{white-space:pre-wrap}.error-row .error-caret{color:var(--ion-color-danger);font-size:16px;flex-shrink:0;margin-top:2px}raain-compare-stack{width:100%;display:block}@media (max-width: 768px){.period-row{flex-direction:row;justify-content:space-between;align-items:center}#all-dates{margin-left:auto;padding-left:8px}#all-dates .toggle-label{font-size:.9rem}.map-header{flex-direction:row;justify-content:space-between;align-items:center;gap:16px}}.quality-modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999}.quality-modal-content{background-color:var(--ion-background-color, #fff);border-radius:12px;width:95%;max-width:900px;max-height:80vh;overflow:auto;box-shadow:0 4px 24px #0003}.quality-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(var(--ion-color-medium-rgb),.2)}.quality-modal-header h2{margin:0;font-size:1.25rem;font-weight:600;color:var(--ion-color-dark)}.quality-modal-header ion-button{--padding-start: 8px;--padding-end: 8px}.quality-modal-body{padding:20px}.quality-table{width:100%;border-collapse:collapse;margin-top:16px;table-layout:fixed}.quality-table th,.quality-table td{width:16.66%;padding:12px 16px;text-align:center;vertical-align:top;border-bottom:1px solid rgba(var(--ion-color-medium-rgb),.2)}.quality-table th{background-color:rgba(var(--ion-color-primary-rgb),.1);font-weight:600;color:var(--ion-color-dark)}.quality-table td{color:var(--ion-color-dark-tint);font-size:.7rem}.quality-table tbody tr:hover{background-color:rgba(var(--ion-color-primary-rgb),.05)}.quality-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--ion-color-medium)}.quality-loading ion-spinner{margin-bottom:12px}.quality-empty{text-align:center;padding:40px 20px;color:var(--ion-color-medium);font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i4.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i4.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i4.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i4.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i4.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i4.IonRow, selector: "ion-row" }, { kind: "component", type: i4.IonSelect, selector: "ion-select", inputs: ["cancelText", "compareWith", "disabled", "interface", "interfaceOptions", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "value"] }, { kind: "component", type: i4.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: i4.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i4.IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "mode", "name", "value"] }, { kind: "directive", type: i4.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i4.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: RaainMapComponent, selector: "raain-map", inputs: ["coordinates", "markers", "timeframeContainers", "autoplay", "showMarkers", "showSpeedMarkers", "showVisiblePixelMarkers", "showCumulative", "cumulativeDurationInMinutes", "currentHeight", "timeframeDates", "defaultDate", "sumValues", "sumFn"], outputs: ["selectedMarker", "changedDate", "changedSum"] }, { kind: "component", type: RaainCompareStackComponent, selector: "raain-compare-stack", inputs: ["compareManager", "currentHeight", "cumulative"], outputs: ["selectedPoint"] }, { kind: "component", type: RaainDateFocusComponent, selector: "raain-date-focus", inputs: ["points", "focusDate", "focusRange", "withoutAll", "currentHeight"] }, { kind: "component", type: RaainDateDynamicComponent, selector: "raain-date-dynamic", inputs: ["points", "focusDate", "focusRange", "withoutAll", "currentHeight", "fetchData"], outputs: ["changedDate"] }, { kind: "component", type: CumulativeSelectorComponent, selector: "cumulative-selector", inputs: ["rainId", "currentPeriodBegin", "currentPeriodEnd", "provider", "timeStepInMinutes", "isAdmin"], outputs: ["periodSelected", "cancelled"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RaainDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'raain-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Main content container -->\n<div *ngIf=\"rainNode\" class=\"raain-details-container\">\n\n    <!-- Period selection section -->\n    <ion-card class=\"period-card\">\n        <ion-card-content>\n            <div class=\"period-controls\">\n                <div class=\"period-row\">\n\n                    <ion-button (click)=\"toggleHistory = !toggleHistory; onEnableCountHistoryTab(rainNode)\"\n                                fill=\"outline\">\n                        <ion-icon name=\"calendar-clear-outline\" slot=\"start\"></ion-icon>\n                        <ion-icon [name]=\"toggleHistory ? 'chevron-down' : 'chevron-forward'\" slot=\"end\"></ion-icon>\n                    </ion-button>\n\n                    <div class=\"period-start ion-hide-md-down\">\n                        <input (change)=\"onPeriodBeginChange($event)\"\n                               [disabled]=\"toggleCumulative\"\n                               [value]=\"periodBeginAsString\"\n                               class=\"datetime-input\"\n                               type=\"datetime-local\">\n                    </div>\n\n                    <div class=\"period-duration ion-hide-md-down\">\n                        <ion-select (ionDismiss)=\"onPeriodDurationChange($event)\"\n                                    [(ngModel)]=\"periodDurationAsString\"\n                                    [disabled]=\"toggleCumulative\"\n                                    class=\"duration-select\"\n                                    id=\"periodDuration\"\n                                    interface=\"popover\">\n                            <ion-select-option value=\"0.25\">15 minutes</ion-select-option>\n                            <ion-select-option value=\"0.5\">30 minutes</ion-select-option>\n                            <ion-select-option value=\"1\">1 hour</ion-select-option>\n                            <ion-select-option value=\"2\">2 hours</ion-select-option>\n                            <ion-select-option value=\"3\">3 hours</ion-select-option>\n                            <ion-select-option value=\"4\">4 hours</ion-select-option>\n                            <ion-select-option value=\"5\">5 hours</ion-select-option>\n                            <ion-select-option value=\"6\">6 hours</ion-select-option>\n                            <ion-select-option value=\"8\">8 hours</ion-select-option>\n                            <ion-select-option value=\"10\">10 hours</ion-select-option>\n                            <ion-select-option value=\"12\">12 hours</ion-select-option>\n                            <ion-select-option *ngIf=\"isAdmin\" value=\"24\">24 hours</ion-select-option>\n                        </ion-select>\n                    </div>\n\n                    <div class=\"period-start ion-hide-md-down\">\n                        <input (change)=\"onPeriodEndChange($event)\"\n                               [disabled]=\"toggleCumulative\"\n                               [value]=\"periodEndAsString\"\n                               class=\"datetime-input\"\n                               type=\"datetime-local\">\n                    </div>\n\n                    <div class=\"toggle-cumulative\" (click)=\"onCumulativeToggleClick($event)\">\n                        <ion-label [class.text-primary]=\"toggleCumulative\">\n                            {{ toggleCumulative ? 'Cumulative' : 'Granular' }}\n                        </ion-label>\n                        <ion-toggle #cumulativeToggle [checked]=\"toggleCumulative\">\n                        </ion-toggle>\n                    </div>\n                </div>\n\n                <!-- Hidden label for change detection (uncomment to debug)\n                <div class=\"hidden-label\">{{ onChangeDetectionTest(rainNode) }}</div>\n                -->\n            </div>\n\n            <!-- Historical map section -->\n            <div *ngIf=\"toggleHistory\" class=\"period-controls\">\n                <raain-date-dynamic (changedDate)=\"onDateChangeInCount($event)\"\n                                    [currentHeight]=\"300\"\n                                    [fetchData]=\"fetchDataWrapper\"\n                                    [points]=\"countPoints\">\n                </raain-date-dynamic>\n            </div>\n        </ion-card-content>\n    </ion-card>\n\n    <!-- Map performance -->\n    <ion-grid class=\"map-performance\">\n        <ion-row id=\"progressAndRefresh\">\n            <ion-col class=\"provider-selection\" size=\"12\" size-md=\"6\">\n                <ion-button (click)=\"openQualityModal()\" class=\"quality-info-button\" fill=\"clear\">\n                    {{ refreshManager.rainComputationMapVersion }}\n                    <ion-icon name=\"help-circle-outline\" slot=\"end\"></ion-icon>\n                </ion-button>\n                <div *ngIf=\"availableProviders.length > 0 || availableTimeSteps.length > 0\" class=\"selection-row\">\n                    <ion-select (ionChange)=\"onProviderChanged($event)\"\n                                [value]=\"selectedProvider\"\n                                interface=\"popover\"\n                                label=\"Provider\"\n                                placeholder=\"Select Provider\">\n                        <ion-select-option *ngFor=\"let provider of availableProviders\" [value]=\"provider\">\n                            {{ provider }}\n                        </ion-select-option>\n                    </ion-select>\n\n                    <ion-select (ionChange)=\"onTimeStepChanged($event)\"\n                                [value]=\"selectedTimeStep\"\n                                interface=\"popover\"\n                                label=\"Time Step\"\n                                placeholder=\"Select Time Step\">\n                        <ion-select-option *ngFor=\"let step of availableTimeSteps\" [value]=\"step\">\n                            {{ step }} min\n                        </ion-select-option>\n                    </ion-select>\n                </div>\n            </ion-col>\n            <ion-col class=\"ion-text-right\" size=\"12\" size-md=\"6\">\n                <ion-label class=\"ion-margin-end\">\n                            <span *ngIf=\"percentOfComputations\">\n                                {{ percentOfComputations }}% Images\n                                <i *ngIf=\"countsPeriod.progress\" class=\"progress-indicator\">\n                                    In Progress: {{ countsPeriod.progress }}...\n                                </i>\n                            </span>\n                    <span *ngIf=\"!percentOfComputations\">\n                                No image available\n                            </span>\n\n                </ion-label>\n\n                <ion-button (click)=\"refreshMap()\" [disabled]=\"refreshInProgress\" class=\"refresh-button\">\n                    Refresh Map\n                </ion-button>\n            </ion-col>\n        </ion-row>\n\n        <!-- status update row -->\n        <ion-row>\n            <!-- Progress col -->\n            <ion-progress-bar\n                    [buffer]=\"(countsPeriod.progress / ((timeframeDates?.length || 10) +3))+0.01\"\n                    [style.visibility]=\"refreshInProgress ? 'visible' : 'hidden'\"\n                    [value]=\"countsPeriod.progress / ((timeframeDates?.length || 10) +3)\"\n                    color=\"primary\">\n            </ion-progress-bar>\n\n            <!-- Error col -->\n            <ion-col (click)=\"showFullError = !showFullError\" *ngIf=\"refreshManager.lastError\" class=\"error-row\"\n                     size=\"12\">\n                <div class=\"error-content\">\n                    <ion-icon class=\"error-icon\" name=\"warning-outline\"></ion-icon>\n                    <span [class.expanded]=\"showFullError\" class=\"error-text\">\n                        {{ showFullError ? refreshManager.lastError : truncatedError }}\n                    </span>\n                    <ion-icon [name]=\"showFullError ? 'chevron-up' : 'chevron-down'\" class=\"error-caret\"></ion-icon>\n                </div>\n            </ion-col>\n        </ion-row>\n    </ion-grid>\n\n    <!-- Map section -->\n    <ion-card class=\"map-card\">\n        <ion-card-content class=\"map-content\">\n            <ion-grid>\n                <ion-row *ngIf=\"toggleMap && percentOfImages\">\n                    <!-- Map component -->\n                    <ion-col class=\"map-column\" size-lg=\"7\" size-md=\"12\">\n                        <div class=\"map-container\">\n                            <raain-map #raainMapRef\n                                       (changedDate)=\"onDateChangeInMap($event)\"\n                                       (changedSum)=\"onSumChangeInMap($event)\"\n                                       (selectedMarker)=\"onGaugeSelectInMap($event)\"\n                                       [coordinates]=\"coordinates\"\n                                       [cumulativeDurationInMinutes]=\"cumulativeDurationInMinutes\"\n                                       [currentHeight]=\"500\"\n                                       [defaultDate]=\"dateShown\"\n                                       [markers]=\"{\n                                        borders,\n                                        gauges: compareManager.gaugesInMap,\n                                        gaugesInCompare: compareManager.gaugesInCompare,\n                                        selectedGauges: compareManager.selectedGauges,\n                                        pixels: compareManager.selectedPixels,\n                                        pixelsSolution: compareManager.pixelsSolutions?.length ? compareManager.pixelsSolutions[0] : [],\n                                        speeds: compareManager.speeds\n                                    }\"\n                                       [showCumulative]=\"toggleCumulative\"\n                                       [showVisiblePixelMarkers]=\"showPixelMarkers\"\n                                       [sumFn]=\"refreshManager.sumFn\"\n                                       [sumValues]=\"refreshManager.sumValues\"\n                                       [timeframeContainers]=\"timeframeContainers\"\n                                       [timeframeDates]=\"timeframeDates\">\n                            </raain-map>\n                        </div>\n\n                        <div class=\"data-column\">\n                            <!-- Technical details (collapsible for cleaner UI) -->\n                            <details class=\"technical-details\">\n                                <summary>Image Details</summary>\n                                <div class=\"details-content\">\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Computed:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapDoneDate | date:'yyyy-MM-dd HH:mm' }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Version:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapVersion }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Launched by:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapLaunchedBy }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Time spent:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapTimeSpentInMs }}\n                                            ms</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Date:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapDate?.toISOString() }}\n                                            | {{ refreshManager.rainComputationMapDate | date:'yyyy-MM-dd HH:mm' }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Water in the map:</span>\n                                        <span class=\"detail-value\">{{ sumDetails }}</span>\n                                        <ion-toggle\n                                                (ionChange)=\"onTogglePixelMarkers()\"\n                                                [(ngModel)]=\"showPixelMarkers\"\n                                                style=\"margin-left: 8px; transform: scale(0.7);\">\n                                        </ion-toggle>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Source DBZ min:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapOriginalMin }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Source DBZ max:</span>\n                                        <span class=\"detail-value\">{{ refreshManager.rainComputationMapOriginalMax }}</span>\n                                    </div>\n                                </div>\n                            </details>\n                        </div>\n                    </ion-col>\n\n                    <!-- Data panel -->\n                    <ion-col *ngIf=\"!!compareManager.compareVersion\" class=\"data-column\" size-lg=\"5\" size-md=\"12\">\n                        <div class=\"data-panel\">\n                            <!-- Compare stack component -->\n                            <div class=\"compare-stack\">\n                                <raain-compare-stack\n                                        (selectedPoint)=\"onGaugeSelectInCompare($event)\"\n                                        [compareManager]=\"compareManager\"\n                                        [cumulative]=\"toggleCumulative\">\n                                </raain-compare-stack>\n                            </div>\n\n                            <!-- Technical details (collapsible for cleaner UI) -->\n                            <details class=\"technical-details\">\n                                <summary>Compare Details</summary>\n                                <div class=\"details-content\">\n                                    <div [ngClass]=\"{'warning': refreshManager.rainComputationMapDoneDate?.getTime() > compareManager.currentQualityDoneDate?.getTime() + 60000}\"\n                                         class=\"detail-row\">\n                                        <span class=\"detail-label\">Computed:</span>\n                                        <span class=\"detail-value\">{{ compareManager.currentQualityDoneDate | date:'yyyy-MM-dd HH:mm' }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Version:</span>\n                                        <span class=\"detail-value\">{{ compareManager.compareVersion }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Launched by:</span>\n                                        <span class=\"detail-value\">{{ compareManager.currentQualityLaunchedBy }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Time spent:</span>\n                                        <span class=\"detail-value\">{{ compareManager.currentQualityTimeSpentInMs }}\n                                            ms</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Gauges:</span>\n                                        <span class=\"detail-value\">{{ compareManager.gaugesInCompare.length }}</span>\n                                    </div>\n                                    <div class=\"detail-row\">\n                                        <span class=\"detail-label\">Points:</span>\n                                        <span class=\"detail-value\">{{ compareManager.globalComparePoints.length }}</span>\n                                    </div>\n                                </div>\n                            </details>\n                        </div>\n                    </ion-col>\n                </ion-row>\n                <ion-row>\n                    <!-- Bottom progress bar -->\n                    <ion-progress-bar *ngIf=\"refreshInProgress\"\n                                      [buffer]=\"(countsPeriod.progress / ((timeframeDates?.length || 10) +3))+0.01\"\n                                      [value]=\"countsPeriod.progress / ((timeframeDates?.length || 10) +3)\"\n                                      color=\"primary\">\n                    </ion-progress-bar>\n                </ion-row>\n            </ion-grid>\n        </ion-card-content>\n    </ion-card>\n\n    <!-- Gauge values section -->\n    <ion-card *ngIf=\"gaugeSelectedPoints.length && gaugeSelectedPoints[0].values.length\" class=\"gauge-card\">\n        <ion-card-header>\n            <ion-card-title>\n                <ion-icon name=\"analytics-outline\"></ion-icon>\n                Selected Gauge Data\n            </ion-card-title>\n        </ion-card-header>\n        <ion-card-content>\n            <raain-date-focus\n                    [currentHeight]=\"300\"\n                    [focusDate]=\"periodBegin\"\n                    [focusRange]=\"DateRange.DAY\"\n                    [points]=\"gaugeSelectedPoints\"\n                    [withoutAll]=\"true\">\n            </raain-date-focus>\n        </ion-card-content>\n    </ion-card>\n\n    <!-- Quality Performance Modal -->\n    <div (click)=\"closeQualityModal()\" *ngIf=\"showQualityModal\" class=\"quality-modal-overlay\">\n        <div (click)=\"$event.stopPropagation()\" class=\"quality-modal-content\">\n            <div class=\"quality-modal-header\">\n                <h2>Model Quality Performance</h2>\n                <ion-button (click)=\"closeQualityModal()\" fill=\"clear\">\n                    <ion-icon name=\"close-outline\"></ion-icon>\n                </ion-button>\n            </div>\n            <div class=\"quality-modal-body\">\n                <div *ngIf=\"qualityIndicatorsLoading\" class=\"quality-loading\">\n                    <ion-spinner name=\"crescent\"></ion-spinner>\n                    <span>Loading indicators...</span>\n                </div>\n                <div *ngIf=\"!qualityIndicatorsLoading && qualityIndicators.length === 0\" class=\"quality-empty\">\n                    No quality indicators available for this year.\n                </div>\n                <table *ngIf=\"!qualityIndicatorsLoading && qualityIndicators.length > 0\" class=\"quality-table\">\n                    <thead>\n                    <tr>\n                        <th>Model</th>\n                        <th>Compare</th>\n                        <th>Gauges</th>\n                        <th>Period</th>\n                        <th>Avg Quality</th>\n                        <th>Updated</th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <tr *ngFor=\"let indicator of qualityIndicators\">\n                        <td>{{ indicator.computingVersion }}</td>\n                        <td>{{ indicator.qualityVersion }}</td>\n                        <td>{{ indicator.provider }}<br>{{ indicator.timeStepInMinutes }} min</td>\n                        <td>{{ formatDate(indicator.startDate) }}<br>{{ formatDate(indicator.endDate) }}</td>\n                        <td>{{ indicator.averageQuality | number:'1.2-2' }}</td>\n                        <td>{{ formatDate(indicator.lastUpdatedAt) }}</td>\n                    </tr>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </div>\n\n    <!-- Cumulative Selector Modal -->\n    <cumulative-selector *ngIf=\"showCumulativeSelector\"\n                         [rainId]=\"rainNode?.id\"\n                         [currentPeriodBegin]=\"periodBegin\"\n                         [currentPeriodEnd]=\"periodEnd\"\n                         [provider]=\"selectedProvider\"\n                         [timeStepInMinutes]=\"selectedTimeStep\"\n                         [isAdmin]=\"toggleAdmin\"\n                         (periodSelected)=\"onCumulativePeriodSelected($event)\"\n                         (cancelled)=\"onCumulativeSelectorCancelled()\">\n    </cumulative-selector>\n\n</div>\n", styles: [".raain-details-container{max-width:var(--app-max-width);margin:0 auto;padding:0 0 24px}.raain-details-card{width:100%;margin-bottom:20px}.raain-details-card ion-card-header{border-bottom:1px solid rgba(var(--ion-color-medium-rgb),.2)}.raain-details-card ion-card-header ion-card-title{display:flex;align-items:center}.raain-details-card ion-card-header ion-card-title ion-icon{margin-right:8px;color:var(--ion-color-primary)}.node-info-card{background-color:var(--ion-color-light)}.node-info-card .node-header{display:flex;align-items:center}.node-info-card .node-header .node-status{margin-right:16px}.node-info-card .node-header .node-status ion-icon{font-size:24px}.node-info-card .node-header .node-titles{flex:1}.node-info-card .node-header .node-titles ion-card-title{margin:0;font-size:1.4rem;font-weight:600;color:var(--ion-color-dark)}.node-info-card .node-header .node-titles ion-card-subtitle{padding-left:0;margin:4px 0 0;font-size:.9rem;color:var(--ion-color-medium)}.count-map-card,.period-card{background-color:var(--ion-color-light)}.period-card ion-card-title{display:flex;align-items:center}.period-card ion-card-title ion-icon{margin-right:8px;color:var(--ion-color-primary);font-size:20px}.period-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;position:relative}.now-button{min-width:100px}#all-dates{display:flex;align-items:center;margin-left:auto}#all-dates .toggle-label{margin-right:8px;white-space:nowrap}.refresh-button ion-icon{margin-right:4px;color:var(--ion-color-light)}.provider-selection{display:flex;align-items:center}.quality-info-button{--padding-start: 8px;--padding-end: 8px;font-size:.85rem;color:var(--ion-color-medium)}.quality-info-button ion-icon{font-size:18px;margin-left:4px}.selection-row{display:flex;flex-direction:row;align-items:center;gap:12px}.selection-row ion-select{flex:0 0 auto;min-width:100px;margin-bottom:0;padding:4px 8px;border:1px solid rgba(var(--ion-color-medium-rgb),.3);border-radius:var(--ion-border-radius);background-color:var(--ion-color-light)}.period-start,.period-duration{display:flex;align-items:center}.toggle-cumulative{display:flex;align-items:center;gap:8px;margin-left:auto}.toggle-cumulative .text-primary{color:var(--ion-color-primary);font-weight:600}.hidden-label{display:none}.datetime-input,#periodDuration,.duration-select{padding:8px 12px;border:1px solid rgba(var(--ion-color-medium-rgb),.3);border-radius:var(--ion-border-radius);background-color:var(--ion-color-light);font-family:var(--ion-font-family)}.datetime-input:focus,#periodDuration:focus,.duration-select:focus{outline:none;border-color:var(--ion-color-primary)}#periodDuration,.duration-select{min-width:150px}.gauge-card{background-color:var(--ion-color-light)}.gauge-card ion-card-title{display:flex;align-items:center}.gauge-card ion-card-title ion-icon{margin-right:8px;color:var(--ion-color-primary);font-size:20px}.error-row{cursor:pointer;background-color:rgba(var(--ion-color-danger-rgb),.1);border-left:3px solid var(--ion-color-danger);margin-top:8px;border-radius:4px;transition:background-color .2s ease}.error-row:hover{background-color:rgba(var(--ion-color-danger-rgb),.15)}.error-row .error-content{display:flex;align-items:flex-start;padding:8px 12px;gap:8px}.error-row .error-icon{color:var(--ion-color-danger);font-size:18px;flex-shrink:0;margin-top:2px}.error-row .error-text{flex:1;color:var(--ion-color-danger-shade);font-size:.9rem;word-break:break-word}.error-row .error-text.expanded{white-space:pre-wrap}.error-row .error-caret{color:var(--ion-color-danger);font-size:16px;flex-shrink:0;margin-top:2px}raain-compare-stack{width:100%;display:block}@media (max-width: 768px){.period-row{flex-direction:row;justify-content:space-between;align-items:center}#all-dates{margin-left:auto;padding-left:8px}#all-dates .toggle-label{font-size:.9rem}.map-header{flex-direction:row;justify-content:space-between;align-items:center;gap:16px}}.quality-modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999}.quality-modal-content{background-color:var(--ion-background-color, #fff);border-radius:12px;width:95%;max-width:900px;max-height:80vh;overflow:auto;box-shadow:0 4px 24px #0003}.quality-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(var(--ion-color-medium-rgb),.2)}.quality-modal-header h2{margin:0;font-size:1.25rem;font-weight:600;color:var(--ion-color-dark)}.quality-modal-header ion-button{--padding-start: 8px;--padding-end: 8px}.quality-modal-body{padding:20px}.quality-table{width:100%;border-collapse:collapse;margin-top:16px;table-layout:fixed}.quality-table th,.quality-table td{width:16.66%;padding:12px 16px;text-align:center;vertical-align:top;border-bottom:1px solid rgba(var(--ion-color-medium-rgb),.2)}.quality-table th{background-color:rgba(var(--ion-color-primary-rgb),.1);font-weight:600;color:var(--ion-color-dark)}.quality-table td{color:var(--ion-color-dark-tint);font-size:.7rem}.quality-table tbody tr:hover{background-color:rgba(var(--ion-color-primary-rgb),.05)}.quality-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--ion-color-medium)}.quality-loading ion-spinner{margin-bottom:12px}.quality-empty{text-align:center;padding:40px 20px;color:var(--ion-color-medium);font-style:italic}\n"] }]
+        }], ctorParameters: function () { return [{ type: Storage }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { toggleAdmin: [{
+                type: Input
+            }], rainNode: [{
+                type: Input
+            }], compareManager: [{
+                type: Input
+            }], refreshManager: [{
+                type: Input
+            }], profileService: [{
+                type: Input
+            }], radarService: [{
+                type: Input
+            }], cumulativeToggleRef: [{
+                type: ViewChild,
+                args: ['cumulativeToggle']
+            }] } });
+
+class Cache {
+    constructor() {
+        this._cache = {};
+    }
+    async getValue(key, asyncGetter) {
+        if (!Object.prototype.hasOwnProperty.call(this._cache, key)) {
+            console.log('cache not done: ', key);
+            this.putValue(key, await asyncGetter());
         }
-        if (c.hour !== undefined) {
-            dateToShow.setUTCHours(c.hour);
+        else {
+            console.log('cache done: ', key);
         }
-        if (c.minute !== undefined) {
-            dateToShow.setUTCMinutes(c.minute);
+        return this._cache[key];
+    }
+    putValue(key, value) {
+        this._cache[key] = value;
+        const length = Object.getOwnPropertyNames(this._cache).length;
+        if (length > 30) {
+            console.warn('Pb on cache size exceed ? do a restart ?', length);
         }
-        return dateToShow.toISOString();
     }
 }
-ProfileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProfileService, deps: [{ token: Storage }, { token: i2$1.FidjService }, { token: i3$1.HttpClient }, { token: i4$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-ProfileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProfileService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProfileService, decorators: [{
+Cache.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Cache, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+Cache.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Cache, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Cache, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: Storage }, { type: i2$1.FidjService }, { type: i3$1.HttpClient }, { type: i4$1.Router }]; } });
+        }], ctorParameters: function () { return []; } });
 
 class RadarService {
     constructor(profileService) {
@@ -3863,7 +4199,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         RaainSpeedComponent,
         RaainGlobeComponent,
         ProfileIconDirective,
-        RaainDetailsComponent], imports: [CommonModule, FormsModule, IonicModule, NgOptimizedImage, PipesModule], exports: [CommonModule,
+        RaainDetailsComponent,
+        CumulativeSelectorComponent], imports: [CommonModule, FormsModule, IonicModule, NgOptimizedImage, PipesModule], exports: [CommonModule,
         NgStyle,
         PipesModule,
         RaainMapComponent,
@@ -3875,7 +4212,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         RaainSpeedComponent,
         RaainGlobeComponent,
         ProfileIconDirective,
-        RaainDetailsComponent] });
+        RaainDetailsComponent,
+        CumulativeSelectorComponent] });
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, providers: [Storage, RadarService, ProfileService, Cache, IonRange], imports: [CommonModule, FormsModule, IonicModule, PipesModule, CommonModule,
         PipesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, decorators: [{
@@ -3892,6 +4230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         RaainGlobeComponent,
                         ProfileIconDirective,
                         RaainDetailsComponent,
+                        CumulativeSelectorComponent,
                     ],
                     imports: [CommonModule, FormsModule, IonicModule, NgOptimizedImage, PipesModule],
                     providers: [Storage, RadarService, ProfileService, Cache, IonRange],
@@ -3909,6 +4248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         RaainGlobeComponent,
                         ProfileIconDirective,
                         RaainDetailsComponent,
+                        CumulativeSelectorComponent,
                     ],
                 }]
         }], ctorParameters: function () { return [{ type: SharedModule, decorators: [{
@@ -3921,5 +4261,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AreInProgressPipe, AreReady, AreStopped, CONSTANTS, Cache, CompareManager, FidjStorage, FidjStorageNode, FrameSet, GaugeNodeFilter, HasGoodQuality, HasNotGoodQuality, HaveNotBeenRed, IsNotReady, IsReady, PipesModule, ProfileIconDirective, ProfileService, ProgressBuffer, ProgressValue, RaainCompareComponent, RaainCompareStackComponent, RaainConfigurationComponent, RaainDateDynamicComponent, RaainDateFocusComponent, RaainDetailsComponent, RaainGlobeComponent, RaainMapComponent, RaainSpeedComponent, RadarService, RefreshManager, SharedModule, Storage, WaitForValidation, XYType, mapDateRangeToString };
+export { AreInProgressPipe, AreReady, AreStopped, CONSTANTS, Cache, CompareManager, CumulativeSelectorComponent, FidjStorage, FidjStorageNode, FrameSet, GaugeNodeFilter, HasGoodQuality, HasNotGoodQuality, HaveNotBeenRed, IsNotReady, IsReady, PipesModule, ProfileIconDirective, ProfileService, ProgressBuffer, ProgressValue, RaainCompareComponent, RaainCompareStackComponent, RaainConfigurationComponent, RaainDateDynamicComponent, RaainDateFocusComponent, RaainDetailsComponent, RaainGlobeComponent, RaainMapComponent, RaainSpeedComponent, RadarService, RefreshManager, SharedModule, Storage, WaitForValidation, XYType, mapDateRangeToString };
 //# sourceMappingURL=raain-app.mjs.map