@juicemantics/veloiq-ui 0.8.4 → 0.9.0

package/dist/index.d.mts

@@ -200,6 +200,10 @@ interface ModelDef {
     description?: string;
     pkField?: string;
     listViewType?: "table" | "gallery" | "calendar" | "totals-details";
+    /** Field keys whose values compose this model's record title (space-joined).
+     *  Configured via `veloiq set-title` and stored on the model's
+     *  `__veloiq_ui__["titleFields"]`; mirrors the backend `dc_title()`/`__str__`. */
+    titleFields?: string[];
     /** True when this ModelDef represents a NamedQuery rather than a plain model table. */
     isNamedQuery?: boolean;
     /** Resource name of the primary model (for show/edit navigation and write routing). */
@@ -314,6 +318,7 @@ declare const DynamicShow: React__default.FC<{
     allModels?: ModelDef[];
     idOverride?: string;
     embedded?: boolean;
+    beforeTabs?: React__default.ReactNode;
 }>;
 
 interface JourneyCallbacks$1 {
@@ -489,7 +494,7 @@ declare const LoginPage: React__default.FC<LoginPageProps>;
 
 declare const DashboardPage: React__default.FC;
 
-type CellSourceType = "model" | "named_query" | "field" | "relation" | "custom";
+type CellSourceType = "model" | "named_query" | "field" | "relation" | "custom" | "plotly_chart";
 interface DashboardCell {
     id: string;
     model: string;
@@ -504,6 +509,8 @@ interface DashboardCell {
     max_height: string | null;
     section_name?: string;
     section_id?: string;
+    chart_url?: string;
+    chart_title?: string;
 }
 interface DashboardTab {
     id: string;
@@ -618,6 +625,13 @@ declare function generateResources(models: ModelDef[], moduleName: string, optio
  */
 declare const authenticatedFetch: (url: string, options?: RequestInit) => Promise<Response>;
 
+declare function useAuthenticatedFileUrl(rawUrl: string): string;
+declare const AuthenticatedImage: React__default.FC<{
+    url: string;
+    alt?: string;
+    style?: React__default.CSSProperties;
+}>;
+
 type ModelTone = {
     solid: string;
     soft: string;
@@ -640,4 +654,4 @@ declare const getModelTone: (modelLike?: string | {
 
 declare const authSystemModels: ModelDef[];
 
-export { API_URL, AllModelsProvider, type BulkActionDef, type CellSourceType, ColorModeContext, ColorModeContextProvider, CommandCenterPortal, type CommandCenterPortalProps, CustomSider, type DashboardCell, type DashboardConfig, DashboardPage, type DashboardTab, DynamicCreate, DynamicEdit, DynamicList, DynamicShow, ExecutableHtml, type FieldDef, GlobalSearch, HierarchyView, HorizontalMenu, InlinePlotlyHtml, LayoutWrapper, type LayoutWrapperProps, LoginPage, type LoginPageProps, type MillerLeafConfig, type ModelDef, ModelHeading, type ModelSearchResult, MultiPaneLayout, type NavConfig, NavConfigContext, type NavConfigEntry, PaneNavigationContext, PinnedRecordsPanel, PrimaryShowContext, type PrimaryShowRendererProps, type RecentActivityData, type RecentActivityGroup, RecentActivityPanel, type RecentRecord, type RecordResult, ReferenceField, type RelationDef, ResourceContext, type ResourceDef, SectionsGrid, ShowFooterButtons, StandardList, StandardShow, type UseRecordSearchReturn, type ViewConfigRow, ViewsGrid, accessControlProvider, authProvider, authSystemModels, authenticatedFetch, buildShowTabFormOptions, generateResources, getModelTone, getNavEntry, guessIcon, httpClient, normalizeToneKey, renderRelationBlock, resolveIcon, setColorSchemas, sortItemsByNavConfig, useAllModels, useKeyboardShortcuts, useMetadataModal, useNavConfig, useNavModules, usePaneNavigation, useRecordSearch, useShowActionsPreferences, useShowEditableForm, useStandardShowTabs };
+export { API_URL, AllModelsProvider, AuthenticatedImage, type BulkActionDef, type CellSourceType, ColorModeContext, ColorModeContextProvider, CommandCenterPortal, type CommandCenterPortalProps, CustomSider, type DashboardCell, type DashboardConfig, DashboardPage, type DashboardTab, DynamicCreate, DynamicEdit, DynamicList, DynamicShow, ExecutableHtml, type FieldDef, GlobalSearch, HierarchyView, HorizontalMenu, InlinePlotlyHtml, LayoutWrapper, type LayoutWrapperProps, LoginPage, type LoginPageProps, type MillerLeafConfig, type ModelDef, ModelHeading, type ModelSearchResult, MultiPaneLayout, type NavConfig, NavConfigContext, type NavConfigEntry, PaneNavigationContext, PinnedRecordsPanel, PrimaryShowContext, type PrimaryShowRendererProps, type RecentActivityData, type RecentActivityGroup, RecentActivityPanel, type RecentRecord, type RecordResult, ReferenceField, type RelationDef, ResourceContext, type ResourceDef, SectionsGrid, ShowFooterButtons, StandardList, StandardShow, type UseRecordSearchReturn, type ViewConfigRow, ViewsGrid, accessControlProvider, authProvider, authSystemModels, authenticatedFetch, buildShowTabFormOptions, generateResources, getModelTone, getNavEntry, guessIcon, httpClient, normalizeToneKey, renderRelationBlock, resolveIcon, setColorSchemas, sortItemsByNavConfig, useAllModels, useAuthenticatedFileUrl, useKeyboardShortcuts, useMetadataModal, useNavConfig, useNavModules, usePaneNavigation, useRecordSearch, useShowActionsPreferences, useShowEditableForm, useStandardShowTabs };

package/dist/index.d.ts

@@ -200,6 +200,10 @@ interface ModelDef {
     description?: string;
     pkField?: string;
     listViewType?: "table" | "gallery" | "calendar" | "totals-details";
+    /** Field keys whose values compose this model's record title (space-joined).
+     *  Configured via `veloiq set-title` and stored on the model's
+     *  `__veloiq_ui__["titleFields"]`; mirrors the backend `dc_title()`/`__str__`. */
+    titleFields?: string[];
     /** True when this ModelDef represents a NamedQuery rather than a plain model table. */
     isNamedQuery?: boolean;
     /** Resource name of the primary model (for show/edit navigation and write routing). */
@@ -314,6 +318,7 @@ declare const DynamicShow: React__default.FC<{
     allModels?: ModelDef[];
     idOverride?: string;
     embedded?: boolean;
+    beforeTabs?: React__default.ReactNode;
 }>;
 
 interface JourneyCallbacks$1 {
@@ -489,7 +494,7 @@ declare const LoginPage: React__default.FC<LoginPageProps>;
 
 declare const DashboardPage: React__default.FC;
 
-type CellSourceType = "model" | "named_query" | "field" | "relation" | "custom";
+type CellSourceType = "model" | "named_query" | "field" | "relation" | "custom" | "plotly_chart";
 interface DashboardCell {
     id: string;
     model: string;
@@ -504,6 +509,8 @@ interface DashboardCell {
     max_height: string | null;
     section_name?: string;
     section_id?: string;
+    chart_url?: string;
+    chart_title?: string;
 }
 interface DashboardTab {
     id: string;
@@ -618,6 +625,13 @@ declare function generateResources(models: ModelDef[], moduleName: string, optio
  */
 declare const authenticatedFetch: (url: string, options?: RequestInit) => Promise<Response>;
 
+declare function useAuthenticatedFileUrl(rawUrl: string): string;
+declare const AuthenticatedImage: React__default.FC<{
+    url: string;
+    alt?: string;
+    style?: React__default.CSSProperties;
+}>;
+
 type ModelTone = {
     solid: string;
     soft: string;
@@ -640,4 +654,4 @@ declare const getModelTone: (modelLike?: string | {
 
 declare const authSystemModels: ModelDef[];
 
-export { API_URL, AllModelsProvider, type BulkActionDef, type CellSourceType, ColorModeContext, ColorModeContextProvider, CommandCenterPortal, type CommandCenterPortalProps, CustomSider, type DashboardCell, type DashboardConfig, DashboardPage, type DashboardTab, DynamicCreate, DynamicEdit, DynamicList, DynamicShow, ExecutableHtml, type FieldDef, GlobalSearch, HierarchyView, HorizontalMenu, InlinePlotlyHtml, LayoutWrapper, type LayoutWrapperProps, LoginPage, type LoginPageProps, type MillerLeafConfig, type ModelDef, ModelHeading, type ModelSearchResult, MultiPaneLayout, type NavConfig, NavConfigContext, type NavConfigEntry, PaneNavigationContext, PinnedRecordsPanel, PrimaryShowContext, type PrimaryShowRendererProps, type RecentActivityData, type RecentActivityGroup, RecentActivityPanel, type RecentRecord, type RecordResult, ReferenceField, type RelationDef, ResourceContext, type ResourceDef, SectionsGrid, ShowFooterButtons, StandardList, StandardShow, type UseRecordSearchReturn, type ViewConfigRow, ViewsGrid, accessControlProvider, authProvider, authSystemModels, authenticatedFetch, buildShowTabFormOptions, generateResources, getModelTone, getNavEntry, guessIcon, httpClient, normalizeToneKey, renderRelationBlock, resolveIcon, setColorSchemas, sortItemsByNavConfig, useAllModels, useKeyboardShortcuts, useMetadataModal, useNavConfig, useNavModules, usePaneNavigation, useRecordSearch, useShowActionsPreferences, useShowEditableForm, useStandardShowTabs };
+export { API_URL, AllModelsProvider, AuthenticatedImage, type BulkActionDef, type CellSourceType, ColorModeContext, ColorModeContextProvider, CommandCenterPortal, type CommandCenterPortalProps, CustomSider, type DashboardCell, type DashboardConfig, DashboardPage, type DashboardTab, DynamicCreate, DynamicEdit, DynamicList, DynamicShow, ExecutableHtml, type FieldDef, GlobalSearch, HierarchyView, HorizontalMenu, InlinePlotlyHtml, LayoutWrapper, type LayoutWrapperProps, LoginPage, type LoginPageProps, type MillerLeafConfig, type ModelDef, ModelHeading, type ModelSearchResult, MultiPaneLayout, type NavConfig, NavConfigContext, type NavConfigEntry, PaneNavigationContext, PinnedRecordsPanel, PrimaryShowContext, type PrimaryShowRendererProps, type RecentActivityData, type RecentActivityGroup, RecentActivityPanel, type RecentRecord, type RecordResult, ReferenceField, type RelationDef, ResourceContext, type ResourceDef, SectionsGrid, ShowFooterButtons, StandardList, StandardShow, type UseRecordSearchReturn, type ViewConfigRow, ViewsGrid, accessControlProvider, authProvider, authSystemModels, authenticatedFetch, buildShowTabFormOptions, generateResources, getModelTone, getNavEntry, guessIcon, httpClient, normalizeToneKey, renderRelationBlock, resolveIcon, setColorSchemas, sortItemsByNavConfig, useAllModels, useAuthenticatedFileUrl, useKeyboardShortcuts, useMetadataModal, useNavConfig, useNavModules, usePaneNavigation, useRecordSearch, useShowActionsPreferences, useShowEditableForm, useStandardShowTabs };

package/dist/index.js

@@ -5107,6 +5107,39 @@ var getSortPriority = (columnSort, fieldKey) => {
   const index = columnSort.findIndex((item) => item.fieldKey === fieldKey);
   return index === -1 ? 1 : columnSort.length - index + 1;
 };
+var _TOKEN_KEY = "jm_access_token";
+function useAuthenticatedFileUrl(rawUrl) {
+  const [src, setSrc] = React5.useState("");
+  React5.useEffect(() => {
+    if (!rawUrl) {
+      setSrc("");
+      return;
+    }
+    if (!rawUrl.includes("/api/file/")) {
+      setSrc(rawUrl);
+      return;
+    }
+    const token = localStorage.getItem(_TOKEN_KEY) || "";
+    const controller = new AbortController();
+    let objectUrl = "";
+    fetch(rawUrl, {
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+      signal: controller.signal
+    }).then((r) => r.ok ? r.blob() : Promise.reject()).then((blob) => {
+      objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+    }).catch(() => setSrc(""));
+    return () => {
+      controller.abort();
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [rawUrl]);
+  return src;
+}
+var AuthenticatedImage = ({ url, alt, style }) => {
+  const src = useAuthenticatedFileUrl(url);
+  return src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: alt ?? "", style }) : null;
+};
 var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set(["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg", "tif", "tiff"]);
 var isImageRecord = (record) => {
   if (record?.avatar_url || record?.image_url || record?.photo_url) return true;
@@ -5164,7 +5197,7 @@ var renderSharedGalleryCard = ({
       style: { width: imageWidth, display: "grid", gap: 6, cursor: onClick ? "pointer" : "default" },
       onClick,
       children: [
-        contentUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: contentUrl, alt: label, style: imageStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...imageStyle, display: "flex", alignItems: "center", justifyContent: "center", color: "#8c8c8c" }, children: /* @__PURE__ */ jsxRuntime.jsx(AntDIcons2.FileTextOutlined, { style: { fontSize: 24 } }) }),
+        contentUrl ? /* @__PURE__ */ jsxRuntime.jsx(AuthenticatedImage, { url: contentUrl, alt: label, style: imageStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...imageStyle, display: "flex", alignItems: "center", justifyContent: "center", color: "#8c8c8c" }, children: /* @__PURE__ */ jsxRuntime.jsx(AntDIcons2.FileTextOutlined, { style: { fontSize: 24 } }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: textColor, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: label })
       ]
     },
@@ -6109,6 +6142,8 @@ var AnalysisChart = ({
   };
   const primarySeriesKey = seriesKeys[0] || "__count__";
   const secondarySeriesKey = seriesKeys[1];
+  const resolveNumericField = (fields, n) => fields[Math.min(n, fields.length - 1)] ?? { key: "__count__", label: _10("Count") };
+  const resolveCategoryField = (field1, field2) => field2 ?? field1;
   const getNumericValue = (record, key) => {
     if (key === "__count__") return 1;
     const value = Number(record?.[key]);
@@ -6525,11 +6560,11 @@ var AnalysisChart = ({
     ] });
   };
   const renderScatter = (isBubble) => {
-    if (numericFields.length < 2) {
-      return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, { description: "Scatter needs at least two numeric fields." });
+    if (numericFields.length === 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, { description: "Scatter needs at least one numeric field." });
     }
-    const xField = numericFields[0];
-    const yField = numericFields[1];
+    const xField = resolveNumericField(numericFields, 0);
+    const yField = resolveNumericField(numericFields, 1);
     const points = rawRows.map((row) => {
       const x = getNumericValue(row, xField.key);
       const y = getNumericValue(row, yField.key);
@@ -6807,11 +6842,12 @@ var AnalysisChart = ({
     ] });
   };
   const renderHeatmap = () => {
-    if (!categoryField1 || !categoryField2) {
-      return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, { description: "Heatmap needs two category fields." });
+    if (!categoryField1) {
+      return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, { description: "Heatmap needs a category field." });
     }
+    const effectiveCat2 = resolveCategoryField(categoryField1, categoryField2);
     const cat1Field = modelField(categoryField1);
-    const cat2Field = modelField(categoryField2);
+    const cat2Field = modelField(effectiveCat2);
     const rowLabels = [];
     const colLabels = [];
     const grid = /* @__PURE__ */ new Map();
@@ -6889,43 +6925,45 @@ var AnalysisChart = ({
     ] });
   };
   const renderCrosstab = () => {
-    if (!categoryField1 || !categoryField2) {
-      return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, { description: "Crosstab needs two category fields." });
+    if (!categoryField1) {
+      return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, { description: "Crosstab needs a category field." });
     }
+    const effectiveCat2 = resolveCategoryField(categoryField1, categoryField2);
     const cat1Field = modelField(categoryField1);
-    const cat2Field = modelField(categoryField2);
+    const cat2Field = modelField(effectiveCat2);
     return /* @__PURE__ */ jsxRuntime.jsx(
       CrosstabTable,
       {
         rows: rawRows,
         rowField: categoryField1,
-        colField: categoryField2,
+        colField: effectiveCat2 ?? categoryField1,
         cellFieldKeys: seriesKeys,
         cellFieldLabels: seriesLabels,
         allFields,
         summaryFn,
         formatCategoryValue,
         numericBarColor,
-        caption: `${_10("Crosstab")}: ${cat1Field?.label || categoryField1} \xD7 ${cat2Field?.label || categoryField2} (${summaryFn})`
+        caption: `${_10("Crosstab")}: ${cat1Field?.label || categoryField1} \xD7 ${cat2Field?.label || effectiveCat2} (${summaryFn})`
       }
     );
   };
   const renderRadar = () => {
-    if (seriesKeys.length < 3) {
-      return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, { description: "Radar needs at least three series." });
+    if (seriesKeys.length === 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, { description: "Radar needs at least one series." });
     }
+    const effectiveSeriesKeys = seriesKeys.length >= 3 ? seriesKeys : Array.from({ length: 3 }, (_43, i) => seriesKeys[i % seriesKeys.length]);
     const centerX = paddingLeft + chartWidth / 2;
     const centerY = paddingTop + chartHeight / 2;
     const radius = Math.min(chartWidth, chartHeight) * 0.35;
-    const maxBySeries = seriesKeys.reduce((acc, key) => {
+    const maxBySeries = effectiveSeriesKeys.reduce((acc, key) => {
       acc[key] = Math.max(...data.map((group) => group.values[key] || 0), 1);
       return acc;
     }, {});
-    const angleStep = Math.PI * 2 / seriesKeys.length;
+    const angleStep = Math.PI * 2 / effectiveSeriesKeys.length;
     return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
       renderTitle(),
       renderCaption("Radar chart"),
-      seriesKeys.map((seriesKey, index) => {
+      effectiveSeriesKeys.map((seriesKey, index) => {
         const angle = -Math.PI / 2 + index * angleStep;
         const x = centerX + radius * Math.cos(angle);
         const y = centerY + radius * Math.sin(angle);
@@ -6935,7 +6973,7 @@ var AnalysisChart = ({
         ] }, `radar-axis-${seriesKey}`);
       }),
       data.map((group, groupIndex) => {
-        const points = seriesKeys.map((seriesKey, index) => {
+        const points = effectiveSeriesKeys.map((seriesKey, index) => {
           const value = group.values[seriesKey] || 0;
           const ratio = value / Math.max(1, maxBySeries[seriesKey]);
           const angle = -Math.PI / 2 + index * angleStep;
@@ -6960,13 +6998,74 @@ var AnalysisChart = ({
       })
     ] });
   };
-  const renderCombo = () => {
-    if (!secondarySeriesKey) {
-      return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, { description: "Combo needs at least two series selected." });
+  const render3D = () => {
+    if (numericFields.length === 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, { description: "3D scatter needs at least one numeric field." });
     }
+    const xField = resolveNumericField(numericFields, 0);
+    const yField = resolveNumericField(numericFields, 1);
+    const zField = resolveNumericField(numericFields, 2);
+    const points = rawRows.map((row) => {
+      const x = getNumericValue(row, xField.key);
+      const y = getNumericValue(row, yField.key);
+      const z = getNumericValue(row, zField.key);
+      if (x === null || y === null || z === null) return null;
+      return { x, y, z };
+    }).filter((p) => !!p);
+    if (points.length === 0) return renderNoChartDataMessage();
+    const xs = points.map((p) => p.x);
+    const ys = points.map((p) => p.y);
+    const zs = points.map((p) => p.z);
+    const xMin = Math.min(...xs), xMax = Math.max(...xs);
+    const yMin = Math.min(...ys), yMax = Math.max(...ys);
+    const zMin = Math.min(...zs), zMax = Math.max(...zs);
+    const norm = (v, lo, hi) => hi === lo ? 0.5 : (v - lo) / (hi - lo);
+    const isoScale = Math.min(chartWidth, chartHeight) * 0.38;
+    const cx = paddingLeft + chartWidth * 0.5;
+    const cy = paddingTop + chartHeight * 0.55;
+    const cos30 = Math.cos(Math.PI / 6);
+    const sin30 = Math.sin(Math.PI / 6);
+    const project = (nx, ny, nz) => ({
+      sx: cx + (nx - nz) * cos30 * isoScale,
+      sy: cy - ny * isoScale + (nx + nz) * sin30 * isoScale
+    });
+    const axisEnd = (nx, ny, nz) => project(nx, ny, nz);
+    const origin = project(0, 0, 0);
+    const xTip = axisEnd(1, 0, 0);
+    const yTip = axisEnd(0, 1, 0);
+    const zTip = axisEnd(0, 0, 1);
+    const projected = points.map(
+      (p) => project(norm(p.x, xMin, xMax), norm(p.y, yMin, yMax), norm(p.z, zMin, zMax))
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
+      renderTitle(),
+      renderCaption(`3D: ${xField.label} \xD7 ${yField.label} \xD7 ${zField.label}`),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: origin.sx, y1: origin.sy, x2: xTip.sx, y2: xTip.sy, stroke: colors[0], strokeWidth: 1.5, opacity: 0.6 }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: origin.sx, y1: origin.sy, x2: yTip.sx, y2: yTip.sy, stroke: colors[1], strokeWidth: 1.5, opacity: 0.6 }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: origin.sx, y1: origin.sy, x2: zTip.sx, y2: zTip.sy, stroke: colors[2], strokeWidth: 1.5, opacity: 0.6 }),
+      /* @__PURE__ */ jsxRuntime.jsx("text", { x: xTip.sx + 4, y: xTip.sy + 4, fontSize: "11", fill: colors[0], children: xField.label }),
+      /* @__PURE__ */ jsxRuntime.jsx("text", { x: yTip.sx + 4, y: yTip.sy, fontSize: "11", fill: colors[1], children: yField.label }),
+      /* @__PURE__ */ jsxRuntime.jsx("text", { x: zTip.sx + 4, y: zTip.sy + 4, fontSize: "11", fill: colors[2], children: zField.label }),
+      projected.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          className: "chart-item chart-point",
+          style: { "--delay": `${i * 8}ms` },
+          cx: p.sx,
+          cy: p.sy,
+          r: 4,
+          fill: colors[0],
+          opacity: 0.7
+        },
+        `3d-${i}`
+      ))
+    ] });
+  };
+  const renderCombo = () => {
+    const effectiveSecondaryKey = secondarySeriesKey ?? primarySeriesKey;
     const valuesCombo = data.flatMap((group) => [
       group.values[primarySeriesKey] || 0,
-      group.values[secondarySeriesKey] || 0
+      group.values[effectiveSecondaryKey] || 0
     ]);
     const maxCombo = Math.max(...valuesCombo, 1);
     const minCombo = Math.min(...valuesCombo, 0);
@@ -6975,7 +7074,7 @@ var AnalysisChart = ({
     const barWidth2 = groupWidth2 * 0.6;
     const points = data.map((group, index) => {
       const x = paddingLeft + index * groupWidth2 + groupWidth2 / 2;
-      const y = scaleYCombo(group.values[secondarySeriesKey] || 0);
+      const y = scaleYCombo(group.values[effectiveSecondaryKey] || 0);
       return `${x},${y}`;
     }).join(" ");
     return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
@@ -6983,7 +7082,7 @@ var AnalysisChart = ({
       renderLegendItems(
         [
           { label: seriesLabels[primarySeriesKey] || primarySeriesKey, color: colors[0] },
-          { label: seriesLabels[secondarySeriesKey] || secondarySeriesKey, color: colors[2] }
+          { label: seriesLabels[effectiveSecondaryKey] || effectiveSecondaryKey, color: colors[2] }
         ],
         8
       ),
@@ -7034,13 +7133,14 @@ var AnalysisChart = ({
     chartType === "histogram" && renderHistogram(),
     chartType === "scatter" && renderScatter(false),
     chartType === "bubble" && renderScatter(true),
-    chartType === "box" && renderBoxPlot(),
+    (chartType === "box" || chartType === "boxplot") && renderBoxPlot(),
     chartType === "waterfall" && renderWaterfall(),
     chartType === "heatmap" && renderHeatmap(),
     chartType === "crosstab" && renderCrosstab(),
     chartType === "radar" && renderRadar(),
     chartType === "combo" && renderCombo(),
-    chartType !== "histogram" && chartType !== "scatter" && chartType !== "bubble" && chartType !== "box" && chartType !== "waterfall" && chartType !== "heatmap" && chartType !== "crosstab" && chartType !== "radar" && chartType !== "combo" && /* @__PURE__ */ jsxRuntime.jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
+    chartType === "3d" && render3D(),
+    (chartType === "bar" || chartType === "line" || chartType === "area" || chartType === "stacked" || chartType === "bar-horizontal" || chartType === "stacked-horizontal" || chartType === "area-horizontal") && /* @__PURE__ */ jsxRuntime.jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
       renderTitle(),
       renderLegendItems(
         seriesKeys.map((seriesKey, index) => ({
@@ -7487,6 +7587,13 @@ body, table, th, td, input, button, select, textarea, div, span, p, li, ul, ol {
       if (syncHeightTimerRef.current) clearTimeout(syncHeightTimerRef.current);
     };
   }, []);
+  const inlineHtml = React5.useMemo(
+    () => (html || "").replace(
+      /<script\b[^>]*\bsrc=["']?[^"'>]*cdn\.plot\.ly[^"'>]*["']?[^>]*><\/script>/gi,
+      ""
+    ),
+    [html]
+  );
   if (mode === "iframe") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "iframe",
@@ -7497,7 +7604,7 @@ body, table, th, td, input, button, select, textarea, div, span, p, li, ul, ol {
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: htmlRef, dangerouslySetInnerHTML: { __html: html || "" }, style });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: htmlRef, dangerouslySetInnerHTML: { __html: inlineHtml }, style });
 };
 
 // src/components/DynamicResource/relations/helpers.ts
@@ -8713,7 +8820,7 @@ function useRoleFilteredModel(model) {
   }, [model, userRoles]);
 }
 var _19 = window._ || ((text) => text);
-var DynamicShow = ({ model: modelProp, allModels, idOverride, embedded }) => {
+var DynamicShow = ({ model: modelProp, allModels, idOverride, embedded, beforeTabs }) => {
   const model = useRoleFilteredModel(modelProp);
   applyI18nLabelsToModel(model);
   applyI18nLabelsToModels(allModels);
@@ -8775,6 +8882,7 @@ var DynamicShow = ({ model: modelProp, allModels, idOverride, embedded }) => {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "jm-tone-scope", style: toneScopeStyle(modelTone), children: [
       /* @__PURE__ */ jsxRuntime.jsx(ToneSharedStyles, {}),
       !record ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Spin, {}) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        beforeTabs,
         /* @__PURE__ */ jsxRuntime.jsx(antd.Tabs, { activeKey: activeTabKey, onChange: setActiveTabKey, items: lazyItems, destroyInactiveTabPane: true }),
         /* @__PURE__ */ jsxRuntime.jsx(
           ShowFooterButtons,
@@ -8802,6 +8910,7 @@ var DynamicShow = ({ model: modelProp, allModels, idOverride, embedded }) => {
         })),
         headerButtons,
         children: [
+          beforeTabs,
           /* @__PURE__ */ jsxRuntime.jsx(antd.Tabs, { activeKey: activeTabKey, onChange: setActiveTabKey, items: lazyItems, destroyInactiveTabPane: true }),
           /* @__PURE__ */ jsxRuntime.jsx(
             ShowFooterButtons,
@@ -9779,7 +9888,9 @@ var CellConfigDrawer = ({ open, cell, tabId, config, onClose, onSave }) => {
       min_width: cell.min_width ?? "",
       max_width: cell.max_width ?? "",
       min_height: cell.min_height ?? "",
-      max_height: cell.max_height ?? ""
+      max_height: cell.max_height ?? "",
+      chart_url: cell.chart_url ?? "",
+      chart_title: cell.chart_title ?? ""
     });
   }, [cell, tabId, config, form]);
   const handleSave = () => {
@@ -9795,7 +9906,9 @@ var CellConfigDrawer = ({ open, cell, tabId, config, onClose, onSave }) => {
       min_width: values.min_width || null,
       max_width: values.max_width || null,
       min_height: values.min_height || null,
-      max_height: values.max_height || null
+      max_height: values.max_height || null,
+      chart_url: values.chart_url || void 0,
+      chart_title: values.chart_title || void 0
     };
     const currentTab = config.tabs.find((t) => t.id === tabId);
     const nameUnchanged = currentTab?.name.trim().toLowerCase() === newTabName.toLowerCase();
@@ -9842,7 +9955,7 @@ var CellConfigDrawer = ({ open, cell, tabId, config, onClose, onSave }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     antd.Drawer,
     {
-      title: cell?.source_type !== "model" ? `Configure section: ${cell?.section_name ?? cell?.model ?? ""}` : `Configure cell: ${cell?.model ?? ""}`,
+      title: cell?.source_type === "plotly_chart" ? `Configure chart: ${cell?.chart_title ?? cell?.model ?? ""}` : cell?.source_type !== "model" ? `Configure section: ${cell?.section_name ?? cell?.model ?? ""}` : `Configure cell: ${cell?.model ?? ""}`,
       placement: "right",
       width: 380,
       open,
@@ -9870,6 +9983,11 @@ var CellConfigDrawer = ({ open, cell, tabId, config, onClose, onSave }) => {
           /* @__PURE__ */ jsxRuntime.jsx(antd.Divider, { orientation: "left", children: "View" }),
           /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { name: "view_type", label: "View type", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Select, { options: VIEW_TYPE_OPTIONS }) })
         ] }),
+        cell?.source_type === "plotly_chart" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(antd.Divider, { orientation: "left", children: "Chart" }),
+          /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { name: "chart_title", label: "Chart title", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Input, { placeholder: "e.g. Confidence by Month" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { name: "chart_url", label: "Chart URL", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Input, { placeholder: "/api/nl-answers-confidence-by-month-chart" }) })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(antd.Divider, { orientation: "left", children: "Size" }),
         /* @__PURE__ */ jsxRuntime.jsxs(antd.Space, { wrap: true, children: [
           /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { name: "min_width", label: "Min width", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Input, { placeholder: "e.g. 320px", style: { width: 130 } }) }),
@@ -10074,6 +10192,13 @@ var SectionsGrid = ({ cells, config, tabId, renderContent, onConfigChange, isCon
     if (!cells.length) return 1;
     return Math.max(...cells.map((c) => c.row)) + 1;
   }, [cells]);
+  const soloRows = React5.useMemo(() => {
+    const counts = /* @__PURE__ */ new Map();
+    for (const c of cells) counts.set(c.row, (counts.get(c.row) ?? 0) + 1);
+    const solo = /* @__PURE__ */ new Set();
+    for (const [row, count] of counts) if (count === 1) solo.add(row);
+    return solo;
+  }, [cells]);
   const visibleCells = maximizedCellId ? cells.filter((c) => c.id === maximizedCellId) : cells;
   const gridStyle = {
     display: "grid",
@@ -10092,7 +10217,7 @@ var SectionsGrid = ({ cells, config, tabId, renderContent, onConfigChange, isCon
       "div",
       {
         style: {
-          gridColumn: maximizedCellId ? "1 / -1" : `${cell.col + 1}`,
+          gridColumn: maximizedCellId || soloRows.has(cell.row) ? "1 / -1" : `${cell.col + 1}`,
           gridRow: maximizedCellId ? "1 / -1" : `${cell.row + 1}`
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -15413,7 +15538,8 @@ var RelatedObjectsTable = ({ rel, record, relatedModel, parentModel, showActions
                                           { label: _34("Heatmap"), value: "heatmap" },
                                           { label: _34("Crosstab"), value: "crosstab" },
                                           { label: _34("Radar"), value: "radar" },
-                                          { label: _34("Combo (Bar + Line)"), value: "combo" }
+                                          { label: _34("Combo (Bar + Line)"), value: "combo" },
+                                          { label: _34("3D Scatter"), value: "3d" }
                                         ]
                                       }
                                     )
@@ -16688,7 +16814,7 @@ var DynamicList = ({ model: modelProp, allModels, filter, relationConfig, isEmbe
         if (["true", "1", "t", "yes", "y"].includes(normalized)) value = true;
         if (["false", "0", "f", "no", "n"].includes(normalized)) value = false;
       }
-      return [{ field: searchField.key, operator: "eq", value }];
+      return [{ field: searchField.key, operator: "contains", value }];
     }
   });
   const [allRowsData, setAllRowsData] = React5.useState([]);
@@ -19944,7 +20070,8 @@ var DynamicList = ({ model: modelProp, allModels, filter, relationConfig, isEmbe
                                           { label: _36("Heatmap"), value: "heatmap" },
                                           { label: _36("Crosstab"), value: "crosstab" },
                                           { label: _36("Radar"), value: "radar" },
-                                          { label: _36("Combo (Bar + Line)"), value: "combo" }
+                                          { label: _36("Combo (Bar + Line)"), value: "combo" },
+                                          { label: _36("3D Scatter"), value: "3d" }
                                         ]
                                       }
                                     )
@@ -21104,6 +21231,48 @@ function useDashboardConfig() {
   }, [apiUrl]);
   return { config, enabled, loading, save, reload: load };
 }
+var PlotlyChartContent = ({ chartUrl, refreshNonce }) => {
+  const [chartHtml, setChartHtml] = React5.useState("");
+  const [loading, setLoading] = React5.useState(true);
+  const [error, setError] = React5.useState("");
+  const fetchChart = React5.useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const apiUrl = typeof API_URL3 === "string" ? API_URL3 : "";
+      const fullUrl = chartUrl.startsWith("http") ? chartUrl : `${apiUrl}${chartUrl}`;
+      const sep = fullUrl.includes("?") ? "&" : "?";
+      const lang = (() => {
+        try {
+          return (localStorage.getItem("locale") || navigator.language || "en").split("-")[0].toLowerCase();
+        } catch {
+          return "en";
+        }
+      })();
+      const res = await authenticatedFetch(`${fullUrl}${sep}lang=${encodeURIComponent(lang)}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      setChartHtml(data.chart_html || "");
+    } catch (e) {
+      setError(e?.message ?? String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, [chartUrl]);
+  React5.useEffect(() => {
+    fetchChart();
+  }, [fetchChart, refreshNonce]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Spin, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, { description: `Chart error: ${error}`, style: { padding: 20 }, image: antd.Empty.PRESENTED_IMAGE_SIMPLE });
+  }
+  if (!chartHtml) {
+    return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, { description: "No chart data", style: { padding: 20 }, image: antd.Empty.PRESENTED_IMAGE_SIMPLE });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(InlinePlotlyHtml, { html: chartHtml, style: { padding: 8, height: "100%", overflow: "auto" } });
+};
 var DashboardGridCell = ({ cell, allModels, isMaximized, isMinimized, canConfigureLayout, onConfigure, onMaximize, onMinimize, onResize, onMove }) => {
   const { token } = antd.theme.useToken();
   const model = findModelByName(allModels, cell.model);
@@ -21136,10 +21305,12 @@ var DashboardGridCell = ({ cell, allModels, isMaximized, isMinimized, canConfigu
     minHeight: 32,
     position: "relative"
   };
+  const isPlotlyChart = cell.source_type === "plotly_chart";
   const resource = model?.resource || cell.model;
   const isModelLike = cell.source_type === "model" || cell.source_type === "named_query";
-  const cellTitle = isModelLike ? model?.label || cell.model : cell.section_name || cell.model;
+  const cellTitle = isPlotlyChart ? cell.chart_title || cell.model : isModelLike ? model?.label || cell.model : cell.section_name || cell.model;
   const tone = isModelLike && model ? getModelTone(model) : null;
+  const [chartRefreshNonce, setChartRefreshNonce] = React5.useState(0);
   const startResize = React5.useCallback((e, dir) => {
     e.preventDefault();
     e.stopPropagation();
@@ -21293,7 +21464,7 @@ var DashboardGridCell = ({ cell, allModels, isMaximized, isMinimized, canConfigu
         ) })
       ] })
     ] }),
-    !isMinimized && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflow: "auto", minHeight: 0 }, children: model ? /* @__PURE__ */ jsxRuntime.jsx(
+    !isMinimized && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflow: "auto", minHeight: 0 }, children: isPlotlyChart && cell.chart_url ? /* @__PURE__ */ jsxRuntime.jsx(PlotlyChartContent, { chartUrl: cell.chart_url, refreshNonce: chartRefreshNonce }) : model ? /* @__PURE__ */ jsxRuntime.jsx(
       DynamicList,
       {
         model,
@@ -21971,6 +22142,7 @@ var authSystemModels = [
 
 exports.API_URL = API_URL3;
 exports.AllModelsProvider = AllModelsProvider;
+exports.AuthenticatedImage = AuthenticatedImage;
 exports.ColorModeContext = ColorModeContext;
 exports.ColorModeContextProvider = ColorModeContextProvider;
 exports.CommandCenterPortal = CommandCenterPortal;
@@ -22017,6 +22189,7 @@ exports.resolveIcon = resolveIcon;
 exports.setColorSchemas = setColorSchemas;
 exports.sortItemsByNavConfig = sortItemsByNavConfig;
 exports.useAllModels = useAllModels;
+exports.useAuthenticatedFileUrl = useAuthenticatedFileUrl;
 exports.useKeyboardShortcuts = useKeyboardShortcuts;
 exports.useMetadataModal = useMetadataModal;
 exports.useNavConfig = useNavConfig;