raain-app 1.6.21 → 1.6.24

package/fesm2015/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';
@@ -1347,10 +1347,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: [{
@@ -1512,11 +1512,11 @@ class CompareManager {
             this.onChanges();
         });
     }
-    refreshGlobalCompareQuality(targetsOrdered, withCompareDuplicate, cumulativeHours = 0) {
+    refreshGlobalCompareQuality(targetsOrdered, period, withCompareDuplicate, cumulativeHours = 0) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
                 yield this.fetchRainComputationQualities(targetsOrdered, cumulativeHours);
-                yield this.buildComparesTimeline(targetsOrdered, withCompareDuplicate);
+                yield this.buildComparesTimeline(targetsOrdered, period, withCompareDuplicate);
                 if (!this.buildCompares.compareCumulative) {
                     // throw Error('needs cumulative compare');
                     return;
@@ -1534,6 +1534,9 @@ class CompareManager {
     setGaugesInMap() {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
+            // 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 = yield this.profileService.getGauges((_a = this.rainNode) === null || _a === void 0 ? void 0 : _a.id, this.rainNode.getCenter());
             gaugesToFilter = gaugesToFilter
                 .sort((a, b) => {
@@ -1541,9 +1544,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 = yield 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));
@@ -1657,14 +1680,14 @@ class CompareManager {
         }
         return result.sort((a, b) => a.date.getTime() - b.date.getTime());
     }
-    buildComparesTimeline(targetsOrdered, withCompareDuplicate) {
+    buildComparesTimeline(targetsOrdered, period, withCompareDuplicate) {
         return __awaiter(this, void 0, void 0, function* () {
             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 === null || compareDates === void 0 ? void 0 : compareDates.length) > 1 ? compareDates : [period.begin, period.end]; // compareDates.slice(1, -1);
             this.buildCompares = SpeedMatrixContainer.BuildCompares(qualities, !withCompareDuplicate);
             return this.buildCompares;
         });
@@ -2044,7 +2067,7 @@ class RefreshManager {
                 const cumulativeHours = this.cumulative
                     ? (this.period.end.getTime() - this.period.begin.getTime()) / (60 * 60 * 1000)
                     : 0;
-                yield this.compareManager.refreshGlobalCompareQuality(targets, !this.removeDuplicate, cumulativeHours);
+                yield this.compareManager.refreshGlobalCompareQuality(targets, this.period, !this.removeDuplicate, cumulativeHours);
             }
             catch (e) {
                 console.error('refreshGlobalCompareReport', e);
@@ -2149,1514 +2172,1842 @@ function mapDateRangeToString(range) {
     }
 }
 
-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;
-        // 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 = (focusDate, focusRange) => __awaiter(this, void 0, void 0, function* () {
-            return yield this.fetchData(focusDate, focusRange);
-        });
+class FidjStorageNode {
+    constructor() {
+        this.radars = [];
+        this.rains = [];
+        this.gauges = [];
+        this.events = [];
+        this.infos = {};
     }
-    static PeriodDisplay(date) {
-        let d = new Date();
-        if (date) {
-            d = new Date(date);
-            const userTimezoneOffset = d.getTimezoneOffset() * 60000;
-            d = new Date(d.getTime() - userTimezoneOffset);
-        }
-        const exampleFormattedDate = '2017-06-01T08:30';
-        return d.toISOString().substring(0, exampleFormattedDate.length);
+    static getEmptyNode() {
+        return new FidjStorageNode();
     }
-    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);
-        }
-        return d;
+    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;
     }
-    static MapCountToDateValue(c) {
-        return {
-            date: RaainDetailsComponent.DateUTC(c.name),
-            value: Math.min(100, c.x),
-        };
+}
+class FidjStorageResult {
+}
+class FidjStorage {
+    constructor(storage) {
+        this.storage = storage;
+        this.node = FidjStorageNode.getEmptyNode();
+        this.fidjMetaResult = { data: new FidjStorageNode() };
     }
-    openQualityModal() {
-        var _a;
+    storeData(fidjService, data) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.showQualityModal = true;
-            this.qualityIndicatorsLoading = true;
-            this.qualityIndicators = [];
-            this.cdr.markForCheck();
-            if ((_a = this.rainNode) === null || _a === void 0 ? void 0 : _a.id) {
-                const result = yield this.profileService.getIndicators(this.rainNode.id);
-                this.qualityIndicators = result.indicators;
+            this.node = JSON.parse(JSON.stringify(data));
+            this.fidjMetaResult.data = this.node;
+            if (this.isDemoMode) {
+                this.storage.set('fidjMetaResult', JSON.stringify(this.fidjMetaResult));
+                return;
             }
-            this.qualityIndicatorsLoading = false;
-            this.cdr.markForCheck();
+            yield fidjService.put(this.fidjMetaResult);
         });
     }
-    closeQualityModal() {
-        this.showQualityModal = false;
-    }
-    formatDate(dateStr) {
-        const date = new Date(dateStr);
-        return (date.toLocaleDateString() +
-            ' ' +
-            date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
-    }
-    fetchData(focusDate, focusRange) {
+    getRefreshedNodeCopy(fidjService) {
         return __awaiter(this, void 0, void 0, function* () {
-            const values = [];
-            for (let i = 0; i < 10; i++) {
-                values.push({ date: new Date(2020 + i, 0), value: 10 });
-            }
-            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;
+            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));
             }
-            if (focusRange === DateRange.CENTURY) {
-                // fake
+            const firstDemoData = () => __awaiter(this, void 0, void 0, function* () {
+                this.node = FidjStorageNode.getDemoNode();
+                yield this.storeData(fidjService, this.node);
+            });
+            yield fidjService.sync(firstDemoData);
+            const fidjFindAllResults = yield fidjService.findAll();
+            if (fidjFindAllResults && fidjFindAllResults.length > 0) {
+                if (fidjFindAllResults[0].data) {
+                    this.fidjMetaResult = fidjFindAllResults[0];
+                    this.node = this.fidjMetaResult.data;
+                }
             }
-            else if (focusRange === DateRange.HOUR) {
-                const hourCounts = yield this.profileService.getCountsHour(this.rainNode.id, {
-                    periodBegin: focusDate,
-                });
-                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 = yield 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),
-                    },
-                ];
-            }
-            // console.log(`fetchData DONE ${range}`, data);
-            return data;
+            return JSON.parse(JSON.stringify(this.node));
         });
     }
-    ngOnChanges(changes) {
-        this.change(changes).then((ignored) => { });
+    setDemoMode(isDemo) {
+        this.isDemoMode = isDemo;
     }
-    ngOnDestroy() {
-        this.cleanAll();
+}
+
+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;
     }
-    onEnableCountHistoryTab(rain) {
+    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);
+    }
+    refreshProfile() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.toggleHistory) {
-                this.countPoints = [];
+            try {
+                this.nodeData = yield this.fidjStorage.getRefreshedNodeCopy(this.fidjService);
+                this.setRoles(yield this.fidjService.getRoles());
+                return this.nodeData;
+            }
+            catch (e) {
+                yield this.checkError(e);
             }
         });
     }
-    onPeriodBeginChange(event) {
-        var _a, _b;
+    isConnected() {
         return __awaiter(this, void 0, void 0, function* () {
-            const newValue = (_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.periodBeginAsString;
-            this.periodBegin = new Date(newValue);
-            this.periodBeginAsString = RaainDetailsComponent.PeriodDisplay(this.periodBegin);
-            this.storage.set('raain-periodBegin', this.periodBegin);
-            yield this.onPeriodDurationChange(event);
+            return this.fidjService.isConnected();
         });
     }
-    onPeriodEndChange(event) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            const newValue = (_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 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();
-        });
+    getEmail() {
+        var _a;
+        return (_a = this.email) !== null && _a !== void 0 ? _a : this.storage.get('raain-email', this.email);
     }
-    onPeriodDurationChange(_event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            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();
-        });
+    setEmail(email) {
+        this.email = email;
+        this.storage.set('raain-email', this.email);
     }
-    onDateChangeInCount(dateChanged) {
+    logout(fidjKey, fidjProd) {
         return __awaiter(this, void 0, void 0, function* () {
-            const dateString = dateChanged.toISOString().substring(0, 11) +
-                dateChanged.toLocaleTimeString().substring(0, 5);
-            this.periodDurationAsString = '1';
-            if (this.toggleCumulative) {
-                // Cumulative: select periodEnd
-                this.periodEndAsString = dateString;
-                yield this.onPeriodEndChange(null);
+            // this.storage.remove('raain-email');
+            if (!fidjKey) {
+                try {
+                    yield this.fidjService.loginInDemoMode();
+                    this.readyForSync.next(true);
+                }
+                catch (err) {
+                    console.error('initFidj catch pb: ', err);
+                }
+                return;
             }
-            else {
-                // Granular: select periodBegin
-                this.periodBeginAsString = dateString;
-                yield this.onPeriodBeginChange(null);
+            yield this.fidjService.logout(true);
+            try {
+                yield this.fidjService.init(fidjKey, {
+                    logLevel: LoggerLevelEnum.WARN,
+                    crypto: false,
+                    prod: fidjProd,
+                    useDB: false,
+                });
+                this.readyForSync.next(true);
+            }
+            catch (err) {
+                console.error('initFidj catch pb: ', err);
             }
-            yield this.refreshManager.refresh(false, this.toggleAdmin);
         });
     }
-    onDateChangeInMap(dateShown) {
+    checkError(error) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.dateShown = dateShown;
-            yield this.fetchAndUpdateMap();
-            yield this.refreshManager.setReportPeriod(this.dateShown);
+            if (error.code === 401) {
+                console.warn('Pb on auth');
+                if (this.router.url.indexOf('login') < 0) {
+                    try {
+                        yield this.fidjService.logout();
+                    }
+                    catch (ignored) {
+                        // Ignore logout errors as we're redirecting to logout page anyway
+                    }
+                    return this.gotoLout();
+                }
+            }
         });
     }
-    onSumChangeInMap(sum) {
+    gotoLout() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.sumDetails = sum;
+            try {
+                if (this.router.url.indexOf('login') > -1) {
+                    return;
+                }
+                yield this.router.navigateByUrl('/logout', {
+                    skipLocationChange: true,
+                    replaceUrl: true,
+                });
+            }
+            catch (e) {
+                console.error('gotoLout error: ', e);
+            }
         });
     }
-    onGaugeSelectInMap(mapLatLng) {
+    gotoLogin() {
         return __awaiter(this, void 0, void 0, function* () {
-            const gaugesFiltered = this.compareManager.gaugesInMap.filter((g) => g.lat === mapLatLng.lat && g.lng === mapLatLng.lng);
-            if (gaugesFiltered.length !== 1) {
+            if (this.router.url.indexOf('login') > -1) {
                 return;
             }
-            const gaugeSelected = gaugesFiltered[0];
-            yield this.refreshGaugeValues({ id: gaugeSelected.id, name: gaugeSelected.name });
-            yield this.compareManager.selectGauge(gaugeSelected.id, 0);
+            // await this.router.navigateByUrl('/', {skipLocationChange: true});
+            yield this.router.navigate(['/login']);
         });
     }
-    refreshGaugeValues(gaugeSelected) {
-        return __awaiter(this, void 0, void 0, function* () {
-            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 = yield 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;
     }
-    onGaugeSelectInCompare(e) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.refreshGaugeValues({ id: e.point.id, name: e.point.name });
-            yield this.compareManager.selectGauge(e.point.id, e.compareIndex);
-        });
+    needsConnectionRefresh() {
+        return this.fidjService.needsRefresh();
     }
-    onToggleMap($event) {
+    connectionRefresh() {
         return __awaiter(this, void 0, void 0, function* () {
-            // if (this.toggleMap) {
-            //    await this.refreshMap();
-            // }
+            yield this.fidjService.refresh();
         });
     }
-    onTogglePixelMarkers() {
-        // Toggle is bound to showPixelMarkers, raain-map handles marker display
-    }
-    toggleCumulativeChanged(_$event) {
+    storeAll() {
         return __awaiter(this, void 0, void 0, function* () {
-            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
-                yield this.refreshManager.refresh(false, this.toggleAdmin);
-            }
+            return this.fidjStorage.storeData(this.fidjService, this.nodeData);
         });
     }
-    updateCumulativeDurationInMinutes() {
-        if (this.toggleCumulative) {
-            // Cumulative mode: use period duration
-            this.cumulativeDurationInMinutes = parseFloat(this.periodDurationAsString) * 60;
-        }
-        else {
-            // Granular mode: use selectedTimeStep
-            this.cumulativeDurationInMinutes = this.selectedTimeStep || 10;
-        }
+    isAdmin() {
+        return this.roles.indexOf('admin') > -1;
     }
-    onProviderChanged($event) {
-        var _a;
+    // === Notifications ===
+    createNotification(rainId, message) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.selectedProvider = (_a = $event === null || $event === void 0 ? void 0 : $event.detail) === null || _a === void 0 ? void 0 : _a.value;
-            this.storage.set('raain-selectedProvider', this.selectedProvider);
-            yield this.applyRefreshManagerSettings();
+            const data = {
+                rain: rainId,
+                message,
+            };
+            try {
+                const resp = yield this.fidjService.sendOnEndpoint({
+                    key: 'notifications',
+                    verb: 'POST',
+                    defaultKeyUrl: this.defaultUrlForAPI + '/notifications',
+                    data,
+                });
+                return new EventNode(resp.data);
+            }
+            catch (e) {
+                yield this.checkError(e);
+            }
+            return null;
         });
     }
-    onTimeStepChanged($event) {
-        var _a;
+    getNotifications(rainId) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.selectedTimeStep = (_a = $event === null || $event === void 0 ? void 0 : $event.detail) === null || _a === void 0 ? void 0 : _a.value;
-            this.storage.set('raain-selectedTimeStep', this.selectedTimeStep);
-            this.updateCumulativeDurationInMinutes();
-            yield this.applyRefreshManagerSettings();
+            try {
+                const params = { rain: rainId };
+                const queryString = BuildQueryString(params);
+                const resp = yield 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) {
+                yield this.checkError(e);
+            }
+            return null;
         });
     }
-    loadProviders() {
-        var _a;
+    getAllNotifications() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!((_a = this.rainNode) === null || _a === void 0 ? void 0 : _a.id)) {
-                return;
-            }
             try {
-                const result = yield 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 resp = yield this.fidjService.sendOnEndpoint({
+                    key: 'notifications',
+                    verb: 'GET',
+                    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;
+                yield this.checkError(e);
             }
-            this.cdr.markForCheck();
+            return [];
         });
     }
-    onChangeDetectionTest(rainNode) {
-        console.log(TEST_DETECTION++, 'onChangeDetectionTest');
-        return '';
-    }
-    updateTruncatedError() {
-        var _a;
-        const error = ((_a = this.refreshManager) === null || _a === void 0 ? void 0 : _a.lastError) || '';
-        if (error.length <= 80) {
-            this.truncatedError = error;
-            return;
-        }
-        this.truncatedError = error.substring(0, 80) + '...';
-    }
-    updateCachedValues() {
-        this.updatePercentOfImages();
-        this.updatePercentOfComputations();
-        this.updateTruncatedError();
-        this.updateCumulativeDurationInMinutes();
-    }
-    refreshMap() {
+    // === Teams ===
+    getTeams() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.gaugeSelectedPoints = [];
-            this.dateShown = this.getDateBasedOnCumulativeMode();
-            this.borders = [];
-            this.compareManager.cleanAll();
-            yield this.compareManager.setGaugesInMap();
-            yield this.refreshManager.refresh(false, this.toggleAdmin);
-            this.cdr.markForCheck();
+            const teams = [];
+            const params = {};
+            const queryString = BuildQueryString(params);
+            try {
+                const resp = yield 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));
+                }
+            }
+            catch (e) {
+                yield this.checkError(e);
+            }
+            return teams;
         });
     }
-    setPeriodOfNow() {
+    getTeam(teamId) {
         return __awaiter(this, void 0, void 0, function* () {
-            const last30mn = new Date();
-            last30mn.setMinutes(last30mn.getMinutes() - 30);
-            this.periodBeginAsString =
-                last30mn.toISOString().substring(0, 11) + last30mn.toLocaleTimeString().substring(0, 5);
-            this.periodDurationAsString = '1';
-            yield this.onPeriodBeginChange(null);
-            yield this.refreshManager.refresh(false, this.toggleAdmin);
-        });
-    }
-    updatePercentOfImages() {
-        var _a, _b;
-        if (!((_b = (_a = this.countsPeriod) === null || _a === void 0 ? void 0 : _a.percentImages) === null || _b === void 0 ? void 0 : _b.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) => { var _a; return a + ((_a = b.x) !== null && _a !== void 0 ? _a : 0); }, 0);
-        this.percentOfImages = Math.round(summed / duringPeriod.length);
-    }
-    updatePercentOfComputations() {
-        var _a;
-        const timeline = (_a = this.refreshManager) === null || _a === void 0 ? void 0 : _a.getTimelineFrameSet();
-        if (!(timeline === null || timeline === void 0 ? void 0 : timeline.length)) {
-            this.percentOfComputations = 0;
-            return;
-        }
-        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 === null || fallbackDates === void 0 ? void 0 : fallbackDates.length) > 0) {
-            const dateExists = fallbackDates.some((d) => { var _a; return d.getTime() === ((_a = this.dateShown) === null || _a === void 0 ? void 0 : _a.getTime()); });
-            if (!dateExists) {
-                return this.toggleCumulative
-                    ? fallbackDates[fallbackDates.length - 1]
-                    : fallbackDates[0];
+            try {
+                const resp = yield this.fidjService.sendOnEndpoint({
+                    key: 'teams',
+                    verb: 'GET',
+                    relativePath: teamId,
+                    defaultKeyUrl: this.defaultUrlForAPI + '/teams',
+                });
+                return new TeamNode(resp.data);
             }
-        }
-        return this.toggleCumulative ? this.periodEnd : this.periodBegin;
-    }
-    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);
-        };
-        this.refreshManager.period = {
-            begin: alignTo5minFloor(this.periodBegin),
-            end: alignTo5minFloor(this.periodEnd),
-        };
+            catch (e) {
+                yield this.checkError(e);
+            }
+            return null;
+        });
     }
-    fetchAndUpdateMap() {
+    // === Radars ===
+    getRadars(name) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.refreshManager.fetch(this.dateShown, this.toggleGaugeMeasures, this.getCumulativeHours());
-            this.currentTimeframeTarget = this.refreshManager.getTimelineSelectedFrameSet();
-            this.cdr.markForCheck();
+            const radars = [];
+            const params = {};
+            if (name) {
+                params.name = name;
+            }
+            const queryString = BuildQueryString(params);
+            try {
+                const resp = yield 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);
+                }
+            }
+            catch (e) {
+                yield this.checkError(e);
+            }
+            return radars;
         });
     }
-    applyRefreshManagerSettings() {
+    getRadar(id) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.refreshManager) {
-                return;
+            try {
+                const resp = yield this.fidjService.sendOnEndpoint({
+                    key: 'radars',
+                    verb: 'GET',
+                    relativePath: id,
+                    defaultKeyUrl: this.defaultUrlForAPI + '/radars',
+                });
+                return new RadarNode(resp.data);
             }
-            this.refreshManager.provider = this.selectedProvider;
-            this.refreshManager.timeStepInMinutes = this.selectedTimeStep;
-            yield this.refreshManager.refresh(false, this.toggleAdmin);
+            catch (e) {
+                yield this.checkError(e);
+            }
+            return null;
         });
     }
-    cleanAll() {
-        var _a, _b;
-        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;
-        (_a = this.compareManager) === null || _a === void 0 ? void 0 : _a.cleanAll();
-        (_b = this.refreshManager) === null || _b === void 0 ? void 0 : _b.cleanAll();
-    }
-    init() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.cleanAll();
-            this.updateCachedValues();
-            yield this.initRain();
-            this.cdr.markForCheck();
-        });
-    }
-    initRain() {
+    putRadar(radarNode) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.rainNode) {
-                return;
+            const data = {
+                name: radarNode.name,
+            };
+            try {
+                const resp = yield this.fidjService.sendOnEndpoint({
+                    key: 'radars',
+                    relativePath: radarNode.id,
+                    verb: 'PUT',
+                    data,
+                    defaultKeyUrl: this.defaultUrlForAPI + '/radars/',
+                });
+                return new RadarNode(resp.data);
             }
-            this.isAdmin = this.profileService.isAdmin();
-            this.refreshManager.rainNode = this.rainNode;
-            this.compareManager.rainNode = this.rainNode;
-            // Load providers and set on refreshManager
-            yield 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 = yield this.profileService.getTeam(this.rainNode.getLink(TeamNode.TYPE).getId());
-            if (this.periodBegin && this.periodEnd) {
-                this.updateRefreshManagerPeriod();
-                yield this.refreshManager.refresh(false, this.toggleAdmin);
+            catch (e) {
+                yield this.checkError(e);
             }
         });
     }
-    onRefreshInProgress(countPeriods, timeframeDates) {
+    getLonelyRadars(rains) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.refreshInProgress = true;
-            this.countsPeriod = countPeriods;
-            this.timeframeDates = timeframeDates;
-            this.updateCachedValues();
-            this.cdr.markForCheck();
+            try {
+                const resp = yield 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;
+            }
+            catch (e) {
+                yield this.checkError(e);
+            }
+            return [];
         });
     }
-    onRefreshDone(timeframeDates) {
+    getRainTimeframe(rainId, begin, end, forced = false, provider = 'Raain', timeStepInMinutes = 10, windowInMinutes = 0) {
         return __awaiter(this, void 0, void 0, function* () {
-            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) {
-                    yield this.fetchAndUpdateMap();
+            try {
+                const params = {
+                    format: 'timeframeCumulative',
+                    provider,
+                    timeStepInMinutes: String(timeStepInMinutes),
+                    begin: begin === null || begin === void 0 ? void 0 : begin.toISOString(),
+                    end: end === null || end === void 0 ? void 0 : end.toISOString(),
+                };
+                if (forced) {
+                    params.forced = 'true';
                 }
+                params.windowInMinutes = String(windowInMinutes);
+                const queryString = BuildQueryString(params);
+                const resp = yield 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) {
+                yield this.checkError(e);
             }
+            return null;
         });
     }
-    onFetchDone(timeframeContainers) {
+    // === Rains ===
+    getRains(name) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (timeframeContainers) {
-                this.timeframeContainers = timeframeContainers;
+            const rains = [];
+            const params = {};
+            if (name) {
+                params.name = name;
             }
-            this.cdr.markForCheck();
+            const queryString = BuildQueryString(params);
+            try {
+                const resp = yield 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) {
+                yield this.checkError(e);
+            }
+            return rains;
         });
     }
-    change(_changes) {
+    getRain(id) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.init();
+            try {
+                const resp = yield this.fidjService.sendOnEndpoint({
+                    key: 'rains',
+                    relativePath: id,
+                    verb: 'GET',
+                    defaultKeyUrl: this.defaultUrlForAPI + '/rains/',
+                });
+                return new RainNode(resp.data);
+            }
+            catch (e) {
+                yield 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 = {};
-    }
-    getValue(key, asyncGetter) {
+    // === Count
+    getCounts(rainId, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!Object.prototype.hasOwnProperty.call(this._cache, key)) {
-                console.log('cache not done: ', key);
-                this.putValue(key, yield asyncGetter());
+            try {
+                const params = {
+                    range: options.range,
+                    begin: options.periodBegin.toISOString(),
+                };
+                const queryString = BuildQueryString(params);
+                const resp = yield 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) => {
+                    var _a, _b, _c;
+                    const label = this.setDateComponents(options.periodBegin, c);
+                    percentImages.push(new XYType((_a = c.percentImages) !== null && _a !== void 0 ? _a : 0, NaN, NaN, label));
+                    percentRainy.push(new XYType((_b = c.percentRainy) !== null && _b !== void 0 ? _b : 0, NaN, NaN, label));
+                    percentQ.push(new XYType((_c = c.percentQ) !== null && _c !== void 0 ? _c : 0, NaN, NaN, label));
+                });
+                return {
+                    percentImages,
+                    percentRainy,
+                    percentQ,
+                    queueRunning: resp.data.queueRunning,
+                };
             }
-            else {
-                console.log('cache done: ', key);
+            catch (e) {
+                yield 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);
-        }
-    }
-}
-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();
+    getCountsHour(rainId, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const params = {
+                    range: 'hour',
+                    begin: options.periodBegin.toISOString(),
+                };
+                const queryString = BuildQueryString(params);
+                const resp = yield 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) => {
+                    var _a, _b, _c;
+                    const label = this.setDateComponents(options.periodBegin, c);
+                    percentImages.push(new XYType((_a = c.percentImages) !== null && _a !== void 0 ? _a : 0, NaN, NaN, label));
+                    rainyCount.push(new XYType((_b = c.rainyCount) !== null && _b !== void 0 ? _b : 0, NaN, NaN, label));
+                    rainySum.push(new XYType((_c = c.rainySum) !== null && _c !== void 0 ? _c : 0, NaN, NaN, label));
+                });
+                return {
+                    percentImages,
+                    rainyCount,
+                    rainySum,
+                    queueRunning: resp.data.queueRunning,
+                };
+            }
+            catch (e) {
+                yield this.checkError(e);
+            }
+            return null;
+        });
     }
-    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;
+    // === Computing ===
+    getRainComputationCumulativeCartesianMapById(rainId, rainComputationCumulativeId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const params = { format: 'cartesian-map' };
+            const queryString = BuildQueryString(params);
+            try {
+                const response = yield 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) {
+                yield this.checkError(e);
+            }
+            return null;
+        });
     }
-}
-class FidjStorageResult {
-}
-class FidjStorage {
-    constructor(storage) {
-        this.storage = storage;
-        this.node = FidjStorageNode.getEmptyNode();
-        this.fidjMetaResult = { data: new FidjStorageNode() };
+    getRainComputationCumulativeCumulativesMapById(rainId, rainComputationCumulativeId, cumulativeHours) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const queryPath = `${rainId}/cumulatives/${rainComputationCumulativeId}/cumulative/${cumulativeHours}`;
+            try {
+                const response = yield 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) {
+                yield this.checkError(e);
+            }
+            return null;
+        });
     }
-    storeData(fidjService, data) {
+    getRainCumulativeCompareByDate(rainNode, rainComputationCumulativeId, date) {
         return __awaiter(this, void 0, void 0, function* () {
-            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 params = { date: date.toISOString() };
+            const queryString = BuildQueryString(params);
+            try {
+                const response = yield 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) {
+                yield this.checkError(e);
+            }
+            return null;
+        });
+    }
+    getRainCumulativeCumulativesCompareByDate(rainNode, rainComputationCumulativeId, date, cumulativeHours) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const params = {
+                date: date.toISOString(),
+                cumulativeHours,
+            };
+            const queryString = BuildQueryString(params);
+            try {
+                const response = yield 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) {
+                yield this.checkError(e);
+            }
+            return null;
+        });
+    }
+    getRainProgress(rainId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const queryPath = '' + rainId + '/progress';
+                const response = yield this.fidjService.sendOnEndpoint({
+                    key: 'rains',
+                    verb: 'GET',
+                    relativePath: queryPath,
+                    defaultKeyUrl: this.defaultUrlForAPI + '/rains',
+                });
+                // return response.data.inProgress;
+                return response.data.inQueue;
+            }
+            catch (e) {
+                yield this.checkError(e);
+            }
+            return 0;
+        });
+    }
+    getIndicators(rainId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const params = {
+                    cumulative: 'true',
+                };
+                const queryString = BuildQueryString(params);
+                const response = yield this.fidjService.sendOnEndpoint({
+                    key: 'rains',
+                    verb: 'GET',
+                    relativePath: rainId + '/indicators' + (queryString ? '?' + queryString : ''),
+                    defaultKeyUrl: this.defaultUrlForAPI + '/rains',
+                });
+                return response.data;
+            }
+            catch (e) {
+                yield this.checkError(e);
+            }
+            return { indicators: [] };
+        });
+    }
+    // GET /rains/:rainId/cumulatives - List available cumulative periods
+    getCumulativePeriods(rainId, filters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const params = {};
+                if ((filters === null || filters === void 0 ? void 0 : filters.windowInMinutes) !== undefined) {
+                    params.windowInMinutes = filters.windowInMinutes;
+                }
+                if (filters === null || filters === void 0 ? void 0 : filters.provider) {
+                    params.provider = filters.provider;
+                }
+                if ((filters === null || filters === void 0 ? void 0 : filters.isReady) !== undefined) {
+                    params.isReady = filters.isReady;
+                }
+                if ((filters === null || filters === void 0 ? void 0 : filters.forced) !== undefined) {
+                    params.forced = filters.forced;
+                }
+                const queryString = BuildQueryString(params);
+                const response = yield this.fidjService.sendOnEndpoint({
+                    key: 'rains',
+                    verb: 'GET',
+                    relativePath: rainId + '/cumulatives' + (queryString ? '?' + queryString : ''),
+                    defaultKeyUrl: this.defaultUrlForAPI + '/rains',
+                });
+                return response.data;
+            }
+            catch (e) {
+                yield this.checkError(e);
+            }
+            return { periods: [], total: 0 };
+        });
+    }
+    // POST /rains/:rainId/cumulatives - Trigger cumulative computation
+    createCumulativePeriod(rainId, params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const body = {
+                    periodBegin: params.periodBegin.toISOString(),
+                    periodEnd: params.periodEnd.toISOString(),
+                    provider: params.provider,
+                    confName: params.confName || 'admin',
+                    timeStepInMinutes: params.timeStepInMinutes || 5,
+                };
+                const response = yield this.fidjService.sendOnEndpoint({
+                    key: 'rains',
+                    verb: 'POST',
+                    relativePath: rainId + '/cumulatives',
+                    defaultKeyUrl: this.defaultUrlForAPI + '/rains',
+                    data: body,
+                });
+                return response.data;
+            }
+            catch (e) {
+                yield this.checkError(e);
+            }
+            return null;
+        });
+    }
+    // === Gauges ===
+    getGauge(gaugeId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const resp = yield this.fidjService.sendOnEndpoint({
+                    key: 'gauges',
+                    verb: 'GET',
+                    relativePath: gaugeId,
+                    defaultKeyUrl: this.defaultUrlForAPI + '/gauges',
+                });
+                return new GaugeNode(resp.data);
+            }
+            catch (e) {
+                yield this.checkError(e);
             }
-            yield fidjService.put(this.fidjMetaResult);
         });
     }
-    getRefreshedNodeCopy(fidjService) {
+    getGauges(rainId, aroundLatLng, pageCount = 1) {
         return __awaiter(this, void 0, void 0, function* () {
-            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 baseParams = {
+                aroundLatLng: `${aroundLatLng.lat},${aroundLatLng.lng}`,
+                rainId,
+            };
+            if (this.asTeamId) {
+                baseParams.teamId = this.asTeamId;
             }
-            const firstDemoData = () => __awaiter(this, void 0, void 0, function* () {
-                this.node = FidjStorageNode.getDemoNode();
-                yield this.storeData(fidjService, this.node);
-            });
-            yield fidjService.sync(firstDemoData);
-            const fidjFindAllResults = yield fidjService.findAll();
-            if (fidjFindAllResults && fidjFindAllResults.length > 0) {
-                if (fidjFindAllResults[0].data) {
-                    this.fidjMetaResult = fidjFindAllResults[0];
-                    this.node = this.fidjMetaResult.data;
+            const gauges = [];
+            try {
+                for (let count = 1; count <= pageCount; count++) {
+                    const params = Object.assign(Object.assign({}, baseParams), { page: count });
+                    const queryString = BuildQueryString(params);
+                    const resp = yield 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));
+                    }
                 }
             }
-            return JSON.parse(JSON.stringify(this.node));
+            catch (e) {
+                yield this.checkError(e);
+            }
+            return gauges;
         });
     }
-    setDemoMode(isDemo) {
-        this.isDemoMode = isDemo;
+    getGaugeMeasures(gaugeId, begin, end) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const params = {
+                begin: begin.toISOString(),
+                end: end.toISOString(),
+            };
+            const queryString = BuildQueryString(params);
+            const resp = yield 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;
+        });
     }
-}
-
-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;
+    getProviders(rainId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const response = yield 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],
+                };
+            }
+            catch (e) {
+                console.error('getProviders error:', e);
+                return {
+                    providers: [],
+                    timeStepInMinutes: [5, 10, 15, 30, 60],
+                };
+            }
+        });
     }
-    get isDemoMode() {
-        return this.isDemo;
+    setRoles(roles) {
+        this.roles = roles;
     }
-    set isDemoMode(mode) {
-        this.isDemo = mode ? mode : true;
-        this.fidjStorage.setDemoMode(this.isDemo);
+    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();
     }
-    get defaultUrlForAPI() {
-        return this.storage.get('raain-urlForAPI');
+}
+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;
     }
-    set defaultUrlForAPI(url) {
-        this.storage.set('raain-urlForAPI', url);
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.currentWindowMinutes = Math.round((this.currentPeriodEnd.getTime() - this.currentPeriodBegin.getTime()) / 60000);
+            yield this.loadAvailablePeriods();
+        });
     }
-    refreshProfile() {
+    loadAvailablePeriods() {
         return __awaiter(this, void 0, void 0, function* () {
+            this.loading = true;
+            this.errorMessage = '';
+            this.cdr.markForCheck();
             try {
-                this.nodeData = yield this.fidjStorage.getRefreshedNodeCopy(this.fidjService);
-                this.setRoles(yield this.fidjService.getRoles());
-                return this.nodeData;
+                // Fetch all cumulative periods (admin sees all, non-admin sees only customer-launched)
+                const response = yield this.profileService.getCumulativePeriods(this.rainId, {
+                    provider: this.provider,
+                    forced: this.isAdmin,
+                });
+                // 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) {
-                yield this.checkError(e);
+                this.errorMessage = 'Failed to load cumulative periods';
+                console.error('Error loading cumulative periods:', e);
             }
+            this.loading = false;
+            this.cdr.markForCheck();
         });
     }
-    isConnected() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.fidjService.isConnected();
-        });
-    }
-    getEmail() {
-        var _a;
-        return (_a = this.email) !== null && _a !== void 0 ? _a : this.storage.get('raain-email', this.email);
+    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;
+        }
     }
-    setEmail(email) {
-        this.email = email;
-        this.storage.set('raain-email', this.email);
+    selectPeriod(period) {
+        this.periodSelected.emit({
+            periodBegin: new Date(period.periodBegin),
+            periodEnd: new Date(period.periodEnd),
+            windowInMinutes: period.windowInMinutes,
+        });
     }
-    logout(fidjKey, fidjProd) {
+    createNewPeriod() {
         return __awaiter(this, void 0, void 0, function* () {
-            // this.storage.remove('raain-email');
-            if (!fidjKey) {
-                try {
-                    yield this.fidjService.loginInDemoMode();
-                    this.readyForSync.next(true);
-                }
-                catch (err) {
-                    console.error('initFidj catch pb: ', err);
-                }
+            if (!this.canCreateNew || this.creating) {
                 return;
             }
-            yield this.fidjService.logout(true);
+            this.creating = true;
+            this.creationProgress = 'Starting cumulative computation...';
+            this.errorMessage = '';
+            this.cdr.markForCheck();
             try {
-                yield this.fidjService.init(fidjKey, {
-                    logLevel: LoggerLevelEnum.WARN,
-                    crypto: false,
-                    prod: fidjProd,
-                    useDB: false,
+                // Trigger cumulative creation
+                const result = yield this.profileService.createCumulativePeriod(this.rainId, {
+                    periodBegin: this.currentPeriodBegin,
+                    periodEnd: this.currentPeriodEnd,
+                    provider: this.provider,
+                    timeStepInMinutes: this.timeStepInMinutes,
                 });
-                this.readyForSync.next(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 = yield this.pollForCompletion();
+                if (success) {
+                    this.periodSelected.emit({
+                        periodBegin: this.currentPeriodBegin,
+                        periodEnd: this.currentPeriodEnd,
+                        windowInMinutes: this.currentWindowMinutes,
+                    });
+                }
+                else {
+                    this.errorMessage = 'Timeout waiting for cumulative computation';
+                }
             }
-            catch (err) {
-                console.error('initFidj catch pb: ', err);
+            catch (e) {
+                this.errorMessage = `Error: ${e.message || 'Unknown error'}`;
+                console.error('Error creating cumulative:', e);
             }
+            this.creating = false;
+            this.cdr.markForCheck();
         });
     }
-    checkError(error) {
+    pollForCompletion() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (error.code === 401) {
-                console.warn('Pb on auth');
-                if (this.router.url.indexOf('login') < 0) {
-                    try {
-                        yield this.fidjService.logout();
-                    }
-                    catch (ignored) {
-                        // Ignore logout errors as we're redirecting to logout page anyway
+            const startTime = Date.now();
+            while (Date.now() - startTime < this.POLL_TIMEOUT_MS) {
+                try {
+                    const progress = yield this.profileService.getRainProgress(this.rainId);
+                    if (progress === 0) {
+                        // Queue is empty, check if cumulative exists (admin sees all cumulatives)
+                        const response = yield 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;
+                        }
                     }
-                    return this.gotoLout();
+                    const elapsed = Math.round((Date.now() - startTime) / 1000);
+                    this.creationProgress = `Computing... (${elapsed}s, queue: ${progress})`;
+                    this.cdr.markForCheck();
+                    yield this.sleep(this.POLL_INTERVAL_MS);
+                }
+                catch (e) {
+                    console.warn('Poll error:', e);
+                    yield this.sleep(this.POLL_INTERVAL_MS);
                 }
             }
+            return false;
         });
     }
-    gotoLout() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                if (this.router.url.indexOf('login') > -1) {
-                    return;
-                }
-                yield this.router.navigateByUrl('/logout', {
-                    skipLocationChange: true,
-                    replaceUrl: true,
-                });
-            }
-            catch (e) {
-                console.error('gotoLout error: ', e);
-            }
+    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`;
+        }
+        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 = (focusDate, focusRange) => __awaiter(this, void 0, void 0, function* () {
+            return yield this.fetchData(focusDate, focusRange);
         });
     }
-    gotoLogin() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.router.url.indexOf('login') > -1) {
-                return;
-            }
-            // await this.router.navigateByUrl('/', {skipLocationChange: true});
-            yield this.router.navigate(['/login']);
-        });
+    static PeriodDisplay(date) {
+        let d = new Date();
+        if (date) {
+            d = new Date(date);
+            const userTimezoneOffset = d.getTimezoneOffset() * 60000;
+            d = new Date(d.getTime() - userTimezoneOffset);
+        }
+        const exampleFormattedDate = '2017-06-01T08:30';
+        return d.toISOString().substring(0, exampleFormattedDate.length);
     }
-    isLoggedIn() {
-        const loggedIn = this.fidjService.isLoggedIn();
-        console.log('isLoggedIn: ', loggedIn);
-        return loggedIn;
+    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);
+        }
+        return d;
     }
-    needsConnectionRefresh() {
-        return this.fidjService.needsRefresh();
+    static MapCountToDateValue(c) {
+        return {
+            date: RaainDetailsComponent.DateUTC(c.name),
+            value: Math.min(100, c.x),
+        };
     }
-    connectionRefresh() {
+    openQualityModal() {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.fidjService.refresh();
+            this.showQualityModal = true;
+            this.qualityIndicatorsLoading = true;
+            this.qualityIndicators = [];
+            this.cdr.markForCheck();
+            if ((_a = this.rainNode) === null || _a === void 0 ? void 0 : _a.id) {
+                const result = yield this.profileService.getIndicators(this.rainNode.id);
+                this.qualityIndicators = result.indicators;
+            }
+            this.qualityIndicatorsLoading = false;
+            this.cdr.markForCheck();
         });
     }
-    storeAll() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.fidjStorage.storeData(this.fidjService, this.nodeData);
-        });
+    closeQualityModal() {
+        this.showQualityModal = false;
     }
-    isAdmin() {
-        return this.roles.indexOf('admin') > -1;
+    formatDate(dateStr) {
+        const date = new Date(dateStr);
+        return (date.toLocaleDateString() +
+            ' ' +
+            date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
     }
-    // === Notifications ===
-    createNotification(rainId, message) {
+    fetchData(focusDate, focusRange) {
         return __awaiter(this, void 0, void 0, function* () {
-            const data = {
-                rain: rainId,
-                message,
-            };
-            try {
-                const resp = yield this.fidjService.sendOnEndpoint({
-                    key: 'notifications',
-                    verb: 'POST',
-                    defaultKeyUrl: this.defaultUrlForAPI + '/notifications',
-                    data,
-                });
-                return new EventNode(resp.data);
+            const values = [];
+            for (let i = 0; i < 10; i++) {
+                values.push({ date: new Date(2020 + i, 0), value: 10 });
             }
-            catch (e) {
-                yield 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;
-        });
-    }
-    getNotifications(rainId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const params = { rain: rainId };
-                const queryString = BuildQueryString(params);
-                const resp = yield this.fidjService.sendOnEndpoint({
-                    key: 'notifications',
-                    verb: 'GET',
-                    relativePath: queryString ? '?' + queryString : '',
-                    defaultKeyUrl: this.defaultUrlForAPI + '/notifications',
+            if (focusRange === DateRange.CENTURY) {
+                // fake
+            }
+            else if (focusRange === DateRange.HOUR) {
+                const hourCounts = yield this.profileService.getCountsHour(this.rainNode.id, {
+                    periodBegin: focusDate,
                 });
-                return resp.data.notifications.map((n) => new EventNode(n));
+                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),
+                    },
+                ];
             }
-            catch (e) {
-                yield this.checkError(e);
+            else {
+                const counts = yield 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),
+                    },
+                ];
             }
-            return null;
+            // console.log(`fetchData DONE ${range}`, data);
+            return data;
         });
     }
-    getAllNotifications() {
+    ngOnChanges(changes) {
+        this.change(changes).then((ignored) => { });
+    }
+    ngOnDestroy() {
+        this.cleanAll();
+    }
+    onEnableCountHistoryTab(rain) {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const resp = yield this.fidjService.sendOnEndpoint({
-                    key: 'notifications',
-                    verb: 'GET',
-                    defaultKeyUrl: this.defaultUrlForAPI + '/notifications',
-                });
-                return resp.data.notifications.map((n) => new EventNode(n));
-            }
-            catch (e) {
-                yield this.checkError(e);
+            if (!this.toggleHistory) {
+                this.countPoints = [];
             }
-            return [];
         });
     }
-    // === Teams ===
-    getTeams() {
+    onPeriodBeginChange(event) {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
-            const teams = [];
-            const params = {};
-            const queryString = BuildQueryString(params);
-            try {
-                const resp = yield 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));
-                }
-            }
-            catch (e) {
-                yield this.checkError(e);
-            }
-            return teams;
+            const newValue = (_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.periodBeginAsString;
+            this.periodBegin = new Date(newValue);
+            this.periodBeginAsString = RaainDetailsComponent.PeriodDisplay(this.periodBegin);
+            this.storage.set('raain-periodBegin', this.periodBegin);
+            yield this.onPeriodDurationChange(event);
         });
     }
-    getTeam(teamId) {
+    onPeriodEndChange(event) {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const resp = yield this.fidjService.sendOnEndpoint({
-                    key: 'teams',
-                    verb: 'GET',
-                    relativePath: teamId,
-                    defaultKeyUrl: this.defaultUrlForAPI + '/teams',
-                });
-                return new TeamNode(resp.data);
-            }
-            catch (e) {
-                yield this.checkError(e);
-            }
-            return null;
+            const newValue = (_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 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();
+        });
+    }
+    onPeriodDurationChange(_event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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();
         });
     }
-    // === Radars ===
-    getRadars(name) {
+    onDateChangeInCount(dateChanged) {
         return __awaiter(this, void 0, void 0, function* () {
-            const radars = [];
-            const params = {};
-            if (name) {
-                params.name = name;
-            }
-            const queryString = BuildQueryString(params);
-            try {
-                const resp = yield 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);
-                }
+            const dateString = dateChanged.toISOString().substring(0, 11) +
+                dateChanged.toLocaleTimeString().substring(0, 5);
+            this.periodDurationAsString = '1';
+            if (this.toggleCumulative) {
+                // Cumulative: select periodEnd
+                this.periodEndAsString = dateString;
+                yield this.onPeriodEndChange(null);
             }
-            catch (e) {
-                yield this.checkError(e);
+            else {
+                // Granular: select periodBegin
+                this.periodBeginAsString = dateString;
+                yield this.onPeriodBeginChange(null);
             }
-            return radars;
+            yield this.refreshManager.refresh(false, this.toggleAdmin);
         });
     }
-    getRadar(id) {
+    onDateChangeInMap(dateShown) {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const resp = yield this.fidjService.sendOnEndpoint({
-                    key: 'radars',
-                    verb: 'GET',
-                    relativePath: id,
-                    defaultKeyUrl: this.defaultUrlForAPI + '/radars',
-                });
-                return new RadarNode(resp.data);
-            }
-            catch (e) {
-                yield this.checkError(e);
-            }
-            return null;
+            this.dateShown = dateShown;
+            yield this.fetchAndUpdateMap();
+            yield this.refreshManager.setReportPeriod(this.dateShown);
         });
     }
-    putRadar(radarNode) {
+    onSumChangeInMap(sum) {
         return __awaiter(this, void 0, void 0, function* () {
-            const data = {
-                name: radarNode.name,
-            };
-            try {
-                const resp = yield this.fidjService.sendOnEndpoint({
-                    key: 'radars',
-                    relativePath: radarNode.id,
-                    verb: 'PUT',
-                    data,
-                    defaultKeyUrl: this.defaultUrlForAPI + '/radars/',
-                });
-                return new RadarNode(resp.data);
-            }
-            catch (e) {
-                yield this.checkError(e);
-            }
+            this.sumDetails = sum;
         });
     }
-    getLonelyRadars(rains) {
+    onGaugeSelectInMap(mapLatLng) {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const resp = yield 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;
-            }
-            catch (e) {
-                yield this.checkError(e);
+            const gaugesFiltered = this.compareManager.gaugesInMap.filter((g) => g.lat === mapLatLng.lat && g.lng === mapLatLng.lng);
+            if (gaugesFiltered.length !== 1) {
+                return;
             }
-            return [];
+            const gaugeSelected = gaugesFiltered[0];
+            yield this.refreshGaugeValues({ id: gaugeSelected.id, name: gaugeSelected.name });
+            yield this.compareManager.selectGauge(gaugeSelected.id, 0);
         });
     }
-    getRainTimeframe(rainId, begin, end, forced = false, provider = 'Raain', timeStepInMinutes = 10, windowInMinutes = 0) {
+    refreshGaugeValues(gaugeSelected) {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const params = {
-                    format: 'timeframeCumulative',
-                    provider,
-                    timeStepInMinutes: String(timeStepInMinutes),
-                    begin: begin === null || begin === void 0 ? void 0 : begin.toISOString(),
-                    end: end === null || end === void 0 ? void 0 : end.toISOString(),
+            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 = yield 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,
                 };
-                if (forced) {
-                    params.forced = 'true';
-                }
-                params.windowInMinutes = String(windowInMinutes);
-                const queryString = BuildQueryString(params);
-                const resp = yield 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) {
-                yield this.checkError(e);
-            }
-            return null;
+            });
+            this.gaugeSelectedPoints = [
+                {
+                    label: gaugeSelected.name,
+                    style: 'bar',
+                    values: gaugeValues,
+                },
+            ];
+            this.cdr.markForCheck();
         });
     }
-    // === Rains ===
-    getRains(name) {
+    onGaugeSelectInCompare(e) {
         return __awaiter(this, void 0, void 0, function* () {
-            const rains = [];
-            const params = {};
-            if (name) {
-                params.name = name;
-            }
-            const queryString = BuildQueryString(params);
-            try {
-                const resp = yield 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) {
-                yield this.checkError(e);
-            }
-            return rains;
+            yield this.refreshGaugeValues({ id: e.point.id, name: e.point.name });
+            yield this.compareManager.selectGauge(e.point.id, e.compareIndex);
         });
     }
-    getRain(id) {
+    onToggleMap($event) {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const resp = yield this.fidjService.sendOnEndpoint({
-                    key: 'rains',
-                    relativePath: id,
-                    verb: 'GET',
-                    defaultKeyUrl: this.defaultUrlForAPI + '/rains/',
-                });
-                return new RainNode(resp.data);
+            // if (this.toggleMap) {
+            //    await this.refreshMap();
+            // }
+        });
+    }
+    onTogglePixelMarkers() {
+        // Toggle is bound to showPixelMarkers, raain-map handles marker display
+    }
+    onCumulativeToggleClick($event) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log('[CumulativeToggle] click event', {
+                currentValue: this.toggleCumulative,
+                eventType: $event.type,
+                target: (_a = $event.target) === null || _a === void 0 ? void 0 : _a.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) {
-                yield 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();
+                    yield this.refreshManager.refresh(false, this.toggleAdmin);
+                }
+                this.cdr.markForCheck();
             }
-            return null;
+            console.log('[CumulativeToggle] after handler, toggleCumulative =', this.toggleCumulative);
         });
     }
-    // === Count
-    getCounts(rainId, options) {
+    onCumulativePeriodSelected(selection) {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const params = {
-                    range: options.range,
-                    begin: options.periodBegin.toISOString(),
-                };
-                const queryString = BuildQueryString(params);
-                const resp = yield 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) => {
-                    var _a, _b, _c;
-                    const label = this.setDateComponents(options.periodBegin, c);
-                    percentImages.push(new XYType((_a = c.percentImages) !== null && _a !== void 0 ? _a : 0, NaN, NaN, label));
-                    percentRainy.push(new XYType((_b = c.percentRainy) !== null && _b !== void 0 ? _b : 0, NaN, NaN, label));
-                    percentQ.push(new XYType((_c = c.percentQ) !== null && _c !== void 0 ? _c : 0, NaN, NaN, label));
-                });
-                return {
-                    percentImages,
-                    percentRainy,
-                    percentQ,
-                    queueRunning: resp.data.queueRunning,
-                };
-            }
-            catch (e) {
-                yield this.checkError(e);
+            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();
+                yield this.refreshManager.refresh(false, this.toggleAdmin);
             }
-            return null;
+            this.cdr.markForCheck();
         });
     }
-    getCountsHour(rainId, options) {
+    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;
+        }
+        else {
+            // Granular mode: use selectedTimeStep
+            this.cumulativeDurationInMinutes = this.selectedTimeStep || 10;
+        }
+    }
+    onProviderChanged($event) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const params = {
-                    range: 'hour',
-                    begin: options.periodBegin.toISOString(),
-                };
-                const queryString = BuildQueryString(params);
-                const resp = yield 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) => {
-                    var _a, _b, _c;
-                    const label = this.setDateComponents(options.periodBegin, c);
-                    percentImages.push(new XYType((_a = c.percentImages) !== null && _a !== void 0 ? _a : 0, NaN, NaN, label));
-                    rainyCount.push(new XYType((_b = c.rainyCount) !== null && _b !== void 0 ? _b : 0, NaN, NaN, label));
-                    rainySum.push(new XYType((_c = c.rainySum) !== null && _c !== void 0 ? _c : 0, NaN, NaN, label));
-                });
-                return {
-                    percentImages,
-                    rainyCount,
-                    rainySum,
-                    queueRunning: resp.data.queueRunning,
-                };
-            }
-            catch (e) {
-                yield this.checkError(e);
-            }
-            return null;
+            this.selectedProvider = (_a = $event === null || $event === void 0 ? void 0 : $event.detail) === null || _a === void 0 ? void 0 : _a.value;
+            this.storage.set('raain-selectedProvider', this.selectedProvider);
+            yield this.applyRefreshManagerSettings();
         });
     }
-    // === Computing ===
-    getRainComputationCumulativeCartesianMapById(rainId, rainComputationCumulativeId) {
+    onTimeStepChanged($event) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            const params = { format: 'cartesian-map' };
-            const queryString = BuildQueryString(params);
-            try {
-                const response = yield 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) {
-                yield this.checkError(e);
-            }
-            return null;
+            this.selectedTimeStep = (_a = $event === null || $event === void 0 ? void 0 : $event.detail) === null || _a === void 0 ? void 0 : _a.value;
+            this.storage.set('raain-selectedTimeStep', this.selectedTimeStep);
+            this.updateCumulativeDurationInMinutes();
+            yield this.applyRefreshManagerSettings();
         });
     }
-    getRainComputationCumulativeCumulativesMapById(rainId, rainComputationCumulativeId, cumulativeHours) {
+    loadProviders() {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            const queryPath = `${rainId}/cumulatives/${rainComputationCumulativeId}/cumulative/${cumulativeHours}`;
+            if (!((_a = this.rainNode) === null || _a === void 0 ? void 0 : _a.id)) {
+                return;
+            }
             try {
-                const response = yield 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;
+                const result = yield 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) {
-                yield this.checkError(e);
+                // Set fallback values
+                this.availableProviders = ['Raain'];
+                this.availableTimeSteps = [5, 10, 15, 30, 60];
+                this.selectedProvider = 'Raain';
+                this.selectedTimeStep = 10;
             }
-            return null;
+            // Set provider and timeStep on refreshManager
+            if (this.refreshManager) {
+                this.refreshManager.provider = this.selectedProvider;
+                this.refreshManager.timeStepInMinutes = this.selectedTimeStep;
+            }
+            this.cdr.markForCheck();
         });
     }
-    getRainCumulativeCompareByDate(rainNode, rainComputationCumulativeId, date) {
+    onChangeDetectionTest(rainNode) {
+        console.log(TEST_DETECTION++, 'onChangeDetectionTest');
+        return '';
+    }
+    updateTruncatedError() {
+        var _a;
+        const error = ((_a = this.refreshManager) === null || _a === void 0 ? void 0 : _a.lastError) || '';
+        if (error.length <= 80) {
+            this.truncatedError = error;
+            return;
+        }
+        this.truncatedError = error.substring(0, 80) + '...';
+    }
+    updateCachedValues() {
+        this.updatePercentOfImages();
+        this.updatePercentOfComputations();
+        this.updateTruncatedError();
+        this.updateCumulativeDurationInMinutes();
+    }
+    refreshMap() {
         return __awaiter(this, void 0, void 0, function* () {
-            const params = { date: date.toISOString() };
-            const queryString = BuildQueryString(params);
-            try {
-                const response = yield 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) {
-                yield this.checkError(e);
-            }
-            return null;
+            this.gaugeSelectedPoints = [];
+            this.dateShown = this.getDateBasedOnCumulativeMode();
+            this.borders = [];
+            this.compareManager.cleanAll();
+            yield this.compareManager.setGaugesInMap();
+            yield this.refreshManager.refresh(false, this.toggleAdmin);
+            this.cdr.markForCheck();
         });
     }
-    getRainCumulativeCumulativesCompareByDate(rainNode, rainComputationCumulativeId, date, cumulativeHours) {
+    setPeriodOfNow() {
         return __awaiter(this, void 0, void 0, function* () {
-            const params = {
-                date: date.toISOString(),
-                cumulativeHours,
-            };
-            const queryString = BuildQueryString(params);
-            try {
-                const response = yield 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) {
-                yield this.checkError(e);
+            const last30mn = new Date();
+            last30mn.setMinutes(last30mn.getMinutes() - 30);
+            this.periodBeginAsString =
+                last30mn.toISOString().substring(0, 11) + last30mn.toLocaleTimeString().substring(0, 5);
+            this.periodDurationAsString = '1';
+            yield this.onPeriodBeginChange(null);
+            yield this.refreshManager.refresh(false, this.toggleAdmin);
+        });
+    }
+    updatePercentOfImages() {
+        var _a, _b;
+        if (!((_b = (_a = this.countsPeriod) === null || _a === void 0 ? void 0 : _a.percentImages) === null || _b === void 0 ? void 0 : _b.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) => { var _a; return a + ((_a = b.x) !== null && _a !== void 0 ? _a : 0); }, 0);
+        this.percentOfImages = Math.round(summed / duringPeriod.length);
+    }
+    updatePercentOfComputations() {
+        var _a;
+        const timeline = (_a = this.refreshManager) === null || _a === void 0 ? void 0 : _a.getTimelineFrameSet();
+        if (!(timeline === null || timeline === void 0 ? void 0 : timeline.length)) {
+            this.percentOfComputations = 0;
+            return;
+        }
+        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 === null || fallbackDates === void 0 ? void 0 : fallbackDates.length) > 0) {
+            const dateExists = fallbackDates.some((d) => { var _a; return d.getTime() === ((_a = this.dateShown) === null || _a === void 0 ? void 0 : _a.getTime()); });
+            if (!dateExists) {
+                return this.toggleCumulative
+                    ? fallbackDates[fallbackDates.length - 1]
+                    : fallbackDates[0];
             }
-            return null;
+        }
+        return this.toggleCumulative ? this.periodEnd : this.periodBegin;
+    }
+    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);
+        };
+        this.refreshManager.period = {
+            begin: alignTo5minFloor(this.periodBegin),
+            end: alignTo5minFloor(this.periodEnd),
+        };
+    }
+    fetchAndUpdateMap() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.refreshManager.fetch(this.dateShown, this.toggleGaugeMeasures, this.getCumulativeHours());
+            this.currentTimeframeTarget = this.refreshManager.getTimelineSelectedFrameSet();
+            this.cdr.markForCheck();
         });
     }
-    getRainProgress(rainId) {
+    applyRefreshManagerSettings() {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const queryPath = '' + rainId + '/progress';
-                const response = yield this.fidjService.sendOnEndpoint({
-                    key: 'rains',
-                    verb: 'GET',
-                    relativePath: queryPath,
-                    defaultKeyUrl: this.defaultUrlForAPI + '/rains',
-                });
-                // return response.data.inProgress;
-                return response.data.inQueue;
-            }
-            catch (e) {
-                yield this.checkError(e);
+            if (!this.refreshManager) {
+                return;
             }
-            return 0;
+            this.refreshManager.provider = this.selectedProvider;
+            this.refreshManager.timeStepInMinutes = this.selectedTimeStep;
+            yield this.refreshManager.refresh(false, this.toggleAdmin);
         });
     }
-    getIndicators(rainId) {
+    cleanAll() {
+        var _a, _b;
+        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;
+        (_a = this.compareManager) === null || _a === void 0 ? void 0 : _a.cleanAll();
+        (_b = this.refreshManager) === null || _b === void 0 ? void 0 : _b.cleanAll();
+    }
+    init() {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const params = {
-                    cumulative: 'true',
-                };
-                const queryString = BuildQueryString(params);
-                const response = yield this.fidjService.sendOnEndpoint({
-                    key: 'rains',
-                    verb: 'GET',
-                    relativePath: rainId + '/indicators' + (queryString ? '?' + queryString : ''),
-                    defaultKeyUrl: this.defaultUrlForAPI + '/rains',
-                });
-                return response.data;
-            }
-            catch (e) {
-                yield this.checkError(e);
-            }
-            return { indicators: [] };
+            this.cleanAll();
+            this.updateCachedValues();
+            yield this.initRain();
+            this.cdr.markForCheck();
         });
     }
-    // === Gauges ===
-    getGauge(gaugeId) {
+    initRain() {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const resp = yield this.fidjService.sendOnEndpoint({
-                    key: 'gauges',
-                    verb: 'GET',
-                    relativePath: gaugeId,
-                    defaultKeyUrl: this.defaultUrlForAPI + '/gauges',
-                });
-                return new GaugeNode(resp.data);
+            if (!this.rainNode) {
+                return;
             }
-            catch (e) {
-                yield this.checkError(e);
+            this.isAdmin = this.profileService.isAdmin();
+            this.refreshManager.rainNode = this.rainNode;
+            this.compareManager.rainNode = this.rainNode;
+            // Load providers and set on refreshManager
+            yield 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 = yield this.profileService.getTeam(this.rainNode.getLink(TeamNode.TYPE).getId());
+            // Load all gauges linked to the rainNode on map
+            yield this.compareManager.setGaugesInMap();
+            if (this.periodBegin && this.periodEnd) {
+                this.updateRefreshManagerPeriod();
+                yield this.refreshManager.refresh(false, this.toggleAdmin);
             }
         });
     }
-    getGauges(rainId, aroundLatLng, pageCount = 1) {
+    onRefreshInProgress(countPeriods, timeframeDates) {
         return __awaiter(this, void 0, void 0, function* () {
-            const baseParams = {
-                aroundLatLng: `${aroundLatLng.lat},${aroundLatLng.lng}`,
-                rainId,
-            };
-            if (this.asTeamId) {
-                baseParams.teamId = this.asTeamId;
-            }
-            const gauges = [];
-            try {
-                for (let count = 1; count <= pageCount; count++) {
-                    const params = Object.assign(Object.assign({}, baseParams), { page: count });
-                    const queryString = BuildQueryString(params);
-                    const resp = yield 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));
-                    }
+            this.refreshInProgress = true;
+            this.countsPeriod = countPeriods;
+            this.timeframeDates = timeframeDates;
+            this.updateCachedValues();
+            this.cdr.markForCheck();
+        });
+    }
+    onRefreshDone(timeframeDates) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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) {
+                    yield this.fetchAndUpdateMap();
                 }
             }
-            catch (e) {
-                yield this.checkError(e);
-            }
-            return gauges;
         });
     }
-    getGaugeMeasures(gaugeId, begin, end) {
+    onFetchDone(timeframeContainers) {
         return __awaiter(this, void 0, void 0, function* () {
-            const params = {
-                begin: begin.toISOString(),
-                end: end.toISOString(),
-            };
-            const queryString = BuildQueryString(params);
-            const resp = yield 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));
+            if (timeframeContainers) {
+                this.timeframeContainers = timeframeContainers;
             }
-            return gaugeMeasures;
+            this.cdr.markForCheck();
         });
     }
-    getProviders(rainId) {
+    change(_changes) {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const response = yield 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],
-                };
+            yield 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 = {};
+    }
+    getValue(key, asyncGetter) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!Object.prototype.hasOwnProperty.call(this._cache, key)) {
+                console.log('cache not done: ', key);
+                this.putValue(key, yield asyncGetter());
             }
-            catch (e) {
-                console.error('getProviders error:', e);
-                return {
-                    providers: [],
-                    timeStepInMinutes: [5, 10, 15, 30, 60],
-                };
+            else {
+                console.log('cache done: ', key);
             }
+            return this._cache[key];
         });
     }
-    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);
+    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) {
@@ -4089,7 +4440,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,
@@ -4101,7 +4453,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: [{
@@ -4118,6 +4471,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],
@@ -4135,6 +4489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         RaainGlobeComponent,
                         ProfileIconDirective,
                         RaainDetailsComponent,
+                        CumulativeSelectorComponent,
                     ],
                 }]
         }], ctorParameters: function () {
@@ -4149,5 +4504,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