@marimo-team/frontend 0.18.5-dev187 → 0.18.5-dev194

package/dist/assets/session-panel-BJRncUge.js

@@ -0,0 +1 @@
+import{s as oe}from"./chunk-LvLJmgfZ.js";import{d as ce,i as Ve,l as Ee,p as me,u as J}from"./useEvent-DlWF5OMa.js";import{t as Oe}from"./react-BGmjiNul.js";import{A as Pe,An as ze,Bn as le,C as Ae,Dn as Ue,In as Re,Jt as ie,Kr as Ge,O as We,On as Ke,St as Je,Zn as He,a as Xe,cr as de,d as he,dr as ue,dt as Ze,er as xe,fn as Qe,hn as pe,ht as Ye,ir as ea,nr as fe,pn as aa,rr as ta,sr as be,tr as ge,ur as sa,xt as la,zn as na}from"./cells-Dk_j8HX9.js";import"./react-dom-C9fstfnp.js";import{t as ne}from"./compiler-runtime-DeeZ7FnK.js";import{i as ra}from"./useLifecycle-CmDXEyIC.js";import{t as je}from"./add-database-form-DkSxzOXk.js";import"./tooltip-CrRUCOBw.js";import{t as H}from"./sortBy-Bdnw8bdS.js";import{o as oa}from"./utils-CJJIceVn.js";import"./config-babG4OBR.js";import{t as ca}from"./ErrorBoundary-Drf1manw.js";import{t as ma}from"./jsx-runtime-DN_bIXfG.js";import{r as ia,t as X}from"./button-DuYGqRtX.js";import{t as B}from"./cn-C1rgT0yh.js";import"./dist-CAcX026F.js";import{B as da,I as Ne,L as ha,R as ua,k as re,z as xa}from"./JsonOutput-BCHaEg3R.js";import"./cjs-Bj40p_Np.js";import"./main-CwSdzVhm.js";import"./useNonce-EAuSVK-5.js";import{r as pa}from"./requests-C0HaHO6a.js";import{t as fa}from"./createLucideIcon-CW2xpJ57.js";import{h as ba}from"./select-D0g5GnIs.js";import"./download-Dsuja3On.js";import"./markdown-renderer-COkLQ1b5.js";import{t as ye}from"./plus-CHesBJpY.js";import{t as ga}from"./refresh-cw-Din9uFKE.js";import{a as ja}from"./input-CaEtLL8p.js";import{c as ve,d as we,f as Se,l as ae,n as Na,o as ya,p as va,u as Ce}from"./column-preview-MV5ZRt10.js";import{t as wa}from"./workflow-ZGK5flRg.js";import{t as Sa}from"./badge-DAnNhy3O.js";import"./dist-HGZzCB0y.js";import"./dist-CVj-_Iiz.js";import"./dist-BVf1IY4_.js";import"./dist-Cq_4nPfh.js";import"./dist-RKnr9SNh.js";import"./Combination-D1TsGrBC.js";import{t as te}from"./tooltip-CvjcEpZC.js";import"./dates-CdsE1R40.js";import{t as Ca}from"./context-BAYdLMF_.js";import"./popover-DtnzNVk-.js";import"./vega-loader.browser-C8wT63Va.js";import"./defaultLocale-BLUna9fQ.js";import"./defaultLocale-DzliDDTm.js";import{t as _a}from"./copy-icon-B69c-352.js";import"./purify.es-N-2faAGj.js";import{a as _e,i as ke,n as ka,r as $e}from"./multi-map-fjX9ImVF.js";import{t as Fe}from"./cell-link-DNVmmRzI.js";import{n as Te}from"./useAsyncData-BJJJOr9W.js";import{a as $a,o as se,t as Fa,u as Ta}from"./command-gUA-HncX.js";import"./chunk-OGVTOU66-CjNLT2C3.js";import"./katex-AwOI3EvM.js";import"./marked.esm-CHnOtnr3.js";import{r as Ia}from"./es-DjCjT1hB.js";import{o as qa}from"./focus-U1ePwk4d.js";import{a as Ba,i as La,n as Da,o as Ie,r as Ma,t as Va}from"./table--_20dwBZ.js";import{n as Ea}from"./icons-D4lB4En9.js";import{t as qe}from"./useAddCell-FisWjOQO.js";import{t as Oa}from"./empty-state-B0XJ9ZUi.js";import{n as Pa,t as za}from"./common-BWR26KIv.js";var Aa=fa("square-equal",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M7 10h10",key:"1101jm"}],["path",{d:"M7 14h10",key:"1mhdw3"}]]),C=oe(Oe(),1),Ua=ne(),t=oe(ma(),1);const Ra=a=>{let e=(0,Ua.c)(8),{variableName:s,className:l}=a,r;e[0]===s?r=e[1]:(r=()=>{let g=Ga(s);if(!g)return;let N=he(g);N&&ie(N,s)},e[0]=s,e[1]=r);let o=r,n;e[2]===l?n=e[3]:(n=B("text-link opacity-80 hover:opacity-100 hover:underline",l),e[2]=l,e[3]=n);let b;return e[4]!==o||e[5]!==n||e[6]!==s?(b=(0,t.jsx)("button",{type:"button",onClick:o,className:n,children:s}),e[4]=o,e[5]=n,e[6]=s,e[7]=b):b=e[7],b};function Ga(a){let e=Ve.get(pe)[a];if(e)return e.declaredBy[0]}var U=ne(),_={engineEmpty:"pl-3",engine:"pl-3 pr-2",database:"pl-4",schemaEmpty:"pl-8",schema:"pl-7",tableLoading:"pl-11",tableSchemaless:"pl-8",tableWithSchema:"pl-12",columnLocal:"pl-5",columnSql:"pl-13",columnPreview:"pl-10"},Wa=me(a=>{let e=a(fe),s=a(pe),l=a(Xe);return H(e,r=>{if(!r.variable_name)return-1;let o=Object.values(s).find(b=>b.name===r.variable_name);if(!o)return 0;let n=l.inOrderIds.indexOf(o.declaredBy[0]);return n===-1?0:n})});const Be=me(a=>{let e=new Map(a(He));for(let s of ue){let l=e.get(s);l&&(l.databases.length===0&&e.delete(s),l.databases.length===1&&l.databases[0].name==="memory"&&l.databases[0].schemas.length===0&&e.delete(s))}return H([...e.values()],s=>ue.has(s.name)?1:0)}),Ka=()=>{let a=(0,U.c)(32),[e,s]=C.useState(""),l=ce(ge),r=J(Wa),o=J(Be);if(r.length===0&&o.length===0){let p;return a[0]===Symbol.for("react.memo_cache_sentinel")?(p=(0,t.jsx)(Oa,{title:"No tables found",description:"Any datasets/dataframes in the global scope will be shown here.",action:(0,t.jsx)(je,{children:(0,t.jsxs)(X,{variant:"outline",size:"sm",children:["Add database or catalog",(0,t.jsx)(ye,{className:"h-4 w-4 ml-2"})]})}),icon:(0,t.jsx)(le,{})}),a[0]=p):p=a[0],p}let n=!!e.trim(),b;a[1]===l?b=a[2]:(b=p=>{l(p.length>0),s(p)},a[1]=l,a[2]=b);let g;a[3]!==e||a[4]!==b?(g=(0,t.jsx)($a,{placeholder:"Search tables...",className:"h-6 m-1",value:e,onValueChange:b,rootClassName:"flex-1 border-r border-b-0"}),a[3]=e,a[4]=b,a[5]=g):g=a[5];let N;a[6]===n?N=a[7]:(N=n&&(0,t.jsx)("button",{type:"button",className:"float-right border-b px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground",onClick:()=>s(""),children:(0,t.jsx)(ba,{className:"h-4 w-4"})}),a[6]=n,a[7]=N);let j;a[8]===Symbol.for("react.memo_cache_sentinel")?(j=(0,t.jsx)(je,{children:(0,t.jsx)(X,{variant:"ghost",size:"sm",className:"px-2 rounded-none focus-visible:outline-hidden",children:(0,t.jsx)(ye,{className:"h-4 w-4"})})}),a[8]=j):j=a[8];let i;a[9]!==g||a[10]!==N?(i=(0,t.jsxs)("div",{className:"flex items-center w-full border-b",children:[g,N,j]}),a[9]=g,a[10]=N,a[11]=i):i=a[11];let c;if(a[12]!==o||a[13]!==n||a[14]!==e){let p;a[16]!==n||a[17]!==e?(p=u=>(0,t.jsx)(Ja,{connection:u,hasChildren:u.databases.length>0,children:u.databases.map(f=>(0,t.jsx)(Ha,{engineName:u.name,database:f,hasSearch:n,children:(0,t.jsx)(Xa,{schemas:f.schemas,defaultSchema:u.default_schema,defaultDatabase:u.default_database,engineName:u.name,databaseName:f.name,hasSearch:n,searchValue:e,dialect:u.dialect})},f.name))},u.name),a[16]=n,a[17]=e,a[18]=p):p=a[18],c=o.map(p),a[12]=o,a[13]=n,a[14]=e,a[15]=c}else c=a[15];let d;a[19]!==o.length||a[20]!==r.length?(d=o.length>0&&r.length>0&&(0,t.jsxs)(ve,{className:_.engine,children:[(0,t.jsx)(Ea,{className:"h-4 w-4 text-muted-foreground"}),(0,t.jsx)("span",{className:"text-xs",children:"Python"})]}),a[19]=o.length,a[20]=r.length,a[21]=d):d=a[21];let x;a[22]!==e||a[23]!==r?(x=r.length>0&&(0,t.jsx)(Le,{tables:r,searchValue:e}),a[22]=e,a[23]=r,a[24]=x):x=a[24];let h;a[25]!==c||a[26]!==d||a[27]!==x?(h=(0,t.jsxs)(Ta,{className:"flex flex-col",children:[c,d,x]}),a[25]=c,a[26]=d,a[27]=x,a[28]=h):h=a[28];let m;return a[29]!==i||a[30]!==h?(m=(0,t.jsxs)(Fa,{className:"border-b bg-background rounded-none h-full pb-10 overflow-auto outline-hidden",shouldFilter:!1,children:[i,h]}),a[29]=i,a[30]=h,a[31]=m):m=a[31],m};var Ja=a=>{let e=(0,U.c)(26),{connection:s,children:l,hasChildren:r}=a,o=s.name===sa,n=o?"In-Memory":s.name,{previewDataSourceConnection:b}=pa(),[g,N]=C.useState(!1),j;e[0]!==s.name||e[1]!==b?(j=async()=>{N(!0),await b({engine:s.name}),setTimeout(()=>N(!1),500)},e[0]=s.name,e[1]=b,e[2]=j):j=e[2];let i=j,c;e[3]===s.dialect?c=e[4]:(c=(0,t.jsx)(Ze,{className:"h-4 w-4 text-muted-foreground",name:s.dialect}),e[3]=s.dialect,e[4]=c);let d;e[5]===s.dialect?d=e[6]:(d=Ue(s.dialect),e[5]=s.dialect,e[6]=d);let x;e[7]===d?x=e[8]:(x=(0,t.jsx)("span",{className:"text-xs",children:d}),e[7]=d,e[8]=x);let h=n,m;e[9]===h?m=e[10]:(m=(0,t.jsxs)("span",{className:"text-xs text-muted-foreground",children:["(",(0,t.jsx)(Ra,{variableName:h}),")"]}),e[9]=h,e[10]=m);let p;e[11]!==i||e[12]!==o||e[13]!==g?(p=!o&&(0,t.jsx)(te,{content:"Refresh connection",children:(0,t.jsx)(X,{variant:"ghost",size:"icon",className:"ml-auto hover:bg-transparent hover:shadow-none",onClick:i,children:(0,t.jsx)(ga,{className:B("h-4 w-4 text-muted-foreground hover:text-foreground",g&&"animate-[spin_0.5s]")})})}),e[11]=i,e[12]=o,e[13]=g,e[14]=p):p=e[14];let u;e[15]!==c||e[16]!==x||e[17]!==m||e[18]!==p?(u=(0,t.jsxs)(ve,{className:_.engine,children:[c,x,m,p]}),e[15]=c,e[16]=x,e[17]=m,e[18]=p,e[19]=u):u=e[19];let f;e[20]!==l||e[21]!==r?(f=r?l:(0,t.jsx)(ae,{content:"No databases available",className:_.engineEmpty}),e[20]=l,e[21]=r,e[22]=f):f=e[22];let y;return e[23]!==u||e[24]!==f?(y=(0,t.jsxs)(t.Fragment,{children:[u,f]}),e[23]=u,e[24]=f,e[25]=y):y=e[25],y},Ha=a=>{let e=(0,U.c)(26),{hasSearch:s,engineName:l,database:r,children:o}=a,[n,b]=C.useState(!1),[g,N]=C.useState(!1),[j,i]=C.useState(s);j!==s&&(i(s),b(s));let c;e[0]===Symbol.for("react.memo_cache_sentinel")?(c=B("text-sm flex flex-row gap-1 items-center cursor-pointer rounded-none",_.database),e[0]=c):c=e[0];let d;e[1]!==n||e[2]!==g?(d=()=>{b(!n),N(!g)},e[1]=n,e[2]=g,e[3]=d):d=e[3];let x=`${l}:${r.name}`,h;e[4]===n?h=e[5]:(h=(0,t.jsx)(Se,{isExpanded:n}),e[4]=n,e[5]=h);let m=g&&n?"text-foreground":"text-muted-foreground",p;e[6]===m?p=e[7]:(p=B("h-4 w-4",m),e[6]=m,e[7]=p);let u;e[8]===p?u=e[9]:(u=(0,t.jsx)(le,{className:p}),e[8]=p,e[9]=u);let f=g&&n&&"font-semibold",y;e[10]===f?y=e[11]:(y=B(f),e[10]=f,e[11]=y);let v;e[12]===r.name?v=e[13]:(v=r.name===""?(0,t.jsx)("i",{children:"Not connected"}):r.name,e[12]=r.name,e[13]=v);let w;e[14]!==v||e[15]!==y?(w=(0,t.jsx)("span",{className:y,children:v}),e[14]=v,e[15]=y,e[16]=w):w=e[16];let S;e[17]!==w||e[18]!==d||e[19]!==x||e[20]!==h||e[21]!==u?(S=(0,t.jsxs)(se,{className:c,onSelect:d,value:x,children:[h,u,w]}),e[17]=w,e[18]=d,e[19]=x,e[20]=h,e[21]=u,e[22]=S):S=e[22];let q=n&&o,k;return e[23]!==S||e[24]!==q?(k=(0,t.jsxs)(t.Fragment,{children:[S,q]}),e[23]=S,e[24]=q,e[25]=k):k=e[25],k},Xa=a=>{let e=(0,U.c)(22),{schemas:s,defaultSchema:l,defaultDatabase:r,dialect:o,engineName:n,databaseName:b,hasSearch:g,searchValue:N}=a;if(s.length===0){let c;return e[0]===Symbol.for("react.memo_cache_sentinel")?(c=(0,t.jsx)(ae,{content:"No schemas available",className:_.schemaEmpty}),e[0]=c):c=e[0],c}let j;if(e[1]!==b||e[2]!==r||e[3]!==l||e[4]!==o||e[5]!==n||e[6]!==g||e[7]!==s||e[8]!==N){let c;e[10]===N?c=e[11]:(c=h=>N?h.tables.some(m=>m.name.toLowerCase().includes(N.toLowerCase())):!0,e[10]=N,e[11]=c);let d=s.filter(c),x;e[12]!==b||e[13]!==r||e[14]!==l||e[15]!==o||e[16]!==n||e[17]!==g||e[18]!==N?(x=h=>(0,t.jsx)(Za,{databaseName:b,schema:h,hasSearch:g,children:(0,t.jsx)(Le,{tables:h.tables,searchValue:N,sqlTableContext:{engine:n,database:b,schema:h.name,defaultSchema:l,defaultDatabase:r,dialect:o}})},h.name),e[12]=b,e[13]=r,e[14]=l,e[15]=o,e[16]=n,e[17]=g,e[18]=N,e[19]=x):x=e[19],j=d.map(x),e[1]=b,e[2]=r,e[3]=l,e[4]=o,e[5]=n,e[6]=g,e[7]=s,e[8]=N,e[9]=j}else j=e[9];let i;return e[20]===j?i=e[21]:(i=(0,t.jsx)(t.Fragment,{children:j}),e[20]=j,e[21]=i),i},Za=a=>{let e=(0,U.c)(24),{databaseName:s,schema:l,children:r,hasSearch:o}=a,[n,b]=C.useState(o),[g,N]=C.useState(!1),j=`${s}:${l.name}`;if(be(l.name))return r;let i;e[0]===Symbol.for("react.memo_cache_sentinel")?(i=B("text-sm flex flex-row gap-1 items-center cursor-pointer rounded-none",_.schema),e[0]=i):i=e[0];let c;e[1]!==n||e[2]!==g?(c=()=>{b(!n),N(!g)},e[1]=n,e[2]=g,e[3]=c):c=e[3];let d;e[4]===n?d=e[5]:(d=(0,t.jsx)(Se,{isExpanded:n}),e[4]=n,e[5]=d);let x=g&&n&&"text-foreground",h;e[6]===x?h=e[7]:(h=B("h-4 w-4 text-muted-foreground",x),e[6]=x,e[7]=h);let m;e[8]===h?m=e[9]:(m=(0,t.jsx)(Re,{className:h}),e[8]=h,e[9]=m);let p=g&&n&&"font-semibold",u;e[10]===p?u=e[11]:(u=B(p),e[10]=p,e[11]=u);let f;e[12]!==l.name||e[13]!==u?(f=(0,t.jsx)("span",{className:u,children:l.name}),e[12]=l.name,e[13]=u,e[14]=f):f=e[14];let y;e[15]!==c||e[16]!==d||e[17]!==m||e[18]!==f||e[19]!==j?(y=(0,t.jsxs)(se,{className:i,onSelect:c,value:j,children:[d,m,f]}),e[15]=c,e[16]=d,e[17]=m,e[18]=f,e[19]=j,e[20]=y):y=e[20];let v=n&&r,w;return e[21]!==y||e[22]!==v?(w=(0,t.jsxs)(t.Fragment,{children:[y,v]}),e[21]=y,e[22]=v,e[23]=w):w=e[23],w},Le=a=>{let e=(0,U.c)(24),{tables:s,sqlTableContext:l,searchValue:r}=a,{addTableList:o}=xe(),[n,b]=C.useState(!1),[g,N]=C.useState(!1),j;e[0]!==o||e[1]!==l||e[2]!==s.length||e[3]!==n?(j=async()=>{if(s.length===0&&l&&!n){b(!0),N(!0);let{engine:m,database:p,schema:u}=l,f=await Je.request({engine:m,database:p,schema:u});if(!(f!=null&&f.tables))throw N(!1),Error("No tables available");o({tables:f.tables,sqlTableContext:l}),N(!1)}},e[0]=o,e[1]=l,e[2]=s.length,e[3]=n,e[4]=j):j=e[4];let i;e[5]!==l||e[6]!==s.length||e[7]!==n?(i=[s.length,l,n],e[5]=l,e[6]=s.length,e[7]=n,e[8]=i):i=e[8];let{isPending:c,error:d}=Te(j,i);if(c||g){let m;return e[9]===Symbol.for("react.memo_cache_sentinel")?(m=(0,t.jsx)(we,{message:"Loading tables...",className:_.tableLoading}),e[9]=m):m=e[9],m}if(d){let m;return e[10]===d?m=e[11]:(m=(0,t.jsx)(Ce,{error:d,className:_.tableLoading}),e[10]=d,e[11]=m),m}if(s.length===0){let m;return e[12]===Symbol.for("react.memo_cache_sentinel")?(m=(0,t.jsx)(ae,{content:"No tables found",className:_.tableLoading}),e[12]=m):m=e[12],m}let x;if(e[13]!==r||e[14]!==l||e[15]!==s){let m;e[17]===r?m=e[18]:(m=f=>r?f.name.toLowerCase().includes(r.toLowerCase()):!0,e[17]=r,e[18]=m);let p=s.filter(m),u;e[19]!==r||e[20]!==l?(u=f=>(0,t.jsx)(Qa,{table:f,sqlTableContext:l,isSearching:!!r},f.name),e[19]=r,e[20]=l,e[21]=u):u=e[21],x=p.map(u),e[13]=r,e[14]=l,e[15]=s,e[16]=x}else x=e[16];let h;return e[22]===x?h=e[23]:(h=(0,t.jsx)(t.Fragment,{children:x}),e[22]=x,e[23]=h),h},Qa=a=>{let e=(0,U.c)(64),{table:s,sqlTableContext:l,isSearching:r}=a,{addTable:o}=xe(),[n,b]=C.useState(!1),[g,N]=C.useState(!1),j=s.columns.length>0,i;e[0]!==o||e[1]!==n||e[2]!==l||e[3]!==s.name||e[4]!==j||e[5]!==g?(i=async()=>{if(n&&!j&&l&&!g){N(!0);let{engine:M,database:Y,schema:Me}=l,ee=await la.request({engine:M,database:Y,schema:Me,tableName:s.name});if(!(ee!=null&&ee.table))throw Error("No table details available");o({table:ee.table,sqlTableContext:l})}},e[0]=o,e[1]=n,e[2]=l,e[3]=s.name,e[4]=j,e[5]=g,e[6]=i):i=e[6];let c;e[7]!==n||e[8]!==j?(c=[n,j],e[7]=n,e[8]=j,e[9]=c):c=e[9];let{isFetching:d,isPending:x,error:h}=Te(i,c),m=J(oa),p=qa(),{createNewCell:u}=Ae(),f=qe(),y;e[10]!==f||e[11]!==m||e[12]!==u||e[13]!==p||e[14]!==l||e[15]!==s?(y=()=>{Ia({autoInstantiate:m,createNewCell:u,fromCellId:p}),f((()=>{if(s.source_type==="catalog"){let M=l!=null&&l.database?`${l.database}.${s.name}`:s.name;return`${s.engine}.load_table("${M}")`}if(l)return de({table:s,columnName:"*",sqlTableContext:l});switch(s.source_type){case"local":return`mo.ui.table(${s.name})`;case"duckdb":case"connection":return de({table:s,columnName:"*",sqlTableContext:l});default:return ra(s.source_type),""}})())},e[10]=f,e[11]=m,e[12]=u,e[13]=p,e[14]=l,e[15]=s,e[16]=y):y=e[16];let v=y,w;e[17]!==s.num_columns||e[18]!==s.num_rows?(w=()=>{let M=[];return s.num_rows!=null&&M.push(`${s.num_rows} rows`),s.num_columns!=null&&M.push(`${s.num_columns} columns`),M.length===0?null:(0,t.jsx)("div",{className:"flex flex-row gap-2 items-center pl-6 group-hover:hidden",children:(0,t.jsx)("span",{className:"text-xs text-muted-foreground",children:M.join(", ")})})},e[17]=s.num_columns,e[18]=s.num_rows,e[19]=w):w=e[19];let S=w,q;e[20]!==h||e[21]!==d||e[22]!==x||e[23]!==l||e[24]!==s?(q=()=>{if(x||d)return(0,t.jsx)(we,{message:"Loading columns...",className:_.tableLoading});if(h)return(0,t.jsx)(Ce,{error:h,className:_.tableLoading});let M=s.columns;return M.length===0?(0,t.jsx)(ae,{content:"No columns found",className:_.tableLoading}):M.map(Y=>(0,t.jsx)(Ya,{table:s,column:Y,sqlTableContext:l},Y.name))},e[20]=h,e[21]=d,e[22]=x,e[23]=l,e[24]=s,e[25]=q):q=e[25];let k=q,L;e[26]!==n||e[27]!==r||e[28]!==s.source_type||e[29]!==s.type?(L=()=>{if(s.source_type!=="local")return(0,t.jsx)(s.type==="table"?ze:na,{className:"h-3 w-3",strokeWidth:n||r?2.5:void 0})},e[26]=n,e[27]=r,e[28]=s.source_type,e[29]=s.type,e[30]=L):L=e[30];let V=L,E=l?`${l.database}.${l.schema}.${s.name}`:s.name,O=l&&(be(l.schema)?_.tableSchemaless:_.tableWithSchema),P=(n||r)&&"font-semibold",$;e[31]!==O||e[32]!==P?($=B("rounded-none group h-8 cursor-pointer",O,P),e[31]=O,e[32]=P,e[33]=$):$=e[33];let F;e[34]===n?F=e[35]:(F=()=>b(!n),e[34]=n,e[35]=F);let T;e[36]===V?T=e[37]:(T=V(),e[36]=V,e[37]=T);let D;e[38]===s.name?D=e[39]:(D=(0,t.jsx)("span",{className:"text-sm",children:s.name}),e[38]=s.name,e[39]=D);let z;e[40]!==T||e[41]!==D?(z=(0,t.jsxs)("div",{className:"flex gap-2 items-center flex-1 pl-1",children:[T,D]}),e[40]=T,e[41]=D,e[42]=z):z=e[42];let A;e[43]===S?A=e[44]:(A=S(),e[43]=S,e[44]=A);let I;e[45]===v?I=e[46]:(I=ia.stopPropagation(()=>v()),e[45]=v,e[46]=I);let Z;e[47]===Symbol.for("react.memo_cache_sentinel")?(Z=(0,t.jsx)(va,{className:"h-3 w-3"}),e[47]=Z):Z=e[47];let G;e[48]===I?G=e[49]:(G=(0,t.jsx)(te,{content:"Add table to notebook",delayDuration:400,children:(0,t.jsx)(X,{className:"group-hover:inline-flex hidden",variant:"text",size:"icon",onClick:I,children:Z})}),e[48]=I,e[49]=G);let W;e[50]!==n||e[51]!==F||e[52]!==z||e[53]!==A||e[54]!==G||e[55]!==$||e[56]!==E?(W=(0,t.jsxs)(se,{className:$,value:E,"aria-selected":n,forceMount:!0,onSelect:F,children:[z,A,G]}),e[50]=n,e[51]=F,e[52]=z,e[53]=A,e[54]=G,e[55]=$,e[56]=E,e[57]=W):W=e[57];let K;e[58]!==n||e[59]!==k?(K=n&&k(),e[58]=n,e[59]=k,e[60]=K):K=e[60];let Q;return e[61]!==W||e[62]!==K?(Q=(0,t.jsxs)(t.Fragment,{children:[W,K]}),e[61]=W,e[62]=K,e[63]=Q):Q=e[63],Q},Ya=a=>{var z,A;let e=(0,U.c)(48),{table:s,column:l,sqlTableContext:r}=a,[o,n]=C.useState(!1),b=J(ge),g=ce(ta);b&&o&&n(!1),g(o?I=>new Set([...I,`${s.name}:${l.name}`]):I=>(I.delete(`${s.name}:${l.name}`),new Set(I)));let N=qe(),{columnsPreviews:j}=ea(),i;e[0]!==l.name||e[1]!==s.primary_keys?(i=((z=s.primary_keys)==null?void 0:z.includes(l.name))||!1,e[0]=l.name,e[1]=s.primary_keys,e[2]=i):i=e[2];let c=i,d;e[3]!==l.name||e[4]!==s.indexes?(d=((A=s.indexes)==null?void 0:A.includes(l.name))||!1,e[3]=l.name,e[4]=s.indexes,e[5]=d):d=e[5];let x=d,h;e[6]===N?h=e[7]:(h=I=>{N(I)},e[6]=N,e[7]=h);let m=h,p=et,u=o?"font-semibold":"",f;e[8]!==l.name||e[9]!==u?(f=(0,t.jsx)("span",{className:u,children:l.name}),e[8]=l.name,e[9]=u,e[10]=f):f=e[10];let y=f,v=`${s.name}.${l.name}`,w=`${s.name}.${l.name}`,S;e[11]===o?S=e[12]:(S=()=>n(!o),e[11]=o,e[12]=S);let q=r?_.columnSql:_.columnLocal,k;e[13]===q?k=e[14]:(k=B("flex flex-row gap-2 items-center flex-1",q),e[13]=q,e[14]=k);let L;e[15]!==l.type||e[16]!==y?(L=(0,t.jsx)(ya,{columnName:y,dataType:l.type}),e[15]=l.type,e[16]=y,e[17]=L):L=e[17];let V;e[18]===c?V=e[19]:(V=c&&p({tooltipContent:"Primary key",content:"PK"}),e[18]=c,e[19]=V);let E;e[20]===x?E=e[21]:(E=x&&p({tooltipContent:"Indexed",content:"IDX"}),e[20]=x,e[21]=E);let O;e[22]!==k||e[23]!==L||e[24]!==V||e[25]!==E?(O=(0,t.jsxs)("div",{className:k,children:[L,V,E]}),e[22]=k,e[23]=L,e[24]=V,e[25]=E,e[26]=O):O=e[26];let P;e[27]===l.name?P=e[28]:(P=(0,t.jsx)(te,{content:"Copy column name",delayDuration:400,children:(0,t.jsx)(X,{variant:"text",size:"icon",className:"group-hover:opacity-100 opacity-0 hover:bg-muted text-muted-foreground hover:text-foreground",children:(0,t.jsx)(_a,{tooltip:!1,value:l.name,className:"h-3 w-3"})})}),e[27]=l.name,e[28]=P);let $;e[29]===l.external_type?$=e[30]:($=(0,t.jsx)("span",{className:"text-xs text-muted-foreground",children:l.external_type}),e[29]=l.external_type,e[30]=$);let F;e[31]!==O||e[32]!==P||e[33]!==$||e[34]!==v||e[35]!==w||e[36]!==S?(F=(0,t.jsxs)(se,{className:"rounded-none py-1 group cursor-pointer",value:w,onSelect:S,children:[O,P,$]},v),e[31]=O,e[32]=P,e[33]=$,e[34]=v,e[35]=w,e[36]=S,e[37]=F):F=e[37];let T;e[38]!==l||e[39]!==j||e[40]!==m||e[41]!==o||e[42]!==r||e[43]!==s?(T=o&&(0,t.jsx)("div",{className:B(_.columnPreview,"pr-2 py-2 bg-(--slate-1) shadow-inner border-b"),children:(0,t.jsx)(ca,{children:(0,t.jsx)(Na,{table:s,column:l,onAddColumnChart:m,preview:j.get(r?`${r.database}.${r.schema}.${s.name}:${l.name}`:`${s.name}:${l.name}`),sqlTableContext:r})})}),e[38]=l,e[39]=j,e[40]=m,e[41]=o,e[42]=r,e[43]=s,e[44]=T):T=e[44];let D;return e[45]!==F||e[46]!==T?(D=(0,t.jsxs)(t.Fragment,{children:[F,T]}),e[45]=F,e[46]=T,e[47]=D):D=e[47],D};function et(a){let{tooltipContent:e,content:s}=a;return(0,t.jsx)(te,{content:e,delayDuration:100,children:(0,t.jsx)("span",{className:"text-xs text-black bg-gray-100 dark:invert rounded px-1",children:s})})}function xs(a){return a}var R={name:"name",type:"type-value",defs:"defs-refs"},at=[{id:R.name,accessorFn:a=>[a.name,a.declaredBy],enableSorting:!0,sortingFn:"alphanumeric",header:({column:a})=>(0,t.jsx)(re,{header:"Name",column:a}),cell:({getValue:a})=>{let[e,s]=a();return(0,t.jsx)(za,{name:e,declaredBy:s})}},{id:R.type,accessorFn:a=>[a.dataType,a.value],enableSorting:!0,sortingFn:"alphanumeric",header:({column:a})=>(0,t.jsx)(re,{header:(0,t.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,t.jsx)("span",{children:"Type"}),(0,t.jsx)("span",{children:"Value"})]}),column:a}),cell:({getValue:a})=>{let[e,s]=a();return(0,t.jsxs)("div",{className:"max-w-[150px]",children:[(0,t.jsx)("div",{className:"text-ellipsis overflow-hidden whitespace-nowrap text-muted-foreground font-mono text-xs",children:e}),(0,t.jsx)("div",{className:"text-ellipsis overflow-hidden whitespace-nowrap",title:s??"",children:s})]})}},{id:R.defs,accessorFn:a=>[a.declaredBy,a.usedBy,a.name,a.declaredByNames,a.usedByNames],enableSorting:!0,sortingFn:"basic",header:({column:a})=>(0,t.jsx)(re,{header:(0,t.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,t.jsx)("span",{children:"Declared By"}),(0,t.jsx)("span",{children:"Used By"})]}),column:a}),cell:({getValue:a})=>{let[e,s,l]=a(),r=o=>{let n=he(o);n&&ie(n,l)};return(0,t.jsxs)("div",{className:"flex flex-col gap-1 py-1",children:[(0,t.jsxs)("div",{className:"flex flex-row overflow-auto gap-2 items-center",children:[(0,t.jsx)("span",{title:"Declared by",children:(0,t.jsx)(Aa,{className:"w-3.5 h-3.5 text-muted-foreground"})}),e.length===1?(0,t.jsx)(Fe,{variant:"focus",cellId:e[0],skipScroll:!0,onClick:()=>r(e[0])}):(0,t.jsx)("div",{className:"text-destructive flex flex-row gap-2",children:e.slice(0,3).map((o,n)=>(0,t.jsxs)("span",{className:"flex",children:[(0,t.jsx)(Fe,{variant:"focus",cellId:o,skipScroll:!0,className:"whitespace-nowrap text-destructive",onClick:()=>r(o)},o),n<e.length-1&&", "]},o))})]}),(0,t.jsxs)("div",{className:"flex flex-row overflow-auto gap-2 items-baseline",children:[(0,t.jsx)("span",{title:"Used by",children:(0,t.jsx)(wa,{className:"w-3.5 h-3.5 text-muted-foreground"})}),(0,t.jsx)(Pa,{maxCount:3,cellIds:s,skipScroll:!0,onClick:r})]})]})}}];function tt({variables:a,sort:e,cellIdToIndex:s}){e||(e={id:R.defs,desc:!1});let l=[];switch(e.id){case R.name:l=H(a,r=>r.name);break;case R.type:l=H(a,r=>r.dataType);break;case R.defs:l=H(a,r=>s.get(r.declaredBy[0]));break}return e.desc?l.reverse():l}const De=(0,C.memo)(({className:a,cellIds:e,variables:s})=>{let[l,r]=C.useState([]),[o,n]=C.useState(""),b=Pe(),{locale:g}=Ca(),N=(0,C.useMemo)(()=>{let i=c=>{let d=b[c];return Ye(d)?`cell-${e.indexOf(c)}`:d??`cell-${e.indexOf(c)}`};return Object.values(s).map(c=>({...c,declaredByNames:c.declaredBy.map(i),usedByNames:c.usedBy.map(i)}))},[s,b,e]),j=ha({data:(0,C.useMemo)(()=>{let i=new Map;return e.forEach((c,d)=>i.set(c,d)),tt({variables:N,sort:l[0],cellIdToIndex:i})},[N,l,e]),columns:at,getCoreRowModel:ua(),onGlobalFilterChange:n,getFilteredRowModel:xa(),enableFilters:!0,enableGlobalFilter:!0,enableColumnPinning:!1,getColumnCanGlobalFilter(i){return i.columnDef.enableGlobalFilter??!0},globalFilterFn:"auto",manualSorting:!0,locale:g,onSortingChange:r,getSortedRowModel:da(),state:{sorting:l,globalFilter:o}});return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(ja,{className:"w-full",placeholder:"Search",value:o,onChange:i=>n(i.target.value)}),(0,t.jsxs)(Va,{className:B("w-full text-sm flex-1 border-separate border-spacing-0",a),children:[(0,t.jsx)(Ba,{children:(0,t.jsx)(Ie,{className:"whitespace-nowrap text-xs",children:j.getFlatHeaders().map(i=>(0,t.jsx)(La,{className:"sticky top-0 bg-background border-b",children:Ne(i.column.columnDef.header,i.getContext())},i.id))})}),(0,t.jsx)(Da,{children:j.getRowModel().rows.map(i=>(0,t.jsx)(Ie,{className:"hover:bg-accent",children:i.getVisibleCells().map(c=>(0,t.jsx)(Ma,{className:"border-b",children:Ne(c.column.columnDef.cell,c.getContext())},c.id))},i.id))})]})]})});De.displayName="VariableTable";var st=ne(),lt=Ge("marimo:session-panel:state",{openSections:["variables"],hasUserInteracted:!1},Qe),nt=()=>{let a=(0,st.c)(24),e=aa(),s=We(),l=J(fe),r=J(Be),[o,n]=Ee(lt),b=l.length+r.length,g;a[0]!==b||a[1]!==o.hasUserInteracted||a[2]!==o.openSections?(g=!o.hasUserInteracted&&b>0?[...new Set([...o.openSections,"datasources"])]:o.openSections,a[0]=b,a[1]=o.hasUserInteracted,a[2]=o.openSections,a[3]=g):g=a[3];let N=g,j;a[4]===n?j=a[5]:(j=v=>{n({openSections:v,hasUserInteracted:!0})},a[4]=n,a[5]=j);let i=j,c=!N.includes("datasources")&&b>0,d;a[6]===Symbol.for("react.memo_cache_sentinel")?(d=(0,t.jsx)(le,{className:"w-4 h-4"}),a[6]=d):d=a[6];let x;a[7]!==b||a[8]!==c?(x=c&&(0,t.jsx)(Sa,{variant:"secondary",className:"ml-1 px-1.5 py-0 mb-px text-[10px]",children:b}),a[7]=b,a[8]=c,a[9]=x):x=a[9];let h;a[10]===x?h=a[11]:(h=(0,t.jsx)(_e,{className:"px-3 py-2 text-xs font-semibold uppercase tracking-wide hover:no-underline",children:(0,t.jsxs)("span",{className:"flex items-center gap-2",children:[d,"Data sources",x]})}),a[10]=x,a[11]=h);let m;a[12]===Symbol.for("react.memo_cache_sentinel")?(m=(0,t.jsx)($e,{wrapperClassName:"p-0",children:(0,t.jsx)(Ka,{})}),a[12]=m):m=a[12];let p;a[13]===h?p=a[14]:(p=(0,t.jsxs)(ke,{value:"datasources",className:"border-b",children:[h,m]}),a[13]=h,a[14]=p);let u;a[15]===Symbol.for("react.memo_cache_sentinel")?(u=(0,t.jsx)(_e,{className:"px-3 py-2 text-xs font-semibold uppercase tracking-wide hover:no-underline",children:(0,t.jsxs)("span",{className:"flex items-center gap-2",children:[(0,t.jsx)(Ke,{className:"w-4 h-4"}),"Variables"]})}),a[15]=u):u=a[15];let f;a[16]!==s||a[17]!==e?(f=(0,t.jsxs)(ke,{value:"variables",className:"border-b-0",children:[u,(0,t.jsx)($e,{wrapperClassName:"p-0",children:Object.keys(e).length===0?(0,t.jsx)("div",{className:"px-3 py-4 text-sm text-muted-foreground",children:"No variables defined"}):(0,t.jsx)(De,{cellIds:s.inOrderIds,variables:e})})]}),a[16]=s,a[17]=e,a[18]=f):f=a[18];let y;return a[19]!==i||a[20]!==N||a[21]!==p||a[22]!==f?(y=(0,t.jsxs)(ka,{type:"multiple",value:N,onValueChange:i,className:"flex flex-col h-full overflow-auto",children:[p,f]}),a[19]=i,a[20]=N,a[21]=p,a[22]=f,a[23]=y):y=a[23],y};export{nt 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-DuCNx6yI.js"></script>
+    <script type="module" crossorigin src="./assets/index-CRAfQZSQ.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-BW0IMuFq.js">
     <link rel="modulepreload" crossorigin href="./assets/hotkeys-uKX61F1_.js">
     <link rel="modulepreload" crossorigin href="./assets/defaultLocale-BLUna9fQ.js">
@@ -213,7 +213,7 @@
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-D42sFB6d.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-DxXFdbn8.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-qp_XZeSS.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-Cqovvoyb.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-MV5ZRt10.js">
     <link rel="modulepreload" crossorigin href="./assets/switch-Cd5iA-KH.js">
     <link rel="modulepreload" crossorigin href="./assets/toggle-G1t0cQyf.js">
     <link rel="modulepreload" crossorigin href="./assets/globals-BBskDqJi.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-BIeqDcea.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-CoU35QpZ.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

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

package/src/components/datasources/components.tsx

@@ -15,9 +15,15 @@ export const RotatingChevron: React.FC<{ isExpanded: boolean }> = ({
 
 export const DatasourceLabel: React.FC<{
   children: React.ReactNode;
-}> = ({ children }) => {
+  className?: string;
+}> = ({ children, className }) => {
   return (
-    <div className="flex gap-1.5 items-center font-bold px-2 py-1.5 text-muted-foreground bg-(--slate-2) text-sm">
+    <div
+      className={cn(
+        "flex gap-1.5 items-center font-bold py-1.5 text-muted-foreground bg-(--slate-2) text-sm",
+        className,
+      )}
+    >
       {children}
     </div>
   );

package/src/components/datasources/datasources.tsx

@@ -72,6 +72,21 @@ import {
 } from "./components";
 import { isSchemaless, sqlCode } from "./utils";
 
+// Indentation classes for the datasource tree hierarchy.
+const INDENT = {
+  engineEmpty: "pl-3",
+  engine: "pl-3 pr-2",
+  database: "pl-4",
+  schemaEmpty: "pl-8",
+  schema: "pl-7",
+  tableLoading: "pl-11",
+  tableSchemaless: "pl-8",
+  tableWithSchema: "pl-12",
+  columnLocal: "pl-5",
+  columnSql: "pl-13",
+  columnPreview: "pl-10",
+};
+
 const sortedTablesAtom = atom((get) => {
   const tables = get(datasetTablesAtom);
   const variables = get(variablesAtom);
@@ -98,7 +113,11 @@ const sortedTablesAtom = atom((get) => {
   });
 });
 
-const connectionsAtom = atom((get) => {
+/**
+ * This atom is used to get the data connections that are available to the user.
+ * It filters out the internal engines if it has no databases or if it has only the in-memory database and no schemas.
+ */
+export const connectionsAtom = atom((get) => {
   const dataConnections = new Map(get(dataConnectionsMapAtom));
 
   // Filter out the internal engines if it has no databases
@@ -160,7 +179,7 @@ export const DataSources: React.FC = () => {
       className="border-b bg-background rounded-none h-full pb-10 overflow-auto outline-hidden"
       shouldFilter={false}
     >
-      <div className="flex items-center w-full">
+      <div className="flex items-center w-full border-b">
         <CommandInput
           placeholder="Search tables..."
           className="h-6 m-1"
@@ -170,7 +189,7 @@ export const DataSources: React.FC = () => {
             closeAllColumns(value.length > 0);
             setSearchValue(value);
           }}
-          rootClassName="flex-1 border-r"
+          rootClassName="flex-1 border-r border-b-0"
         />
         {hasSearch && (
           <button
@@ -183,12 +202,13 @@ export const DataSources: React.FC = () => {
         )}
 
         <AddDatabaseDialog>
-          <button
-            type="button"
-            className="float-right border-b px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground"
+          <Button
+            variant="ghost"
+            size="sm"
+            className="px-2 rounded-none focus-visible:outline-hidden"
           >
             <PlusIcon className="h-4 w-4" />
-          </button>
+          </Button>
         </AddDatabaseDialog>
       </div>
 
@@ -222,7 +242,7 @@ export const DataSources: React.FC = () => {
         ))}
 
         {dataConnections.length > 0 && tables.length > 0 && (
-          <DatasourceLabel>
+          <DatasourceLabel className={INDENT.engine}>
             <PythonIcon className="h-4 w-4 text-muted-foreground" />
             <span className="text-xs">Python</span>
           </DatasourceLabel>
@@ -258,7 +278,7 @@ const Engine: React.FC<{
 
   return (
     <>
-      <DatasourceLabel>
+      <DatasourceLabel className={INDENT.engine}>
         <DatabaseLogo
           className="h-4 w-4 text-muted-foreground"
           name={connection.dialect}
@@ -288,7 +308,10 @@ const Engine: React.FC<{
       {hasChildren ? (
         children
       ) : (
-        <EmptyState content="No databases available" className="pl-2" />
+        <EmptyState
+          content="No databases available"
+          className={INDENT.engineEmpty}
+        />
       )}
     </>
   );
@@ -312,7 +335,10 @@ const DatabaseItem: React.FC<{
   return (
     <>
       <CommandItem
-        className="text-sm flex flex-row gap-1 items-center cursor-pointer rounded-none"
+        className={cn(
+          "text-sm flex flex-row gap-1 items-center cursor-pointer rounded-none",
+          INDENT.database,
+        )}
         onSelect={() => {
           setIsExpanded(!isExpanded);
           setIsSelected(!isSelected);
@@ -357,7 +383,12 @@ const SchemaList: React.FC<{
   searchValue,
 }) => {
   if (schemas.length === 0) {
-    return <EmptyState content="No schemas available" className="pl-6" />;
+    return (
+      <EmptyState
+        content="No schemas available"
+        className={INDENT.schemaEmpty}
+      />
+    );
   }
 
   const filteredSchemas = schemas.filter((schema) => {
@@ -413,7 +444,10 @@ const SchemaItem: React.FC<{
   return (
     <>
       <CommandItem
-        className="text-sm flex flex-row gap-1 items-center pl-5 cursor-pointer rounded-none"
+        className={cn(
+          "text-sm flex flex-row gap-1 items-center cursor-pointer rounded-none",
+          INDENT.schema,
+        )}
         onSelect={() => {
           setIsExpanded(!isExpanded);
           setIsSelected(!isSelected);
@@ -474,15 +508,22 @@ const TableList: React.FC<{
   }, [tables.length, sqlTableContext, tablesRequested]);
 
   if (isPending || tablesLoading) {
-    return <LoadingState message="Loading tables..." className="pl-12" />;
+    return (
+      <LoadingState
+        message="Loading tables..."
+        className={INDENT.tableLoading}
+      />
+    );
   }
 
   if (error) {
-    return <ErrorState error={error} className="pl-12" />;
+    return <ErrorState error={error} className={INDENT.tableLoading} />;
   }
 
   if (tables.length === 0) {
-    return <EmptyState content="No tables found" className="pl-9" />;
+    return (
+      <EmptyState content="No tables found" className={INDENT.tableLoading} />
+    );
   }
 
   const filteredTables = tables.filter((table) => {
@@ -607,17 +648,27 @@ const DatasetTableItem: React.FC<{
 
   const renderColumns = () => {
     if (isPending || isFetching) {
-      return <LoadingState message="Loading columns..." className="pl-12" />;
+      return (
+        <LoadingState
+          message="Loading columns..."
+          className={INDENT.tableLoading}
+        />
+      );
     }
 
     if (error) {
-      return <ErrorState error={error} className="pl-12" />;
+      return <ErrorState error={error} className={INDENT.tableLoading} />;
     }
 
     const columns = table.columns;
 
     if (columns.length === 0) {
-      return <EmptyState content="No columns found" className="pl-12" />;
+      return (
+        <EmptyState
+          content="No columns found"
+          className={INDENT.tableLoading}
+        />
+      );
     }
 
     return columns.map((column) => (
@@ -654,7 +705,9 @@ const DatasetTableItem: React.FC<{
         className={cn(
           "rounded-none group h-8 cursor-pointer",
           sqlTableContext &&
-            (isSchemaless(sqlTableContext.schema) ? "pl-9" : "pl-12"),
+            (isSchemaless(sqlTableContext.schema)
+              ? INDENT.tableSchemaless
+              : INDENT.tableWithSchema),
           (isExpanded || isSearching) && "font-semibold",
         )}
         value={uniqueId}
@@ -662,7 +715,7 @@ const DatasetTableItem: React.FC<{
         forceMount={true}
         onSelect={() => setIsExpanded(!isExpanded)}
       >
-        <div className="flex gap-2 items-center flex-1">
+        <div className="flex gap-2 items-center flex-1 pl-1">
           {renderTableType()}
           <span className="text-sm">{table.name}</span>
         </div>
@@ -748,7 +801,7 @@ const DatasetColumnItem: React.FC<{
         <div
           className={cn(
             "flex flex-row gap-2 items-center flex-1",
-            sqlTableContext ? "pl-14" : "pl-7",
+            sqlTableContext ? INDENT.columnSql : INDENT.columnLocal,
           )}
         >
           <ColumnName columnName={columnText} dataType={column.type} />
@@ -775,7 +828,12 @@ const DatasetColumnItem: React.FC<{
         </span>
       </CommandItem>
       {isExpanded && (
-        <div className="pl-10 pr-2 py-2 bg-(--slate-1) shadow-inner border-b">
+        <div
+          className={cn(
+            INDENT.columnPreview,
+            "pr-2 py-2 bg-(--slate-1) shadow-inner border-b",
+          )}
+        >
           <ErrorBoundary>
             <DatasetColumnPreview
               table={table}

package/src/components/editor/chrome/panels/session-panel.tsx

@@ -1,10 +1,13 @@
-/* Copyright 2024 Marimo. All rights reserved. */
+/* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { DatabaseIcon, VariableIcon } from "lucide-react";
-import React from "react";
-import { DataSources } from "@/components/datasources/datasources";
+import React, { useCallback } from "react";
+import {
+  connectionsAtom,
+  DataSources,
+} from "@/components/datasources/datasources";
 import {
   Accordion,
   AccordionContent,
@@ -14,30 +17,56 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { VariableTable } from "@/components/variables/variables-table";
 import { useCellIds } from "@/core/cells/cells";
-import { useDatasets } from "@/core/datasets/state";
+import { datasetTablesAtom } from "@/core/datasets/state";
 import { useVariables } from "@/core/variables/state";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
 
-const openSectionsAtom = atomWithStorage<string[]>(
-  "marimo:session-panel:open-sections",
-  ["variables"],
+type OpenSections = "variables" | "datasources";
+
+interface SessionPanelState {
+  openSections: OpenSections[];
+  hasUserInteracted: boolean;
+}
+
+const sessionPanelAtom = atomWithStorage<SessionPanelState>(
+  "marimo:session-panel:state",
+  { openSections: ["variables"], hasUserInteracted: false },
   jotaiJsonStorage,
 );
 
 const SessionPanel: React.FC = () => {
   const variables = useVariables();
   const cellIds = useCellIds();
-  const datasets = useDatasets();
-  const [openSections, setOpenSections] = useAtom(openSectionsAtom);
+  const tables = useAtomValue(datasetTablesAtom);
+  const dataConnections = useAtomValue(connectionsAtom);
+  const [state, setState] = useAtom(sessionPanelAtom);
+
+  const datasourcesCount = tables.length + dataConnections.length;
+
+  // If the user hasn't interacted with the accordion and there are connections, show datasources open
+  const openSections =
+    !state.hasUserInteracted && datasourcesCount > 0
+      ? [...new Set([...state.openSections, "datasources"])]
+      : state.openSections;
+
+  const handleValueChange = useCallback(
+    (value: OpenSections[]) => {
+      setState({
+        openSections: value,
+        hasUserInteracted: true,
+      });
+    },
+    [setState],
+  );
 
-  const datasourcesCount = datasets.tables.length;
   const isDatasourcesOpen = openSections.includes("datasources");
+  const showDatasourcesBadge = !isDatasourcesOpen && datasourcesCount > 0;
 
   return (
     <Accordion
       type="multiple"
       value={openSections}
-      onValueChange={setOpenSections}
+      onValueChange={handleValueChange}
       className="flex flex-col h-full overflow-auto"
     >
       <AccordionItem value="datasources" className="border-b">
@@ -45,10 +74,10 @@ const SessionPanel: React.FC = () => {
           <span className="flex items-center gap-2">
             <DatabaseIcon className="w-4 h-4" />
             Data sources
-            {!isDatasourcesOpen && datasourcesCount > 0 && (
+            {showDatasourcesBadge && (
               <Badge
                 variant="secondary"
-                className="ml-1 px-1.5 py-0 text-[10px]"
+                className="ml-1 px-1.5 py-0 mb-px text-[10px]"
               >
                 {datasourcesCount}
               </Badge>

package/src/components/editor/chrome/wrapper/footer.tsx

@@ -9,7 +9,7 @@ import { cellErrorCount } from "@/core/cells/cells";
 import { isConnectingAtom } from "@/core/network/connection";
 import { useHotkey } from "@/hooks/useHotkey";
 import { ShowInKioskMode } from "../../kiosk-mode";
-import { useChromeActions, useChromeState } from "../state";
+import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
 import { FooterItem } from "./footer-item";
 import { AIStatusIcon } from "./footer-items/ai-status";
 import {
@@ -29,11 +29,15 @@ export const Footer: React.FC = () => {
 
   const errorCount = useAtomValue(cellErrorCount);
   const connectionStatus = useAtomValue(connectionStatusAtom);
+  const panelLayout = useAtomValue(panelLayoutAtom);
 
   // Show issue count: cell errors + connection issues
+  // Don't include error count if errors panel is in sidebar (it shows there instead)
+  const errorsInSidebar = panelLayout.sidebar.includes("errors");
   const hasConnectionIssue =
     connectionStatus === "unhealthy" || connectionStatus === "disconnected";
-  const issueCount = errorCount + (hasConnectionIssue ? 1 : 0);
+  const issueCount =
+    (errorsInSidebar ? 0 : errorCount) + (hasConnectionIssue ? 1 : 0);
 
   // TODO: Add warning count from diagnostics/linting
   // This can signal warnings/errors with settings up AI / Copilot etc

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -7,7 +7,10 @@ import type { PropsWithChildren } from "react";
 import { useMemo } from "react";
 import { ReorderableList } from "@/components/ui/reorderable-list";
 import { Tooltip } from "@/components/ui/tooltip";
-import { notebookQueuedOrRunningCountAtom } from "@/core/cells/cells";
+import {
+  cellErrorCount,
+  notebookQueuedOrRunningCountAtom,
+} from "@/core/cells/cells";
 import { cn } from "@/utils/cn";
 import { FeedbackButton } from "../components/feedback-button";
 import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
@@ -108,7 +111,11 @@ export const Sidebar: React.FC = () => {
             tooltip={panel.tooltip}
             selected={selectedPanel === panel.type}
           >
-            {renderIcon(panel)}
+            {panel.type === "errors" ? (
+              <ErrorPanelIcon Icon={panel.Icon} />
+            ) : (
+              renderIcon(panel)
+            )}
           </SidebarItem>
         )}
       />
@@ -123,6 +130,15 @@ export const Sidebar: React.FC = () => {
   );
 };
 
+const ErrorPanelIcon: React.FC<{ Icon: PanelDescriptor["Icon"] }> = ({
+  Icon,
+}) => {
+  const errorCount = useAtomValue(cellErrorCount);
+  return (
+    <Icon className={cn("h-5 w-5", errorCount > 0 && "text-destructive")} />
+  );
+};
+
 const QueuedOrRunningStack = () => {
   const count = useAtomValue(notebookQueuedOrRunningCountAtom);
   return (

package/src/plugins/impl/data-editor/glide-data-editor.tsx

@@ -616,7 +616,6 @@ export const GlideDataEditor = <T,>({
           allowedFillDirections="vertical" // We can support all directions, but we need to handle datatype logic
           onKeyDown={onKeyDown}
           height={data.length > 10 ? 450 : undefined}
-          width={"100%"}
           rowMarkers={{
             kind: "both",
           }}

package/dist/assets/column-preview-Cqovvoyb.js

@@ -1 +0,0 @@
-import{s as E}from"./chunk-LvLJmgfZ.js";import{u as K}from"./useEvent-DlWF5OMa.js";import{t as R}from"./react-BGmjiNul.js";import{C as U,En as V,Tn as W,cr as L,or as Y}from"./cells-Dk_j8HX9.js";import{t as D}from"./compiler-runtime-DeeZ7FnK.js";import{t as X}from"./useLifecycle-CmDXEyIC.js";import{o as Z}from"./utils-CJJIceVn.js";import{t as ee}from"./jsx-runtime-DN_bIXfG.js";import{r as M,t as z}from"./button-DuYGqRtX.js";import{t as g}from"./cn-C1rgT0yh.js";import{G as te}from"./JsonOutput-BCHaEg3R.js";import{r as ae}from"./requests-C0HaHO6a.js";import{t as se}from"./createLucideIcon-CW2xpJ57.js";import{h as re}from"./select-D0g5GnIs.js";import{t as ne}from"./chevron-right-CqEd11Di.js";import{n as le,t as oe}from"./spinner-C1czjtp7.js";import{r as ce}from"./useTheme-DfP1CWaW.js";import{t as O}from"./tooltip-CvjcEpZC.js";import{t as ie}from"./context-BAYdLMF_.js";import{r as me}from"./numbers-C9_R_vlY.js";import{t as de}from"./copy-icon-B69c-352.js";import{t as pe}from"./useInstallPackage-RldLPyJs.js";import{n as ue}from"./es-DjCjT1hB.js";import{o as xe}from"./focus-U1ePwk4d.js";var I=se("square-plus",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M8 12h8",key:"1wcyev"}],["path",{d:"M12 8v8",key:"napkw2"}]]),x=D(),l=E(ee(),1);const he=o=>{let e=(0,x.c)(4),{isExpanded:a}=o,s=a&&"rotate-90",t;e[0]===s?t=e[1]:(t=g("h-3 w-3 transition-transform",s),e[0]=s,e[1]=t);let r;return e[2]===t?r=e[3]:(r=(0,l.jsx)(ne,{className:t}),e[2]=t,e[3]=r),r},fe=o=>{let e=(0,x.c)(2),{children:a}=o,s;return e[0]===a?s=e[1]:(s=(0,l.jsx)("div",{className:"flex gap-1.5 items-center font-bold px-2 py-1.5 text-muted-foreground bg-(--slate-2) text-sm",children:a}),e[0]=a,e[1]=s),s},ge=o=>{let e=(0,x.c)(5),{content:a,className:s}=o,t;e[0]===s?t=e[1]:(t=g("text-sm text-muted-foreground py-1",s),e[0]=s,e[1]=t);let r;return e[2]!==a||e[3]!==t?(r=(0,l.jsx)("div",{className:t,children:a}),e[2]=a,e[3]=t,e[4]=r):r=e[4],r},ye=o=>{let e=(0,x.c)(6),{error:a,className:s}=o,t;e[0]===s?t=e[1]:(t=g("text-sm bg-red-50 dark:bg-red-900 text-red-600 dark:text-red-50 flex items-center gap-2 p-2 h-8",s),e[0]=s,e[1]=t);let r;e[2]===Symbol.for("react.memo_cache_sentinel")?(r=(0,l.jsx)(re,{className:"h-4 w-4 mt-0.5"}),e[2]=r):r=e[2];let n;return e[3]!==a.message||e[4]!==t?(n=(0,l.jsxs)("div",{className:t,children:[r,a.message]}),e[3]=a.message,e[4]=t,e[5]=n):n=e[5],n},be=o=>{let e=(0,x.c)(6),{message:a,className:s}=o,t;e[0]===s?t=e[1]:(t=g("text-sm bg-blue-50 dark:bg-(--accent) text-blue-500 dark:text-blue-50 flex items-center gap-2 p-2 h-8",s),e[0]=s,e[1]=t);let r;e[2]===Symbol.for("react.memo_cache_sentinel")?(r=(0,l.jsx)(le,{className:"h-4 w-4 animate-spin"}),e[2]=r):r=e[2];let n;return e[3]!==a||e[4]!==t?(n=(0,l.jsxs)("div",{className:t,children:[r,a]}),e[3]=a,e[4]=t,e[5]=n):n=e[5],n},$=o=>{let e=(0,x.c)(5),{children:a,className:s}=o,t;e[0]===s?t=e[1]:(t=g("flex flex-col gap-2 relative",s),e[0]=s,e[1]=t);let r;return e[2]!==a||e[3]!==t?(r=(0,l.jsx)("div",{className:t,children:a}),e[2]=a,e[3]=t,e[4]=r):r=e[4],r},_e=o=>{let e=(0,x.c)(6),{columnName:a,dataType:s}=o,t=W[s],r=`w-4 h-4 p-0.5 rounded-sm stroke-card-foreground ${V(s)}`,n;e[0]!==t||e[1]!==r?(n=(0,l.jsx)(t,{className:r}),e[0]=t,e[1]=r,e[2]=n):n=e[2];let c;return e[3]!==a||e[4]!==n?(c=(0,l.jsxs)("div",{className:"flex flex-row items-center gap-1.5",children:[n,a]}),e[3]=a,e[4]=n,e[5]=c):c=e[5],c};var je=D(),Ne=E(R(),1);const ke=o=>{let e=(0,je.c)(13),{packages:a,showMaxPackages:s,className:t,onInstall:r}=o,{handleInstallPackages:n}=pe();if(!a||a.length===0)return null;let c;e[0]!==n||e[1]!==r||e[2]!==a?(c=()=>{n(a,r)},e[0]=n,e[1]=r,e[2]=a,e[3]=c):c=e[3];let i;e[4]===t?i=e[5]:(i=g("ml-2",t),e[4]=t,e[5]=i);let d;e[6]!==a||e[7]!==s?(d=s?a.slice(0,s).join(", "):a.join(", "),e[6]=a,e[7]=s,e[8]=d):d=e[8];let p;return e[9]!==c||e[10]!==i||e[11]!==d?(p=(0,l.jsxs)(z,{variant:"outline",size:"xs",onClick:c,className:i,children:["Install"," ",d]}),e[9]=c,e[10]=i,e[11]=d,e[12]=p):p=e[12],p};var Q=D();const ve=o=>{let e=(0,Q.c)(53),{table:a,column:s,preview:t,onAddColumnChart:r,sqlTableContext:n}=o,{theme:c}=ce(),{previewDatasetColumn:i}=ae(),{locale:d}=ie(),p;e[0]!==s.name||e[1]!==i||e[2]!==n||e[3]!==a.name||e[4]!==a.source||e[5]!==a.source_type?(p=()=>{i({source:a.source,tableName:a.name,columnName:s.name,sourceType:a.source_type,fullyQualifiedTableName:n?`${n.database}.${n.schema}.${a.name}`:a.name})},e[0]=s.name,e[1]=i,e[2]=n,e[3]=a.name,e[4]=a.source,e[5]=a.source_type,e[6]=p):p=e[6];let u=p,y;if(e[7]!==t||e[8]!==u||e[9]!==a.source_type?(y=()=>{t||a.source_type==="connection"||a.source_type==="catalog"||u()},e[7]=t,e[8]=u,e[9]=a.source_type,e[10]=y):y=e[10],X(y),a.source_type==="connection"){let m=s.name,H=s.external_type,h;e[11]!==s.name||e[12]!==r||e[13]!==n||e[14]!==a?(h=M.stopPropagation(()=>{r(L({table:a,columnName:s.name,sqlTableContext:n}))}),e[11]=s.name,e[12]=r,e[13]=n,e[14]=a,e[15]=h):h=e[15];let P;e[16]===Symbol.for("react.memo_cache_sentinel")?(P=(0,l.jsx)(I,{className:"h-3 w-3 mr-1"}),e[16]=P):P=e[16];let f;e[17]===h?f=e[18]:(f=(0,l.jsxs)(z,{variant:"outline",size:"xs",onClick:h,children:[P," Add SQL cell"]}),e[17]=h,e[18]=f);let T;return e[19]!==s.external_type||e[20]!==s.name||e[21]!==f?(T=(0,l.jsxs)("span",{className:"text-xs text-muted-foreground gap-2 flex items-center justify-between pl-7",children:[m," (",H,")",f]}),e[19]=s.external_type,e[20]=s.name,e[21]=f,e[22]=T):T=e[22],T}if(a.source_type==="catalog"){let m;return e[23]!==s.external_type||e[24]!==s.name?(m=(0,l.jsxs)("span",{className:"text-xs text-muted-foreground gap-2 flex items-center justify-between pl-7",children:[s.name," (",s.external_type,")"]}),e[23]=s.external_type,e[24]=s.name,e[25]=m):m=e[25],m}if(!t){let m;return e[26]===Symbol.for("react.memo_cache_sentinel")?(m=(0,l.jsx)("span",{className:"text-xs text-muted-foreground",children:"Loading..."}),e[26]=m):m=e[26],m}let b;e[27]!==t.error||e[28]!==t.missing_packages||e[29]!==u?(b=t.error&&G({error:t.error,missingPackages:t.missing_packages,refetchPreview:u}),e[27]=t.error,e[28]=t.missing_packages,e[29]=u,e[30]=b):b=e[30];let _=b,j;e[31]!==s.type||e[32]!==d||e[33]!==t.stats?(j=t.stats&&J({stats:t.stats,dataType:s.type,locale:d}),e[31]=s.type,e[32]=d,e[33]=t.stats,e[34]=j):j=e[34];let N=j,k;e[35]!==t.chart_spec||e[36]!==c?(k=t.chart_spec&&B(t.chart_spec,c),e[35]=t.chart_spec,e[36]=c,e[37]=k):k=e[37];let v=k,w;e[38]!==t.chart_code||e[39]!==a.source_type?(w=t.chart_code&&a.source_type==="local"&&(0,l.jsx)(F,{chartCode:t.chart_code}),e[38]=t.chart_code,e[39]=a.source_type,e[40]=w):w=e[40];let q=w,C;e[41]!==s.name||e[42]!==r||e[43]!==n||e[44]!==a?(C=a.source_type==="duckdb"&&(0,l.jsx)(O,{content:"Add SQL cell",delayDuration:400,children:(0,l.jsx)(z,{variant:"outline",size:"icon",className:"z-10 bg-background absolute right-1 -top-1",onClick:M.stopPropagation(()=>{r(L({table:a,columnName:s.name,sqlTableContext:n}))}),children:(0,l.jsx)(I,{className:"h-3 w-3"})})}),e[41]=s.name,e[42]=r,e[43]=n,e[44]=a,e[45]=C):C=e[45];let A=C;if(!_&&!N&&!v){let m;return e[46]===Symbol.for("react.memo_cache_sentinel")?(m=(0,l.jsx)("span",{className:"text-xs text-muted-foreground",children:"No data"}),e[46]=m):m=e[46],m}let S;return e[47]!==q||e[48]!==A||e[49]!==v||e[50]!==_||e[51]!==N?(S=(0,l.jsxs)($,{children:[_,q,A,v,N]}),e[47]=q,e[48]=A,e[49]=v,e[50]=_,e[51]=N,e[52]=S):S=e[52],S};function G({error:o,missingPackages:e,refetchPreview:a}){return(0,l.jsxs)("div",{className:"text-xs text-muted-foreground p-2 border border-border rounded flex items-center justify-between",children:[(0,l.jsx)("span",{children:o}),e&&(0,l.jsx)(ke,{packages:e,showMaxPackages:1,className:"w-32",onInstall:a})]})}function J({stats:o,dataType:e,locale:a}){return(0,l.jsx)("div",{className:"gap-x-16 gap-y-1 grid grid-cols-2-fit border rounded p-2 empty:hidden",children:Object.entries(o).map(([s,t])=>t==null?null:(0,l.jsxs)("div",{className:"flex items-center gap-1 group",children:[(0,l.jsx)("span",{className:"text-xs min-w-[60px] capitalize",children:Y(s,e)}),(0,l.jsx)("span",{className:"text-xs font-bold text-muted-foreground tracking-wide",children:me(t,a)}),(0,l.jsx)(de,{className:"h-3 w-3 invisible group-hover:visible",value:String(t)})]},s))})}var we=(0,l.jsx)("div",{className:"flex justify-center",children:(0,l.jsx)(oe,{className:"size-4"})});function B(o,e){return(0,l.jsx)(Ne.Suspense,{fallback:we,children:(0,l.jsx)(te,{spec:(a=>({...a,background:"transparent",config:{...a.config,background:"transparent"}}))(JSON.parse(o)),options:{theme:e==="dark"?"dark":"vox",height:100,width:"container",actions:!1,renderer:"canvas"}})})}const F=o=>{let e=(0,Q.c)(10),{chartCode:a}=o,s=K(Z),t=xe(),{createNewCell:r}=U(),n;e[0]!==s||e[1]!==r||e[2]!==t?(n=u=>{u.includes("alt")&&ue({autoInstantiate:s,createNewCell:r,fromCellId:t}),r({code:u,before:!1,cellId:t??"__end__"})},e[0]=s,e[1]=r,e[2]=t,e[3]=n):n=e[3];let c=n,i;e[4]!==a||e[5]!==c?(i=M.stopPropagation(()=>c(a)),e[4]=a,e[5]=c,e[6]=i):i=e[6];let d;e[7]===Symbol.for("react.memo_cache_sentinel")?(d=(0,l.jsx)(I,{className:"h-3 w-3"}),e[7]=d):d=e[7];let p;return e[8]===i?p=e[9]:(p=(0,l.jsx)(O,{content:"Add chart to notebook",delayDuration:400,children:(0,l.jsx)(z,{variant:"outline",size:"icon",className:"z-10 bg-background absolute right-1 -top-0.5",onClick:i,children:d})}),e[8]=i,e[9]=p),p};export{J as a,fe as c,be as d,he as f,G as i,ge as l,ve as n,_e as o,I as p,B as r,$ as s,F as t,ye as u};