(() => {
  // assets/src/js/request-timeline.js
  (function nativeObservabilityRequestTimelineBehavior(Drupal2, once2, drupalSettings2) {
    function buildSeriesDefinitions2(series) {
      const definitions = [];
      if (Array.isArray(series.requests_per_second)) {
        definitions.push({
          key: "requests_per_second",
          name: Drupal2.t("Requests/sec"),
          yAxisIndex: 0,
          areaStyle: {}
        });
      }
      if (Array.isArray(series.average_duration)) {
        definitions.push({
          key: "average_duration",
          name: Drupal2.t("Avg Response Time"),
          yAxisIndex: 1
        });
      }
      if (Array.isArray(series.p95_duration)) {
        definitions.push({
          key: "p95_duration",
          name: Drupal2.t("P95 Latency"),
          yAxisIndex: 1
        });
      }
      if (Array.isArray(series.error_rate)) {
        definitions.push({
          key: "error_rate",
          name: Drupal2.t("Error Rate"),
          yAxisIndex: 2
        });
      }
      return definitions;
    }
    function buildChartOption2(settings, definitions) {
      const firstSeries = settings.series[definitions[0].key] || [];
      const labels = firstSeries.map((item) => item.label ?? "");
      return {
        animation: true,
        tooltip: {
          trigger: "axis"
        },
        legend: {
          top: 0,
          left: "center",
          data: definitions.map((item) => item.name)
        },
        grid: {
          left: 56,
          right: 72,
          top: 56,
          bottom: 32
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: labels
        },
        yAxis: [
          {
            type: "value",
            name: Drupal2.t("Req/s"),
            position: "left"
          },
          {
            type: "value",
            name: Drupal2.t("Latency (ms)"),
            position: "right"
          },
          {
            type: "value",
            name: Drupal2.t("Error %"),
            position: "right",
            offset: 64
          }
        ],
        series: definitions.map((definition) => ({
          name: definition.name,
          type: "line",
          smooth: true,
          symbol: "none",
          yAxisIndex: definition.yAxisIndex,
          ...definition.areaStyle ? {
            areaStyle: definition.areaStyle
          } : {},
          data: (settings.series[definition.key] || []).map(
            (item) => Number(item.value ?? 0)
          )
        }))
      };
    }
    function initTimelineChart(element, settings) {
      if (element.dataset.chartReady === "true") {
        return;
      }
      const echartsLib = window.echarts;
      if (!echartsLib) {
        element.innerHTML = `<div class="no-chart-fallback">${Drupal2.t("Apache ECharts is not available.")}</div>`;
        return;
      }
      const definitions = buildSeriesDefinitions2(settings.series);
      if (!definitions.length) {
        element.innerHTML = `<div class="no-chart-fallback">${Drupal2.t("No chart series are available.")}</div>`;
        return;
      }
      if (!element.clientWidth || !element.clientHeight) {
        window.requestAnimationFrame(() => initTimelineChart(element, settings));
        return;
      }
      const chart = echartsLib.init(element);
      chart.setOption(buildChartOption2(settings, definitions));
      chart.resize();
    }
    Drupal2.behaviors.nativeObservabilityRequestTimeline = {
      attach(context) {
        const singleTimeline = drupalSettings2.nativeObservabilityDashboard?.requestTimeline || null;
        const multipleTimelines = drupalSettings2.nativeObservabilityDashboard?.timelines || {};
        let timelines = {};
        if (Object.keys(multipleTimelines).length) {
          timelines = multipleTimelines;
        } else if (singleTimeline) {
          timelines = { default: singleTimeline };
        }
        Object.values(timelines).forEach((settings) => {
          if (!settings || !settings.chart_id || !settings.series) {
            return;
          }
          once2(
            `native-observability-timeline-${settings.chart_id}`,
            `[data-chart-id="${settings.chart_id}"]`,
            context
          ).forEach((element) => {
            initTimelineChart(element, settings);
          });
        });
      }
    };
  })(Drupal, once, drupalSettings);

  // assets/src/js/cache-runtime-records.js
  (function nativeObservabilityCacheRuntimeRecordsBehavior(Drupal2) {
    Drupal2.behaviors.nativeObservabilityCacheRuntimeRecords = {
      attach(context) {
        const root = context.querySelector(".no-cache-records");
        if (!root || root.dataset.noCacheRecordsBound === "true") {
          return;
        }
        root.dataset.noCacheRecordsBound = "true";
        const searchInput = root.querySelector("[data-no-cache-record-search]");
        const rows = Array.from(
          root.querySelectorAll("[data-no-cache-record-row]")
        );
        const resultsTarget = root.querySelector(
          "[data-no-cache-record-results]"
        );
        const pageStatusTarget = root.querySelector(
          "[data-no-cache-record-page-status]"
        );
        const prevButton = root.querySelector("[data-no-cache-record-prev]");
        const nextButton = root.querySelector("[data-no-cache-record-next]");
        const modal = root.querySelector("[data-no-cache-record-modal]");
        const closeButton = root.querySelector(
          "[data-no-cache-record-modal-close]"
        );
        const timeTarget = root.querySelector("[data-record-time]");
        const typeTarget = root.querySelector("[data-record-type]");
        const layerTarget = root.querySelector("[data-record-layer]");
        const methodTarget = root.querySelector("[data-record-method]");
        const contextTarget = root.querySelector("[data-record-context]");
        const statusTarget = root.querySelector("[data-record-status]");
        const payloadTarget = root.querySelector("[data-record-payload]");
        const pageSize = 10;
        let currentPage = 1;
        let filteredRows = [...rows];
        let lastActiveButton = null;
        function openModal(record, triggerButton) {
          if (!modal) {
            return;
          }
          lastActiveButton = triggerButton || null;
          timeTarget.textContent = record.time || "";
          typeTarget.textContent = record.event_type || "";
          layerTarget.textContent = record.cache_layer || "";
          methodTarget.textContent = record.method || "";
          contextTarget.textContent = record.context || "";
          statusTarget.textContent = record.status || "";
          payloadTarget.textContent = JSON.stringify(
            record.payload || {},
            null,
            2
          );
          modal.hidden = false;
          modal.setAttribute("aria-hidden", "false");
          document.body.classList.add("no-cache-records-modal-open");
        }
        function closeModal() {
          if (!modal) {
            return;
          }
          modal.hidden = true;
          modal.setAttribute("aria-hidden", "true");
          document.body.classList.remove("no-cache-records-modal-open");
          if (lastActiveButton) {
            lastActiveButton.focus();
          }
        }
        function renderTable() {
          const totalRows = filteredRows.length;
          const totalPages = Math.max(1, Math.ceil(totalRows / pageSize));
          currentPage = Math.min(currentPage, totalPages);
          const start = (currentPage - 1) * pageSize;
          const end = start + pageSize;
          rows.forEach((row) => {
            row.hidden = true;
          });
          filteredRows.slice(start, end).forEach((row) => {
            row.hidden = false;
          });
          if (resultsTarget) {
            resultsTarget.textContent = Drupal2.t("@count records", {
              "@count": totalRows
            });
          }
          if (pageStatusTarget) {
            pageStatusTarget.textContent = Drupal2.t("Page @current of @total", {
              "@current": currentPage,
              "@total": totalPages
            });
          }
          if (prevButton) {
            prevButton.disabled = currentPage <= 1;
          }
          if (nextButton) {
            nextButton.disabled = currentPage >= totalPages;
          }
        }
        function applySearch() {
          const query = (searchInput?.value || "").trim().toLowerCase();
          filteredRows = rows.filter((row) => {
            const haystack = row.getAttribute("data-search-text") || "";
            return haystack.includes(query);
          });
          currentPage = 1;
          renderTable();
        }
        if (searchInput) {
          searchInput.addEventListener("input", applySearch);
        }
        if (prevButton) {
          prevButton.addEventListener("click", () => {
            if (currentPage > 1) {
              currentPage -= 1;
              renderTable();
            }
          });
        }
        if (nextButton) {
          nextButton.addEventListener("click", () => {
            const totalPages = Math.max(
              1,
              Math.ceil(filteredRows.length / pageSize)
            );
            if (currentPage < totalPages) {
              currentPage += 1;
              renderTable();
            }
          });
        }
        root.querySelectorAll("[data-no-cache-record-details]").forEach((button) => {
          button.addEventListener("click", () => {
            let record = {};
            try {
              record = JSON.parse(button.getAttribute("data-record") || "{}");
            } catch (e) {
              record = {};
            }
            openModal(record, button);
          });
        });
        if (closeButton) {
          closeButton.addEventListener("click", closeModal);
        }
        if (modal) {
          modal.addEventListener("click", (event) => {
            if (event.target === modal) {
              closeModal();
            }
          });
          document.addEventListener("keydown", (event) => {
            if (event.key === "Escape" && !modal.hidden) {
              closeModal();
            }
          });
        }
        renderTable();
      }
    };
  })(Drupal);

  // assets/src/js/utils.js
  function toNumber(value) {
    const numericValue = Number(value);
    return Number.isFinite(numericValue) ? numericValue : 0;
  }
  function getChartPalette(colorName = "blue") {
    const palette = {
      blue: {
        line: "#69a7f5",
        fill: "rgba(105, 167, 245, 0.18)"
      },
      orange: {
        line: "#e6a23c",
        fill: "rgba(230, 162, 60, 0.18)"
      },
      red: {
        line: "#e07a5f",
        fill: "rgba(224, 122, 95, 0.18)"
      },
      green: {
        line: "#69c17d",
        fill: "rgba(105, 193, 125, 0.18)"
      }
    };
    return palette[colorName] || palette.blue;
  }
  function buildSeriesTooltip(series, unit = "") {
    if (!Array.isArray(series) || !series.length) {
      return "";
    }
    return series.map((item) => {
      const label = item.label || "";
      const value = item.value ?? 0;
      return `${label}: ${value}${unit}`;
    }).join("\n");
  }

  // assets/src/js/charts.js
  function getPrimaryKpiSettings() {
    return window.drupalSettings?.nativeObservabilityDashboard?.primaryKpis || {};
  }
  function getChartPayload(chartId) {
    const settings = getPrimaryKpiSettings();
    if (!chartId || !settings[chartId]) {
      return null;
    }
    return settings[chartId];
  }
  function normalizeSeries(series) {
    if (!Array.isArray(series)) {
      return [];
    }
    return series.map((item) => ({
      label: item.label || "",
      value: toNumber(item.value)
    }));
  }
  function drawSparkline(canvas, series, colorName) {
    if (!canvas || !series.length) {
      return;
    }
    const context = canvas.getContext("2d");
    if (!context) {
      return;
    }
    const width = canvas.offsetWidth || 240;
    const height = canvas.offsetHeight || 56;
    canvas.width = width;
    canvas.height = height;
    const palette = getChartPalette(colorName);
    const values = series.map((item) => item.value);
    const minValue = Math.min(...values);
    const maxValue = Math.max(...values);
    const range = Math.max(1, maxValue - minValue);
    const stepX = values.length > 1 ? width / (values.length - 1) : width;
    context.clearRect(0, 0, width, height);
    context.beginPath();
    context.moveTo(0, height);
    values.forEach((value, index) => {
      const x = index * stepX;
      const normalized = (value - minValue) / range;
      const y = height - normalized * (height - 8) - 4;
      context.lineTo(x, y);
    });
    context.lineTo(width, height);
    context.closePath();
    context.fillStyle = palette.fill;
    context.fill();
    context.beginPath();
    values.forEach((value, index) => {
      const x = index * stepX;
      const normalized = (value - minValue) / range;
      const y = height - normalized * (height - 8) - 4;
      if (index === 0) {
        context.moveTo(x, y);
      } else {
        context.lineTo(x, y);
      }
    });
    context.strokeStyle = palette.line;
    context.lineWidth = 2;
    context.lineCap = "round";
    context.lineJoin = "round";
    context.stroke();
  }
  function initCharts(container) {
    const charts = container.querySelectorAll(".no-kpi-card__sparkline");
    charts.forEach((canvas) => {
      if (canvas.dataset.chartReady === "true") {
        return;
      }
      const chartId = canvas.dataset.chartId || "";
      const colorName = canvas.dataset.chartColor || "blue";
      const payload = getChartPayload(chartId);
      if (!payload || !Array.isArray(payload.series) || !payload.series.length) {
        return;
      }
      const series = normalizeSeries(payload.series);
      if (!series.length) {
        return;
      }
      canvas.title = buildSeriesTooltip(series, payload.unit || "");
      drawSparkline(canvas, series, colorName);
      canvas.dataset.chartReady = "true";
    });
  }

  // assets/src/js/kpi-cards.js
  function initKpiCards(container) {
    const cards = container.querySelectorAll(".no-kpi-card");
    cards.forEach((card) => {
      const chartCanvas = card.querySelector(".no-kpi-card__sparkline");
      const hasChart = Boolean(chartCanvas);
      card.classList.add("is-ready");
      if (!hasChart) {
        card.classList.add("no-kpi-card--no-chart");
      }
    });
  }

  // assets/src/js/components/activity-overview.js
  function initActivityOverview(container) {
    const wrappers = container.querySelectorAll("[data-no-activity-overview]");
    wrappers.forEach((wrapper) => {
      if (wrapper.dataset.activityOverviewReady === "true") {
        return;
      }
      const toggleButtons = wrapper.querySelectorAll("[data-no-activity-toggle]");
      const viewPanels = wrapper.querySelectorAll("[data-no-activity-view]");
      if (!toggleButtons.length || !viewPanels.length) {
        return;
      }
      const activateView = (targetView) => {
        wrapper.dataset.activeView = targetView;
        viewPanels.forEach((panel) => {
          const isActive = panel.getAttribute("data-no-activity-view") === targetView;
          panel.hidden = !isActive;
        });
        toggleButtons.forEach((button) => {
          const isActive = button.getAttribute("data-no-activity-toggle") === targetView;
          button.setAttribute("aria-pressed", isActive ? "true" : "false");
        });
        window.dispatchEvent(new Event("resize"));
      };
      toggleButtons.forEach((button) => {
        button.addEventListener("click", () => {
          activateView(button.getAttribute("data-no-activity-toggle"));
        });
      });
      const defaultButton = Array.from(toggleButtons).find(
        (button) => button.getAttribute("aria-pressed") === "true"
      ) || toggleButtons[0];
      activateView(defaultButton.getAttribute("data-no-activity-toggle"));
      wrapper.dataset.activityOverviewReady = "true";
    });
  }

  // assets/src/js/services/csv.js
  function escapeCsvValue(value) {
    const normalized = String(value ?? "");
    if (normalized.includes('"') || normalized.includes(",") || normalized.includes("\n")) {
      return `"${normalized.replace(/"/g, '""')}"`;
    }
    return normalized;
  }
  function downloadCsv(filename, columns, rows) {
    const header = columns.map((column) => escapeCsvValue(column.label)).join(",");
    const body = rows.map(
      (row) => columns.map((column) => escapeCsvValue(row[column.key] ?? "")).join(",")
    ).join("\n");
    const csv = [header, body].filter(Boolean).join("\n");
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }

  // assets/src/js/services/dom.js
  function escapeHtml(value) {
    return String(value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
  }

  // assets/src/js/services/search.js
  function normalizeSearchValue(value) {
    return String(value ?? "").trim().toLowerCase();
  }

  // assets/src/js/components/explorer-modal.js
  function select(container, selector) {
    return container ? container.querySelector(selector) : null;
  }
  function selectAll(container, selector) {
    return container ? Array.from(container.querySelectorAll(selector)) : [];
  }
  function cloneTemplate(overlay, name) {
    const template = select(overlay, `[data-no-explorer-template="${name}"]`);
    if (!template || !template.content || !template.content.firstElementChild) {
      return null;
    }
    return template.content.firstElementChild.cloneNode(true);
  }
  function createExplorerModal(container) {
    const overlay = select(container, "[data-no-explorer-modal-root]");
    if (!overlay) {
      return null;
    }
    const title = select(overlay, "[data-no-explorer-modal-title]");
    const subtitle = select(overlay, "[data-no-explorer-modal-subtitle]");
    const summary = select(overlay, "[data-no-explorer-modal-summary]");
    const tableTitle = select(overlay, "[data-no-explorer-modal-table-title]");
    const datasetBadge = select(
      overlay,
      "[data-no-explorer-modal-dataset-badge]"
    );
    const tableHead = select(overlay, "[data-no-explorer-modal-table-head]");
    const tableBody = select(overlay, "[data-no-explorer-modal-table-body]");
    const empty = select(overlay, "[data-no-explorer-modal-empty]");
    const detailTitle = select(overlay, "[data-no-explorer-modal-detail-title]");
    const detailDescription = select(
      overlay,
      "[data-no-explorer-modal-detail-description]"
    );
    const detailMeta = select(overlay, "[data-no-explorer-modal-detail-meta]");
    const payload = select(overlay, "[data-no-explorer-modal-payload]");
    const searchInput = select(overlay, "[data-no-explorer-modal-search]");
    const pageLabel = select(overlay, "[data-no-explorer-page-label]");
    const prevButton = select(overlay, '[data-no-explorer-page="prev"]');
    const nextButton = select(overlay, '[data-no-explorer-page="next"]');
    if (!title || !subtitle || !summary || !tableTitle || !datasetBadge || !tableHead || !tableBody || !empty || !detailTitle || !detailDescription || !detailMeta || !payload || !searchInput || !pageLabel || !prevButton || !nextButton) {
      return null;
    }
    const labels = {
      page: overlay.dataset.labelPage || Drupal.t("Page"),
      of: overlay.dataset.labelOf || Drupal.t("of"),
      noMetadata: overlay.dataset.labelNoMetadata || Drupal.t("No metadata available for this record."),
      datasetDefault: overlay.dataset.labelDatasetDefault || Drupal.t("Technical Insight"),
      datasetSlowEndpoints: overlay.dataset.labelDatasetSlowEndpoints || Drupal.t("Slow Endpoints"),
      datasetAjaxEndpoints: overlay.dataset.labelDatasetAjaxEndpoints || Drupal.t("AJAX Endpoints"),
      datasetExternalRequests: overlay.dataset.labelDatasetExternalRequests || Drupal.t("External Requests"),
      path: overlay.dataset.labelPath || Drupal.t("Path"),
      route: overlay.dataset.labelRoute || Drupal.t("Route"),
      liveTraceDetails: overlay.dataset.labelLiveTraceDetails || Drupal.t("Live trace details"),
      details: overlay.dataset.labelDetails || Drupal.t("Details"),
      capturedRows: overlay.dataset.labelCapturedRows || Drupal.t("Captured rows")
    };
    const state = {
      datasetDetail: null,
      rows: [],
      filteredRows: [],
      currentPage: 1,
      pageSize: 5,
      activeRowId: null
    };
    const close = () => {
      overlay.hidden = true;
      document.body.classList.remove("no-explorer-modal-open");
    };
    const resolveDatasetLabel = (type) => {
      switch (type) {
        case "slow_endpoints":
          return labels.datasetSlowEndpoints;
        case "ajax_endpoints":
          return labels.datasetAjaxEndpoints;
        case "external_requests":
          return labels.datasetExternalRequests;
        default:
          return labels.datasetDefault;
      }
    };
    const resolveSummaryIcon = (label) => {
      const normalized = String(label || "").toLowerCase();
      if (normalized.includes("range")) {
        return "\u25F7";
      }
      if (normalized.includes("call")) {
        return "\u25CE";
      }
      if (normalized.includes("duration")) {
        return "\u21AF";
      }
      if (normalized.includes("error")) {
        return "\u26A0";
      }
      if (normalized.includes("method")) {
        return "\u21C4";
      }
      return "\u2022";
    };
    const extractIdentityData = (summaryData) => {
      const identity = {
        path: "\u2014",
        route: "\u2014"
      };
      Object.entries(summaryData || {}).forEach(([label, value]) => {
        const normalized = String(label || "").trim().toLowerCase();
        const stringValue = String(value ?? "");
        if (normalized === "path / route") {
          const parts = stringValue.split("\n");
          identity.path = parts[0] || "\u2014";
          identity.route = parts[1] || "\u2014";
        } else if (normalized === "path") {
          identity.path = stringValue || "\u2014";
        } else if (normalized === "route") {
          identity.route = stringValue || "\u2014";
        }
      });
      return identity;
    };
    const buildMetaRows = (rowDetail) => {
      const summaryEntries = Object.entries(rowDetail?.summary || {});
      const identity = extractIdentityData(rowDetail?.summary || {});
      const excludedLabels = ["path / route", "path", "route"];
      const preferredOrder = [
        Drupal.t("trace id"),
        Drupal.t("request id"),
        Drupal.t("method"),
        Drupal.t("status code"),
        Drupal.t("duration"),
        Drupal.t("started"),
        Drupal.t("ended"),
        Drupal.t("ajax request"),
        Drupal.t("user id"),
        Drupal.t("client ip"),
        Drupal.t("target"),
        Drupal.t("parent request")
      ];
      const metaEntries = summaryEntries.filter(
        ([label]) => !excludedLabels.includes(
          String(label || "").trim().toLowerCase()
        )
      ).map(([label, value]) => ({
        label,
        value,
        normalized: String(label || "").trim().toLowerCase()
      }));
      metaEntries.sort((left, right) => {
        const leftIndex = preferredOrder.indexOf(left.normalized);
        const rightIndex = preferredOrder.indexOf(right.normalized);
        if (leftIndex === -1 && rightIndex === -1) {
          return left.label.localeCompare(right.label);
        }
        if (leftIndex === -1) {
          return 1;
        }
        if (rightIndex === -1) {
          return -1;
        }
        return leftIndex - rightIndex;
      });
      const orderedRows = [
        {
          label: labels.path,
          value: identity.path,
          isPrimary: true,
          isRoute: false
        },
        {
          label: labels.route,
          value: identity.route,
          isPrimary: true,
          isRoute: true
        },
        ...metaEntries.map((entry) => ({
          label: entry.label,
          value: entry.value,
          isPrimary: false,
          isRoute: false
        }))
      ];
      detailMeta.innerHTML = "";
      if (!orderedRows.length) {
        const emptyInline = cloneTemplate(overlay, "empty-inline");
        if (emptyInline) {
          emptyInline.textContent = labels.noMetadata;
          detailMeta.appendChild(emptyInline);
        }
        return;
      }
      orderedRows.forEach((entry) => {
        const row = cloneTemplate(overlay, "meta-row");
        if (!row) {
          return;
        }
        if (entry.isPrimary) {
          row.classList.add("is-primary");
        }
        const labelNode = select(row, '[data-role="label"]');
        const valueNode = select(row, '[data-role="value"]');
        if (labelNode) {
          labelNode.textContent = entry.label;
        }
        if (valueNode) {
          valueNode.textContent = entry.value;
          if (entry.isRoute) {
            valueNode.classList.add("is-route");
          }
        }
        detailMeta.appendChild(row);
      });
    };
    const renderDetail = (rowDetail, datasetDetail) => {
      detailTitle.textContent = datasetDetail?.detail_title || labels.liveTraceDetails;
      detailDescription.textContent = datasetDetail?.detail_description || "";
      buildMetaRows(rowDetail);
      payload.value = rowDetail?.payload_pretty || "";
    };
    const buildRowSearchText = (row) => {
      const cells = Array.isArray(row.cells) ? row.cells.join(" ") : "";
      const summaryValues = row.detail?.summary ? Object.values(row.detail.summary).join(" ") : "";
      return `${cells} ${summaryValues}`.toLowerCase();
    };
    const getStatusBadgeClass = (statusValue) => {
      const code = Number(statusValue);
      if (code >= 500) {
        return "is-error";
      }
      if (code >= 400) {
        return "is-warning";
      }
      if (code >= 300) {
        return "is-info";
      }
      if (code >= 200) {
        return "is-success";
      }
      return "";
    };
    const buildStatusBadge = (value) => {
      const badge = cloneTemplate(overlay, "status-badge");
      if (!badge) {
        return document.createTextNode(String(value ?? ""));
      }
      const stateClass = getStatusBadgeClass(value);
      if (stateClass) {
        badge.classList.add(stateClass);
      }
      badge.textContent = String(value ?? "");
      return badge;
    };
    const buildPathRouteCell = (cellValue) => {
      const wrapper = document.createElement("div");
      wrapper.className = "no-explorer-modal__path-route";
      const parts = String(cellValue || "").split("\n");
      const path = parts[0] || "\u2014";
      const route = parts[1] || "\u2014";
      const pathValue = document.createElement("div");
      pathValue.className = "no-explorer-modal__path-value";
      pathValue.textContent = path;
      const divider = document.createElement("div");
      divider.className = "no-explorer-modal__path-divider";
      const routeValue = document.createElement("div");
      routeValue.className = "no-explorer-modal__route-value";
      routeValue.textContent = route;
      wrapper.appendChild(pathValue);
      wrapper.appendChild(divider);
      wrapper.appendChild(routeValue);
      return wrapper;
    };
    const buildCellContent = (cell, columnName) => {
      const normalizedColumn = String(columnName || "").toLowerCase();
      if (normalizedColumn === "status") {
        return buildStatusBadge(cell);
      }
      if (normalizedColumn === "path / route") {
        return buildPathRouteCell(cell);
      }
      return document.createTextNode(String(cell ?? ""));
    };
    const renderTablePage = () => {
      const start = (state.currentPage - 1) * state.pageSize;
      const pageRows = state.filteredRows.slice(start, start + state.pageSize);
      const totalPages = Math.max(
        1,
        Math.ceil(state.filteredRows.length / state.pageSize)
      );
      empty.hidden = state.filteredRows.length > 0;
      pageLabel.textContent = `${labels.page} ${state.currentPage} ${labels.of} ${totalPages}`;
      prevButton.disabled = state.currentPage <= 1;
      nextButton.disabled = state.currentPage >= totalPages;
      tableBody.innerHTML = "";
      pageRows.forEach((row) => {
        const rowNode = cloneTemplate(overlay, "table-row");
        if (!rowNode) {
          return;
        }
        rowNode.setAttribute("data-no-explorer-modal-row", row.id || "");
        rowNode.setAttribute(
          "aria-selected",
          state.activeRowId === row.id ? "true" : "false"
        );
        if (state.activeRowId === row.id) {
          rowNode.classList.add("is-active");
        }
        (row.cells || []).forEach((cell, cellIndex) => {
          const cellNode = cloneTemplate(overlay, "table-cell");
          const columnName = state.datasetDetail?.table_columns?.[cellIndex] || "";
          if (!cellNode) {
            return;
          }
          cellNode.appendChild(buildCellContent(cell, columnName));
          rowNode.appendChild(cellNode);
        });
        rowNode.addEventListener("click", () => {
          state.activeRowId = row.id;
          renderTablePage();
          renderDetail(row.detail || {}, state.datasetDetail);
        });
        tableBody.appendChild(rowNode);
      });
      if (!pageRows.length) {
        renderDetail({}, state.datasetDetail);
        return;
      }
      const activeOnPage = pageRows.find((row) => row.id === state.activeRowId) || pageRows[0];
      state.activeRowId = activeOnPage.id;
      renderDetail(activeOnPage.detail || {}, state.datasetDetail);
    };
    const applyFilter = () => {
      const query = String(searchInput.value || "").trim().toLowerCase();
      state.filteredRows = !query ? [...state.rows] : state.rows.filter((row) => buildRowSearchText(row).includes(query));
      state.currentPage = 1;
      renderTablePage();
    };
    const exportRows = (mode) => {
      const rows = mode === "filtered" ? state.filteredRows : state.rows;
      const columns = (state.datasetDetail?.table_columns || []).map(
        (label, index) => ({
          key: index,
          label
        })
      );
      const exportRowsData = rows.map((row) => {
        const item = {};
        (row.cells || []).forEach((cell, index) => {
          item[index] = cell;
        });
        return item;
      });
      downloadCsv(
        `${state.datasetDetail?.type || "technical-insights"}-${mode}.csv`,
        columns,
        exportRowsData
      );
    };
    const renderSummary = (datasetDetail) => {
      summary.innerHTML = "";
      Object.entries(datasetDetail.summary || {}).forEach(([label, value]) => {
        const card = cloneTemplate(overlay, "summary-card");
        if (!card) {
          return;
        }
        const iconNode = select(card, '[data-role="icon"]');
        const labelNode = select(card, '[data-role="label"]');
        const valueNode = select(card, '[data-role="value"]');
        if (iconNode) {
          iconNode.textContent = resolveSummaryIcon(label);
        }
        if (labelNode) {
          labelNode.textContent = label;
        }
        if (valueNode) {
          valueNode.textContent = String(value ?? "");
        }
        summary.appendChild(card);
      });
    };
    const open = (datasetDetail) => {
      state.datasetDetail = datasetDetail;
      state.rows = Array.isArray(datasetDetail.table_rows) ? datasetDetail.table_rows : [];
      state.filteredRows = [...state.rows];
      state.currentPage = 1;
      state.activeRowId = state.rows[0]?.id || null;
      title.textContent = datasetDetail.title || labels.details;
      subtitle.textContent = datasetDetail.subtitle || "";
      datasetBadge.textContent = resolveDatasetLabel(datasetDetail.type);
      datasetBadge.setAttribute(
        "data-dataset-type",
        datasetDetail.type || "default"
      );
      renderSummary(datasetDetail);
      tableTitle.textContent = datasetDetail.table_title || labels.capturedRows;
      tableHead.innerHTML = (datasetDetail.table_columns || []).map((column) => `<th>${escapeHtml(column)}</th>`).join("");
      searchInput.value = "";
      renderTablePage();
      overlay.hidden = false;
      document.body.classList.add("no-explorer-modal-open");
    };
    searchInput.addEventListener("input", applyFilter);
    prevButton.addEventListener("click", () => {
      if (state.currentPage > 1) {
        state.currentPage -= 1;
        renderTablePage();
      }
    });
    nextButton.addEventListener("click", () => {
      const totalPages = Math.max(
        1,
        Math.ceil(state.filteredRows.length / state.pageSize)
      );
      if (state.currentPage < totalPages) {
        state.currentPage += 1;
        renderTablePage();
      }
    });
    selectAll(overlay, "[data-no-explorer-modal-export]").forEach((button) => {
      button.addEventListener("click", () => {
        exportRows(button.getAttribute("data-no-explorer-modal-export"));
      });
    });
    selectAll(overlay, "[data-no-explorer-modal-close]").forEach((element) => {
      element.addEventListener("click", close);
    });
    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape" && !overlay.hidden) {
        close();
      }
    });
    return { open, close };
  }

  // assets/src/js/components/technical-insights-explorer.js
  function resolveExplorerRowStateClass(datasetKey, row) {
    const errorCount = Number(row.error_count_raw ?? 0);
    const avgDuration = Number(row.avg_duration_raw ?? 0);
    const callCount = Number(row.request_count_raw ?? 0);
    if (errorCount > 0) {
      return "no-technical-explorer__row no-technical-explorer__row--danger";
    }
    if (datasetKey === "external_requests") {
      if (avgDuration >= 800) {
        return "no-technical-explorer__row no-technical-explorer__row--warning";
      }
      return "no-technical-explorer__row no-technical-explorer__row--success";
    }
    if (avgDuration >= 600 || callCount >= 100) {
      return "no-technical-explorer__row no-technical-explorer__row--warning";
    }
    return "no-technical-explorer__row no-technical-explorer__row--success";
  }
  function initTechnicalInsightsExplorer(container, explorerSettings) {
    if (!explorerSettings || !explorerSettings.datasets) {
      return;
    }
    const wrappers = container.querySelectorAll("[data-no-technical-explorer]");
    const modal = createExplorerModal(container);
    wrappers.forEach((wrapper) => {
      if (wrapper.dataset.technicalExplorerReady === "true") {
        return;
      }
      const datasetButtons = wrapper.querySelectorAll(
        "[data-no-explorer-dataset-button]"
      );
      const searchInput = wrapper.querySelector("[data-no-explorer-search]");
      const pageSizeInput = wrapper.querySelector("[data-no-explorer-page-size]");
      const descriptionTarget = wrapper.querySelector(
        "[data-no-explorer-description]"
      );
      const headTarget = wrapper.querySelector("[data-no-explorer-head]");
      const bodyTarget = wrapper.querySelector("[data-no-explorer-body]");
      const emptyTarget = wrapper.querySelector("[data-no-explorer-empty]");
      const paginationSummary = wrapper.querySelector(
        "[data-no-explorer-pagination-summary]"
      );
      const previousButton = wrapper.querySelector(
        "[data-no-explorer-pagination-prev]"
      );
      const nextButton = wrapper.querySelector(
        "[data-no-explorer-pagination-next]"
      );
      const exportFilteredButton = wrapper.querySelector(
        "[data-no-explorer-export-filtered]"
      );
      const exportFullButton = wrapper.querySelector(
        "[data-no-explorer-export-full]"
      );
      const flushButton = wrapper.querySelector("[data-no-explorer-flush]");
      const flushHelp = wrapper.querySelector("[data-no-explorer-flush-help]");
      const datasetKeys = Object.keys(explorerSettings.datasets);
      if (!datasetKeys.length) {
        return;
      }
      const state = {
        activeDatasetKey: datasetKeys[0],
        query: "",
        sortKey: "",
        sortDirection: "desc",
        page: 1,
        pageSize: Number(pageSizeInput?.value || 10)
      };
      const getActiveDataset = () => explorerSettings.datasets[state.activeDatasetKey] || null;
      const getFilteredRows = (dataset) => {
        const query = normalizeSearchValue(state.query);
        let rows = Array.isArray(dataset.rows) ? [...dataset.rows] : [];
        if (query) {
          rows = rows.filter(
            (row) => dataset.search_keys.some(
              (key) => normalizeSearchValue(row[key]).includes(query)
            )
          );
        }
        const sortKey = state.sortKey || dataset.default_sort?.key || dataset.columns[0]?.key;
        let sortDirection = dataset.default_sort?.direction || "desc";
        if (state.sortKey) {
          sortDirection = state.sortDirection;
        }
        rows.sort((left, right) => {
          const leftValue = left[`${sortKey}_raw`] ?? left[sortKey] ?? "";
          const rightValue = right[`${sortKey}_raw`] ?? right[sortKey] ?? "";
          if (typeof leftValue === "number" && typeof rightValue === "number") {
            return sortDirection === "asc" ? leftValue - rightValue : rightValue - leftValue;
          }
          const collator = new Intl.Collator(void 0, {
            numeric: true,
            sensitivity: "base"
          });
          return sortDirection === "asc" ? collator.compare(String(leftValue), String(rightValue)) : collator.compare(String(rightValue), String(leftValue));
        });
        return rows;
      };
      const getPaginatedRows = (rows) => {
        const start = (state.page - 1) * state.pageSize;
        return rows.slice(start, start + state.pageSize);
      };
      let renderExplorer = () => {
      };
      const renderHeaders = (dataset) => {
        headTarget.innerHTML = dataset.columns.map((column) => {
          let sortDirection = "";
          if (state.sortKey === column.key) {
            sortDirection = state.sortDirection;
          } else if (dataset.default_sort?.key === column.key) {
            sortDirection = dataset.default_sort.direction;
          }
          const sortClass = sortDirection ? ` no-technical-explorer__sort-button--${sortDirection}` : "";
          return `<th><button type="button" class="no-technical-explorer__sort-button${sortClass}" data-no-explorer-sort-key="${column.key}">${column.label}</button></th>`;
        }).join("");
        headTarget.querySelectorAll("[data-no-explorer-sort-key]").forEach((button) => {
          button.addEventListener("click", () => {
            const nextKey = button.getAttribute("data-no-explorer-sort-key");
            if (state.sortKey === nextKey) {
              state.sortDirection = state.sortDirection === "asc" ? "desc" : "asc";
            } else {
              state.sortKey = nextKey;
              state.sortDirection = "desc";
            }
            state.page = 1;
            renderExplorer();
          });
        });
      };
      const renderRows = (dataset, rows, filteredRows) => {
        if (!filteredRows.length) {
          bodyTarget.innerHTML = "";
          emptyTarget.hidden = false;
          emptyTarget.textContent = dataset.empty_message;
          return;
        }
        emptyTarget.hidden = true;
        bodyTarget.innerHTML = rows.map(
          (row, index) => `
        <tr class="${resolveExplorerRowStateClass(state.activeDatasetKey, row)}" data-no-explorer-row-index="${index}">
          ${dataset.columns.map((column, columnIndex) => {
            const value = escapeHtml(row[column.key] ?? "\u2014");
            if (columnIndex === 0 && row.detail) {
              return `<td><button type="button" class="no-technical-explorer__row-link" data-no-explorer-open-detail="${index}">${value}</button></td>`;
            }
            if (column.key === "action_label" && row.action_url) {
              return `<td><a class="button button--small button--primary" href="${escapeHtml(row.action_url)}">${value}</a></td>`;
            }
            return `<td>${value}</td>`;
          }).join("")}
        </tr>
      `
        ).join("");
        bodyTarget.querySelectorAll("[data-no-explorer-open-detail]").forEach((button) => {
          button.addEventListener("click", () => {
            const rowIndex = Number(
              button.getAttribute("data-no-explorer-open-detail")
            );
            const selectedRow = rows[rowIndex] || null;
            if (selectedRow?.detail && modal) {
              modal.open(selectedRow.detail);
            }
          });
        });
      };
      const renderPagination = (filteredRows) => {
        const totalRows = filteredRows.length;
        const startRow = totalRows === 0 ? 0 : (state.page - 1) * state.pageSize + 1;
        const endRow = Math.min(totalRows, state.page * state.pageSize);
        const totalPages = Math.max(1, Math.ceil(totalRows / state.pageSize));
        paginationSummary.textContent = `${startRow}-${endRow} of ${totalRows}`;
        previousButton.disabled = state.page <= 1;
        nextButton.disabled = state.page >= totalPages;
      };
      renderExplorer = () => {
        const dataset = getActiveDataset();
        if (!dataset) {
          return;
        }
        descriptionTarget.textContent = dataset.description || "";
        if (searchInput) {
          searchInput.placeholder = dataset.search_placeholder || Drupal.t("Search");
        }
        datasetButtons.forEach((button) => {
          const isActive = button.getAttribute("data-no-explorer-dataset-button") === state.activeDatasetKey;
          button.setAttribute("aria-pressed", isActive ? "true" : "false");
        });
        const filteredRows = getFilteredRows(dataset);
        const totalPages = Math.max(
          1,
          Math.ceil(filteredRows.length / state.pageSize)
        );
        if (state.page > totalPages) {
          state.page = totalPages;
        }
        const paginatedRows = getPaginatedRows(filteredRows);
        renderHeaders(dataset);
        renderRows(dataset, paginatedRows, filteredRows);
        renderPagination(filteredRows);
        exportFilteredButton.onclick = () => {
          downloadCsv(
            `${dataset.export_key || state.activeDatasetKey}-filtered.csv`,
            dataset.columns,
            filteredRows
          );
        };
        exportFullButton.onclick = () => {
          downloadCsv(
            `${dataset.export_key || state.activeDatasetKey}-full.csv`,
            dataset.columns,
            dataset.rows || []
          );
        };
        if (flushButton && flushHelp) {
          flushButton.disabled = false;
          flushButton.removeAttribute("aria-disabled");
          flushHelp.textContent = dataset.flush_help || "";
          flushButton.onclick = () => {
            if (!dataset.actions?.flush) {
              return;
            }
            const confirmed = window.confirm(
              [
                Drupal.t(
                  'Are you sure you want to invalidate the dashboard cache for "@label"?',
                  { "@label": dataset.label }
                ),
                Drupal.t("This action does not delete raw traces or raw spans.")
              ].join("\n\n")
            );
            if (!confirmed) {
              return;
            }
            flushButton.disabled = true;
            fetch(dataset.actions.flush, {
              method: "POST",
              headers: {
                "X-Requested-With": "XMLHttpRequest"
              }
            }).then((response) => {
              if (!response.ok) {
                throw new Error(Drupal.t("Unable to flush the dataset cache."));
              }
              return response.json();
            }).then(() => {
              window.location.reload();
            }).catch(() => {
              flushButton.disabled = false;
            });
          };
        }
      };
      datasetButtons.forEach((button) => {
        button.addEventListener("click", () => {
          state.activeDatasetKey = button.getAttribute(
            "data-no-explorer-dataset-button"
          );
          state.page = 1;
          state.sortKey = "";
          state.sortDirection = "desc";
          renderExplorer();
        });
      });
      searchInput?.addEventListener("input", (event) => {
        state.query = event.currentTarget.value;
        state.page = 1;
        renderExplorer();
      });
      pageSizeInput?.addEventListener("change", (event) => {
        state.pageSize = Number(event.currentTarget.value || 10);
        state.page = 1;
        renderExplorer();
      });
      previousButton?.addEventListener("click", () => {
        if (state.page > 1) {
          state.page -= 1;
          renderExplorer();
        }
      });
      nextButton?.addEventListener("click", () => {
        state.page += 1;
        renderExplorer();
      });
      renderExplorer();
      wrapper.dataset.technicalExplorerReady = "true";
    });
  }

  // assets/src/js/services/echarts.js
  function createChartFallback(element, message) {
    if (!element) {
      return;
    }
    element.innerHTML = "";
    const fallback = document.createElement("div");
    fallback.className = "no-chart-fallback";
    fallback.textContent = message || "";
    element.appendChild(fallback);
  }
  function initResponsiveEchart(element, option, missingLibraryMessage = "") {
    if (!element) {
      return;
    }
    if (typeof window.echarts === "undefined") {
      createChartFallback(element.parentNode || element, missingLibraryMessage);
      return;
    }
    let chart = null;
    let resizeObserver = null;
    const bootChart = () => {
      const width = element.clientWidth;
      const height = element.clientHeight;
      if (!width || !height) {
        window.requestAnimationFrame(bootChart);
        return;
      }
      if (chart) {
        chart.dispose();
      }
      chart = window.echarts.init(element);
      chart.setOption(option, true);
      chart.resize();
    };
    const resizeChart = () => {
      if (chart) {
        chart.resize();
      }
    };
    bootChart();
    window.addEventListener("resize", resizeChart);
    if (typeof ResizeObserver !== "undefined") {
      resizeObserver = new ResizeObserver(() => {
        resizeChart();
      });
      resizeObserver.observe(element);
      if (element.parentNode instanceof HTMLElement) {
        resizeObserver.observe(element.parentNode);
      }
    }
  }

  // assets/src/js/components/external-requests-preview.js
  function initExternalRequestsPreview(container, previewSettings) {
    if (!previewSettings || !previewSettings.chart_id) {
      return;
    }
    const chartElement = container.querySelector(
      `[data-chart-id="${previewSettings.chart_id}"]`
    );
    if (!chartElement) {
      return;
    }
    const series = Array.isArray(previewSettings.series) ? previewSettings.series.filter((item) => Number(item.value || 0) > 0) : [];
    if (!series.length) {
      createChartFallback(
        chartElement,
        Drupal.t(
          "No external requests were captured for the selected time range."
        )
      );
      return;
    }
    initResponsiveEchart(
      chartElement,
      {
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: 0,
          left: "center"
        },
        series: [
          {
            name: previewSettings.title || Drupal.t("External Requests"),
            type: "pie",
            radius: ["42%", "68%"],
            avoidLabelOverlap: true,
            label: {
              formatter: "{b}: {d}%"
            },
            data: series
          }
        ]
      },
      Drupal.t("Apache ECharts is not available.")
    );
  }

  // assets/src/js/components/cache-runtime-health.js
  function buildSeriesDefinitions(host, settings) {
    const definitions = [];
    if (Array.isArray(settings.series?.response_cache_events)) {
      definitions.push({
        key: "response_cache_events",
        name: host.dataset.seriesResponseLabel || ""
      });
    }
    if (Array.isArray(settings.series?.cacheability_events)) {
      definitions.push({
        key: "cacheability_events",
        name: host.dataset.seriesCacheabilityLabel || ""
      });
    }
    if (Array.isArray(settings.series?.invalidation_events)) {
      definitions.push({
        key: "invalidation_events",
        name: host.dataset.seriesInvalidationLabel || ""
      });
    }
    return definitions;
  }
  function buildChartOption(host, settings, definitions) {
    const firstSeries = settings.series?.[definitions[0].key] || [];
    const labels = firstSeries.map((item) => item.label ?? "");
    return {
      animation: true,
      tooltip: {
        trigger: "axis",
        confine: true
      },
      legend: {
        top: 8,
        left: "center",
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          fontSize: 12
        },
        data: definitions.map((definition) => definition.name)
      },
      grid: {
        top: 56,
        right: 24,
        bottom: 36,
        left: 56,
        containLabel: true
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: labels,
        axisLabel: {
          fontSize: 12
        }
      },
      yAxis: {
        type: "value",
        name: host.dataset.axisEventsLabel || "",
        nameGap: 18,
        axisLabel: {
          fontSize: 12
        }
      },
      series: definitions.map((definition) => ({
        name: definition.name,
        type: "line",
        smooth: true,
        symbol: "none",
        lineStyle: {
          width: 2
        },
        ...definition.key !== "invalidation_events" ? {
          areaStyle: {
            opacity: 0.08
          }
        } : {},
        data: (settings.series?.[definition.key] || []).map(
          (item) => Number(item.value ?? 0)
        )
      }))
    };
  }
  function initCacheActivityChart(host, settings) {
    if (host.dataset.chartReady === "true") {
      return;
    }
    const chartElement = host.querySelector(".no-cache-activity-trend__chart");
    if (!chartElement) {
      return;
    }
    const definitions = buildSeriesDefinitions(host, settings);
    if (!definitions.length) {
      createChartFallback(host, host.dataset.chartEmptyMessage || "");
      return;
    }
    initResponsiveEchart(
      chartElement,
      buildChartOption(host, settings, definitions),
      host.dataset.chartLibraryMessage || ""
    );
    host.dataset.chartReady = "true";
  }
  function initCacheRuntimeHealth(container, chartSettings = {}) {
    const chartHosts = container.querySelectorAll(
      "[data-no-cache-runtime-chart]"
    );
    chartHosts.forEach((host) => {
      const chartId = host.dataset.chartId || "";
      if (!chartId || !chartSettings[chartId]) {
        return;
      }
      initCacheActivityChart(host, chartSettings[chartId]);
    });
  }

  // assets/src/js/components/database-observability.js
  function cloneTemplate2(section, name) {
    const template = section.querySelector(`[data-no-db-template="${name}"]`);
    return template?.content ? template.content.cloneNode(true) : null;
  }
  function buildPressureTrendOption(host, settings) {
    const labels = Array.isArray(settings.labels) ? settings.labels : [];
    const series = Array.isArray(settings.series) ? settings.series : [];
    return {
      animation: true,
      tooltip: {
        trigger: "axis",
        confine: true
      },
      legend: {
        top: 8,
        left: "center",
        data: series.map((item) => item.name ?? "")
      },
      grid: {
        top: 56,
        right: 24,
        bottom: 40,
        left: 68,
        containLabel: true
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: labels
      },
      yAxis: [
        {
          type: "value",
          name: host.dataset.axisPrimaryLabel || "",
          nameLocation: "middle",
          nameRotate: 90,
          nameGap: 52,
          nameTextStyle: {
            align: "center",
            verticalAlign: "middle"
          }
        },
        {
          type: "value",
          name: host.dataset.axisSecondaryLabel || "",
          nameGap: 18
        }
      ],
      series: series.map((item, index) => ({
        name: item.name ?? "",
        type: item.type ?? "line",
        smooth: item.type !== "bar",
        symbol: item.type === "bar" ? "none" : "circle",
        symbolSize: item.type === "bar" ? 0 : 6,
        yAxisIndex: index === 2 ? 1 : 0,
        ...item.type !== "bar" ? {
          lineStyle: { width: 2 }
        } : {},
        ...item.type === "line" && index === 0 ? {
          areaStyle: { opacity: 0.08 }
        } : {},
        ...item.type === "bar" ? {
          barMaxWidth: 22
        } : {},
        data: Array.isArray(item.data) ? item.data.map((value) => Number(value ?? 0)) : []
      }))
    };
  }
  function buildRequestComparisonOption(host, settings) {
    const points = Array.isArray(settings.points) ? settings.points : [];
    return {
      animation: true,
      tooltip: {
        trigger: "item",
        confine: true,
        formatter(params) {
          const data = params.data || [];
          return [
            `<strong>${data[2] || ""}</strong>`,
            `${host.dataset.tooltipRequestDurationLabel}: ${data[0]} ms`,
            `${host.dataset.tooltipDbTimeLabel}: ${data[1]} ms`,
            `${host.dataset.tooltipRequestCountLabel}: ${data[3]}`,
            `${host.dataset.tooltipSlowRateLabel}: ${data[4]}%`
          ].join("<br>");
        }
      },
      grid: {
        top: 24,
        right: 24,
        bottom: 52,
        left: 84,
        containLabel: true
      },
      xAxis: {
        type: "value",
        name: host.dataset.axisXLabel || "",
        nameLocation: "middle",
        nameGap: 30
      },
      yAxis: {
        type: "value",
        name: host.dataset.axisYLabel || "",
        nameLocation: "middle",
        nameRotate: 90,
        nameGap: 60,
        nameTextStyle: {
          align: "center",
          verticalAlign: "middle"
        }
      },
      series: [
        {
          type: "scatter",
          symbolSize(data) {
            const requests = Number(data[3] ?? 0);
            return Math.max(12, Math.min(46, 10 + requests * 1.2));
          },
          data: points.map((point) => [
            Number(point.request_duration_ms ?? 0),
            Number(point.db_time_ms ?? 0),
            point.label ?? "",
            Number(point.request_count ?? 0),
            Number(point.slow_rate ?? 0)
          ])
        }
      ]
    };
  }
  function populateModalSummary(section, modal, summary) {
    const summaryWrapper = modal.querySelector(".no-db-modal__summary");
    if (!summaryWrapper) {
      return;
    }
    summaryWrapper.innerHTML = "";
    if (!summary) {
      summaryWrapper.hidden = true;
      return;
    }
    const items = [
      {
        label: summary.primary_label || "",
        value: summary.primary_value || ""
      },
      {
        label: summary.secondary_label || "",
        value: summary.secondary_value || ""
      }
    ];
    items.forEach((item) => {
      const fragment = cloneTemplate2(section, "modal-summary-card");
      if (!fragment) {
        return;
      }
      const label = fragment.querySelector('[data-db-modal-field="label"]');
      const value = fragment.querySelector('[data-db-modal-field="value"]');
      if (label) {
        label.textContent = item.label;
      }
      if (value) {
        value.textContent = item.value;
      }
      summaryWrapper.appendChild(fragment);
    });
    summaryWrapper.hidden = false;
  }
  function populateModalTable(section, modal, payload) {
    const headers = Array.isArray(payload.headers) ? payload.headers : [];
    const rows = Array.isArray(payload.rows) ? payload.rows : [];
    const tableWrap = modal.querySelector(".no-db-modal__table-wrap");
    const theadRow = modal.querySelector(".no-db-modal__table thead tr");
    const tbody = modal.querySelector(".no-db-modal__table tbody");
    const emptyStateHost = modal.querySelector(".no-db-modal__empty-state");
    if (!tableWrap || !theadRow || !tbody || !emptyStateHost) {
      return;
    }
    theadRow.innerHTML = "";
    tbody.innerHTML = "";
    emptyStateHost.innerHTML = "";
    headers.forEach((header) => {
      const th = document.createElement("th");
      th.textContent = header;
      theadRow.appendChild(th);
    });
    if (!rows.length) {
      const fragment = cloneTemplate2(section, "modal-empty-state");
      if (fragment) {
        const emptyText = fragment.querySelector("[data-db-modal-empty-text]");
        if (emptyText) {
          emptyText.textContent = payload.empty_message || "";
        }
        emptyStateHost.appendChild(fragment);
      }
      emptyStateHost.hidden = false;
      tableWrap.hidden = true;
      return;
    }
    rows.forEach((row) => {
      const fragment = cloneTemplate2(section, "modal-table-row");
      if (!fragment) {
        return;
      }
      const mapping = {
        time: row.time || "",
        duration: row.duration || "",
        route: row.route || "",
        connection: row.connection || "",
        hash: row.hash || "",
        caller: row.caller || ""
      };
      Object.entries(mapping).forEach(([key, value]) => {
        const cell = fragment.querySelector(`[data-db-modal-column="${key}"]`);
        if (!cell) {
          return;
        }
        if (key === "hash") {
          const code = document.createElement("code");
          code.textContent = value;
          cell.appendChild(code);
        } else {
          cell.textContent = value;
        }
      });
      tbody.appendChild(fragment);
    });
    emptyStateHost.hidden = true;
    tableWrap.hidden = false;
  }
  function initDatabaseModal(section) {
    const modal = section.querySelector(".no-db-modal");
    if (!modal) {
      return;
    }
    const title = modal.querySelector(".no-db-modal__title");
    const closeButton = modal.querySelector(".no-db-modal__close");
    const backdrop = modal.querySelector(".no-db-modal__backdrop");
    const closeModal = () => {
      modal.hidden = true;
    };
    const openModal = (payload) => {
      if (title) {
        title.textContent = payload.title || section.dataset.modalTitle || "";
      }
      populateModalSummary(section, modal, payload.summary || null);
      populateModalTable(section, modal, payload);
      modal.hidden = false;
    };
    section.querySelectorAll(".no-db-modal-trigger").forEach((button) => {
      button.addEventListener("click", () => {
        const rawPayload = button.dataset.dbModalPayload || "";
        if (!rawPayload) {
          return;
        }
        try {
          openModal(JSON.parse(rawPayload));
        } catch (error) {
          closeModal();
        }
      });
    });
    closeButton?.addEventListener("click", closeModal);
    backdrop?.addEventListener("click", closeModal);
    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape" && !modal.hidden) {
        closeModal();
      }
    });
  }
  function buildCsv(table) {
    const rows = [...table.querySelectorAll("tr")].filter((row) => !row.hidden);
    return rows.map((row) => {
      return [...row.querySelectorAll("th, td")].map((cell) => {
        const text = (cell.textContent || "").trim().replace(/\s+/g, " ");
        return `"${text.replace(/"/g, '""')}"`;
      }).join(",");
    }).join("\n");
  }
  function downloadCsv2(content, filename = "database-export.csv") {
    const blob = new Blob([content], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }
  function compareSortableValues(left, right) {
    const leftNumber = Number(left);
    const rightNumber = Number(right);
    const bothNumeric = !Number.isNaN(leftNumber) && !Number.isNaN(rightNumber);
    if (bothNumeric) {
      return leftNumber - rightNumber;
    }
    const leftTimestamp = Date.parse(left);
    const rightTimestamp = Date.parse(right);
    const bothDates = !Number.isNaN(leftTimestamp) && !Number.isNaN(rightTimestamp);
    if (bothDates) {
      return leftTimestamp - rightTimestamp;
    }
    const collator = new Intl.Collator(void 0, {
      numeric: true,
      sensitivity: "base"
    });
    return collator.compare(left, right);
  }
  function initInteractiveTable(options) {
    const {
      table,
      searchInput,
      emptyState,
      prevButton,
      nextButton,
      status,
      exportButton,
      exportFilename,
      defaultSortIndex = 0,
      defaultSortDirection = "asc"
    } = options;
    if (!table) {
      return;
    }
    const tbody = table.querySelector("tbody");
    if (!tbody) {
      return;
    }
    const allRows = [...tbody.querySelectorAll("tr")];
    const pageSize = Number(table.dataset.pageSize || 10);
    let currentPage = 1;
    let sortIndex = defaultSortIndex;
    let sortDirection = defaultSortDirection;
    let searchTerm = "";
    const getFilteredRows = () => {
      let rows = [...allRows];
      if (searchTerm) {
        rows = rows.filter((row) => {
          const content = (row.textContent || "").toLowerCase();
          return content.includes(searchTerm);
        });
      }
      rows.sort((a, b) => {
        const aCell = a.children[sortIndex];
        const bCell = b.children[sortIndex];
        const aValue = (aCell?.dataset.sortValue || aCell?.textContent || "").trim();
        const bValue = (bCell?.dataset.sortValue || bCell?.textContent || "").trim();
        const result = compareSortableValues(aValue, bValue);
        return sortDirection === "asc" ? result : -result;
      });
      return rows;
    };
    const updateSortHeaders = () => {
      table.querySelectorAll("thead th.is-sortable").forEach((header) => {
        const headerIndex = Number(header.dataset.sortKey);
        if (headerIndex !== sortIndex) {
          header.setAttribute("aria-sort", "none");
          return;
        }
        header.setAttribute(
          "aria-sort",
          sortDirection === "asc" ? "ascending" : "descending"
        );
      });
    };
    const render = () => {
      const rows = getFilteredRows();
      const totalRows = rows.length;
      const totalPages = Math.max(1, Math.ceil(totalRows / pageSize));
      currentPage = Math.min(currentPage, totalPages);
      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      const pageRows = rows.slice(start, end);
      allRows.forEach((row) => {
        row.hidden = true;
      });
      pageRows.forEach((row) => {
        row.hidden = false;
      });
      if (emptyState) {
        emptyState.hidden = totalRows > 0;
      }
      if (prevButton) {
        prevButton.disabled = currentPage <= 1 || totalRows === 0;
      }
      if (nextButton) {
        nextButton.disabled = currentPage >= totalPages || totalRows === 0;
      }
      if (status) {
        status.textContent = totalRows ? Drupal.t("Page @current of @total", {
          "@current": currentPage,
          "@total": totalPages
        }) : Drupal.t("Page 0 of 0");
      }
      updateSortHeaders();
    };
    searchInput?.addEventListener("input", () => {
      searchTerm = (searchInput.value || "").trim().toLowerCase();
      currentPage = 1;
      render();
    });
    exportButton?.addEventListener("click", () => {
      downloadCsv2(buildCsv(table), exportFilename);
    });
    prevButton?.addEventListener("click", () => {
      if (currentPage > 1) {
        currentPage -= 1;
        render();
      }
    });
    nextButton?.addEventListener("click", () => {
      const totalPages = Math.max(
        1,
        Math.ceil(getFilteredRows().length / pageSize)
      );
      if (currentPage < totalPages) {
        currentPage += 1;
        render();
      }
    });
    table.querySelectorAll("thead th.is-sortable").forEach((th) => {
      const handleSort = () => {
        const nextIndex = Number(th.dataset.sortKey);
        if (sortIndex === nextIndex) {
          sortDirection = sortDirection === "asc" ? "desc" : "asc";
        } else {
          sortIndex = nextIndex;
          sortDirection = nextIndex === defaultSortIndex ? defaultSortDirection : "asc";
        }
        currentPage = 1;
        render();
      };
      th.addEventListener("click", handleSort);
      th.addEventListener("keydown", (event) => {
        if (event.key === "Enter" || event.key === " ") {
          event.preventDefault();
          handleSort();
        }
      });
    });
    render();
  }
  function initRoutesTable(section) {
    initInteractiveTable({
      table: section.querySelector(".no-db-routes-table"),
      searchInput: section.querySelector(".no-db-routes-table-search"),
      emptyState: section.querySelector(".no-db-routes-table-empty-state"),
      prevButton: section.querySelector(".no-db-routes-pagination__prev"),
      nextButton: section.querySelector(".no-db-routes-pagination__next"),
      status: section.querySelector(".no-db-routes-pagination__status"),
      exportButton: section.querySelector(".no-db-routes-export-csv"),
      exportFilename: "database-most-db-expensive-routes.csv",
      defaultSortIndex: 1,
      defaultSortDirection: "desc"
    });
  }
  function initRecordsTable(section) {
    initInteractiveTable({
      table: section.querySelector(".no-db-records-table"),
      searchInput: section.querySelector(".no-db-table-search"),
      emptyState: section.querySelector(".no-db-table-empty-state"),
      prevButton: section.querySelector(".no-db-pagination__prev"),
      nextButton: section.querySelector(".no-db-pagination__next"),
      status: section.querySelector(".no-db-pagination__status"),
      exportButton: section.querySelector(".no-db-export-csv"),
      exportFilename: "database-slow-query-records.csv",
      defaultSortIndex: 0,
      defaultSortDirection: "desc"
    });
  }
  function initPressureTrendChart(host, chartSettings) {
    const chartId = host.dataset.pressureTrendChartId || "";
    const chartElement = chartId ? host.querySelector(`#${chartId}`) : null;
    if (!chartElement) {
      return;
    }
    const settings = chartSettings[chartId] || {};
    const hasData = Array.isArray(settings.series) && settings.series.some(
      (item) => Array.isArray(item.data) && item.data.length
    );
    if (!hasData) {
      createChartFallback(
        chartElement.parentNode || chartElement,
        host.dataset.chartEmptyMessage || ""
      );
      return;
    }
    initResponsiveEchart(
      chartElement,
      buildPressureTrendOption(host, settings),
      host.dataset.chartLibraryMessage || ""
    );
  }
  function initRequestComparisonChart(host, chartSettings) {
    const chartId = host.dataset.requestComparisonChartId || "";
    const chartElement = chartId ? host.querySelector(`#${chartId}`) : null;
    if (!chartElement) {
      return;
    }
    const settings = chartSettings[chartId] || {};
    const hasData = Array.isArray(settings.points) && settings.points.length > 0;
    if (!hasData) {
      createChartFallback(
        chartElement.parentNode || chartElement,
        host.dataset.chartEmptyMessage || ""
      );
      return;
    }
    initResponsiveEchart(
      chartElement,
      buildRequestComparisonOption(host, settings),
      host.dataset.chartLibraryMessage || ""
    );
  }
  function initDatabaseObservability(container, chartSettings) {
    const sections = container.querySelectorAll(".no-database-observability");
    if (!sections.length) {
      return;
    }
    sections.forEach((section) => {
      if (section.dataset.chartReady === "true") {
        return;
      }
      initPressureTrendChart(section, chartSettings);
      initRequestComparisonChart(section, chartSettings);
      initDatabaseModal(section);
      initRoutesTable(section);
      initRecordsTable(section);
      section.dataset.chartReady = "true";
    });
  }

  // assets/src/js/components/breakdown-donut.js
  function initBreakdownDonut(container, settings) {
    if (!settings || !settings.chart_id || !Array.isArray(settings.series)) {
      return;
    }
    const echartsLib = window.echarts;
    if (!echartsLib) {
      return;
    }
    const element = container.querySelector(
      `[data-breakdown-chart-id="${settings.chart_id}"]`
    );
    if (!element || element.dataset.breakdownReady === "true") {
      return;
    }
    if (!element.clientWidth || !element.clientHeight) {
      window.requestAnimationFrame(() => initBreakdownDonut(container, settings));
      return;
    }
    const chart = echartsLib.init(element);
    chart.setOption({
      tooltip: {
        trigger: "item",
        formatter: (params) => {
          const desc = params.data.description || params.name;
          return `<strong>${params.name}</strong> ${params.percent}%<br/><span style="opacity:.75;font-size:11px">${desc}</span>`;
        }
      },
      series: [
        {
          type: "pie",
          radius: ["52%", "78%"],
          avoidLabelOverlap: false,
          label: { show: false },
          labelLine: { show: false },
          emphasis: {
            scale: true,
            scaleSize: 4
          },
          data: settings.series
        }
      ]
    });
    chart.resize();
    element.dataset.breakdownReady = "true";
    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => chart.resize()) : null;
    if (resizeObserver) {
      resizeObserver.observe(element);
    } else {
      window.addEventListener("resize", () => chart.resize());
    }
  }

  // assets/src/js/dashboard.js
  (function nativeObservabilityDashboardBehavior(Drupal2, once2, drupalSettings2) {
    Drupal2.behaviors.nativeObservabilityDashboard = {
      attach(context) {
        once2(
          "native-observability-dashboard",
          ".no-dashboard-wrapper",
          context
        ).forEach((element) => {
          initKpiCards(element);
          initCharts(element);
          initActivityOverview(element);
          initTechnicalInsightsExplorer(
            element,
            drupalSettings2.nativeObservabilityDashboard?.technicalInsightsExplorer || null
          );
          initExternalRequestsPreview(
            element,
            drupalSettings2.nativeObservabilityDashboard?.externalRequestsPreview || null
          );
          initCacheRuntimeHealth(
            element,
            drupalSettings2.nativeObservabilityDashboard?.cacheObservabilityCharts || {}
          );
          initDatabaseObservability(
            element,
            drupalSettings2.nativeObservabilityDashboard?.databaseObservabilityCharts || {}
          );
          initBreakdownDonut(
            element,
            drupalSettings2.nativeObservabilityDashboard?.breakdownDonut || null
          );
        });
      }
    };
  })(Drupal, once, drupalSettings);
})();
