@marimo-team/frontend 0.20.5-dev87 → 0.20.5-dev89

package/dist/assets/vega-component-tdJ9PJ9x.js

@@ -0,0 +1 @@
+import{s as Z}from"./chunk-LvLJmgfZ.js";import{n as C}from"./useEvent-O0nX5vok.js";import{t as Y}from"./react-Bj1aDYRI.js";import"./react-dom-CSu739Rf.js";import{t as tt}from"./compiler-runtime-B3qBwwSJ.js";import{t as nt}from"./debounce-DS_VtWMt.js";import{r as et,t as rt}from"./tooltip-WkrsrB6k.js";import{t as N}from"./uniq-fnEfqrGj.js";import{c as V,m as O}from"./useEventListener-BGihH8bs.js";import{n as F}from"./config-DeEqZTX7.js";import{t as at}from"./jsx-runtime-icT_Ltz2.js";import{r as it}from"./button-BZAv3veu.js";import{t as ot}from"./cn-BoaCR37F.js";import{u as lt}from"./toDate-BqKH-Jd9.js";import"./session-CXChHxAw.js";import{r as ct}from"./useTheme-CM9j8dgy.js";import"./Combination-CBJmtdux.js";import{t as st}from"./tooltip-CNmaER6z.js";import{t as mt}from"./isValid-BGe7pJXT.js";import{n as pt}from"./vega-loader.browser-BJ9oKrvH.js";import{t as ut}from"./react-vega-BFWsPELq.js";import"./defaultLocale-CuYNS33t.js";import"./defaultLocale-CGfP-Ye3.js";import{r as ft,t as dt}from"./alert-DkRmN0_B.js";import{n as ht}from"./error-banner-CAuK5DPN.js";import{n as gt}from"./useAsyncData-a8f2Q_nk.js";import{t as yt}from"./formats-DEgTLsde.js";import{t as H}from"./useDeepCompareMemoize-BEmJ3M7I.js";var vt=tt(),x=Z(Y(),1);function kt(t){return t.data&&"url"in t.data&&(t.data.url=F(t.data.url).href),t}const u={arc:"arc",area:"area",bar:"bar",image:"image",line:"line",point:"point",rect:"rect",rule:"rule",text:"text",tick:"tick",trail:"trail",circle:"circle",square:"square",geoshape:"geoshape"};var W=new Set(["boxplot","errorband","errorbar"]);const S={getMarkType(t){let n=typeof t=="string"?t:t.type;if(W.has(n))throw Error("Not supported");return n},isInteractive(t){let n=typeof t=="string"?t:t.type;return!W.has(n)},makeClickable(t){let n=typeof t=="string"?t:t.type;return n in u?typeof t=="string"?{type:t,cursor:"pointer",tooltip:!0}:{...t,type:n,cursor:"pointer",tooltip:!0}:t},getOpacity(t){return typeof t=="string"?null:"opacity"in t&&typeof t.opacity=="number"?t.opacity:null}},y={point(t){return t==null?"select_point":`select_point_${t}`},interval(t){return t==null?"select_interval":`select_interval_${t}`},legendSelection(t){return`legend_selection_${t}`},binColoring(t){return t==null?"bin_coloring":`bin_coloring_${t}`},HIGHLIGHT:"highlight",PAN_ZOOM:"pan_zoom",hasPoint(t){return t.some(n=>n.startsWith("select_point"))},hasInterval(t){return t.some(n=>n.startsWith("select_interval"))},hasLegend(t){return t.some(n=>n.startsWith("legend_selection"))},hasPanZoom(t){return t.some(n=>n.startsWith("pan_zoom"))},isBinColoring(t){return t.startsWith("bin_coloring")}},_={highlight(){return{name:y.HIGHLIGHT,select:{type:"point",on:"mouseover"}}},interval(t,n){return{name:y.interval(n),select:{type:"interval",encodings:D(t),mark:{fill:"#669EFF",fillOpacity:.07,stroke:"#669EFF",strokeOpacity:.4},on:"[mousedown[!event.metaKey], mouseup] > mousemove[!event.metaKey]",translate:"[mousedown[!event.metaKey], mouseup] > mousemove[!event.metaKey]"}}},point(t,n){return{name:y.point(n),select:{type:"point",encodings:D(t),on:"click[!event.metaKey]"}}},binColoring(t){return{name:y.binColoring(t),select:{type:"point",on:"click[!event.metaKey]"}}},legend(t){return{name:y.legendSelection(t),select:{type:"point",fields:[t]},bind:"legend"}},panZoom(){return{name:y.PAN_ZOOM,bind:"scales",select:{type:"interval",on:"[mousedown[event.metaKey], window:mouseup] > window:mousemove!",translate:"[mousedown[event.metaKey], window:mouseup] > window:mousemove!",zoom:"wheel![event.metaKey]"}}}};function D(t){switch(S.getMarkType(t.mark)){case u.image:case u.trail:return;case u.area:case u.arc:return["color"];case u.bar:{let n=bt(t);return n==="horizontal"?["y"]:n==="vertical"?["x"]:void 0}case u.circle:case u.geoshape:case u.line:case u.point:case u.rect:case u.rule:case u.square:case u.text:case u.tick:return["x","y"]}}function P(t){return"params"in t&&t.params&&t.params.length>0?N(t.params.filter(n=>n==null?!1:"select"in n&&n.select!==void 0).map(n=>n.name)):"layer"in t?N(t.layer.flatMap(P)):"vconcat"in t?N(t.vconcat.flatMap(P)):"hconcat"in t?N(t.hconcat.flatMap(P)):[]}function bt(t){var a,r;if(!t||!("mark"in t))return;let n=(a=t.encoding)==null?void 0:a.x,e=(r=t.encoding)==null?void 0:r.y;if(n&&"type"in n&&n.type==="nominal")return"vertical";if(e&&"type"in e&&e.type==="nominal"||n&&"aggregate"in n)return"horizontal";if(e&&"aggregate"in e)return"vertical"}function wt(t){if(!t.encoding)return[];let n=[];for(let e of Object.values(t.encoding))e&&typeof e=="object"&&"bin"in e&&e.bin&&"field"in e&&typeof e.field=="string"&&n.push(e.field);return n}function G(t){if(!t||!("encoding"in t))return[];let{encoding:n}=t;return n?Object.entries(n).flatMap(e=>{let[a,r]=e;return!r||!xt.has(a)?[]:"field"in r&&typeof r.field=="string"?[r.field]:"condition"in r&&r.condition&&typeof r.condition=="object"&&"field"in r.condition&&r.condition.field&&typeof r.condition.field=="string"?[r.condition.field]:[]}):[]}var xt=new Set(["color","fill","fillOpacity","opacity","shape","size"]);function $(t,n,e,a){let r=e.filter(o=>y.isBinColoring(o)),i={and:(r.length>0?r:e).map(o=>({param:o}))};if(t==="opacity"){let o=S.getOpacity(a)||1;return{...n,opacity:{condition:{test:i,value:o},value:o/5}}}else return n}function St(t){if(!("select"in t)||!t.select)return JSON.stringify(t);let n=t.select;if(typeof n=="string")return JSON.stringify({type:n,bind:t.bind});let e={type:n.type,encodings:"encodings"in n&&n.encodings?[...n.encodings].sort():void 0,fields:"fields"in n&&n.fields?[...n.fields].sort():void 0,bind:t.bind};return JSON.stringify(e)}function q(t){let n=K(t);if(n.length===0)return t;let e=At(n);return e.length===0?t:{...L(E(t,new Set(e.map(a=>a.name))),e.map(a=>a.name)),params:[...t.params||[],...e]}}function K(t){let n=[];if("vconcat"in t&&Array.isArray(t.vconcat))for(let e of t.vconcat)n.push(...K(e));else if("hconcat"in t&&Array.isArray(t.hconcat))for(let e of t.hconcat)n.push(...K(e));else{if("layer"in t)return[];"mark"in t&&"params"in t&&t.params&&t.params.length>0&&n.push({params:t.params})}return n}function At(t){if(t.length===0)return[];let n=new Map,e=t.length;for(let{params:r}of t){let i=new Set;for(let o of r){let l=St(o);i.has(l)||(i.add(l),n.has(l)||n.set(l,{count:0,param:o}),n.get(l).count++)}}let a=[];for(let[,{count:r,param:i}]of n)r===e&&a.push(i);return a}function E(t,n){if("vconcat"in t&&Array.isArray(t.vconcat))return{...t,vconcat:t.vconcat.map(e=>E(e,n))};if("hconcat"in t&&Array.isArray(t.hconcat))return{...t,hconcat:t.hconcat.map(e=>E(e,n))};if("mark"in t&&"params"in t&&t.params){let e=t.params,a=[];for(let r of e){if(!r||typeof r!="object"||!("name"in r)){a.push(r);continue}n.has(r.name)||a.push(r)}if(a.length===0){let{params:r,...i}=t;return i}return{...t,params:a}}return t}function L(t,n){return"vconcat"in t&&Array.isArray(t.vconcat)?{...t,vconcat:t.vconcat.map(e=>L(e,n))}:"hconcat"in t&&Array.isArray(t.hconcat)?{...t,hconcat:t.hconcat.map(e=>L(e,n))}:"layer"in t?t:"mark"in t&&S.isInteractive(t.mark)?{...t,mark:S.makeClickable(t.mark),encoding:$("opacity",t.encoding||{},n,t.mark)}:t}function T(t,n){var l,k;let{chartSelection:e=!0,fieldSelection:a=!0}=n;if(!e&&!a)return t;(l=t.params)!=null&&l.some(s=>s.bind==="legend")&&(a=!1);let r=(k=t.params)==null?void 0:k.some(s=>!s.bind);r&&(e=!1);let i="vconcat"in t||"hconcat"in t;if(r&&i)return t;if("vconcat"in t){let s=t.vconcat.map(m=>"mark"in m?T(m,{chartSelection:e,fieldSelection:a}):m);return q({...t,vconcat:s})}if("hconcat"in t){let s=t.hconcat.map(m=>"mark"in m?T(m,{chartSelection:e,fieldSelection:a}):m);return q({...t,hconcat:s})}if("layer"in t){let s=t.params&&t.params.length>0,m=a!==!1&&!s,v=[];if(m){let p=t.layer.flatMap(f=>"mark"in f?G(f):[]);v=[...new Set(p)],Array.isArray(a)&&(v=v.filter(f=>a.includes(f)))}let w=t.layer.map((p,f)=>{if(!("mark"in p))return p;let h=p;if(f===0&&v.length>0){let j=v.map(M=>_.legend(M));h={...h,params:[...h.params||[],...j]}}return h=z(h,e,f),h=J(h),f===0&&(h=B(h)),h});return{...t,layer:w}}if(!("mark"in t)||!S.isInteractive(t.mark))return t;let o=t;return o=Ot(o,a),o=z(o,e,void 0),o=J(o),o=B(o),o}function Ot(t,n){if(n===!1)return t;let e=G(t);Array.isArray(n)&&(e=e.filter(i=>n.includes(i)));let a=e.map(i=>_.legend(i)),r=[...t.params||[],...a];return{...t,params:r}}function z(t,n,e){if(n===!1)return t;let a;try{a=S.getMarkType(t.mark)}catch{return t}if(a==="geoshape")return t;let r=wt(t),i=n===!0?r.length>0?["point"]:_t(a):[n];if(!i||i.length===0)return t;let o=i.map(k=>k==="interval"?_.interval(t,e):_.point(t,e)),l=[...t.params||[],...o];return r.length>0&&i.includes("point")&&l.push(_.binColoring(e)),{...t,params:l}}function B(t){let n;try{n=S.getMarkType(t.mark)}catch{}if(n==="geoshape")return t;let e=t.params||[];return e.some(a=>a.bind==="scales")?t:{...t,params:[...e,_.panZoom()]}}function J(t){let n="encoding"in t?t.encoding:void 0,e=t.params||[],a=e.map(r=>r.name);return e.length===0||!S.isInteractive(t.mark)?t:{...t,mark:S.makeClickable(t.mark),encoding:$("opacity",n||{},a,t.mark)}}function _t(t){switch(t){case"arc":case"area":return["point"];case"text":case"bar":return["point","interval"];case"line":return;default:return["point","interval"]}}async function jt(t){if(!t)return t;let n="datasets"in t?{...t.datasets}:{},e=async r=>{if(!r)return r;if("layer"in r){let l=await Promise.all(r.layer.map(e));r={...r,layer:l}}if("hconcat"in r){let l=await Promise.all(r.hconcat.map(e));r={...r,hconcat:l}}if("vconcat"in r){let l=await Promise.all(r.vconcat.map(e));r={...r,vconcat:l}}if("spec"in r&&(r={...r,spec:await e(r.spec)}),!r.data||!("url"in r.data))return r;let i;try{i=F(r.data.url)}catch{return r}let o=await et(i.href,r.data.format);return n[i.pathname]=o,{...r,data:{name:i.pathname}}},a=await e(t);return Object.keys(n).length===0?a:{...a,datasets:n}}var d=Z(at(),1);pt("arrow",yt);var Mt=t=>{let n=(0,vt.c)(12),{value:e,setValue:a,chartSelection:r,fieldSelection:i,spec:o,embedOptions:l}=t,k,s;n[0]===o?(k=n[1],s=n[2]):(k=async()=>jt(o),s=[o],n[0]=o,n[1]=k,n[2]=s);let{data:m,error:v}=gt(k,s);if(v){let p;return n[3]===v?p=n[4]:(p=(0,d.jsx)(ht,{error:v}),n[3]=v,n[4]=p),p}if(!m)return null;let w;return n[5]!==r||n[6]!==l||n[7]!==i||n[8]!==m||n[9]!==a||n[10]!==e?(w=(0,d.jsx)(Nt,{value:e,setValue:a,chartSelection:r,fieldSelection:i,spec:m,embedOptions:l}),n[5]=r,n[6]=l,n[7]=i,n[8]=m,n[9]=a,n[10]=e,n[11]=w):w=n[11],w},Nt=({value:t,setValue:n,chartSelection:e,fieldSelection:a,spec:r,embedOptions:i})=>{let{theme:o}=ct(),l=(0,x.useRef)(null),k=(0,x.useRef)(void 0),[s,m]=(0,x.useState)(),v=(0,x.useMemo)(()=>i&&"actions"in i?i.actions:{source:!1,compiled:!1},[i]),w=H(r),p=(0,x.useMemo)(()=>T(kt(w),{chartSelection:e,fieldSelection:a}),[w,e,a]),f=(0,x.useMemo)(()=>P(p),[p]),h=C(c=>{n({...t,...c})}),j=(0,x.useMemo)(()=>nt((c,g)=>{O.debug("[Vega signal]",c,g);let b=V.mapValues(g,It);b=V.mapValues(b,Pt),h({[c]:b})},100),[h]),M=H(f),I=(0,x.useMemo)(()=>M.reduce((c,g)=>(y.PAN_ZOOM===g||y.isBinColoring(g)||c.push({signalName:g,handler:(b,X)=>j(b,X)}),c),[]),[M,j]),R=C(c=>{O.error(c),O.debug(p),m(c)}),Q=C(c=>{O.debug("[Vega view] created",c),k.current=c,m(void 0)}),U=()=>{let c=[];return y.hasPoint(f)&&c.push(["Point selection","click to select a point; hold shift for multi-select"]),y.hasInterval(f)&&c.push(["Interval selection","click and drag to select an interval"]),y.hasLegend(f)&&c.push(["Legend selection","click to select a legend item; hold shift for multi-select"]),y.hasPanZoom(f)&&c.push(["Pan","hold the meta key and drag"],["Zoom","hold the meta key and scroll"]),c.length===0?null:(0,d.jsx)(st,{delayDuration:300,side:"left",content:(0,d.jsx)("div",{className:"text-xs flex flex-col",children:c.map((g,b)=>(0,d.jsxs)("div",{children:[(0,d.jsxs)("span",{className:"font-bold tracking-wide",children:[g[0],":"]})," ",g[1]]},b))}),children:(0,d.jsx)(lt,{className:"absolute bottom-1 right-0 m-2 h-4 w-4 cursor-help text-muted-foreground hover:text-foreground"})})},A=ut({ref:l,spec:p,options:{theme:o==="dark"?"dark":void 0,actions:v,mode:"vega-lite",tooltip:rt.call,renderer:"canvas"},onError:R,onEmbed:Q});return(0,x.useEffect)(()=>(I.forEach(({signalName:c,handler:g})=>{try{A==null||A.view.addSignalListener(c,g)}catch(b){O.error(b)}}),()=>{I.forEach(({signalName:c,handler:g})=>{try{A==null||A.view.removeSignalListener(c,g)}catch(b){O.error(b)}})}),[A,I]),(0,d.jsxs)(d.Fragment,{children:[s&&(0,d.jsxs)(dt,{variant:"destructive",children:[(0,d.jsx)(ft,{children:s.message}),(0,d.jsx)("div",{className:"text-md",children:s.stack})]}),(0,d.jsxs)("div",{className:ot("relative","width"in p&&p.width==="container"&&"vega-container-width"),onPointerDown:it.stopPropagation(),children:[(0,d.jsx)("div",{ref:l}),U()]})]})};function Pt(t){return t instanceof Set?[...t]:t}function It(t){return Array.isArray(t)?t.map(n=>n instanceof Date&&mt(n)?new Date(n).getTime():n):t}var Ct=Mt;export{Ct as default};

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-lo-_Mee6.js"></script>
+    <script type="module" crossorigin src="./assets/index-CV-Vv3LK.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-BW0IMuFq.js">
     <link rel="modulepreload" crossorigin href="./assets/clsx-BDxNtGmi.js">
     <link rel="modulepreload" crossorigin href="./assets/cn-BoaCR37F.js">
@@ -257,7 +257,7 @@
     <link rel="stylesheet" crossorigin href="./assets/cells-jmgGt1lS.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DdDKmWlR.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B7vuddcd.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-CDgqxTU8.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-CVpJvEAO.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.20.5-dev87",
+  "version": "0.20.5-dev89",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/package-alert.tsx

@@ -174,6 +174,7 @@ export const PackageAlert: React.FC = () => {
                     })}
                     versions={desiredPackageVersions}
                     clearPackageAlert={() => clearPackageAlert(packageAlert.id)}
+                    source={packageAlert.source}
                   />
 
                   {!isWasm() && (
@@ -323,11 +324,13 @@ const InstallPackagesButton = ({
   packages,
   versions,
   clearPackageAlert,
+  source,
 }: {
   manager: PackageManagerName;
   packages: string[];
   versions: Record<string, string>;
   clearPackageAlert: () => void;
+  source?: "kernel" | "server";
 }) => {
   const { sendInstallMissingPackages } = useRequestClient();
   return (
@@ -347,6 +350,7 @@ const InstallPackagesButton = ({
         await sendInstallMissingPackages({
           manager,
           versions: completePackages,
+          source,
         }).catch((error) => {
           Logger.error(error);
         });

package/src/core/alerts/state.ts

@@ -11,6 +11,7 @@ export interface MissingPackageAlert {
   kind: "missing";
   packages: string[];
   isolated: boolean;
+  source?: "kernel" | "server";
 }
 
 export interface InstallingPackageAlert {

package/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx

@@ -13,6 +13,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useOnMount } from "@/hooks/useLifecycle";
 import { type ResolvedTheme, useTheme } from "@/theme/useTheme";
+import { cn } from "@/utils/cn";
 import { Objects } from "@/utils/objects";
 import { ErrorBanner } from "../common/error-banner";
 import { vegaLoadData } from "../vega/loader";
@@ -139,9 +140,15 @@ export const DataExplorerComponent = ({
     const responsiveSpec = makeResponsive(spec);
     // TODO: We can optimize by updating the data dynamically. https://github.com/vega/react-vega?tab=readme-ov-file#recipes
     const augmentedSpec = augmentSpecWithData(responsiveSpec, chartData);
+    const isContainerWidth = responsiveSpec.width === "container";
 
     return (
-      <div className="flex overflow-y-auto justify-center items-center flex-1 w-[90%]">
+      <div
+        className={cn(
+          "flex overflow-y-auto justify-center items-center flex-1 w-[90%]",
+          isContainerWidth && "vega-container-width",
+        )}
+      >
         <VegaEmbed spec={augmentedSpec} options={chartOptions(theme)} />
       </div>
     );

package/src/plugins/impl/vega/vega-component.tsx

@@ -16,6 +16,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useTheme } from "@/theme/useTheme";
+import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { Logger } from "@/utils/Logger";
 import { Objects } from "@/utils/objects";
@@ -304,7 +305,12 @@ const LoadedVegaComponent = ({
         </Alert>
       )}
       <div
-        className="relative"
+        className={cn(
+          "relative",
+          "width" in selectableSpec &&
+            selectableSpec.width === "container" &&
+            "vega-container-width",
+        )}
         // Capture the pointer down event to prevent the parent from handling it
         onPointerDown={Events.stopPropagation()}
       >

package/src/plugins/impl/vega/vega.css

@@ -1,18 +1,11 @@
 @reference "../../../css/globals.css";
 
 .vega-embed {
-  width: 100%;
-  flex: 1;
-  display: inline-block;
-
-  @media (min-width: 500px) {
-    min-width: 300px;
-  }
+  max-width: 100%;
+}
 
-  /* For vega embeds in slots, reset the styles to let the user set the width */
-  @container style(--slot: true) {
-    min-width: unset;
-  }
+.vega-container-width .vega-embed {
+  width: 100%;
 }
 
 .vega-embed > .chart-wrapper {

package/dist/assets/vega-component-DzBZ6SmR.js

@@ -1 +0,0 @@
-import{s as Z}from"./chunk-LvLJmgfZ.js";import{n as C}from"./useEvent-O0nX5vok.js";import{t as Y}from"./react-Bj1aDYRI.js";import"./react-dom-CSu739Rf.js";import{t as tt}from"./compiler-runtime-B3qBwwSJ.js";import{t as et}from"./debounce-DS_VtWMt.js";import{r as nt,t as rt}from"./tooltip-WkrsrB6k.js";import{t as N}from"./uniq-fnEfqrGj.js";import{c as V,m as O}from"./useEventListener-BGihH8bs.js";import{n as F}from"./config-DeEqZTX7.js";import{t as at}from"./jsx-runtime-icT_Ltz2.js";import{r as it}from"./button-BZAv3veu.js";import{u as ot}from"./toDate-BqKH-Jd9.js";import"./session-CXChHxAw.js";import{r as lt}from"./useTheme-CM9j8dgy.js";import"./Combination-CBJmtdux.js";import{t as ct}from"./tooltip-CNmaER6z.js";import{t as st}from"./isValid-BGe7pJXT.js";import{n as mt}from"./vega-loader.browser-BJ9oKrvH.js";import{t as pt}from"./react-vega-BFWsPELq.js";import"./defaultLocale-CuYNS33t.js";import"./defaultLocale-CGfP-Ye3.js";import{r as ut,t as ft}from"./alert-DkRmN0_B.js";import{n as dt}from"./error-banner-CAuK5DPN.js";import{n as ht}from"./useAsyncData-a8f2Q_nk.js";import{t as gt}from"./formats-DEgTLsde.js";import{t as H}from"./useDeepCompareMemoize-BEmJ3M7I.js";var yt=tt(),x=Z(Y(),1);function vt(t){return t.data&&"url"in t.data&&(t.data.url=F(t.data.url).href),t}const u={arc:"arc",area:"area",bar:"bar",image:"image",line:"line",point:"point",rect:"rect",rule:"rule",text:"text",tick:"tick",trail:"trail",circle:"circle",square:"square",geoshape:"geoshape"};var W=new Set(["boxplot","errorband","errorbar"]);const S={getMarkType(t){let e=typeof t=="string"?t:t.type;if(W.has(e))throw Error("Not supported");return e},isInteractive(t){let e=typeof t=="string"?t:t.type;return!W.has(e)},makeClickable(t){let e=typeof t=="string"?t:t.type;return e in u?typeof t=="string"?{type:t,cursor:"pointer",tooltip:!0}:{...t,type:e,cursor:"pointer",tooltip:!0}:t},getOpacity(t){return typeof t=="string"?null:"opacity"in t&&typeof t.opacity=="number"?t.opacity:null}},y={point(t){return t==null?"select_point":`select_point_${t}`},interval(t){return t==null?"select_interval":`select_interval_${t}`},legendSelection(t){return`legend_selection_${t}`},binColoring(t){return t==null?"bin_coloring":`bin_coloring_${t}`},HIGHLIGHT:"highlight",PAN_ZOOM:"pan_zoom",hasPoint(t){return t.some(e=>e.startsWith("select_point"))},hasInterval(t){return t.some(e=>e.startsWith("select_interval"))},hasLegend(t){return t.some(e=>e.startsWith("legend_selection"))},hasPanZoom(t){return t.some(e=>e.startsWith("pan_zoom"))},isBinColoring(t){return t.startsWith("bin_coloring")}},_={highlight(){return{name:y.HIGHLIGHT,select:{type:"point",on:"mouseover"}}},interval(t,e){return{name:y.interval(e),select:{type:"interval",encodings:D(t),mark:{fill:"#669EFF",fillOpacity:.07,stroke:"#669EFF",strokeOpacity:.4},on:"[mousedown[!event.metaKey], mouseup] > mousemove[!event.metaKey]",translate:"[mousedown[!event.metaKey], mouseup] > mousemove[!event.metaKey]"}}},point(t,e){return{name:y.point(e),select:{type:"point",encodings:D(t),on:"click[!event.metaKey]"}}},binColoring(t){return{name:y.binColoring(t),select:{type:"point",on:"click[!event.metaKey]"}}},legend(t){return{name:y.legendSelection(t),select:{type:"point",fields:[t]},bind:"legend"}},panZoom(){return{name:y.PAN_ZOOM,bind:"scales",select:{type:"interval",on:"[mousedown[event.metaKey], window:mouseup] > window:mousemove!",translate:"[mousedown[event.metaKey], window:mouseup] > window:mousemove!",zoom:"wheel![event.metaKey]"}}}};function D(t){switch(S.getMarkType(t.mark)){case u.image:case u.trail:return;case u.area:case u.arc:return["color"];case u.bar:{let e=kt(t);return e==="horizontal"?["y"]:e==="vertical"?["x"]:void 0}case u.circle:case u.geoshape:case u.line:case u.point:case u.rect:case u.rule:case u.square:case u.text:case u.tick:return["x","y"]}}function P(t){return"params"in t&&t.params&&t.params.length>0?N(t.params.filter(e=>e==null?!1:"select"in e&&e.select!==void 0).map(e=>e.name)):"layer"in t?N(t.layer.flatMap(P)):"vconcat"in t?N(t.vconcat.flatMap(P)):"hconcat"in t?N(t.hconcat.flatMap(P)):[]}function kt(t){var a,r;if(!t||!("mark"in t))return;let e=(a=t.encoding)==null?void 0:a.x,n=(r=t.encoding)==null?void 0:r.y;if(e&&"type"in e&&e.type==="nominal")return"vertical";if(n&&"type"in n&&n.type==="nominal"||e&&"aggregate"in e)return"horizontal";if(n&&"aggregate"in n)return"vertical"}function bt(t){if(!t.encoding)return[];let e=[];for(let n of Object.values(t.encoding))n&&typeof n=="object"&&"bin"in n&&n.bin&&"field"in n&&typeof n.field=="string"&&e.push(n.field);return e}function G(t){if(!t||!("encoding"in t))return[];let{encoding:e}=t;return e?Object.entries(e).flatMap(n=>{let[a,r]=n;return!r||!wt.has(a)?[]:"field"in r&&typeof r.field=="string"?[r.field]:"condition"in r&&r.condition&&typeof r.condition=="object"&&"field"in r.condition&&r.condition.field&&typeof r.condition.field=="string"?[r.condition.field]:[]}):[]}var wt=new Set(["color","fill","fillOpacity","opacity","shape","size"]);function $(t,e,n,a){let r=n.filter(o=>y.isBinColoring(o)),i={and:(r.length>0?r:n).map(o=>({param:o}))};if(t==="opacity"){let o=S.getOpacity(a)||1;return{...e,opacity:{condition:{test:i,value:o},value:o/5}}}else return e}function xt(t){if(!("select"in t)||!t.select)return JSON.stringify(t);let e=t.select;if(typeof e=="string")return JSON.stringify({type:e,bind:t.bind});let n={type:e.type,encodings:"encodings"in e&&e.encodings?[...e.encodings].sort():void 0,fields:"fields"in e&&e.fields?[...e.fields].sort():void 0,bind:t.bind};return JSON.stringify(n)}function q(t){let e=K(t);if(e.length===0)return t;let n=St(e);return n.length===0?t:{...L(E(t,new Set(n.map(a=>a.name))),n.map(a=>a.name)),params:[...t.params||[],...n]}}function K(t){let e=[];if("vconcat"in t&&Array.isArray(t.vconcat))for(let n of t.vconcat)e.push(...K(n));else if("hconcat"in t&&Array.isArray(t.hconcat))for(let n of t.hconcat)e.push(...K(n));else{if("layer"in t)return[];"mark"in t&&"params"in t&&t.params&&t.params.length>0&&e.push({params:t.params})}return e}function St(t){if(t.length===0)return[];let e=new Map,n=t.length;for(let{params:r}of t){let i=new Set;for(let o of r){let l=xt(o);i.has(l)||(i.add(l),e.has(l)||e.set(l,{count:0,param:o}),e.get(l).count++)}}let a=[];for(let[,{count:r,param:i}]of e)r===n&&a.push(i);return a}function E(t,e){if("vconcat"in t&&Array.isArray(t.vconcat))return{...t,vconcat:t.vconcat.map(n=>E(n,e))};if("hconcat"in t&&Array.isArray(t.hconcat))return{...t,hconcat:t.hconcat.map(n=>E(n,e))};if("mark"in t&&"params"in t&&t.params){let n=t.params,a=[];for(let r of n){if(!r||typeof r!="object"||!("name"in r)){a.push(r);continue}e.has(r.name)||a.push(r)}if(a.length===0){let{params:r,...i}=t;return i}return{...t,params:a}}return t}function L(t,e){return"vconcat"in t&&Array.isArray(t.vconcat)?{...t,vconcat:t.vconcat.map(n=>L(n,e))}:"hconcat"in t&&Array.isArray(t.hconcat)?{...t,hconcat:t.hconcat.map(n=>L(n,e))}:"layer"in t?t:"mark"in t&&S.isInteractive(t.mark)?{...t,mark:S.makeClickable(t.mark),encoding:$("opacity",t.encoding||{},e,t.mark)}:t}function T(t,e){var l,k;let{chartSelection:n=!0,fieldSelection:a=!0}=e;if(!n&&!a)return t;(l=t.params)!=null&&l.some(s=>s.bind==="legend")&&(a=!1);let r=(k=t.params)==null?void 0:k.some(s=>!s.bind);r&&(n=!1);let i="vconcat"in t||"hconcat"in t;if(r&&i)return t;if("vconcat"in t){let s=t.vconcat.map(m=>"mark"in m?T(m,{chartSelection:n,fieldSelection:a}):m);return q({...t,vconcat:s})}if("hconcat"in t){let s=t.hconcat.map(m=>"mark"in m?T(m,{chartSelection:n,fieldSelection:a}):m);return q({...t,hconcat:s})}if("layer"in t){let s=t.params&&t.params.length>0,m=a!==!1&&!s,v=[];if(m){let p=t.layer.flatMap(f=>"mark"in f?G(f):[]);v=[...new Set(p)],Array.isArray(a)&&(v=v.filter(f=>a.includes(f)))}let w=t.layer.map((p,f)=>{if(!("mark"in p))return p;let h=p;if(f===0&&v.length>0){let j=v.map(M=>_.legend(M));h={...h,params:[...h.params||[],...j]}}return h=z(h,n,f),h=J(h),f===0&&(h=B(h)),h});return{...t,layer:w}}if(!("mark"in t)||!S.isInteractive(t.mark))return t;let o=t;return o=At(o,a),o=z(o,n,void 0),o=J(o),o=B(o),o}function At(t,e){if(e===!1)return t;let n=G(t);Array.isArray(e)&&(n=n.filter(i=>e.includes(i)));let a=n.map(i=>_.legend(i)),r=[...t.params||[],...a];return{...t,params:r}}function z(t,e,n){if(e===!1)return t;let a;try{a=S.getMarkType(t.mark)}catch{return t}if(a==="geoshape")return t;let r=bt(t),i=e===!0?r.length>0?["point"]:Ot(a):[e];if(!i||i.length===0)return t;let o=i.map(k=>k==="interval"?_.interval(t,n):_.point(t,n)),l=[...t.params||[],...o];return r.length>0&&i.includes("point")&&l.push(_.binColoring(n)),{...t,params:l}}function B(t){let e;try{e=S.getMarkType(t.mark)}catch{}if(e==="geoshape")return t;let n=t.params||[];return n.some(a=>a.bind==="scales")?t:{...t,params:[...n,_.panZoom()]}}function J(t){let e="encoding"in t?t.encoding:void 0,n=t.params||[],a=n.map(r=>r.name);return n.length===0||!S.isInteractive(t.mark)?t:{...t,mark:S.makeClickable(t.mark),encoding:$("opacity",e||{},a,t.mark)}}function Ot(t){switch(t){case"arc":case"area":return["point"];case"text":case"bar":return["point","interval"];case"line":return;default:return["point","interval"]}}async function _t(t){if(!t)return t;let e="datasets"in t?{...t.datasets}:{},n=async r=>{if(!r)return r;if("layer"in r){let l=await Promise.all(r.layer.map(n));r={...r,layer:l}}if("hconcat"in r){let l=await Promise.all(r.hconcat.map(n));r={...r,hconcat:l}}if("vconcat"in r){let l=await Promise.all(r.vconcat.map(n));r={...r,vconcat:l}}if("spec"in r&&(r={...r,spec:await n(r.spec)}),!r.data||!("url"in r.data))return r;let i;try{i=F(r.data.url)}catch{return r}let o=await nt(i.href,r.data.format);return e[i.pathname]=o,{...r,data:{name:i.pathname}}},a=await n(t);return Object.keys(e).length===0?a:{...a,datasets:e}}var d=Z(at(),1);mt("arrow",gt);var jt=t=>{let e=(0,yt.c)(12),{value:n,setValue:a,chartSelection:r,fieldSelection:i,spec:o,embedOptions:l}=t,k,s;e[0]===o?(k=e[1],s=e[2]):(k=async()=>_t(o),s=[o],e[0]=o,e[1]=k,e[2]=s);let{data:m,error:v}=ht(k,s);if(v){let p;return e[3]===v?p=e[4]:(p=(0,d.jsx)(dt,{error:v}),e[3]=v,e[4]=p),p}if(!m)return null;let w;return e[5]!==r||e[6]!==l||e[7]!==i||e[8]!==m||e[9]!==a||e[10]!==n?(w=(0,d.jsx)(Mt,{value:n,setValue:a,chartSelection:r,fieldSelection:i,spec:m,embedOptions:l}),e[5]=r,e[6]=l,e[7]=i,e[8]=m,e[9]=a,e[10]=n,e[11]=w):w=e[11],w},Mt=({value:t,setValue:e,chartSelection:n,fieldSelection:a,spec:r,embedOptions:i})=>{let{theme:o}=lt(),l=(0,x.useRef)(null),k=(0,x.useRef)(void 0),[s,m]=(0,x.useState)(),v=(0,x.useMemo)(()=>i&&"actions"in i?i.actions:{source:!1,compiled:!1},[i]),w=H(r),p=(0,x.useMemo)(()=>T(vt(w),{chartSelection:n,fieldSelection:a}),[w,n,a]),f=(0,x.useMemo)(()=>P(p),[p]),h=C(c=>{e({...t,...c})}),j=(0,x.useMemo)(()=>et((c,g)=>{O.debug("[Vega signal]",c,g);let b=V.mapValues(g,Pt);b=V.mapValues(b,Nt),h({[c]:b})},100),[h]),M=H(f),I=(0,x.useMemo)(()=>M.reduce((c,g)=>(y.PAN_ZOOM===g||y.isBinColoring(g)||c.push({signalName:g,handler:(b,X)=>j(b,X)}),c),[]),[M,j]),R=C(c=>{O.error(c),O.debug(p),m(c)}),Q=C(c=>{O.debug("[Vega view] created",c),k.current=c,m(void 0)}),U=()=>{let c=[];return y.hasPoint(f)&&c.push(["Point selection","click to select a point; hold shift for multi-select"]),y.hasInterval(f)&&c.push(["Interval selection","click and drag to select an interval"]),y.hasLegend(f)&&c.push(["Legend selection","click to select a legend item; hold shift for multi-select"]),y.hasPanZoom(f)&&c.push(["Pan","hold the meta key and drag"],["Zoom","hold the meta key and scroll"]),c.length===0?null:(0,d.jsx)(ct,{delayDuration:300,side:"left",content:(0,d.jsx)("div",{className:"text-xs flex flex-col",children:c.map((g,b)=>(0,d.jsxs)("div",{children:[(0,d.jsxs)("span",{className:"font-bold tracking-wide",children:[g[0],":"]})," ",g[1]]},b))}),children:(0,d.jsx)(ot,{className:"absolute bottom-1 right-0 m-2 h-4 w-4 cursor-help text-muted-foreground hover:text-foreground"})})},A=pt({ref:l,spec:p,options:{theme:o==="dark"?"dark":void 0,actions:v,mode:"vega-lite",tooltip:rt.call,renderer:"canvas"},onError:R,onEmbed:Q});return(0,x.useEffect)(()=>(I.forEach(({signalName:c,handler:g})=>{try{A==null||A.view.addSignalListener(c,g)}catch(b){O.error(b)}}),()=>{I.forEach(({signalName:c,handler:g})=>{try{A==null||A.view.removeSignalListener(c,g)}catch(b){O.error(b)}})}),[A,I]),(0,d.jsxs)(d.Fragment,{children:[s&&(0,d.jsxs)(ft,{variant:"destructive",children:[(0,d.jsx)(ut,{children:s.message}),(0,d.jsx)("div",{className:"text-md",children:s.stack})]}),(0,d.jsxs)("div",{className:"relative",onPointerDown:it.stopPropagation(),children:[(0,d.jsx)("div",{ref:l}),U()]})]})};function Nt(t){return t instanceof Set?[...t]:t}function Pt(t){return Array.isArray(t)?t.map(e=>e instanceof Date&&st(e)?new Date(e).getTime():e):t}var It=jt;export{It as default};