@solidxai/core-ui 0.1.9-beta.14 → 0.1.9-beta.17

package/dist/components/core/dashboard/widgets/DefaultDashboardTableWidget.tsx

@@ -0,0 +1,39 @@
+import type { DashboardWidgetComponentProps } from "../../../../types/dashboard";
+
+export function DefaultDashboardTableWidget({ runtime }: DashboardWidgetComponentProps) {
+  const columns: string[] = Array.isArray(runtime?.data?.columns) ? runtime.data.columns : [];
+  const records: Record<string, any>[] = Array.isArray(runtime?.data?.records) ? runtime.data.records : [];
+
+  return (
+    <div style={{ overflow: "auto", maxHeight: "100%" }}>
+      <table style={{ width: "100%", borderCollapse: "collapse" }}>
+        <thead>
+          <tr>
+            {columns.map((column) => (
+              <th
+                key={column}
+                style={{ textAlign: "left", borderBottom: "1px solid #eceff3", padding: "6px 8px", fontSize: "0.84rem" }}
+              >
+                {column}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {records.slice(0, 25).map((record, index) => (
+            <tr key={`record-${index}`}>
+              {columns.map((column) => (
+                <td
+                  key={`${index}-${column}`}
+                  style={{ textAlign: "left", borderBottom: "1px solid #f3f4f6", padding: "6px 8px", fontSize: "0.83rem", whiteSpace: "nowrap" }}
+                >
+                  {`${record?.[column] ?? ""}`}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/dist/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.d.ts

@@ -0,0 +1,3 @@
+import type { DashboardWidgetComponentProps } from "../../../../types/dashboard";
+export declare function DefaultDashboardUnknownWidget({ runtime }: DashboardWidgetComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DefaultDashboardUnknownWidget.d.ts.map

package/dist/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultDashboardUnknownWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAEjF,wBAAgB,6BAA6B,CAAC,EAAE,OAAO,EAAE,EAAE,6BAA6B,2CAMvF"}

package/dist/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DefaultDashboardUnknownWidget(_a) {
+    var _b, _c;
+    var runtime = _a.runtime;
+    return (_jsx("pre", { style: { margin: 0, fontSize: "0.78rem", overflow: "auto", maxHeight: "100%" }, children: JSON.stringify((_c = (_b = runtime === null || runtime === void 0 ? void 0 : runtime.data) !== null && _b !== void 0 ? _b : runtime) !== null && _c !== void 0 ? _c : {}, null, 2) }));
+}
+//# sourceMappingURL=DefaultDashboardUnknownWidget.js.map

package/dist/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultDashboardUnknownWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,6BAA6B,CAAC,EAA0C;;QAAxC,OAAO,aAAA;IACrD,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,YAChF,IAAI,CAAC,SAAS,CAAC,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,mCAAI,OAAO,mCAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,GACpD,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type { DashboardWidgetComponentProps } from \"../../../../types/dashboard\";\n\nexport function DefaultDashboardUnknownWidget({ runtime }: DashboardWidgetComponentProps) {\n  return (\n    <pre style={{ margin: 0, fontSize: \"0.78rem\", overflow: \"auto\", maxHeight: \"100%\" }}>\n      {JSON.stringify(runtime?.data ?? runtime ?? {}, null, 2)}\n    </pre>\n  );\n}\n"]}

package/dist/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.tsx

@@ -0,0 +1,9 @@
+import type { DashboardWidgetComponentProps } from "../../../../types/dashboard";
+
+export function DefaultDashboardUnknownWidget({ runtime }: DashboardWidgetComponentProps) {
+  return (
+    <pre style={{ margin: 0, fontSize: "0.78rem", overflow: "auto", maxHeight: "100%" }}>
+      {JSON.stringify(runtime?.data ?? runtime ?? {}, null, 2)}
+    </pre>
+  );
+}

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.d.ts

@@ -0,0 +1,3 @@
+import type { DashboardWidgetComponentProps } from "../../../../types/dashboard";
+export declare function QueueSlaHeatmapWidget({ runtime }: DashboardWidgetComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QueueSlaHeatmapWidget.d.ts.map

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueueSlaHeatmapWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/QueueSlaHeatmapWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAwCjF,wBAAgB,qBAAqB,CAAC,EAAE,OAAO,EAAE,EAAE,6BAA6B,2CAkK/E"}

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import ReactECharts from "echarts-for-react";
+var formatBucketLabel = function (value) {
+    if (!value)
+        return "";
+    var date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    return new Intl.DateTimeFormat("en-GB", {
+        day: "2-digit",
+        month: "short",
+        hour: "2-digit",
+        minute: "2-digit",
+    }).format(date);
+};
+var formatMetric = function (value, unit) {
+    if (unit === void 0) { unit = "ms"; }
+    if (value === undefined || value === null || Number.isNaN(Number(value))) {
+        return "--";
+    }
+    return "".concat(new Intl.NumberFormat("en-GB", { maximumFractionDigits: 2 }).format(Number(value))).concat(unit);
+};
+export function QueueSlaHeatmapWidget(_a) {
+    var _b, _c;
+    var runtime = _a.runtime;
+    var chartRef = useRef(null);
+    var containerRef = useRef(null);
+    var data = (_c = (_b = runtime === null || runtime === void 0 ? void 0 : runtime.data) !== null && _b !== void 0 ? _b : runtime) !== null && _c !== void 0 ? _c : {};
+    var xCategories = Array.isArray(data === null || data === void 0 ? void 0 : data.xCategories) ? data.xCategories : [];
+    var yCategories = Array.isArray(data === null || data === void 0 ? void 0 : data.yCategories) ? data.yCategories : [];
+    var points = Array.isArray(data === null || data === void 0 ? void 0 : data.points) ? data.points : [];
+    var pointDetails = Array.isArray(data === null || data === void 0 ? void 0 : data.pointDetails) ? data.pointDetails : [];
+    var tooltipFields = Array.isArray(data === null || data === void 0 ? void 0 : data.tooltipFields) ? data.tooltipFields : [];
+    var legendThresholds = Array.isArray(data === null || data === void 0 ? void 0 : data.legendThresholds) ? data.legendThresholds : [];
+    if (xCategories.length === 0 || yCategories.length === 0 || points.length === 0) {
+        return (_jsx("div", { style: { height: "100%", minHeight: 260, display: "flex", alignItems: "center", justifyContent: "center", color: "#64748b", fontSize: "0.92rem" }, children: "No SLA heatmap data available for the current filters." }));
+    }
+    var detailMap = new Map(pointDetails.map(function (detail) { return ["".concat(detail.xIndex, ":").concat(detail.yIndex), detail]; }));
+    var metricValues = points.map(function (entry) { var _a; return Number((_a = entry === null || entry === void 0 ? void 0 : entry[2]) !== null && _a !== void 0 ? _a : 0); }).filter(function (entry) { return Number.isFinite(entry); });
+    var min = metricValues.length ? Math.min.apply(Math, metricValues) : 0;
+    var max = metricValues.length ? Math.max.apply(Math, metricValues) : 0;
+    var visualMap = legendThresholds.length > 0
+        ? {
+            type: "piecewise",
+            orient: "horizontal",
+            left: "center",
+            bottom: 0,
+            pieces: legendThresholds.map(function (threshold) { return ({
+                label: threshold.label,
+                color: threshold.color,
+                lte: threshold.lte,
+                gte: threshold.gte,
+                gt: threshold.gt,
+            }); }),
+        }
+        : {
+            min: min,
+            max: max,
+            calculable: true,
+            orient: "horizontal",
+            left: "center",
+            bottom: 0,
+        };
+    var option = {
+        tooltip: {
+            position: "top",
+            formatter: function (params) {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var point = Array.isArray(params === null || params === void 0 ? void 0 : params.data) ? params.data : [];
+                var xIndex = Number((_a = point === null || point === void 0 ? void 0 : point[0]) !== null && _a !== void 0 ? _a : -1);
+                var yIndex = Number((_b = point === null || point === void 0 ? void 0 : point[1]) !== null && _b !== void 0 ? _b : -1);
+                var metricValue = Number((_c = point === null || point === void 0 ? void 0 : point[2]) !== null && _c !== void 0 ? _c : 0);
+                var detail = detailMap.get("".concat(xIndex, ":").concat(yIndex));
+                var rows = [
+                    "<div style=\"font-weight:600;margin-bottom:4px;\">".concat((_e = (_d = detail === null || detail === void 0 ? void 0 : detail.queueName) !== null && _d !== void 0 ? _d : yCategories[yIndex]) !== null && _e !== void 0 ? _e : "", "</div>"),
+                    "<div>Bucket: ".concat(formatBucketLabel((_g = (_f = detail === null || detail === void 0 ? void 0 : detail.bucket) !== null && _f !== void 0 ? _f : xCategories[xIndex]) !== null && _g !== void 0 ? _g : ""), "</div>"),
+                    "<div>Average Elapsed: ".concat(formatMetric((_h = detail === null || detail === void 0 ? void 0 : detail.avgElapsedMillis) !== null && _h !== void 0 ? _h : metricValue), "</div>"),
+                ];
+                if (tooltipFields.includes("messageCount") && (detail === null || detail === void 0 ? void 0 : detail.messageCount) !== undefined) {
+                    rows.push("<div>Message Count: ".concat(new Intl.NumberFormat("en-GB").format(detail.messageCount), "</div>"));
+                }
+                if (tooltipFields.includes("peakElapsedMillis") && (detail === null || detail === void 0 ? void 0 : detail.peakElapsedMillis) !== undefined) {
+                    rows.push("<div>Peak Elapsed: ".concat(formatMetric(detail.peakElapsedMillis), "</div>"));
+                }
+                return rows.join("");
+            },
+        },
+        grid: {
+            left: 110,
+            right: 20,
+            top: 18,
+            bottom: 70,
+            containLabel: true,
+        },
+        xAxis: {
+            type: "category",
+            data: xCategories,
+            splitArea: { show: true },
+            axisLabel: {
+                formatter: function (value) { return formatBucketLabel(value); },
+                rotate: 30,
+            },
+        },
+        yAxis: {
+            type: "category",
+            data: yCategories,
+            splitArea: { show: true },
+            axisLabel: {
+                interval: 0,
+            },
+        },
+        visualMap: visualMap,
+        series: [
+            {
+                name: "Queue SLA",
+                type: "heatmap",
+                data: points,
+                label: { show: false },
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowColor: "rgba(0,0,0,0.25)",
+                    },
+                },
+            },
+        ],
+    };
+    useEffect(function () {
+        var _a, _b;
+        var resizeChart = function () {
+            var _a, _b, _c, _d;
+            try {
+                (_d = (_c = (_b = (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.resize) === null || _d === void 0 ? void 0 : _d.call(_c, { width: "auto", height: "auto" });
+            }
+            catch (_e) {
+                // no-op: chart may not be ready yet
+            }
+        };
+        var observedElement = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.closest(".grid-stack-item-content")) !== null && _b !== void 0 ? _b : containerRef.current;
+        var observer = typeof ResizeObserver !== "undefined" && observedElement
+            ? new ResizeObserver(function () { return resizeChart(); })
+            : null;
+        if (observer && observedElement) {
+            observer.observe(observedElement);
+        }
+        var rafId = window.requestAnimationFrame(resizeChart);
+        var timeoutId = window.setTimeout(resizeChart, 120);
+        var timeoutIdLong = window.setTimeout(resizeChart, 320);
+        return function () {
+            window.cancelAnimationFrame(rafId);
+            window.clearTimeout(timeoutId);
+            window.clearTimeout(timeoutIdLong);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [option]);
+    return (_jsx("div", { ref: containerRef, style: { width: "100%", height: "100%", minHeight: 280, flex: 1 }, children: _jsx(ReactECharts, { ref: chartRef, option: option, style: { width: "100%", height: "100%", minHeight: 280 }, notMerge: true, lazyUpdate: true, autoResize: true }) }));
+}
+//# sourceMappingURL=QueueSlaHeatmapWidget.js.map

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueueSlaHeatmapWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/QueueSlaHeatmapWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from \"react\";\nimport ReactECharts from \"echarts-for-react\";\nimport type { DashboardWidgetComponentProps } from \"../../../../types/dashboard\";\n\ntype HeatmapPointDetail = {\n  xIndex: number;\n  yIndex: number;\n  bucket?: string;\n  queueName?: string;\n  avgElapsedMillis?: number;\n  messageCount?: number;\n  peakElapsedMillis?: number;\n  [key: string]: any;\n};\n\ntype HeatmapLegendThreshold = {\n  label?: string;\n  color?: string;\n  lte?: number;\n  gte?: number;\n  gt?: number;\n};\n\nconst formatBucketLabel = (value: string): string => {\n  if (!value) return \"\";\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return value;\n  return new Intl.DateTimeFormat(\"en-GB\", {\n    day: \"2-digit\",\n    month: \"short\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  }).format(date);\n};\n\nconst formatMetric = (value: number | undefined, unit = \"ms\"): string => {\n  if (value === undefined || value === null || Number.isNaN(Number(value))) {\n    return \"--\";\n  }\n  return `${new Intl.NumberFormat(\"en-GB\", { maximumFractionDigits: 2 }).format(Number(value))}${unit}`;\n};\n\nexport function QueueSlaHeatmapWidget({ runtime }: DashboardWidgetComponentProps) {\n  const chartRef = useRef<any>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const data = runtime?.data ?? runtime ?? {};\n  const xCategories: string[] = Array.isArray(data?.xCategories) ? data.xCategories : [];\n  const yCategories: string[] = Array.isArray(data?.yCategories) ? data.yCategories : [];\n  const points: [number, number, number][] = Array.isArray(data?.points) ? data.points : [];\n  const pointDetails: HeatmapPointDetail[] = Array.isArray(data?.pointDetails) ? data.pointDetails : [];\n  const tooltipFields: string[] = Array.isArray(data?.tooltipFields) ? data.tooltipFields : [];\n  const legendThresholds: HeatmapLegendThreshold[] = Array.isArray(data?.legendThresholds) ? data.legendThresholds : [];\n\n  if (xCategories.length === 0 || yCategories.length === 0 || points.length === 0) {\n    return (\n      <div style={{ height: \"100%\", minHeight: 260, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", color: \"#64748b\", fontSize: \"0.92rem\" }}>\n        No SLA heatmap data available for the current filters.\n      </div>\n    );\n  }\n\n  const detailMap = new Map(\n    pointDetails.map((detail) => [`${detail.xIndex}:${detail.yIndex}`, detail] satisfies [string, HeatmapPointDetail])\n  );\n\n  const metricValues = points.map((entry) => Number(entry?.[2] ?? 0)).filter((entry) => Number.isFinite(entry));\n  const min = metricValues.length ? Math.min(...metricValues) : 0;\n  const max = metricValues.length ? Math.max(...metricValues) : 0;\n\n  const visualMap = legendThresholds.length > 0\n    ? {\n        type: \"piecewise\",\n        orient: \"horizontal\" as const,\n        left: \"center\" as const,\n        bottom: 0,\n        pieces: legendThresholds.map((threshold) => ({\n          label: threshold.label,\n          color: threshold.color,\n          lte: threshold.lte,\n          gte: threshold.gte,\n          gt: threshold.gt,\n        })),\n      }\n    : {\n        min,\n        max,\n        calculable: true,\n        orient: \"horizontal\" as const,\n        left: \"center\" as const,\n        bottom: 0,\n      };\n\n  const option = {\n    tooltip: {\n      position: \"top\" as const,\n      formatter: (params: any) => {\n        const point = Array.isArray(params?.data) ? params.data : [];\n        const xIndex = Number(point?.[0] ?? -1);\n        const yIndex = Number(point?.[1] ?? -1);\n        const metricValue = Number(point?.[2] ?? 0);\n        const detail = detailMap.get(`${xIndex}:${yIndex}`);\n\n        const rows = [\n          `<div style=\"font-weight:600;margin-bottom:4px;\">${detail?.queueName ?? yCategories[yIndex] ?? \"\"}</div>`,\n          `<div>Bucket: ${formatBucketLabel(detail?.bucket ?? xCategories[xIndex] ?? \"\")}</div>`,\n          `<div>Average Elapsed: ${formatMetric(detail?.avgElapsedMillis ?? metricValue)}</div>`,\n        ];\n\n        if (tooltipFields.includes(\"messageCount\") && detail?.messageCount !== undefined) {\n          rows.push(`<div>Message Count: ${new Intl.NumberFormat(\"en-GB\").format(detail.messageCount)}</div>`);\n        }\n        if (tooltipFields.includes(\"peakElapsedMillis\") && detail?.peakElapsedMillis !== undefined) {\n          rows.push(`<div>Peak Elapsed: ${formatMetric(detail.peakElapsedMillis)}</div>`);\n        }\n\n        return rows.join(\"\");\n      },\n    },\n    grid: {\n      left: 110,\n      right: 20,\n      top: 18,\n      bottom: 70,\n      containLabel: true,\n    },\n    xAxis: {\n      type: \"category\",\n      data: xCategories,\n      splitArea: { show: true },\n      axisLabel: {\n        formatter: (value: string) => formatBucketLabel(value),\n        rotate: 30,\n      },\n    },\n    yAxis: {\n      type: \"category\",\n      data: yCategories,\n      splitArea: { show: true },\n      axisLabel: {\n        interval: 0,\n      },\n    },\n    visualMap,\n    series: [\n      {\n        name: \"Queue SLA\",\n        type: \"heatmap\",\n        data: points,\n        label: { show: false },\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowColor: \"rgba(0,0,0,0.25)\",\n          },\n        },\n      },\n    ],\n  };\n\n  useEffect(() => {\n    const resizeChart = () => {\n      try {\n        chartRef.current?.getEchartsInstance?.()?.resize?.({ width: \"auto\", height: \"auto\" });\n      } catch {\n        // no-op: chart may not be ready yet\n      }\n    };\n\n    const observedElement =\n      containerRef.current?.closest(\".grid-stack-item-content\") as HTMLElement | null ??\n      containerRef.current;\n\n    const observer = typeof ResizeObserver !== \"undefined\" && observedElement\n      ? new ResizeObserver(() => resizeChart())\n      : null;\n\n    if (observer && observedElement) {\n      observer.observe(observedElement);\n    }\n\n    const rafId = window.requestAnimationFrame(resizeChart);\n    const timeoutId = window.setTimeout(resizeChart, 120);\n    const timeoutIdLong = window.setTimeout(resizeChart, 320);\n\n    return () => {\n      window.cancelAnimationFrame(rafId);\n      window.clearTimeout(timeoutId);\n      window.clearTimeout(timeoutIdLong);\n      observer?.disconnect();\n    };\n  }, [option]);\n\n  return (\n    <div ref={containerRef} style={{ width: \"100%\", height: \"100%\", minHeight: 280, flex: 1 }}>\n      <ReactECharts\n        ref={chartRef}\n        option={option}\n        style={{ width: \"100%\", height: \"100%\", minHeight: 280 }}\n        notMerge\n        lazyUpdate\n        autoResize\n      />\n    </div>\n  );\n}\n"]}

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.tsx

@@ -0,0 +1,205 @@
+import { useEffect, useRef } from "react";
+import ReactECharts from "echarts-for-react";
+import type { DashboardWidgetComponentProps } from "../../../../types/dashboard";
+
+type HeatmapPointDetail = {
+  xIndex: number;
+  yIndex: number;
+  bucket?: string;
+  queueName?: string;
+  avgElapsedMillis?: number;
+  messageCount?: number;
+  peakElapsedMillis?: number;
+  [key: string]: any;
+};
+
+type HeatmapLegendThreshold = {
+  label?: string;
+  color?: string;
+  lte?: number;
+  gte?: number;
+  gt?: number;
+};
+
+const formatBucketLabel = (value: string): string => {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat("en-GB", {
+    day: "2-digit",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date);
+};
+
+const formatMetric = (value: number | undefined, unit = "ms"): string => {
+  if (value === undefined || value === null || Number.isNaN(Number(value))) {
+    return "--";
+  }
+  return `${new Intl.NumberFormat("en-GB", { maximumFractionDigits: 2 }).format(Number(value))}${unit}`;
+};
+
+export function QueueSlaHeatmapWidget({ runtime }: DashboardWidgetComponentProps) {
+  const chartRef = useRef<any>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const data = runtime?.data ?? runtime ?? {};
+  const xCategories: string[] = Array.isArray(data?.xCategories) ? data.xCategories : [];
+  const yCategories: string[] = Array.isArray(data?.yCategories) ? data.yCategories : [];
+  const points: [number, number, number][] = Array.isArray(data?.points) ? data.points : [];
+  const pointDetails: HeatmapPointDetail[] = Array.isArray(data?.pointDetails) ? data.pointDetails : [];
+  const tooltipFields: string[] = Array.isArray(data?.tooltipFields) ? data.tooltipFields : [];
+  const legendThresholds: HeatmapLegendThreshold[] = Array.isArray(data?.legendThresholds) ? data.legendThresholds : [];
+
+  if (xCategories.length === 0 || yCategories.length === 0 || points.length === 0) {
+    return (
+      <div style={{ height: "100%", minHeight: 260, display: "flex", alignItems: "center", justifyContent: "center", color: "#64748b", fontSize: "0.92rem" }}>
+        No SLA heatmap data available for the current filters.
+      </div>
+    );
+  }
+
+  const detailMap = new Map(
+    pointDetails.map((detail) => [`${detail.xIndex}:${detail.yIndex}`, detail] satisfies [string, HeatmapPointDetail])
+  );
+
+  const metricValues = points.map((entry) => Number(entry?.[2] ?? 0)).filter((entry) => Number.isFinite(entry));
+  const min = metricValues.length ? Math.min(...metricValues) : 0;
+  const max = metricValues.length ? Math.max(...metricValues) : 0;
+
+  const visualMap = legendThresholds.length > 0
+    ? {
+        type: "piecewise",
+        orient: "horizontal" as const,
+        left: "center" as const,
+        bottom: 0,
+        pieces: legendThresholds.map((threshold) => ({
+          label: threshold.label,
+          color: threshold.color,
+          lte: threshold.lte,
+          gte: threshold.gte,
+          gt: threshold.gt,
+        })),
+      }
+    : {
+        min,
+        max,
+        calculable: true,
+        orient: "horizontal" as const,
+        left: "center" as const,
+        bottom: 0,
+      };
+
+  const option = {
+    tooltip: {
+      position: "top" as const,
+      formatter: (params: any) => {
+        const point = Array.isArray(params?.data) ? params.data : [];
+        const xIndex = Number(point?.[0] ?? -1);
+        const yIndex = Number(point?.[1] ?? -1);
+        const metricValue = Number(point?.[2] ?? 0);
+        const detail = detailMap.get(`${xIndex}:${yIndex}`);
+
+        const rows = [
+          `<div style="font-weight:600;margin-bottom:4px;">${detail?.queueName ?? yCategories[yIndex] ?? ""}</div>`,
+          `<div>Bucket: ${formatBucketLabel(detail?.bucket ?? xCategories[xIndex] ?? "")}</div>`,
+          `<div>Average Elapsed: ${formatMetric(detail?.avgElapsedMillis ?? metricValue)}</div>`,
+        ];
+
+        if (tooltipFields.includes("messageCount") && detail?.messageCount !== undefined) {
+          rows.push(`<div>Message Count: ${new Intl.NumberFormat("en-GB").format(detail.messageCount)}</div>`);
+        }
+        if (tooltipFields.includes("peakElapsedMillis") && detail?.peakElapsedMillis !== undefined) {
+          rows.push(`<div>Peak Elapsed: ${formatMetric(detail.peakElapsedMillis)}</div>`);
+        }
+
+        return rows.join("");
+      },
+    },
+    grid: {
+      left: 110,
+      right: 20,
+      top: 18,
+      bottom: 70,
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      data: xCategories,
+      splitArea: { show: true },
+      axisLabel: {
+        formatter: (value: string) => formatBucketLabel(value),
+        rotate: 30,
+      },
+    },
+    yAxis: {
+      type: "category",
+      data: yCategories,
+      splitArea: { show: true },
+      axisLabel: {
+        interval: 0,
+      },
+    },
+    visualMap,
+    series: [
+      {
+        name: "Queue SLA",
+        type: "heatmap",
+        data: points,
+        label: { show: false },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: "rgba(0,0,0,0.25)",
+          },
+        },
+      },
+    ],
+  };
+
+  useEffect(() => {
+    const resizeChart = () => {
+      try {
+        chartRef.current?.getEchartsInstance?.()?.resize?.({ width: "auto", height: "auto" });
+      } catch {
+        // no-op: chart may not be ready yet
+      }
+    };
+
+    const observedElement =
+      containerRef.current?.closest(".grid-stack-item-content") as HTMLElement | null ??
+      containerRef.current;
+
+    const observer = typeof ResizeObserver !== "undefined" && observedElement
+      ? new ResizeObserver(() => resizeChart())
+      : null;
+
+    if (observer && observedElement) {
+      observer.observe(observedElement);
+    }
+
+    const rafId = window.requestAnimationFrame(resizeChart);
+    const timeoutId = window.setTimeout(resizeChart, 120);
+    const timeoutIdLong = window.setTimeout(resizeChart, 320);
+
+    return () => {
+      window.cancelAnimationFrame(rafId);
+      window.clearTimeout(timeoutId);
+      window.clearTimeout(timeoutIdLong);
+      observer?.disconnect();
+    };
+  }, [option]);
+
+  return (
+    <div ref={containerRef} style={{ width: "100%", height: "100%", minHeight: 280, flex: 1 }}>
+      <ReactECharts
+        ref={chartRef}
+        option={option}
+        style={{ width: "100%", height: "100%", minHeight: 280 }}
+        notMerge
+        lazyUpdate
+        autoResize
+      />
+    </div>
+  );
+}

package/dist/components/core/model/CreateModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateModel.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/CreateModel.tsx"],"names":[],"mappings":"AAmCA,QAAA,MAAM,WAAW,qBAAsB,GAAG,4CA4bzC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CreateModel.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/CreateModel.tsx"],"names":[],"mappings":"AAmCA,QAAA,MAAM,WAAW,qBAAsB,GAAG,4CAgbzC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/core/model/CreateModel.js

@@ -114,9 +114,9 @@ var CreateModel = function (_a) {
     useEffect(function () {
         var _a;
         if (data) {
-            var isLegacyTable = data.isLegacyTableWithId || data.isLegacyTable;
-            var isLegacyTableWithId = data.isLegacyTable;
-            var modelData = __assign(__assign({}, data), { moduleId: (_a = data === null || data === void 0 ? void 0 : data.module) === null || _a === void 0 ? void 0 : _a.id, parentModelId: data === null || data === void 0 ? void 0 : data.parentModel, isLegacyTable: isLegacyTable, isLegacyTableWithId: isLegacyTableWithId });
+            var isLegacyTable = data.legacyTableType !== 'none';
+            var hasExistingId = data.legacyTableType === 'existing_id';
+            var modelData = __assign(__assign({}, data), { moduleId: (_a = data === null || data === void 0 ? void 0 : data.module) === null || _a === void 0 ? void 0 : _a.id, parentModelId: data === null || data === void 0 ? void 0 : data.parentModel, isLegacyTable: isLegacyTable, hasExistingId: hasExistingId });
             setIsLoadingData(false);
             setModelMetaData(modelData);
             var fieldData = data.fields.map(function (f) {
@@ -207,31 +207,18 @@ var CreateModel = function (_a) {
         });
     }); };
     var handleFormSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var legacyTableConfig, hasPrimaryKey, fieldData, module_1, parentModel, createdAt, updatedAt, id, deletedAt, modelData, updateData, fieldData, module_2, parentModel, modelData, data_1;
+        var legacyTableConfig, legacyTableType, hasPrimaryKey, fieldData, module_1, parentModel, createdAt, updatedAt, id, deletedAt, modelData, updateData, fieldData, module_2, parentModel, modelData, data_1;
         return __generator(this, function (_a) {
             legacyTableConfig = {};
-            if ((modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTable) && (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTableWithId)) {
-                // UI: Both checked → Backend: both true
-                legacyTableConfig = {
-                    isLegacyTable: true,
-                    isLegacyTableWithId: false
-                };
+            legacyTableType = 'none';
+            if ((modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTable) && (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.hasExistingId)) {
+                legacyTableType = 'existing_id';
             }
-            else if ((modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTable) && !(modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTableWithId)) {
-                // UI: Only isLegacyTable checked → Backend: only isLegacyTableWithId true
-                legacyTableConfig = {
-                    isLegacyTable: false,
-                    isLegacyTableWithId: true
-                };
+            else if (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTable) {
+                legacyTableType = 'generated_id';
             }
-            else {
-                // UI: Neither checked → Backend: both false
-                legacyTableConfig = {
-                    isLegacyTable: false,
-                    isLegacyTableWithId: false
-                };
-            }
-            if ((modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTable) || (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTableWithId)) {
+            legacyTableConfig = { legacyTableType: legacyTableType };
+            if (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTable) {
                 hasPrimaryKey = fieldMetaData.some(function (field) { return field.isPrimaryKey === true; });
                 if (!hasPrimaryKey) {
                     dispatch(showToast({ severity: "error", summary: "Primary Key Required", detail: "Legacy tables set at least one field marked as Primary Key. Please mark a field as Primary Key before proceeding.", life: 5000 }));