@oneuptime/common 12.0.32 → 12.0.34

package/Types/Telemetry/TelemetryIngestionKeyType.ts

@@ -0,0 +1,29 @@
+/*
+ * What kind of credential a TelemetryIngestionKey is, and therefore what the
+ * ingest side is willing to let it do.
+ *
+ * The distinction exists because these two are NOT the same secret class, even
+ * though today they are the same column:
+ *
+ * - Server keys live in a backend process, an OTel collector config, or a CI
+ *   secret. Nobody outside the customer's infrastructure ever sees them, so
+ *   they get the full ingest surface with no origin binding. This is the
+ *   historical behaviour and the DEFAULT, so every key that already exists
+ *   keeps working exactly as before.
+ * - Browser keys are pasted into a public web page - the session-replay
+ *   snippet, a browser OTLP exporter - which means "secret" is a fiction:
+ *   anyone who views source has it. They are therefore treated as PUBLIC
+ *   write-only credentials and are constrained on every axis that can be
+ *   enforced server-side: a required origin allowlist, a pinned service.name,
+ *   a per-key rate limit, an expiry, a kill switch, and a reduced set of
+ *   ingest surfaces (see BROWSER_ALLOWED_INGEST_SURFACES).
+ *
+ * The type of a key is immutable after creation - see the keyType column on
+ * TelemetryIngestionKey for why.
+ */
+enum TelemetryIngestionKeyType {
+  Server = "Server",
+  Browser = "Browser",
+}
+
+export default TelemetryIngestionKeyType;

package/Types/Telemetry/UnitOfWork.ts

@@ -0,0 +1,59 @@
+/*
+ * What kind of work was in flight when something happened.
+ *
+ * This is the axis that makes class-based fault classification safe. The same
+ * exception class means different things depending on who asked for the work:
+ *
+ *   throw new BadDataException("Monitor type required to create monitor.")
+ *      -> inside an HTTP request: the caller sent a bad request. Not our bug.
+ *
+ *   throw new BadDataException("No job found with name: " + name)
+ *      -> inside a cron registration: an internal invariant we violated.
+ *         Very much our bug.
+ *
+ * They are indistinguishable at the throw site and perfectly distinguishable
+ * by unit of work, so ErrorClassResolver promotes user-error and
+ * expected-denial back to code-fault everywhere except an HTTP request.
+ *
+ * Seed this EXPLICITLY at every entry point. TelemetryContext.runWithContext
+ * inherits the enclosing scope's attributes, so an unset value would let a
+ * request's "http-request" marker leak into background work started from
+ * inside that request.
+ */
+export enum UnitOfWork {
+  HttpRequest = "http-request",
+  WorkerJob = "worker-job",
+  CronJob = "cron-job",
+  ProbeCheck = "probe-check",
+  Notification = "notification",
+  Startup = "startup",
+}
+
+/**
+ * Which deployment role produced this telemetry.
+ *
+ * Distinct from UnitOfWork, and distinct from `service.name`: the Helm chart
+ * runs the worker as a separate Deployment but from the same image and the
+ * same entrypoint (it only flips DISABLE_QUEUE_WORKERS), so worker pods report
+ * `service.name = "api"`. Until that changes — which re-keys every worker
+ * exception fingerprint and therefore needs its own release — this attribute
+ * is how "which component" becomes filterable.
+ */
+export enum TelemetryComponent {
+  Api = "api",
+  Worker = "worker",
+  Cron = "cron",
+  Probe = "probe",
+  Notification = "notification",
+}
+
+/**
+ * Ambient TelemetryContext / span attribute keys. String constants rather than
+ * inline literals so the emit path, drop filters, dashboards and tests cannot
+ * drift apart on spelling.
+ */
+export const UNIT_OF_WORK_ATTRIBUTE_KEY: string = "oneuptime.unit_of_work";
+export const COMPONENT_ATTRIBUTE_KEY: string = "oneuptime.component";
+
+/** Span/log attribute carrying the resolved fault domain. */
+export const ERROR_CLASS_ATTRIBUTE_KEY: string = "error.class";

package/Types/WebsiteRequest.ts

@@ -3,6 +3,9 @@ import Headers from "./API/Headers";
 import URL from "./API/URL";
 import Dictionary from "./Dictionary";
 import HTML from "./Html";
+import HTTPResponseBodyReader, {
+  HTTPResponseBodyBudget,
+} from "../Utils/HTTPResponseBodyReader";
 import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
 import type { Agent as HttpAgent } from "http";
 import type { Agent as HttpsAgent } from "https";
@@ -24,6 +27,17 @@ export default class WebsiteRequest {
       timeout?: number | undefined;
       isHeadRequest?: boolean | undefined;
       doNotFollowRedirects?: boolean | undefined;
+      doNotFallbackFromHead?: boolean | undefined;
+      acceptRedirectResponses?: boolean | undefined;
+      maxContentLength?: number | undefined;
+      maxBodyLength?: number | undefined;
+      disableProxy?: boolean | undefined;
+      signal?: AbortSignal | undefined;
+      responseBodyBudget?: HTTPResponseBodyBudget | undefined;
+      limitRedirectResponseBody?: boolean | undefined;
+      maximumResponseBytes?: number | undefined;
+      /** @internal Already-validated href used only for the Axios dispatch. */
+      dispatchUrl?: string | undefined;
       httpAgent?: HttpAgent | undefined; // per-request HTTP proxy agent
       httpsAgent?: HttpsAgent | undefined; // per-request HTTPS proxy agent
     },
@@ -45,6 +59,38 @@ export default class WebsiteRequest {
       axiosOptions.maxRedirects = 0;
     }
 
+    if (options.acceptRedirectResponses) {
+      axiosOptions.validateStatus = (status: number): boolean => {
+        return status >= 200 && status < 400;
+      };
+    }
+
+    if (options.maxContentLength !== undefined) {
+      axiosOptions.maxContentLength = options.maxContentLength;
+    }
+
+    if (options.maxBodyLength !== undefined) {
+      axiosOptions.maxBodyLength = options.maxBodyLength;
+    }
+
+    if (options.disableProxy) {
+      axiosOptions.proxy = false;
+    }
+
+    if (options.signal) {
+      axiosOptions.signal = options.signal;
+    }
+
+    if (options.responseBodyBudget) {
+      axiosOptions.responseType = "stream";
+      /*
+       * Let the shared streamed reader own this limit. Axios otherwise throws
+       * before yielding the over-limit chunk, so bytes already received on a
+       * failed attempt would never be charged to the cumulative budget.
+       */
+      axiosOptions.maxContentLength = -1;
+    }
+
     if (options.httpAgent) {
       (axiosOptions as AxiosRequestConfig).httpAgent = options.httpAgent;
     }
@@ -54,13 +100,36 @@ export default class WebsiteRequest {
 
     // use axios to fetch an HTML page
     let response: AxiosResponse | null = null;
+    let responseIsForHeadRequest: boolean = Boolean(options.isHeadRequest);
 
     try {
-      response = await axios(url.toString(), axiosOptions);
+      response = await axios(
+        options.dispatchUrl ?? url.toString(),
+        axiosOptions,
+      );
     } catch (err: unknown) {
-      if (err && options.isHeadRequest) {
+      if (
+        options.responseBodyBudget &&
+        axios.isAxiosError(err) &&
+        err.response
+      ) {
+        err.response.data = HTTPResponseBodyReader.decodeUtf8(
+          await HTTPResponseBodyReader.read(err.response.data, {
+            budget: options.responseBodyBudget,
+            statusCode: err.response.status,
+            headers: err.response.headers,
+            limitRedirectResponseBody:
+              options.limitRedirectResponseBody || false,
+            isHeadResponse: responseIsForHeadRequest,
+            maximumResponseBytes: options.maximumResponseBytes,
+          }),
+        );
+      }
+
+      if (err && options.isHeadRequest && !options.doNotFallbackFromHead) {
         // 404 because of HEAD request. Retry with GET request.
-        response = await axios(url.toString(), {
+        responseIsForHeadRequest = false;
+        response = await axios(options.dispatchUrl ?? url.toString(), {
           ...axiosOptions,
           method: HTTPMethod.GET,
         });
@@ -69,6 +138,19 @@ export default class WebsiteRequest {
       }
     }
 
+    if (options.responseBodyBudget) {
+      response!.data = HTTPResponseBodyReader.decodeUtf8(
+        await HTTPResponseBodyReader.read(response!.data, {
+          budget: options.responseBodyBudget,
+          statusCode: response!.status,
+          headers: response!.headers,
+          limitRedirectResponseBody: options.limitRedirectResponseBody || false,
+          isHeadResponse: responseIsForHeadRequest,
+          maximumResponseBytes: options.maximumResponseBytes,
+        }),
+      );
+    }
+
     // return the response
     return {
       url: url,

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -144,6 +144,13 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
     const formatter: (value: Date) => string = XAxisUtil.getFormatter({
       xAxisMax: props.xAxis.options.max,
       xAxisMin: props.xAxis.options.min,
+      /*
+       * Exemplars are placed by label with no index fallback, so they have
+       * to be formatted at the axis's own grid step — a pinned axis
+       * labelled at a different precision would put every exemplar on a
+       * category that does not exist, and they would silently vanish.
+       */
+      precision: props.xAxis.options.precision,
     });
 
     return props.exemplarPoints.map((exemplar: ExemplarPoint) => {
@@ -164,8 +171,10 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
       return TimeAnnotationUtil.formatTimeReferenceLines({
         timeReferenceLines: props.timeReferenceLines,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps marker indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.timeReferenceLines, props.xAxis]);
+    }, [props.timeReferenceLines, props.xAxis, props.data]);
 
   const formattedReferenceRegions: Array<FormattedReferenceRegion> =
     useMemo(() => {
@@ -175,8 +184,10 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
       return TimeAnnotationUtil.formatReferenceRegions({
         referenceRegions: props.referenceRegions,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps region indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.referenceRegions, props.xAxis]);
+    }, [props.referenceRegions, props.xAxis, props.data]);
 
   const hasNoData: boolean =
     !props.data ||

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -97,8 +97,10 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
       return TimeAnnotationUtil.formatTimeReferenceLines({
         timeReferenceLines: props.timeReferenceLines,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps marker indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.timeReferenceLines, props.xAxis]);
+    }, [props.timeReferenceLines, props.xAxis, props.data]);
 
   const formattedReferenceRegions: Array<FormattedReferenceRegion> =
     useMemo(() => {
@@ -108,8 +110,10 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
       return TimeAnnotationUtil.formatReferenceRegions({
         referenceRegions: props.referenceRegions,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps region indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.referenceRegions, props.xAxis]);
+    }, [props.referenceRegions, props.xAxis, props.data]);
 
   const hasNoData: boolean =
     !props.data ||

package/UI/Components/Charts/Line/LineChart.tsx

@@ -122,6 +122,13 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
     const formatter: (value: Date) => string = XAxisUtil.getFormatter({
       xAxisMax: props.xAxis.options.max,
       xAxisMin: props.xAxis.options.min,
+      /*
+       * Exemplars are placed by label with no index fallback, so they have
+       * to be formatted at the axis's own grid step — a pinned axis
+       * labelled at a different precision would put every exemplar on a
+       * category that does not exist, and they would silently vanish.
+       */
+      precision: props.xAxis.options.precision,
     });
 
     return props.exemplarPoints.map((exemplar: ExemplarPoint) => {
@@ -142,8 +149,10 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
       return TimeAnnotationUtil.formatTimeReferenceLines({
         timeReferenceLines: props.timeReferenceLines,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps marker indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.timeReferenceLines, props.xAxis]);
+    }, [props.timeReferenceLines, props.xAxis, props.data]);
 
   const formattedReferenceRegions: Array<FormattedReferenceRegion> =
     useMemo(() => {
@@ -153,8 +162,10 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
       return TimeAnnotationUtil.formatReferenceRegions({
         referenceRegions: props.referenceRegions,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps region indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.referenceRegions, props.xAxis]);
+    }, [props.referenceRegions, props.xAxis, props.data]);
 
   const hasNoData: boolean =
     !props.data ||

package/UI/Components/Charts/Types/XAxis/XAxis.ts

@@ -1,4 +1,5 @@
 import XAxisMaxMin from "./XAxisMaxMin";
+import XAxisPrecision from "./XAxisPrecision";
 import XAxisType from "./XAxisType";
 
 export enum XAxisAggregateType {
@@ -13,6 +14,34 @@ export interface XAxisOptions {
   min: XAxisMaxMin;
   max: XAxisMaxMin;
   aggregateType: XAxisAggregateType;
+  /*
+   * Pin the grid step instead of letting XAxisUtil derive one from the
+   * window's duration.
+   *
+   * The derived ladder is a SECOND ladder: it guesses the bucket size the
+   * data was aggregated at from how long the window is. A caller that
+   * already knows the real bucket size does not have to guess, and must
+   * not — the two ladders disagree in both directions:
+   *
+   *  - Finer. The derived ladder has four sub-minute tiers (<=15s / 75s /
+   *    150s / 450s) while the analytics backend's finest bucket is one
+   *    minute, so every window under 7.5 minutes got a grid the data could
+   *    never fill. A 5-minute metric window drew an 11-slot 30-second grid
+   *    over 5 one-minute rows: every other slot empty, and the axis running
+   *    a full minute past the last real point.
+   *  - Coarser. Aligning a window to the bucket grid widens it slightly
+   *    (the start is floored), which can tip a window sitting exactly on a
+   *    tier threshold — a 3h preset, say — into the next tier. The query is
+   *    still pinned to the interval derived from the RAW window, so the
+   *    chart then re-averages five one-minute rows into each five-minute
+   *    slot: an unweighted average of averages.
+   *
+   * Set this to the interval the DATA was actually bucketed at and each
+   * slot maps to exactly one backend bucket. Left undefined, the duration
+   * ladder applies, which is right for callers whose points are raw
+   * samples rather than server-side buckets.
+   */
+  precision?: XAxisPrecision | undefined;
 }
 
 export interface XAxis {

package/UI/Components/Charts/Utils/DataPoint.ts

@@ -15,6 +15,7 @@ import ChartDataPoint, {
 import SeriesPoints from "../Types/SeriesPoints";
 import { XAxis, XAxisAggregateType } from "../Types/XAxis/XAxis";
 import XAxisMaxMin from "../Types/XAxis/XAxisMaxMin";
+import XAxisPrecision from "../Types/XAxis/XAxisPrecision";
 import YAxis from "../Types/YAxis/YAxis";
 import XAxisUtil from "./XAxis";
 
@@ -31,7 +32,10 @@ export default class DataPointUtil {
     xAxis: XAxis;
     yAxis: YAxis;
   }): Array<ChartDataPoint> {
-    const { intervals, formatter } = this.initializeXAxisData(data.xAxis);
+    const { intervals, formatter } = this.initializeXAxisData(
+      data.xAxis,
+      data.seriesPoints,
+    );
     const arrayOfData: ChartDataPoint[] = this.initializeArrayOfData(
       intervals,
       formatter,
@@ -45,7 +49,10 @@ export default class DataPointUtil {
     return arrayOfData;
   }
 
-  private static initializeXAxisData(xAxis: XAxis): {
+  private static initializeXAxisData(
+    xAxis: XAxis,
+    seriesPoints: Array<SeriesPoints>,
+  ): {
     xAxisMax: XAxisMaxMin;
     xAxisMin: XAxisMaxMin;
     intervals: Array<Date>;
@@ -53,13 +60,25 @@ export default class DataPointUtil {
   } {
     const xAxisMax: XAxisMaxMin = xAxis.options.max;
     const xAxisMin: XAxisMaxMin = xAxis.options.min;
-    const intervals: Array<Date> = XAxisUtil.getPrecisionIntervals({
+    const precision: XAxisPrecision | undefined = xAxis.options.precision;
+    /*
+     * Renderable, not raw: the grid's final slot is the bucket holding the
+     * window end, which the query only partly covered and which therefore
+     * comes back empty whenever the window ends on or just past a bucket
+     * boundary. XAxisUtil drops that one slot (and only that one, and only
+     * when nothing landed in it) so the axis stops at the last point there
+     * is data for instead of a bucket beyond it.
+     */
+    const intervals: Array<Date> = XAxisUtil.getRenderableIntervals({
       xAxisMax,
       xAxisMin,
+      precision,
+      seriesPoints,
     });
     const formatter: (value: Date) => string = XAxisUtil.getFormatter({
       xAxisMax,
       xAxisMin,
+      precision,
     });
     return { xAxisMax, xAxisMin, intervals, formatter };
   }

package/UI/Components/Charts/Utils/TimeAnnotation.ts

@@ -2,7 +2,9 @@ import ChartReferenceRegionProps from "../Types/ReferenceRegionProps";
 import ChartTimeReferenceLineProps from "../Types/TimeReferenceLineProps";
 import FormattedReferenceRegion from "../ChartLibrary/Types/FormattedReferenceRegion";
 import FormattedTimeReferenceLine from "../ChartLibrary/Types/FormattedTimeReferenceLine";
+import SeriesPoints from "../Types/SeriesPoints";
 import { XAxis } from "../Types/XAxis/XAxis";
+import XAxisMaxMin from "../Types/XAxis/XAxisMaxMin";
 import XAxisUtil from "./XAxis";
 
 interface AxisBuckets {
@@ -16,17 +18,38 @@ interface AxisBuckets {
    */
   labelToIndex: Map<string, number>;
   formatter: (value: Date) => string;
+  /*
+   * The axis's own maximum, kept alongside the slots because the slots no
+   * longer imply it — see getWindowEndInMs.
+   */
+  xAxisMax: XAxisMaxMin;
 }
 
 export default class TimeAnnotationUtil {
-  private static getAxisBuckets(xAxis: XAxis): AxisBuckets {
-    const intervals: Array<Date> = XAxisUtil.getPrecisionIntervals({
+  /*
+   * `seriesPoints` is not used to place anything — it is what lets this
+   * rebuild the SAME slot array DataPointUtil built. XAxisUtil drops an
+   * unfillable trailing slot, and whether it does depends on the series, so
+   * an annotation resolved against a grid built without them would index
+   * into an array one longer than the chart's rows: every marker in the
+   * final bucket would land past the end of the axis. Chart wrappers pass
+   * the series they are drawing; callers that pass none get the raw grid,
+   * which is what DataPointUtil gives them too.
+   */
+  private static getAxisBuckets(
+    xAxis: XAxis,
+    seriesPoints?: Array<SeriesPoints> | undefined,
+  ): AxisBuckets {
+    const intervals: Array<Date> = XAxisUtil.getRenderableIntervals({
       xAxisMin: xAxis.options.min,
       xAxisMax: xAxis.options.max,
+      precision: xAxis.options.precision,
+      seriesPoints: seriesPoints,
     });
     const formatter: (value: Date) => string = XAxisUtil.getFormatter({
       xAxisMin: xAxis.options.min,
       xAxisMax: xAxis.options.max,
+      precision: xAxis.options.precision,
     });
     const labels: Array<string> = intervals.map((interval: Date) => {
       return formatter(interval);
@@ -38,14 +61,32 @@ export default class TimeAnnotationUtil {
         labelToIndex.set(label, index);
       }
     }
-    return { intervals, labels, labelToIndex, formatter };
+    return {
+      intervals,
+      labels,
+      labelToIndex,
+      formatter,
+      xAxisMax: xAxis.options.max,
+    };
   }
 
   /*
    * End of the charted window: last bucket start plus one bucket width
    * (buckets extend past their start date).
+   *
+   * Held up to the axis's own maximum, because the grid can legitimately
+   * stop SHORT of it — XAxisUtil drops a trailing slot no data could land
+   * in. Reconstructing the window from the slots alone would then pull this
+   * bound backwards by a bucket and start rejecting the very markers that
+   * sit at the window edge as "outside the charted window": on an alert the
+   * declared-at marker is at the window end exactly, and it would vanish
+   * from the chart it exists to annotate. Such a marker resolves instead to
+   * the last bucket that is still on the axis, which is where its data is.
    */
-  private static getWindowEndInMs(intervals: Array<Date>): number {
+  private static getWindowEndInMs(
+    intervals: Array<Date>,
+    xAxisMax: XAxisMaxMin,
+  ): number {
     const lastInterval: Date | undefined = intervals[intervals.length - 1];
     if (!lastInterval) {
       return Number.NEGATIVE_INFINITY;
@@ -55,7 +96,11 @@ export default class TimeAnnotationUtil {
     const bucketWidthInMs: number = secondToLastInterval
       ? lastInterval.getTime() - secondToLastInterval.getTime()
       : 0;
-    return lastInterval.getTime() + bucketWidthInMs;
+    const gridEndInMs: number = lastInterval.getTime() + bucketWidthInMs;
+    const axisMaxInMs: number =
+      typeof xAxisMax === "number" ? xAxisMax : xAxisMax.getTime();
+
+    return Math.max(gridEndInMs, axisMaxInMs);
   }
 
   /*
@@ -113,7 +158,10 @@ export default class TimeAnnotationUtil {
     if (!firstInterval || data.date.getTime() < firstInterval.getTime()) {
       return null;
     }
-    if (data.date.getTime() > this.getWindowEndInMs(intervals)) {
+    if (
+      data.date.getTime() >
+      this.getWindowEndInMs(intervals, data.buckets.xAxisMax)
+    ) {
       return null;
     }
 
@@ -130,8 +178,16 @@ export default class TimeAnnotationUtil {
   public static formatTimeReferenceLines(data: {
     timeReferenceLines: Array<ChartTimeReferenceLineProps>;
     xAxis: XAxis;
+    /*
+     * The series the chart is drawing. Only used to rebuild the same slot
+     * array the rows were built from — see getAxisBuckets.
+     */
+    seriesPoints?: Array<SeriesPoints> | undefined;
   }): Array<FormattedTimeReferenceLine> {
-    const buckets: AxisBuckets = this.getAxisBuckets(data.xAxis);
+    const buckets: AxisBuckets = this.getAxisBuckets(
+      data.xAxis,
+      data.seriesPoints,
+    );
 
     const formatted: Array<FormattedTimeReferenceLine> = [];
     for (const timeReferenceLine of data.timeReferenceLines) {
@@ -154,15 +210,26 @@ export default class TimeAnnotationUtil {
   public static formatReferenceRegions(data: {
     referenceRegions: Array<ChartReferenceRegionProps>;
     xAxis: XAxis;
+    /*
+     * The series the chart is drawing. Only used to rebuild the same slot
+     * array the rows were built from — see getAxisBuckets.
+     */
+    seriesPoints?: Array<SeriesPoints> | undefined;
   }): Array<FormattedReferenceRegion> {
-    const buckets: AxisBuckets = this.getAxisBuckets(data.xAxis);
+    const buckets: AxisBuckets = this.getAxisBuckets(
+      data.xAxis,
+      data.seriesPoints,
+    );
     const firstInterval: Date | undefined = buckets.intervals[0];
     const lastIndex: number = buckets.labels.length - 1;
     const lastLabel: string | undefined = buckets.labels[lastIndex];
     if (!firstInterval || lastLabel === undefined) {
       return [];
     }
-    const windowEndInMs: number = this.getWindowEndInMs(buckets.intervals);
+    const windowEndInMs: number = this.getWindowEndInMs(
+      buckets.intervals,
+      buckets.xAxisMax,
+    );
 
     const formatted: Array<FormattedReferenceRegion> = [];
     for (const referenceRegion of data.referenceRegions) {