Spaces:

saivivek6
/

AdaptiveUI_UX

Running

App Files Files Community

saivivek6 commited on 3 days ago

Commit

9703678

1 Parent(s): 7788ad7

Deploy: flow/flowchart chart kind (layered, arrowed); richer charts (on-chart value labels, rounded bars, gradient areas, stronger hover) across kinds; baseline iframe auto-resizes to chart's natural height via postMessage + fill normalization; baseline visual sizing prompt

Browse files

Files changed (11) hide show

vivek/backend/combined_prompt.py +1 -1
vivek/backend/server.py +6 -2
vivek/frontend-vue/dist/assets/{ActionRow-C5K-GzW5.js → ActionRow-B1R5m79B.js} +1 -1
vivek/frontend-vue/dist/assets/{ChartBlock-CGlwF_DK.js → ChartBlock-2l17cTFi.js} +0 -0
vivek/frontend-vue/dist/assets/{TextBlock-D7ydM5dr.js → TextBlock-HD2UY_tu.js} +1 -1
vivek/frontend-vue/dist/assets/{index-BZhxAMIz.css → index-CA-wuNor.css} +0 -0
vivek/frontend-vue/dist/assets/{index-oLTRTdCR.js → index-nrc-cgMW.js} +0 -0
vivek/frontend-vue/dist/index.html +2 -2
vivek/frontend-vue/src/lib/echartsOption.ts +168 -13
vivek/frontend-vue/src/pages/Chat.vue +53 -3
vivek/frontend-vue/src/widget-registry.json +3 -0

vivek/backend/combined_prompt.py CHANGED Viewed

@@ -188,7 +188,7 @@ def _chart_has_data(chart: dict[str, Any]) -> bool:
         return _nonempty_list(chart.get("candles"))
     if kind == "boxplot":
         return _nonempty_list(chart.get("boxes"))
-    if kind in {"sankey", "graph"}:
         return _nonempty_list(chart.get("links"))
     if kind in {"tree", "mindmap", "org", "orgchart"}:
         # Accept the same variants the renderer reads: root | tree | data | top-level node | items.

         return _nonempty_list(chart.get("candles"))
     if kind == "boxplot":
         return _nonempty_list(chart.get("boxes"))
+    if kind in {"sankey", "graph", "flow", "flowchart", "process"}:
         return _nonempty_list(chart.get("links"))
     if kind in {"tree", "mindmap", "org", "orgchart"}:
         # Accept the same variants the renderer reads: root | tree | data | top-level node | items.

vivek/backend/server.py CHANGED Viewed

@@ -797,8 +797,12 @@ _BASELINE_SYSTEM = (
     "- It MUST be a complete standalone HTML document (<!doctype html><html>...</html>) that renders on its own.\n"
     "- You MAY load ONE charting library from a CDN via a <script src=\"https://...\"> tag "
     "(e.g. Chart.js, Apache ECharts, or Plotly). Inline all of your OWN CSS and JS.\n"
-    "- Make the chart responsive (width:100%), about 360px tall, on a transparent or white background, "
-    "with a clean modern look and readable labels.\n"
     "- Use real, concrete data from your knowledge or the user's message — never placeholder 0,1,2,3.\n"
     "- The iframe is sandboxed (scripts only, no same-origin): do not use cookies, localStorage, or call "
     "any origin other than the single CDN you reference.\n"

     "- It MUST be a complete standalone HTML document (<!doctype html><html>...</html>) that renders on its own.\n"
     "- You MAY load ONE charting library from a CDN via a <script src=\"https://...\"> tag "
     "(e.g. Chart.js, Apache ECharts, or Plotly). Inline all of your OWN CSS and JS.\n"
+    "- The HTML renders in an <iframe> that AUTO-RESIZES to your content's height — so give the chart a "
+    "CLEAR, defined size. Set html,body{margin:0;padding:0;width:100%;overflow:hidden;background:#fff} and "
+    "give the chart container width:100% and a sensible height of about 400px (a fixed height or an "
+    "aspect-ratio box — not 0). For Chart.js wrap the canvas in a height:400px div with maintainAspectRatio:false; "
+    "for Plotly use {responsive:true} with a 400px tall div; for ECharts give the container an explicit height "
+    "(~400px) and call chart.resize() on window resize. Clean modern look, readable labels, no page scrollbars.\n"
     "- Use real, concrete data from your knowledge or the user's message — never placeholder 0,1,2,3.\n"
     "- The iframe is sandboxed (scripts only, no same-origin): do not use cookies, localStorage, or call "
     "any origin other than the single CDN you reference.\n"

vivek/frontend-vue/dist/assets/{ActionRow-C5K-GzW5.js → ActionRow-B1R5m79B.js} RENAMED Viewed

@@ -1 +1 @@

- import{G as e,M as t,P as n,f as r,h as i,i as a,jt as o,u as s,v as c}from"./runtime-core.esm-bundler-olIhRSij.js";import{nr as l}from"./index-~~oLTRTdCR~~.js";var u={class:`flex flex-wrap gap-2`},d=c({__name:`ActionRow`,props:{block:{}},emits:[`action`],setup(c,{emit:d}){let f=d;function p(e){let t=String(e.label||e.intent||``).trim();t&&f(`action`,t)}return(d,f)=>(t(),r(`div`,u,[(t(!0),r(a,null,n(c.block.buttons||[],(n,r)=>(t(),s(l,{key:r,type:`button`,variant:`outline`,size:`sm`,title:n.intent?`Ask: ${n.label||n.intent}`:void 0,onClick:e=>p(n)},{default:e(()=>[i(o(n.label||`Action`),1)]),_:2},1032,[`title`,`onClick`]))),128))]))}});export{d as default};

+ import{G as e,M as t,P as n,f as r,h as i,i as a,jt as o,u as s,v as c}from"./runtime-core.esm-bundler-olIhRSij.js";import{nr as l}from"./index-nrc-cgMW.js";var u={class:`flex flex-wrap gap-2`},d=c({__name:`ActionRow`,props:{block:{}},emits:[`action`],setup(c,{emit:d}){let f=d;function p(e){let t=String(e.label||e.intent||``).trim();t&&f(`action`,t)}return(d,f)=>(t(),r(`div`,u,[(t(!0),r(a,null,n(c.block.buttons||[],(n,r)=>(t(),s(l,{key:r,type:`button`,variant:`outline`,size:`sm`,title:n.intent?`Ask: ${n.label||n.intent}`:void 0,onClick:e=>p(n)},{default:e(()=>[i(o(n.label||`Action`),1)]),_:2},1032,[`title`,`onClick`]))),128))]))}});export{d as default};

vivek/frontend-vue/dist/assets/{ChartBlock-CGlwF_DK.js → ChartBlock-2l17cTFi.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

vivek/frontend-vue/dist/assets/{TextBlock-D7ydM5dr.js → TextBlock-HD2UY_tu.js} RENAMED Viewed

@@ -1,3 +1,3 @@
-import{M as e,c as t,f as n,v as r}from"./runtime-core.esm-bundler-olIhRSij.js";import{r as i}from"./index-oLTRTdCR.js";var a=[`innerHTML`],o=i(r({__name:`TextBlock`,props:{block:{}},setup(r){let i=r;function o(e){return e.replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`)}function s(e){let t=o(e);return t=t.replace(/\*\*(.+?)\*\*/g,`<strong class="ws-accent">$1</strong>`),t=t.replace(/__(.+?)__/g,`<strong class="ws-accent">$1</strong>`),t=t.replace(/`([^`]+?)`/g,`<code class="ws-code">$1</code>`),t}let c=t(()=>{let e=String(i.block.content||``).replace(/\r\n/g,`
 `).trim();if(!e)return``;let t=e.split(`
 `),n=[],r=null,a=()=>{r&&=(n.push(`</${r}>`),null)};for(let e of t){let t=e.match(/^\s*#{1,3}\s+(.*)$/),i=e.match(/^\s*(\d+)[.)]\s+(.*)$/),o=e.match(/^\s*[-*•]\s+(.*)$/);t?(a(),n.push(`<div class="ws-h">${s(t[1])}</div>`)):i?(r!==`ol`&&(a(),n.push(`<ol class="ws-ol">`),r=`ol`),n.push(`<li>${s(i[2])}</li>`)):o?(r!==`ul`&&(a(),n.push(`<ul class="ws-bullets">`),r=`ul`),n.push(`<li>${s(o[1])}</li>`)):(a(),e.trim()&&n.push(`<p>${s(e)}</p>`))}return a(),n.join(``)});return(t,r)=>(e(),n(`div`,{class:`ws-text leading-relaxed motion-safe:transition-opacity motion-safe:duration-300`,innerHTML:c.value},null,8,a))}}),[[`__scopeId`,`data-v-51d1042a`]]);export{o as default};

+import{M as e,c as t,f as n,v as r}from"./runtime-core.esm-bundler-olIhRSij.js";import{r as i}from"./index-nrc-cgMW.js";var a=[`innerHTML`],o=i(r({__name:`TextBlock`,props:{block:{}},setup(r){let i=r;function o(e){return e.replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`)}function s(e){let t=o(e);return t=t.replace(/\*\*(.+?)\*\*/g,`<strong class="ws-accent">$1</strong>`),t=t.replace(/__(.+?)__/g,`<strong class="ws-accent">$1</strong>`),t=t.replace(/`([^`]+?)`/g,`<code class="ws-code">$1</code>`),t}let c=t(()=>{let e=String(i.block.content||``).replace(/\r\n/g,`
 `).trim();if(!e)return``;let t=e.split(`
 `),n=[],r=null,a=()=>{r&&=(n.push(`</${r}>`),null)};for(let e of t){let t=e.match(/^\s*#{1,3}\s+(.*)$/),i=e.match(/^\s*(\d+)[.)]\s+(.*)$/),o=e.match(/^\s*[-*•]\s+(.*)$/);t?(a(),n.push(`<div class="ws-h">${s(t[1])}</div>`)):i?(r!==`ol`&&(a(),n.push(`<ol class="ws-ol">`),r=`ol`),n.push(`<li>${s(i[2])}</li>`)):o?(r!==`ul`&&(a(),n.push(`<ul class="ws-bullets">`),r=`ul`),n.push(`<li>${s(o[1])}</li>`)):(a(),e.trim()&&n.push(`<p>${s(e)}</p>`))}return a(),n.join(``)});return(t,r)=>(e(),n(`div`,{class:`ws-text leading-relaxed motion-safe:transition-opacity motion-safe:duration-300`,innerHTML:c.value},null,8,a))}}),[[`__scopeId`,`data-v-51d1042a`]]);export{o as default};

vivek/frontend-vue/dist/assets/{index-BZhxAMIz.css → index-CA-wuNor.css} RENAMED Viewed

The diff for this file is too large to render. See raw diff

vivek/frontend-vue/dist/assets/{index-oLTRTdCR.js → index-nrc-cgMW.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

vivek/frontend-vue/dist/index.html CHANGED Viewed

@@ -5,9 +5,9 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>frontend-vue</title>
-    <script type="module" crossorigin src="/assets/index-oLTRTdCR.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-olIhRSij.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-BZhxAMIz.css">
   </head>
   <body>
     <div id="app"></div>

     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>frontend-vue</title>
+    <script type="module" crossorigin src="/assets/index-nrc-cgMW.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-olIhRSij.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-CA-wuNor.css">
   </head>
   <body>
     <div id="app"></div>

vivek/frontend-vue/src/lib/echartsOption.ts CHANGED Viewed

@@ -32,8 +32,8 @@ export type ChartSpec = {
   root?: TreeNodeSpec
   candles?: (number | string)[][]
   boxes?: (number | string)[][]
-  nodes?: ({ name?: string } | string)[]
-  links?: { source?: string | number; target?: string | number; value?: number }[]
 }
 // Fixed enterprise palette — the SINGLE source of chart colors. The LLM never
@@ -86,6 +86,45 @@ function colorAt(i: number, total = 0): string {
 // in the widget JSON is ignored — colorAt() assigns deterministically by index,
 // so the look is identical on every render and in the HTML export.
 function toNum(v: unknown): number | null {
   if (typeof v === 'number') return Number.isFinite(v) ? v : null
   if (typeof v === 'string') {
@@ -250,6 +289,7 @@ export function chartHasRenderableData(chart: ChartSpec): boolean {
   if (k === 'candlestick') return Array.isArray(c.candles) && c.candles.length > 0
   if (k === 'boxplot') return Array.isArray(c.boxes) && c.boxes.length > 0
   if (k === 'sankey' || k === 'graph') return Array.isArray(c.links) && c.links.length > 0
   if (k === 'treemap' || k === 'sunburst') return (c.items?.length || 0) > 0 || pieData(chart).length > 0
   if (k === 'pie' || k === 'donut' || k === 'funnel' || k === 'waterfall' || k === 'rose') return pieData(chart).length > 0
   if (k === 'tree' || k === 'mindmap' || k === 'org' || k === 'orgchart') return treeRoot(chart) != null
@@ -324,7 +364,7 @@ function buildEChartsOptionRaw(chart: ChartSpec, title = '', opts: { dark?: bool
           radius: k === 'donut' ? ['42%', '70%'] : '65%',
           center: ['50%', '46%'],
           data: d.map((x, i) => ({ ...x, itemStyle: { color: colorAt(i, d.length) } })),
-          label: { fontSize: 10, color: tc },
         },
       ],
     }
@@ -347,7 +387,7 @@ function buildEChartsOptionRaw(chart: ChartSpec, title = '', opts: { dark?: bool
           bottom: 40,
           sort: 'descending',
           gap: 2,
-          label: { show: true, position: 'inside', fontSize: 10 },
           data: d.map((x, i) => ({ ...x, itemStyle: { color: colorAt(i, d.length) } })),
         },
       ],
@@ -445,7 +485,7 @@ function buildEChartsOptionRaw(chart: ChartSpec, title = '', opts: { dark?: bool
       series: [
         k === 'sunburst'
           ? { type: 'sunburst', data: d, radius: [0, '92%'], label: { fontSize: 10 } }
-          : { type: 'treemap', data: d, breadcrumb: { show: false }, roam: false, label: { fontSize: 11 } },
       ],
     }
   }
@@ -478,6 +518,99 @@ function buildEChartsOptionRaw(chart: ChartSpec, title = '', opts: { dark?: bool
     }
   }
   if (k === 'waterfall') {
     const pts = pieData(chart)
     const cats = pts.map((p) => p.name)
@@ -565,7 +698,7 @@ function buildEChartsOptionRaw(chart: ChartSpec, title = '', opts: { dark?: bool
           roseType: 'area',
           itemStyle: { borderRadius: 4 },
           data: d.map((x, i) => ({ ...x, itemStyle: { color: colorAt(i, d.length) } })),
-          label: { fontSize: 10, color: tc },
         },
       ],
     }
@@ -712,6 +845,11 @@ function buildEChartsOptionRaw(chart: ChartSpec, title = '', opts: { dark?: bool
   const cats = cartesianCategories(chart)
   const useCat = Array.isArray(cats) && cats.length > 0
   const eSeries = series.map((s, i) => {
     const seriesType = (
       isCombo ? (s.kind === 'line' ? 'line' : s.kind === 'bar' ? 'bar' : i === 0 ? 'bar' : 'line')
@@ -720,18 +858,35 @@ function buildEChartsOptionRaw(chart: ChartSpec, title = '', opts: { dark?: bool
       : 'line'
     ) as 'bar' | 'scatter' | 'line'
     const asLine = seriesType === 'line'
     return {
       name: s.name,
       type: seriesType,
       data: useCat ? s.points.map((p) => p[1]) : s.points,
       stack: isStacked ? 'total' : undefined,
-      smooth: asLine,
-      showSymbol: seriesType === 'scatter' || asLine,
-      symbolSize: seriesType === 'scatter' ? 10 : 6,
-      itemStyle: { color: s.color },
-      areaStyle: isArea && asLine ? { opacity: 0.18, color: s.color } : undefined,
-      lineStyle: asLine ? { width: 2 } : undefined,
-      emphasis: { focus: 'series' as const },
       animationDuration: 900,
       animationEasing: 'cubicOut' as const,
     }

   root?: TreeNodeSpec
   candles?: (number | string)[][]
   boxes?: (number | string)[][]
+  nodes?: ({ name?: string; level?: number } | string)[]
+  links?: { source?: string | number; target?: string | number; value?: number; label?: string }[]
 }
 // Fixed enterprise palette — the SINGLE source of chart colors. The LLM never
 // in the widget JSON is ignored — colorAt() assigns deterministically by index,
 // so the look is identical on every render and in the HTML export.
+/** Compact human number for on-chart value labels: 47.5, 1.2k, 3.4M, 2.1B. */
+function fmtCompact(v: unknown): string {
+  const n = Number(v)
+  if (!Number.isFinite(n)) return ''
+  const a = Math.abs(n)
+  if (a >= 1e9) return (n / 1e9).toFixed(a >= 1e10 ? 0 : 1).replace(/\.0$/, '') + 'B'
+  if (a >= 1e6) return (n / 1e6).toFixed(a >= 1e7 ? 0 : 1).replace(/\.0$/, '') + 'M'
+  if (a >= 1e3) return (n / 1e3).toFixed(a >= 1e4 ? 0 : 1).replace(/\.0$/, '') + 'k'
+  return String(Math.round(n * 100) / 100)
+}
+/** Add alpha to a hex or hsl() color (used for gradient area fills). */
+function withAlpha(color: string, a: number): string {
+  if (!color) return color
+  if (color.startsWith('#')) {
+    let h = color.slice(1)
+    if (h.length === 3) h = h.split('').map((c) => c + c).join('')
+    const n = parseInt(h, 16)
+    return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`
+  }
+  if (color.startsWith('hsl(')) return color.replace('hsl(', 'hsla(').replace(')', `, ${a})`)
+  return color
+}
+/** Vertical (or horizontal) gradient object ECharts accepts directly in options. */
+function areaGradient(color: string, horizontal = false): Record<string, unknown> {
+  return {
+    type: 'linear',
+    x: 0,
+    y: 0,
+    x2: horizontal ? 1 : 0,
+    y2: horizontal ? 0 : 1,
+    colorStops: [
+      { offset: 0, color: withAlpha(color, 0.38) },
+      { offset: 1, color: withAlpha(color, 0.03) },
+    ],
+  }
+}
 function toNum(v: unknown): number | null {
   if (typeof v === 'number') return Number.isFinite(v) ? v : null
   if (typeof v === 'string') {
   if (k === 'candlestick') return Array.isArray(c.candles) && c.candles.length > 0
   if (k === 'boxplot') return Array.isArray(c.boxes) && c.boxes.length > 0
   if (k === 'sankey' || k === 'graph') return Array.isArray(c.links) && c.links.length > 0
+  if (k === 'flow' || k === 'flowchart' || k === 'process') return Array.isArray(c.links) && c.links.length > 0
   if (k === 'treemap' || k === 'sunburst') return (c.items?.length || 0) > 0 || pieData(chart).length > 0
   if (k === 'pie' || k === 'donut' || k === 'funnel' || k === 'waterfall' || k === 'rose') return pieData(chart).length > 0
   if (k === 'tree' || k === 'mindmap' || k === 'org' || k === 'orgchart') return treeRoot(chart) != null
           radius: k === 'donut' ? ['42%', '70%'] : '65%',
           center: ['50%', '46%'],
           data: d.map((x, i) => ({ ...x, itemStyle: { color: colorAt(i, d.length) } })),
+          label: { fontSize: 10, color: tc, formatter: '{b}: {d}%' },
         },
       ],
     }
           bottom: 40,
           sort: 'descending',
           gap: 2,
+          label: { show: true, position: 'inside', fontSize: 10, color: '#fff', formatter: '{b}: {c}' },
           data: d.map((x, i) => ({ ...x, itemStyle: { color: colorAt(i, d.length) } })),
         },
       ],
       series: [
         k === 'sunburst'
           ? { type: 'sunburst', data: d, radius: [0, '92%'], label: { fontSize: 10 } }
+          : { type: 'treemap', data: d, breadcrumb: { show: false }, roam: false, label: { fontSize: 11, formatter: '{b}\n{c}' } },
       ],
     }
   }
     }
   }
+  if (k === 'flow' || k === 'flowchart' || k === 'process') {
+    // Flowchart: directed graph laid out in LEFT→RIGHT layers (process steps),
+    // with arrowed edges. Nodes are boxes; the model supplies nodes + links
+    // (optionally a per-node `level` and per-link `label`).
+    type FlowNode = { name: string; level?: number }
+    const nodes: FlowNode[] = (chart?.nodes || []).map((n) =>
+      typeof n === 'string' ? { name: n } : { name: n.name || '', level: n.level },
+    )
+    const links = (chart?.links || []).map((l) => ({
+      source: String(l.source ?? ''),
+      target: String(l.target ?? ''),
+      label: l.label,
+    }))
+    const byName = new Map(nodes.map((n) => [n.name, n]))
+    for (const l of links) {
+      for (const e of [l.source, l.target]) {
+        if (e && !byName.has(e)) {
+          const nn = { name: e }
+          nodes.push(nn)
+          byName.set(e, nn)
+        }
+      }
+    }
+    // Depth per node: explicit `level`, else longest path from a source (relaxation).
+    const depth = new Map<string, number>()
+    const incoming = new Map<string, number>()
+    nodes.forEach((n) => incoming.set(n.name, 0))
+    links.forEach((l) => incoming.set(l.target, (incoming.get(l.target) || 0) + 1))
+    nodes.forEach((n) => depth.set(n.name, typeof n.level === 'number' ? n.level : incoming.get(n.name) === 0 ? 0 : 0))
+    for (let pass = 0; pass < nodes.length; pass++) {
+      let changed = false
+      for (const l of links) {
+        const d = Math.max(depth.get(l.target) || 0, (depth.get(l.source) || 0) + 1)
+        if (d !== depth.get(l.target)) {
+          depth.set(l.target, d)
+          changed = true
+        }
+      }
+      if (!changed) break
+    }
+    // Lay out: x by depth (column), y spread evenly within each column.
+    const cols = new Map<number, string[]>()
+    nodes.forEach((n) => {
+      const d = depth.get(n.name) || 0
+      if (!cols.has(d)) cols.set(d, [])
+      cols.get(d)!.push(n.name)
+    })
+    const maxDepth = Math.max(0, ...Array.from(cols.keys()))
+    const placed = nodes.map((n, i) => {
+      const d = depth.get(n.name) || 0
+      const col = cols.get(d)!
+      const row = col.indexOf(n.name)
+      const x = maxDepth > 0 ? (d / maxDepth) * 100 : 50
+      const y = col.length > 1 ? (row / (col.length - 1)) * 100 : 50
+      return {
+        name: n.name,
+        x,
+        y,
+        value: 1,
+        symbol: 'roundRect',
+        symbolSize: [Math.min(120, Math.max(54, n.name.length * 7)), 34] as [number, number],
+        itemStyle: { color: colorAt(i, nodes.length), borderColor: 'rgba(255,255,255,0.65)', borderWidth: 1 },
+        label: { show: true, color: '#fff', fontSize: 11, fontWeight: 600 as const, overflow: 'truncate' as const, width: 110 },
+      }
+    })
+    return {
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'item' },
+      series: [
+        {
+          type: 'graph',
+          layout: 'none',
+          roam: true,
+          data: placed,
+          links: links.map((l) => ({
+            source: l.source,
+            target: l.target,
+            label: l.label ? { show: true, formatter: l.label, fontSize: 9, color: tc } : undefined,
+            lineStyle: { color: dark ? 'rgba(255,255,255,0.45)' : 'rgba(71,85,105,0.6)', width: 1.5, curveness: 0.05 },
+          })),
+          edgeSymbol: ['none', 'arrow'],
+          edgeSymbolSize: [0, 9],
+          emphasis: { focus: 'adjacency' },
+          label: { position: 'inside' },
+        },
+      ],
+    } as EChartsOption
+  }
   if (k === 'waterfall') {
     const pts = pieData(chart)
     const cats = pts.map((p) => p.name)
           roseType: 'area',
           itemStyle: { borderRadius: 4 },
           data: d.map((x, i) => ({ ...x, itemStyle: { color: colorAt(i, d.length) } })),
+          label: { fontSize: 10, color: tc, formatter: '{b}: {d}%' },
         },
       ],
     }
   const cats = cartesianCategories(chart)
   const useCat = Array.isArray(cats) && cats.length > 0
+  // Show value labels on the chart when it won't get cluttered.
+  const catCount = cats?.length ?? series[0]?.points.length ?? 0
+  const fewBars = catCount > 0 && catCount <= 12 && series.length <= 4
+  const fewPts = catCount > 0 && catCount <= 8 && series.length <= 2
   const eSeries = series.map((s, i) => {
     const seriesType = (
       isCombo ? (s.kind === 'line' ? 'line' : s.kind === 'bar' ? 'bar' : i === 0 ? 'bar' : 'line')
       : 'line'
     ) as 'bar' | 'scatter' | 'line'
     const asLine = seriesType === 'line'
+    const isBarSeries = seriesType === 'bar'
     return {
       name: s.name,
       type: seriesType,
       data: useCat ? s.points.map((p) => p[1]) : s.points,
       stack: isStacked ? 'total' : undefined,
+      smooth: asLine ? 0.35 : undefined,
+      showSymbol: seriesType === 'scatter' || (asLine && fewPts),
+      symbolSize: seriesType === 'scatter' ? 10 : 7,
+      // Numbers ON the chart so values are always visible (not only on hover).
+      label: isBarSeries
+        ? {
+            show: isStacked ? catCount <= 8 : fewBars,
+            position: (isStacked ? 'inside' : isHBar ? 'right' : 'top') as 'inside' | 'right' | 'top',
+            fontSize: 10,
+            fontWeight: 600 as const,
+            color: isStacked ? '#fff' : tc,
+            formatter: (p: any) => fmtCompact(p.value),
+          }
+        : asLine
+          ? { show: fewPts, position: 'top' as const, fontSize: 10, color: tc, formatter: (p: any) => fmtCompact(p.value) }
+          : undefined,
+      itemStyle: {
+        color: s.color,
+        borderRadius: isBarSeries ? (isHBar ? [0, 4, 4, 0] : [4, 4, 0, 0]) : undefined,
+      },
+      areaStyle: isArea && asLine ? { color: areaGradient(s.color) } : undefined,
+      lineStyle: asLine ? { width: 2.5 } : undefined,
+      emphasis: { focus: 'series' as const, scale: seriesType === 'scatter', itemStyle: { shadowBlur: 10, shadowColor: withAlpha(s.color, 0.5) } },
       animationDuration: 900,
       animationEasing: 'cubicOut' as const,
     }

vivek/frontend-vue/src/pages/Chat.vue CHANGED Viewed

@@ -102,6 +102,7 @@ type PlainMsg = {
   visualHtml?: string
   streaming?: boolean
   codeStream?: string
 }
 type ChatMessage = {
@@ -153,6 +154,17 @@ function closeTechPanels() {
 const baselineScrollEl = ref<HTMLDivElement | null>(null)
 const adaptiveScrollEl = ref<HTMLDivElement | null>(null)
 const baselineStickToBottom = ref(true)
 const adaptiveStickToBottom = ref(true)
 const streamPulseEl = ref<HTMLDivElement | null>(null)
@@ -377,6 +389,40 @@ async function submitReward(m: ChatMessage, reward: 0 | 1) {
   }
 }
 /** Split the raw baseline stream into the answer text and the (possibly partial) HTML being typed. */
 function splitBaselineRaw(raw: string): { text: string; code: string } {
   const open = raw.indexOf('<VISUAL>')
@@ -445,7 +491,9 @@ async function runChatPlain(text: string): Promise<void> {
         msg().error = e.error || 'Baseline error'
       } else if (e.type === 'done') {
         msg().content = typeof e.response === 'string' ? e.response : msg().content
-        msg().visualHtml = typeof e.visual_html === 'string' && e.visual_html ? e.visual_html : undefined
         msg().elapsed = typeof e.elapsed === 'number' ? e.elapsed : undefined
         msg().codeStream = ''
         msg().streaming = false
@@ -888,6 +936,7 @@ onMounted(async () => {
   window.addEventListener('keydown', onGlobalKeydown)
   window.addEventListener('chat:control', onShellControl as EventListener)
 })
 onUnmounted(() => {
@@ -895,6 +944,7 @@ onUnmounted(() => {
   killAnimationsOf(streamPulseEl.value)
   window.removeEventListener('keydown', onGlobalKeydown)
   window.removeEventListener('chat:control', onShellControl as EventListener)
 })
 function onShellControl(e: Event) {
@@ -1175,13 +1225,13 @@ function downloadLiveWidgetDraft(m: ChatMessage, idx: number) {
                   </div>
                   <iframe
                     v-if="!m.streaming && m.visualHtml"
-                    :srcdoc="m.visualHtml"
                     sandbox="allow-scripts"
                     referrerpolicy="no-referrer"
                     loading="lazy"
                     title="Baseline visualization"
                     class="w-full mt-2 rounded-xl border bg-white"
-                    style="height: clamp(340px, 52vh, 560px)"
                   />
                   <div v-if="m.elapsed != null" class="text-[10px] text-muted-foreground mt-1">{{ m.elapsed }}s</div>
                 </div>

   visualHtml?: string
   streaming?: boolean
   codeStream?: string
+  vizId?: string
 }
 type ChatMessage = {
 const baselineScrollEl = ref<HTMLDivElement | null>(null)
 const adaptiveScrollEl = ref<HTMLDivElement | null>(null)
+// Baseline iframe auto-resize: each visual posts its content height (by id) and
+// we grow/shrink that iframe to match.
+const vizHeights = ref<Record<string, number>>({})
+let vizCounter = 0
+function onVizMessage(e: MessageEvent) {
+  const d = e.data
+  if (d && typeof d === 'object' && typeof d.__vizId === 'string' && typeof d.__vizHeight === 'number') {
+    vizHeights.value[d.__vizId] = Math.max(160, Math.min(1600, Math.round(d.__vizHeight)))
+  }
+}
 const baselineStickToBottom = ref(true)
 const adaptiveStickToBottom = ref(true)
 const streamPulseEl = ref<HTMLDivElement | null>(null)
   }
 }
+/**
+ * Prepare the LLM's HTML for a self-sizing iframe: normalize margins/scrollbars,
+ * and inject a small reporter that postMessages the content height (tagged with
+ * `id`) so the parent can grow/shrink the iframe to the chart's natural height.
+ */
+function normalizeBaselineHtml(html?: string, id?: string): string {
+  if (!html) return ''
+  const css =
+    '<style id="__fit">' +
+    'html,body{margin:0!important;padding:0!important;width:100%!important;background:#fff!important;overflow:hidden!important}' +
+    '*{box-sizing:border-box}body>*{max-width:100%}canvas{max-width:100%!important}' +
+    '.js-plotly-plot,.plot-container{width:100%!important}' +
+    '</style>'
+  const vid = (id || '').replace(/[^a-zA-Z0-9_-]/g, '')
+  const reporter =
+    '<script>(function(){var ID=' +
+    JSON.stringify(vid) +
+    ';function post(){try{var h=Math.max(document.documentElement.scrollHeight,(document.body?document.body.scrollHeight:0));' +
+    'parent.postMessage({__vizId:ID,__vizHeight:h},"*");}catch(e){}}' +
+    'window.addEventListener("load",function(){post();setTimeout(post,150);setTimeout(post,600);setTimeout(post,1500);});' +
+    'window.addEventListener("resize",post);' +
+    'if(window.ResizeObserver){try{new ResizeObserver(post).observe(document.documentElement);}catch(e){}}' +
+    'setTimeout(post,300);})();<\/script>'
+  let out = html
+  if (/<\/head>/i.test(out)) out = out.replace(/<\/head>/i, css + '</head>')
+  else if (/<head[^>]*>/i.test(out)) out = out.replace(/<head[^>]*>/i, (m) => m + css)
+  else if (/<html[^>]*>/i.test(out)) out = out.replace(/<html[^>]*>/i, (m) => m + '<head>' + css + '</head>')
+  else if (/<body[^>]*>/i.test(out)) out = out.replace(/<body[^>]*>/i, (m) => m + css)
+  else out = css + out
+  if (/<\/body>/i.test(out)) out = out.replace(/<\/body>/i, reporter + '</body>')
+  else out = out + reporter
+  return out
+}
 /** Split the raw baseline stream into the answer text and the (possibly partial) HTML being typed. */
 function splitBaselineRaw(raw: string): { text: string; code: string } {
   const open = raw.indexOf('<VISUAL>')
         msg().error = e.error || 'Baseline error'
       } else if (e.type === 'done') {
         msg().content = typeof e.response === 'string' ? e.response : msg().content
+        const html = typeof e.visual_html === 'string' && e.visual_html ? e.visual_html : undefined
+        msg().visualHtml = html
+        if (html) msg().vizId = 'viz' + ++vizCounter
         msg().elapsed = typeof e.elapsed === 'number' ? e.elapsed : undefined
         msg().codeStream = ''
         msg().streaming = false
   window.addEventListener('keydown', onGlobalKeydown)
   window.addEventListener('chat:control', onShellControl as EventListener)
+  window.addEventListener('message', onVizMessage)
 })
 onUnmounted(() => {
   killAnimationsOf(streamPulseEl.value)
   window.removeEventListener('keydown', onGlobalKeydown)
   window.removeEventListener('chat:control', onShellControl as EventListener)
+  window.removeEventListener('message', onVizMessage)
 })
 function onShellControl(e: Event) {
                   </div>
                   <iframe
                     v-if="!m.streaming && m.visualHtml"
+                    :srcdoc="normalizeBaselineHtml(m.visualHtml, m.vizId)"
                     sandbox="allow-scripts"
                     referrerpolicy="no-referrer"
                     loading="lazy"
                     title="Baseline visualization"
                     class="w-full mt-2 rounded-xl border bg-white"
+                    :style="{ height: (vizHeights[m.vizId || ''] || 420) + 'px', transition: 'height 0.2s ease' }"
                   />
                   <div v-if="m.elapsed != null" class="text-[10px] text-muted-foreground mt-1">{{ m.elapsed }}s</div>
                 </div>

vivek/frontend-vue/src/widget-registry.json CHANGED Viewed

@@ -52,6 +52,7 @@
         "sunburst",
         "sankey",
         "graph",
         "boxplot",
         "bubble",
         "histogram",
@@ -89,6 +90,8 @@
         "  { \"type\": \"chart\", \"chart\": { \"kind\": \"bubble\", \"x_label\": \"Risk\", \"y_label\": \"Return\", \"series\": [ { \"name\": \"Funds\", \"values\": [ [8,12,500], [14,18,1200] ] } ] } }",
         "- sankey | graph (flows / network) -> \"nodes\" + \"links\":",
         "  { \"type\": \"chart\", \"chart\": { \"kind\": \"sankey\", \"nodes\": [ {\"name\":\"Revenue\"}, {\"name\":\"COGS\"}, {\"name\":\"Gross Profit\"} ], \"links\": [ {\"source\":\"Revenue\",\"target\":\"COGS\",\"value\":40}, {\"source\":\"Revenue\",\"target\":\"Gross Profit\",\"value\":60} ] } }",
         "- histogram (frequency) -> like bar: \"x_categories\" (bins) + one series of counts.",
         "- timeseries (interactive time trend with zoom/pan) -> like line: \"x_categories\" (dates) + series of numbers. Best for many points over time.",
         "- rose (nightingale / 'pizza' chart — share with variable-radius slices) -> use \"items\": [ { \"label\", \"value\" } ].",

         "sunburst",
         "sankey",
         "graph",
+        "flow",
         "boxplot",
         "bubble",
         "histogram",
         "  { \"type\": \"chart\", \"chart\": { \"kind\": \"bubble\", \"x_label\": \"Risk\", \"y_label\": \"Return\", \"series\": [ { \"name\": \"Funds\", \"values\": [ [8,12,500], [14,18,1200] ] } ] } }",
         "- sankey | graph (flows / network) -> \"nodes\" + \"links\":",
         "  { \"type\": \"chart\", \"chart\": { \"kind\": \"sankey\", \"nodes\": [ {\"name\":\"Revenue\"}, {\"name\":\"COGS\"}, {\"name\":\"Gross Profit\"} ], \"links\": [ {\"source\":\"Revenue\",\"target\":\"COGS\",\"value\":40}, {\"source\":\"Revenue\",\"target\":\"Gross Profit\",\"value\":60} ] } }",
+        "- flow (a process / decision flowchart, laid out left-to-right with arrows) -> \"nodes\" + directed \"links\". Optionally give each node a \"level\" (0,1,2…) to force its column, and each link a \"label\" (e.g. \"Yes\"/\"No\"):",
+        "  { \"type\": \"chart\", \"chart\": { \"kind\": \"flow\", \"nodes\": [ {\"name\":\"Start\"}, {\"name\":\"Review\"}, {\"name\":\"Approve\"}, {\"name\":\"Reject\"} ], \"links\": [ {\"source\":\"Start\",\"target\":\"Review\"}, {\"source\":\"Review\",\"target\":\"Approve\",\"label\":\"Yes\"}, {\"source\":\"Review\",\"target\":\"Reject\",\"label\":\"No\"} ] } }",
         "- histogram (frequency) -> like bar: \"x_categories\" (bins) + one series of counts.",
         "- timeseries (interactive time trend with zoom/pan) -> like line: \"x_categories\" (dates) + series of numbers. Best for many points over time.",
         "- rose (nightingale / 'pizza' chart — share with variable-radius slices) -> use \"items\": [ { \"label\", \"value\" } ].",