@malloy-publisher/app 0.9.15 → 0.9.16

package/dist/index.html

@@ -16,7 +16,7 @@ SPDX-License-Identifier: MIT
          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
       />
       <title>Malloy Publisher</title>
-     <script type="module" crossorigin src="/assets/index-JQs0UPrG.js"></script>
+     <script type="module" crossorigin src="/assets/index-Dzz5PLbw.js"></script>
      <link rel="stylesheet" crossorigin href="/assets/index-DUqldpo0.css">
    </head>
    <body>

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/app",
    "description": "Malloy Publisher Console (the built-in web UI)",
-   "version": "0.9.15",
+   "version": "0.9.16",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",
@@ -42,7 +42,7 @@
       "test:playwright:headed": "bunx playwright test --config=playwright.config.ts --headed"
    },
    "dependencies": {
-      "@malloy-publisher/sdk": "^0.9.15",
+      "@malloy-publisher/sdk": "^0.9.16",
       "@mui/icons-material": "^7.0.2",
       "@mui/material": "^7.0.2",
       "@tanstack/react-query": "^5.59.16",

package/dist/assets/RenderedResult-YBzVMVH2.es-CzJTpX_s.js

@@ -1,154 +0,0 @@
-import{ae as ye,j as O,I as ne,r as f,aU as pe,U as fe,aV as ge,aH as ve,aW as we,aX as Y,aY as ke,aZ as xe,a_ as Ce,a$ as Ae,b0 as Se,b1 as Ee,b2 as ce,b3 as le}from"./index-JQs0UPrG.js";const w=ye.drillCell;function Me(e,t){const r=new Set;let a;try{a=e.getMetadata()?.getAllFields()??[]}catch{return r}const o=new Set;for(const n of a)!n||t(n)||n.tag?.tag("hidden")===void 0&&o.add(n.tag?.text("label")??n.name);for(const n of a){if(!n||!t(n))continue;const l=n.tag?.text("label")??n.name;o.has(l)||r.add(l)}return r}function B(e){const t=/^\s*(\d+)/.exec(e.style?.gridColumn??"");return t?t[1]:void 0}function ze(e,t){if(t.size!==0)for(const r of e.querySelectorAll(".malloy-table")){const a=l=>l.closest(".malloy-table")===r,o=new Set;for(const l of r.querySelectorAll(".column-cell.th")){if(!a(l))continue;const i=(l.textContent??"").replace(/\u200b/g,"").trim(),y=B(l);y&&t.has(i)&&o.add(y)}if(o.size===0)continue;const n=new Set;for(const l of r.querySelectorAll(`.${w}[tabindex="0"]`)){if(!a(l))continue;const i=B(l);i&&(n.has(i)?l.tabIndex=-1:n.add(i))}for(const l of r.querySelectorAll(".column-cell.td")){if(!a(l))continue;const i=B(l),y=!l.querySelector(".value-null")&&(l.textContent??"").trim()!=="";if(i&&y&&o.has(i)&&!l.querySelector(".malloy-table")){if(l.classList.add(w),l.tabIndex===0)n.add(i);else{const g=n.has(i);g||n.add(i),l.tabIndex=g?-1:0}l.setAttribute("role","button")}}}}function je(e){const t=e.closest(".malloy-table"),r=B(e);return!t||!r?[]:Array.from(t.querySelectorAll(`.${w}`)).filter(a=>a.closest(".malloy-table")===t&&B(a)===r)}function ie(e,t){const r=je(e),a=r.indexOf(e);if(a===-1)return;const o=t==="first"?r[0]:t==="last"?r[r.length-1]:r[Math.min(Math.max(a+t,0),r.length-1)];if(o){for(const n of r)n.tabIndex=n===o?0:-1;return o}}function Fe(e){return{background:e.dashboardRoot,tableBackground:e.tableBackground,tableHeaderColor:e.tableHeader,tableBodyColor:e.tableBody,tableBorder:e.border,tablePinnedBackground:e.tableHeaderBackground,tablePinnedBorder:e.pinnedBorder,tableFontSize:`${e.font.size}px`,fontFamily:e.font.family,mapColor:e.mapColor}}function _e(e){const{foreground:t,axisFaint:r,gridline:a,font:o}=e,n={background:e.background,font:o.family,title:{color:t,font:o.family},axis:{labelColor:t,titleColor:t,domainColor:r,tickColor:r,gridColor:a,labelFont:o.family,titleFont:o.family},legend:{labelColor:t,titleColor:t,labelFont:o.family,titleFont:o.family},header:{labelColor:t,titleColor:t},range:{category:e.series}},l={...n,legend:{...n.legend,orient:"bottom"}};return i=>i==="shape_map"?l:n}function Re(e){if(!e)return;const t=e.tag("theme");if(!t)return;const r={},a=t.tag("palette");if(a){const n={},l=a.textArray("series");l&&l.length>0&&(n.series=l);for(const i of pe){const y=a.tag(i);if(!y)continue;const g={},x=y.text("light"),k=y.text("dark");x&&(g.light=x),k&&(g.dark=k),Object.keys(g).length>0&&(n[i]=g)}Object.keys(n).length>0&&(r.palette=n)}const o=t.tag("font");if(o){const n={},l=o.text("family");l&&(n.family=l);const i=o.numeric("size");typeof i=="number"&&Number.isFinite(i)&&(n.size=i),Object.keys(n).length>0&&(r.font=n)}return Object.keys(r).length>0?r:void 0}const K=e=>(e??[]).map(t=>t?.value).filter(t=>typeof t=="string");function $e(e){const t=e.replace(/[-_]+/g," ").replace(/\s+/g," ").trim();return t.charAt(0).toUpperCase()+t.slice(1)}const Oe=e=>K(e.annotations).some(t=>{const r=t.trim();return/^#[^("]/.test(r)&&/(?:^#|[\s{])label\s*=/.test(r)}),Te=e=>`"${e.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}"`,Be=e=>e.type?.element_type?.fields??e.type?.fields;function he(e,t){let r=!1;return{fields:e.map(a=>{const o=Be(a);if(o){const l=he(o,ce(K(a.annotations)));if(!l.changed)return a;r=!0;const i=a.type?.element_type?{...a.type,element_type:{...a.type.element_type,fields:l.fields}}:{...a.type,fields:l.fields};return{...a,type:i}}if(!t||!a.name||Oe(a))return a;const n=$e(a.name);return n===a.name?a:(r=!0,{...a,annotations:[{value:`# label=${Te(n)}
-`},...a.annotations??[]]})}),changed:r}}function De(e){if(!e||typeof e!="object")return e;const t=e,r=t.schema?.fields;if(!Array.isArray(r))return e;const{fields:a,changed:o}=he(r,ce(K(t.annotations)));return o?{...t,schema:{...t.schema,fields:a}}:e}const se=320,Le=10,Ie=96,qe=4e3;function Ne(e,t){if(e!=="bar"&&e!=="combo"&&e!=="line"&&e!=="chart"&&e!=="scatter_chart")return;if(e!=="bar"&&e!=="combo")return se;const r=t?.data?.array_value?.length,a=r===void 0?0:r*Le+Ie;return Math.min(Math.max(se,a),qe)}const T="data-publisher-fill",Pe=async(e,t)=>{if(typeof window>"u")throw new Error("MalloyRenderer can only be used in browser environment");const{MalloyRenderer:r}=await xe();return new r({onClick:t,vegaConfigOverride:_e(e),theme:Fe(e),onError:a=>{console.error("Error rendering visualization:",typeof a,a)}}).createViz()};async function Ve(e){if(!e||typeof e!="object")return;const t=e,r=[...Array.isArray(t.model_annotations)?t.model_annotations:[],...Array.isArray(t.source_annotations)?t.source_annotations:[],...Array.isArray(t.annotations)?t.annotations:[]].map(o=>typeof o?.value=="string"?o.value:void 0).filter(o=>!!o);if(r.length===0)return;let a;try{({parseAnnotation:a}=await ke())}catch{return}try{const{tag:o}=a(r);return Re(o)}catch(o){console.warn("Failed to parse # theme.* annotations; chart will render with the shell theme.",{error:o,lines:r});return}}function He(e,t,r){const a=Ce(t,r);for(const[o,n]of Object.entries(a))e.style.setProperty(o,n)}const Ue=`
-/* Card geometry, through the renderer's OWN theme vars rather than over the top
-   of them. It declares --malloy-theme--dashboard-* on .malloy-render itself and
-   passes each through to the --malloy-render--* the card CSS reads, so a value
-   inherited from our wrapper loses to that declaration however early it is set:
-   this has to be a rule on the same element, at higher specificity. Doubling the
-   class does that, and then no !important is needed — which matters, because
-   !important here also lands on .dashboard-item-borderless and repaints a card
-   the author asked to have no card. */
-.malloy-render.malloy-render {
-   --malloy-theme--dashboard-card-radius: var(--publisher-dashboard-card-radius);
-   --malloy-theme--dashboard-card-padding: var(--publisher-dashboard-card-padding);
-}
-/* dashboard.css hardcodes background: #f7f9fc on .malloy-dashboard
-   and .dashboard-row-header, which would paint light grey in dark
-   mode and also bleed an operator-picked palette.background across
-   the panel chrome in light. Both surfaces use
-   --malloy-render--background here, which buildMalloyExplicitTheme
-   wires to dashboardRoot: a mode-keyed neutral that stays decoupled
-   from palette.background (the chart canvas) on purpose. Selectors
-   are duplicated at higher specificity to beat the renderer s own
-   scoped rules. */
-.malloy-render .malloy-dashboard,
-.malloy-render.malloy-render .malloy-dashboard,
-div.malloy-render .malloy-dashboard {
-   /* --publisher-dashboard-root is set on the outer Publisher wrapper
-      (see buildTableCssVars) and stays decoupled from
-      --malloy-render--background, which gets shadowed inside the
-      renderer when a theme.background annotation is present. The
-      dedicated var means the panel between tiles always paints the
-      operator neutral dashboardRoot regardless of annotations. */
-   background: var(--publisher-dashboard-root) !important;
-   background-color: var(--publisher-dashboard-root) !important;
-   color: var(--malloy-render--table-body-color) !important;
-}
-.malloy-render .malloy-dashboard .dashboard-row,
-.malloy-render .malloy-dashboard .dashboard-row-body,
-.malloy-render .malloy-dashboard .dashboard-row-header,
-.malloy-render.malloy-render .malloy-dashboard .dashboard-row-header,
-div.malloy-render .malloy-dashboard .dashboard-row-header {
-   /* Belt + suspenders: dashboard.css hardcodes .dashboard-row-header
-      to #f7f9fc, and row / row-body have no explicit background but
-      get caught in any annotation-driven inline writes. Force all of
-      them to the neutral panel colour. */
-   background: var(--publisher-dashboard-root) !important;
-   background-color: var(--publisher-dashboard-root) !important;
-}
-.malloy-render .malloy-dashboard .dashboard-item:not(.dashboard-item-borderless) {
-   /* Tile padding around each chart / table. Uses our custom
-      --malloy-render--tile-background so the operator can theme the
-      tile separately from the table header row (which paints from
-      --malloy-render--table-pinned-background below).
-
-      A flat bordered card rather than the renderer's shadow ring, which is what
-      makes it match the composite tile's Paper. :not(borderless) because
-      # borderless asks for no card at all, and an !important background and
-      border drew one anyway. */
-   background: var(--malloy-render--tile-background) !important;
-   color: var(--malloy-render--table-body-color) !important;
-   box-shadow: none !important;
-   /* The card edge, not the table gridline: --publisher-dashboard-card-border,
-      the same value TileCard paints, so the renderer's card and the composite
-      one are outlined identically. */
-   border: var(--publisher-dashboard-card-border) !important;
-}
-/* The renderer's big-value card — the small card a "# big_value" measure sits
-   in, several to a row inside one tile. (No backticks in here: this is inside
-   a template literal.) Its own CSS gives it a 0.55px edge in
-   #e5e7eb: a sub-pixel width, and a grey off the slate ramp everything else on
-   the page is on. It is a dashboard card like any other, so it takes the card
-   edge and stops being the one card outlined in a hairline nobody can see. */
-.malloy-render .malloy-big-value-card {
-   border: var(--publisher-dashboard-card-border) !important;
-   /* Its shadow is a four-layer Tailwind stack, and only two of those layers
-      are a shadow: the other is "0 0 0 1px #e5e7eb", a spread ring drawn as a
-      second border OVER the real one. So the border above was landing
-      underneath a ring in the renderer's own grey, and the card kept both a
-      lifted look the flat cards around it do not have and an edge we did not
-      pick. Dropped whole rather than rebuilt layer by layer: the ring's job is
-      the border's job, and the border is already doing it. */
-   box-shadow: none !important;
-}
-/* The strip of big-value cards as a grid, so cards share a width and the last one does not wrap
-   alone. The renderer's wrapping flex row sizes each card to its own text. The 250px floor is the
-   widest realistic value: it is nowrap at 32px in an overflow:visible card, so a narrower track
-   would spill it onto its neighbour. Embedded (a nested big_value) is left as the renderer draws it. */
-.malloy-render .malloy-big-value:not(.malloy-big-value--embedded) {
-   display: grid;
-   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-}
-.malloy-render .malloy-big-value-card:not(.malloy-big-value-card--embedded) {
-   width: auto;
-   max-width: none;
-}
-.malloy-render .malloy-dashboard .dashboard-row-header-separator {
-   background: var(--malloy-render--table-border) !important;
-}
-/* !important because the malloy-explorer stylesheet pins these same properties with it. */
-[${T}] .malloy-table.root {
-   height: 100% !important;
-   align-content: start !important;
-   grid-template-columns: repeat(var(--total-header-size), minmax(max-content, 1fr)) !important;
-}
-.malloy-render .malloy-table .th.column-cell {
-   /* Non-pinned tables have no header background in the renderer's
-      own CSS (only pinned scrolled tables paint the pinned-header
-      with this var). Force the same value here so every table has a
-      visible header band reflecting the operator's choice. */
-   background: var(--malloy-render--table-pinned-background) !important;
-}
-.malloy-render .dashboard-item-title,
-.malloy-render .dashboard-dimension-name {
-   color: var(--malloy-render--label-color) !important;
-}
-.malloy-render .dashboard-item-value,
-.malloy-render .dashboard-item-value-measure,
-.malloy-render .dashboard-dimension-value {
-   color: var(--malloy-render--value-color) !important;
-}
-.malloy-render .malloy-table,
-.malloy-render .malloy-list {
-   color: var(--malloy-render--table-body-color) !important;
-}
-.malloy-render .column-cell.th,
-.malloy-render .cell-content.header {
-   color: var(--malloy-render--table-header-color) !important;
-}
-/* A cell whose column declares a "# drill" this surface can honor, marked
-   by markDrillableCells. Ordinary text with a pointer cursor until hovered,
-   then it reads as a link: the same affordance Malloyyo gives the same tag,
-   and the only thing that tells a reader a cell navigates. Kept off the
-   resting state deliberately: a column painted blue competes with the data.
-   (No backticks in here: this is inside a template literal.) */
-.malloy-render .${w} {
-   cursor: pointer;
-}
-.malloy-render .${w}:hover > .cell-content {
-   color: var(--publisher-drill-link) !important;
-   text-decoration: underline;
-}
-/* Keyboard focus reads the same as hover, plus a ring: a hover colour is not
-   something a keyboard user can produce, and a focus ring is not something a
-   mouse user sees. focus-visible rather than focus, so a click does not leave a
-   ring behind it. (No backticks in here: this is inside a template literal.) */
-.malloy-render .${w}:focus-visible {
-   outline: 2px solid var(--publisher-drill-link);
-   outline-offset: -2px;
-}
-.malloy-render .${w}:focus-visible > .cell-content {
-   color: var(--publisher-drill-link) !important;
-   text-decoration: underline;
-}
-`,de="publisher-malloy-renderer-overrides";function We(){if(typeof document>"u"||document.getElementById(de))return;const e=document.createElement("style");e.id=de,e.textContent=Ue,document.head.appendChild(e)}function Xe({result:e,height:t,drill:r,onSizeChange:a,onSizing:o,fill:n}){const l=f.useRef(null),i=f.useRef(r);i.current=r;const y=f.useCallback(d=>{i.current?.onClick(d)},[]),g=r!==void 0,x=f.useRef(!1),k=f.useRef(null),P=f.useRef(0),{theme:D,layers:V,mode:J}=fe(),Z=f.useMemo(()=>({radius:D.ui.radius.tile,padding:`${ge}px`}),[D.ui.radius.tile]);return f.useEffect(()=>()=>{P.current+=1;const d=k.current;d?.viz.remove(),d?.node.remove(),k.current=null},[]),f.useLayoutEffect(()=>{if(!l.current||!e)return;We();const d=l.current,ue=P.current+=1;let H=!1;const U=()=>!H&&ue===P.current;let c,b,L=null,W=0,I=null,q=null,N=null,j=null,F=null,_=null,G=null,Q=0,A=null;x.current=!1;let p,S;const X=v=>{if(H||!v.firstElementChild||Y(p,S)==="container")return;const R=Ae(p,S);if(x.current&&!R)return;const $=d.hasAttribute(T);$&&d.removeAttribute(T);const E=Se(v,le(p));$&&d.setAttribute(T,""),E>0&&(x.current=!0,a&&E!==Q&&(Q=E,a(E)));const h=Ee(v,le(p));R&&h&&G!==h&&(G=h,_?.disconnect(),_=new ResizeObserver(()=>X(v)),_.observe(h))};return(async()=>{let v;try{v=JSON.parse(e)}catch(m){console.error("Error parsing visualization result:",m);return}const R=await Ve(v),$=R?ve([...V,we(V,R)],J):D;if(!U())return;try{b=await Pe($,y)}catch(m){console.error("Failed to create renderer:",m);return}if(!U()){b.remove(),b=void 0;return}const E=k.current;c=document.createElement("div"),c.style.width="100%",c.style.height="100%",He(c,$,Z),d.childElementCount>0&&(d.style.position="relative",c.style.position="absolute",c.style.inset="0",c.style.visibility="hidden"),d.appendChild(c);const h=c;j=new MutationObserver(()=>{F&&clearTimeout(F),F=setTimeout(()=>{X(h),x.current&&j?.disconnect()},100)}),j.observe(c,{childList:!0,subtree:!0,attributes:!0});const me=b;let ee=!1;const te=()=>{if(!(ee||!U())){ee=!0,A&&(clearTimeout(A),A=null),E?.viz.remove();for(const m of Array.from(d.children))m!==h&&d.removeChild(m);h.style.position="",h.style.inset="",h.style.visibility="",d.style.position="",k.current={viz:me,node:h},X(h)}};try{b.setResult(De(v));try{const C=b.getMetadata(),M=C?.getRootField();p=M?.renderAs(),S=M?C?.getPluginsForField(M.key)?.[0]?.sizingStrategy:void 0}catch{p=void 0,S=void 0}o?.(Y(p,S),p),c.dataset.malloyRenderAs=p??"unknown",c.dataset.malloySizing=Y(p,S);const m=Ne(p,v);c.style.minWidth=m===void 0?"":`${m}px`,d.style.overflowX=m===void 0?"":"auto",d.style.overflowY=m===void 0?"":"hidden",b.render(c);const re=i.current;try{if(re){const C=Me(b,re.canDrill),M=()=>{try{ze(h,C)}catch(s){console.warn("Drill affordance skipped:",s)}};M();const ae=s=>{const u=s.querySelector(".cell-content")??s,z=u.getBoundingClientRect();u.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0,view:u.ownerDocument.defaultView,clientX:Math.round(z.left+z.width/2),clientY:Math.round(z.bottom)}))},oe=s=>s.target?.closest?.(`.${w}`)??null,be=(s,u)=>{ie(s,u)?.focus()};I=s=>{const u=oe(s);if(!u)return;const z=s.key==="ArrowDown"?1:s.key==="ArrowUp"?-1:s.key==="Home"?"first":s.key==="End"?"last":void 0;if(z!==void 0){s.preventDefault(),be(u,z);return}s.key==="Enter"?(s.preventDefault(),ae(u)):s.key===" "&&s.preventDefault()},q=s=>{if(s.key!==" ")return;const u=oe(s);u&&(s.preventDefault(),ae(u))},N=s=>{const u=s.target?.closest?.(`.${w}`);u&&ie(u,0)},h.addEventListener("keydown",I),h.addEventListener("keyup",q),h.addEventListener("focusin",N),C.size>0&&typeof MutationObserver<"u"&&(L=new MutationObserver(()=>{cancelAnimationFrame(W),W=requestAnimationFrame(M)}),L.observe(h,{childList:!0,subtree:!0}))}}catch(C){console.warn("Drill affordance skipped:",C)}b.onReady(te),A=setTimeout(te,1e4)}catch(m){console.error("Error rendering visualization:",m),j?.disconnect(),_?.disconnect(),L?.disconnect(),b.remove(),b=void 0,h.parentNode===d&&d.removeChild(h)}})(),()=>{H=!0,j?.disconnect(),_?.disconnect(),F&&clearTimeout(F),A&&clearTimeout(A),c&&k.current?.node!==c&&(I&&c.removeEventListener("keydown",I),q&&c.removeEventListener("keyup",q),N&&c.removeEventListener("focusin",N),L?.disconnect(),cancelAnimationFrame(W),b?.remove(),c.parentNode===d&&d.removeChild(c),d.style.position="")}},[e,y,g,a,o,D,V,J,Z]),O.jsx("div",{ref:l,...n?{[T]:""}:{},style:{width:"100%",height:t?`${t}px`:"400px"}})}function Ye(e){return typeof window>"u"?O.jsx(ne,{sx:{width:"100%",height:e.height?`${e.height}px`:"100%",display:"flex",alignItems:"center",justifyContent:"center",color:"text.secondary"},children:"Loading..."}):O.jsx(f.Suspense,{fallback:O.jsx(ne,{sx:{width:"100%",height:e.height?`${e.height}px`:"100%",display:"flex",alignItems:"center",justifyContent:"center",color:"text.secondary"},children:"Loading visualization..."}),children:O.jsx(Xe,{...e})})}const Je=Object.freeze(Object.defineProperty({__proto__:null,default:Ye},Symbol.toStringTag,{value:"Module"}));export{w as D,Ye as R,_e as a,Fe as b,Je as c,Me as d,ze as m,Re as r};