@uwdata/mosaic-inputs 0.0.1

package/dist/mosaic-inputs.min.js

@@ -0,0 +1 @@
+var $=class{constructor(t){this._filterBy=t}get filterBy(){return this._filterBy}get filterIndexable(){return!0}fields(){return null}fieldStats(){return this}query(){return null}queryPending(){return this}queryResult(){return this}queryError(t){return console.error(t),this}update(){return this}};var y=class{constructor(t,e){t&&(this.table=String(t)),e&&(this.column=e)}get columns(){return this.column?[this.column]:[]}toString(){let{table:t,column:e}=this;if(e){let r=e==="*"?e:`"${e}"`;return(t?`"${t}".`:"")+r}else return`"${t}"`}};function mt(s,t){return s instanceof y&&s.column===t}function h(s){return typeof s=="string"?A(s):s}function M(s){return typeof s=="string"?dt(s):s}function dt(s){return new y(s)}function A(s,t){return arguments.length===1?new y(null,s):new y(s,t)}function V(s){return s=h(s),{expr:s,desc:!0,toString:()=>`${s} DESC NULLS LAST`,get columns(){return s.columns?.()||[]}}}function X(s,t,e){return{expr:s,label:e,toString:()=>`${s}`,get columns(){return t||[]}}}function Q(s,t){return e=>X(s(e),h(e).columns,t)}function d(s){return typeof s=="string"?`"${s}"`:U(s)}function U(s){switch(typeof s){case"boolean":return s?"TRUE":"FALSE";case"string":return`'${s}'`;default:return s==null?"NULL":s instanceof Date?`MAKE_DATE(${s.getUTCFullYear()}, ${s.getUTCMonth()+1}, ${s.getUTCDate()})`:s instanceof RegExp?`'${s.source}'`:String(s)}}var H=class{constructor(t){this.value=t}toString(){return U(this.value)}},L=s=>new H(s);function k(...s){return s.flat().flatMap(t=>t?.columns||[])}var W=class{constructor(t,e){this.op=t,this.a=h(e)}get columns(){return k(this.a)}visit(t){t(this.op,this)}toString(){let{op:t,a:e}=this;return`(${d(e)} ${t})`}};function Z(s){return t=>new W(s,t)}var Tt=Z("NOT"),gt=Z("IS NULL"),At=Z("IS NOT NULL"),z=class{constructor(t,e,r){this.op=t,this.a=h(e),this.b=h(r)}get columns(){return k(this.a,this.b)}visit(t){t(this.op,this)}toString(){let{op:t,a:e,b:r}=this;return`(${d(e)} ${t} ${d(r)})`}};function N(s){return(t,e)=>new z(s,t,e)}var j=N("="),Nt=N("<>"),Ct=N("<"),vt=N(">"),It=N("<="),Lt=N(">="),Rt=N("IS DISTINCT FROM"),Ot=N("IS NOT DISTINCT FROM"),J=class{constructor(t,e,r){this.op=t,this.expr=h(e),this.value=r?.map(h)}get columns(){return k(this.expr,this.value)}visit(t){t(this.op,this)}toString(){let{op:t,expr:e,value:r}=this;if(!r)return"";let[n,i]=r;return`(${d(e)} ${t} ${d(n)} AND ${d(i)})`}};function xt(s){return(t,e)=>new J(s,t,e)}var yt=xt("BETWEEN"),Dt=xt("NOT BETWEEN"),K=class{constructor(t,e){this.op=t,this.value=e.map(h)}get columns(){return k(this.value)}visit(t){t(this.op,this),this.value?.forEach(e=>e.visit(t))}toString(){let{op:t,value:e}=this;return!e||e.length===0?"":e.length===1?d(e[0]):`(${e.map(d).filter(r=>r).join(` ${t} `)})`}};function tt(...s){return new K("OR",s.flat())}var et=class{constructor(t,e){this.func=t,this.args=(e||[]).map(h)}get column(){return this.columns[0]}get columns(){return this.args.flatMap(t=>t.columns||[])}toString(){let{func:t,args:e}=this;return`${t}(${e.map(d).join(", ")})`}};function b(s){return(...t)=>new et(s,t)}var st=b("regexp_matches"),rt=b("contains"),nt=b("prefix"),it=b("suffix"),Mt=b("lower"),Ut=b("upper"),jt=b("length"),kt=b("isnan"),_t=b("isfinite"),Ft=b("isinf");var ot=class{constructor(t,e){this.aggregate=t,this.args=(e||[]).map(h)}get label(){return this.aggregate.toLowerCase()+(this.args.length?` ${this.columns.join(", ")}`:"")}get column(){return this.columns[0]}get columns(){return this.args.flatMap(t=>t.columns||[])}distinct(){return this.isDistinct=!0,this}where(t){return this.filter=t,this}toString(){let{aggregate:t,args:e,isDistinct:r,filter:n}=this,i=e.length===0?"*":e.map(d).join(", "),o=r?"DISTINCT ":"",c=n?` FILTER (WHERE ${d(n)})`:"",u=t==="COUNT"?"::INTEGER":"";return c&&u?`(${t}(${o}${i})${c})${u}`:`${t}(${o}${i})${c}${u}`}};function l(s){return(...t)=>new ot(s,t)}var bt=l("COUNT"),Bt=l("AVG"),Gt=l("AVG"),Pt=l("MAD"),wt=l("MAX"),Et=l("MIN"),Yt=l("SUM"),Vt=l("PRODUCT"),Xt=l("MEDIAN"),Qt=l("QUANTILE"),Ht=l("MODE"),Wt=l("VARIANCE"),zt=l("STDDEV"),Jt=l("SKEWNESS"),Kt=l("KURTOSIS"),Zt=l("ENTROPY"),te=l("VAR_POP"),ee=l("STDDEV_POP"),se=l("CORR"),re=l("COVAR_POP"),ne=l("REGR_INTERCEPT"),ie=l("REGR_SLOPE"),oe=l("REGR_COUNT"),ce=l("REGR_R2"),le=l("REGR_SYY"),ue=l("REGR_SXX"),ae=l("REGR_SXY"),he=l("REGR_AVGX"),fe=l("REGR_AVGY"),pe=l("FIRST"),me=l("LAST"),de=l("ARG_MIN"),ge=l("ARG_MAX"),xe=l("STRING_AGG"),ye=l("ARRAY_AGG");var St=Q(s=>`(1000 * (epoch(${s}) - second(${s})) + millisecond(${s}))::DOUBLE`);var p=class{static select(...t){return new p().select(...t)}static from(...t){return new p().from(...t)}static with(...t){return new p().with(...t)}static union(...t){return new q("UNION",t.flat())}static unionAll(...t){return new q("UNION ALL",t.flat())}static intersect(...t){return new q("INTERSECT",t.flat())}static except(...t){return new q("EXCEPT",t.flat())}constructor(){this.query={with:[],select:[],from:[],where:[],groupby:[],having:[],window:[],qualify:[],orderby:[]}}clone(){let t=new p;return t.query={...this.query},t}with(...t){let{query:e}=this;if(t.length===0)return e.with;{let r=[],n=(i,o)=>{let c=o.clone();c.cteFor=this,r.push({as:i,query:c})};return t.flat().forEach(i=>{if(i!=null)if(i.as&&i.query)n(i.as,i.query);else for(let o in i)n(o,i[o])}),e.with=e.with.concat(r),this}}select(...t){let{query:e}=this;if(t.length===0)return e.select;{let r=[];return t.flat().forEach(n=>{if(n!=null)if(typeof n=="string")r.push({as:n,expr:h(n)});else if(n instanceof y)r.push({as:n.column,expr:n});else if(Array.isArray(n))r.push({as:n[0],expr:n[1]});else for(let i in n)r.push({as:_(i),expr:h(n[i])})}),e.select=e.select.concat(r),this}}$select(...t){return this.query.select=[],this.select(...t)}distinct(t=!0){return this.query.distinct=!!t,this}from(...t){let{query:e}=this;if(t.length===0)return e.from;{let r=[];return t.flat().forEach(n=>{if(n!=null)if(typeof n=="string")r.push({as:n,from:M(n)});else if(n instanceof y)r.push({as:n.table,from:n});else if(F(n)||Object.hasOwn(n,"toString"))r.push({from:n});else if(Array.isArray(n))r.push({as:_(n[0]),from:M(n[1])});else for(let i in n)r.push({as:_(i),from:M(n[i])})}),e.from=e.from.concat(r),this}}$from(...t){return this.query.from=[],this.from(...t)}sample(t){let{query:e}=this;if(arguments.length===0)return e.sample;{let r=t;return typeof t=="number"&&(r=t>0&&t<1?{perc:100*t}:{rows:Math.round(t)}),e.sample=r,this}}where(...t){let{query:e}=this;return t.length===0?e.where:(e.where=e.where.concat(t.flat().filter(r=>r)),this)}$where(...t){return this.query.where=[],this.where(...t)}groupby(...t){let{query:e}=this;return t.length===0?e.groupby:(e.groupby=e.groupby.concat(t.flat().filter(r=>r).map(h)),this)}having(...t){let{query:e}=this;return t.length===0?e.having:(e.having=e.having.concat(t.flat().filter(r=>r)),this)}window(...t){let{query:e}=this;if(t.length===0)return e.window;{let r=[];return t.flat().forEach(n=>{if(n!=null)for(let i in n)r.push({as:_(i),expr:n[i]})}),e.window=e.window.concat(r),this}}qualify(...t){let{query:e}=this;return t.length===0?e.qualify:(e.qualify=e.qualify.concat(t.flat().filter(r=>r)),this)}orderby(...t){let{query:e}=this;return t.length===0?e.orderby:(e.orderby=e.orderby.concat(t.flat().filter(r=>r).map(h)),this)}limit(t){let{query:e}=this;return arguments.length===0?e.limit:(e.limit=Number.isFinite(t)?t:void 0,this)}offset(t){let{query:e}=this;return arguments.length===0?e.offset:(e.offset=Number.isFinite(t)?t:void 0,this)}get subqueries(){let{query:t,cteFor:e}=this,n=(e?.query||t).with?.reduce((o,{as:c,query:u})=>(o[c]=u,o),{}),i=[];return t.from.forEach(({from:o})=>{if(F(o))i.push(o);else if(n[o.table]){let c=n[o.table];i.push(c)}}),i}toString(){let{select:t,distinct:e,from:r,sample:n,where:i,groupby:o,having:c,window:u,qualify:g,orderby:S,limit:v,offset:I,with:O}=this.query,m=[];if(O.length){let a=O.map(({as:f,query:x})=>`"${f}" AS (${x})`);m.push(`WITH ${a.join(", ")}`)}let Y=t.map(({as:a,expr:f})=>mt(f,a)&&!f.table?`${f}`:`${f} AS "${a}"`);if(m.push(`SELECT${e?" DISTINCT":""} ${Y.join(", ")}`),r.length){let a=r.map(({as:f,from:x})=>{let D=F(x)?`(${x})`:`${x}`;return!f||f===x.table?D:`${D} AS "${f}"`});m.push(`FROM ${a.join(", ")}`)}if(n){let{rows:a,perc:f,method:x,seed:D}=n,$t=a?`${a} ROWS`:`${f} PERCENT`,qt=x?` (${x}${D!=null?`, ${D}`:""})`:"";m.push(`USING SAMPLE ${$t}${qt}`)}if(i.length){let a=i.map(String).filter(f=>f).join(" AND ");a&&m.push(`WHERE ${a}`)}if(o.length&&m.push(`GROUP BY ${o.join(", ")}`),c.length){let a=c.map(String).filter(f=>f).join(" AND ");a&&m.push(`HAVING ${a}`)}if(u.length){let a=u.map(({as:f,expr:x})=>`"${f}" AS (${x})`);m.push(`WINDOW ${a.join(", ")}`)}if(g.length){let a=g.map(String).filter(f=>f).join(" AND ");a&&m.push(`QUALIFY ${a}`)}return S.length&&m.push(`ORDER BY ${S.join(", ")}`),Number.isFinite(v)&&m.push(`LIMIT ${v}`),Number.isFinite(I)&&m.push(`OFFSET ${I}`),m.join(" ")}},q=class{constructor(t,e){this.op=t,this.queries=e.map(r=>r.clone()),this.query={orderby:[]}}clone(){let t=new q(this.op,this.queries);return t.query={...this.query},t}orderby(...t){let{query:e}=this;return t.length===0?e.orderby:(e.orderby=e.orderby.concat(t.flat().filter(r=>r).map(h)),this)}limit(t){let{query:e}=this;return arguments.length===0?e.limit:(e.limit=Number.isFinite(t)?t:void 0,this)}offset(t){let{query:e}=this;return arguments.length===0?e.offset:(e.offset=Number.isFinite(t)?t:void 0,this)}get subqueries(){let{queries:t,cteFor:e}=this;return e&&t.forEach(r=>r.cteFor=e),t}toString(){let{op:t,queries:e,query:{orderby:r,limit:n,offset:i}}=this,o=[e.join(` ${t} `)];return r.length&&o.push(`ORDER BY ${r.join(", ")}`),Number.isFinite(n)&&o.push(`LIMIT ${n}`),Number.isFinite(i)&&o.push(`OFFSET ${i}`),o.join(" ")}};function F(s){return s instanceof p||s instanceof q}function _(s){return be(s)?s.slice(1,-1):s}function be(s){return s[0]==='"'&&s[s.length-1]==='"'}function B(s,t){return t?.clients?.has(s)}function R(s){return s instanceof C}var C=class{constructor(t){this._value=t,this._listeners=new Map}get value(){return this._value}update(t,{force:e}={}){let r=this._value!==t;return r&&(this._value=t),(r||e)&&this.emit("value",this.value),this}addEventListener(t,e){let r=this._listeners.get(t)||[];r.indexOf(e)<0&&(r=r.concat(e)),this._listeners.set(t,r)}removeEventListener(t,e){let r=this._listeners.get(t);r?.length&&this._listeners.set(t,r.filter(n=>n!==e))}emit(t,e){this._listeners.get(t)?.forEach(r=>r(e))}};function E(s){return s instanceof w}var w=class extends C{static intersect(){return new w}static crossfilter(){return new w({cross:!0})}static union(){return new w({union:!0})}static single(){return new w({single:!0})}constructor({union:t,cross:e,single:r}={}){super([]),this.active=null,this.union=!!t,this.cross=!!e,this.single=!!r}clone(){let t=new w;return t.active=this.active,t.union=this.union,t.cross=this.cross,t._value=this._value,t}get value(){let{clauses:t}=this;return t[t.length-1]?.value}get clauses(){return super.value}activate(t){this.emit("activate",t)}update(t){let{source:e,predicate:r}=t;this.active=t;let n=this.single?[]:this.clauses.filter(i=>e!==i.source);return r&&n.push(t),super.update(n)}predicate(t){let{active:e,clauses:r,cross:n,union:i}=this;if(n&&B(t,e))return;let o=(n?r.filter(c=>!B(t,c)):r).map(c=>c.predicate);return i&&o.length>1?tt(o):o}};var $e=s=>s&&typeof s=="object"&&!Array.isArray(s),ct=class extends ${constructor({filterBy:t,from:e,column:r,label:n=r,options:i,value:o,as:c}={}){super(t),this.from=e,this.column=r,this.selection=c,this.element=document.createElement("div"),this.element.setAttribute("class","input"),this.element.value=this;let u=document.createElement("label");u.innerText=n||r,this.element.appendChild(u),this.select=document.createElement("select"),i&&(this.data=i.map(g=>$e(g)?g:{value:g}),this.update()),o=o??this.selection?.value??this.data?.[0]?.value,this.select.value=o,this.selection?.value===void 0&&this.publish(o),this.element.appendChild(this.select),this.selection&&(this.select.addEventListener("input",()=>{this.publish(this.select.value||null)}),E(this.selection)||this.selection.addEventListener("value",g=>{g!==this.select.value&&(this.select.value=g)}))}publish(t){let{selection:e,column:r}=this;E(e)?e.update({source:this,schema:{type:"point"},value:t,predicate:t?j(r,L(t)):null}):R(e)&&e.update(t)}fields(){let{from:t,column:e}=this;return t?[A(t,e)]:null}query(t=[]){let{from:e,column:r}=this;return e?p.from(e).select({value:r}).distinct().where(t).orderby(r):null}queryResult(t){return this.data=[{value:"",label:"All"},...t],this}update(){let{data:t,select:e}=this;e.replaceChildren();for(let{value:r,label:n=r}of t){let i=document.createElement("option");i.setAttribute("value",r),i.innerText=n,this.select.appendChild(i)}return this.selection&&(this.select.value=this.selection?.value||""),this}};var qe={contains:rt,prefix:nt,suffix:it,regexp:st},Te=0,lt=class extends ${constructor({filterBy:t,from:e,column:r,label:n,type:i,as:o}={}){if(super(t),this.id="search_"+ ++Te,this.type=i,this.from=e,this.column=r,this.selection=o,this.element=document.createElement("div"),this.element.setAttribute("class","input"),this.element.value=this,n){let c=document.createElement("label");c.setAttribute("for",this.id),c.innerText=n,this.element.appendChild(c)}this.searchbox=document.createElement("input"),this.searchbox.setAttribute("id",this.id),this.searchbox.setAttribute("type","text"),this.searchbox.setAttribute("placeholder","Query"),this.element.appendChild(this.searchbox),this.selection&&(this.searchbox.addEventListener("input",()=>{this.publish(this.searchbox.value||null)}),E(this.selection)||this.selection.addEventListener("value",c=>{c!==this.searchbox.value&&(this.searchbox.value=c)}))}publish(t){let{selection:e,column:r,type:n}=this;E(e)?e.update({source:this,schema:{type:n},value:t,predicate:t?qe[n](r,L(t)):null}):R(e)&&e.update(t)}fields(){let{from:t,column:e}=this;return t?[A(t,e)]:null}query(t=[]){let{from:e,column:r}=this;return e?p.from(e).select({list:r}).distinct().where(t):null}queryResult(t){return this.data=t,this}update(){let t=document.createElement("datalist"),e=`${this.id}_list`;t.setAttribute("id",e);for(let r of this.data){let n=document.createElement("option");n.setAttribute("value",r.list),t.append(n)}return this.datalist&&this.datalist.remove(),this.element.appendChild(this.datalist=t),this.searchbox.setAttribute("list",e),this}};var Ae=0,ut=class{constructor({as:t,min:e,max:r,step:n,column:i,label:o=i,value:c=t?.value}={}){if(this.id="slider_"+ ++Ae,this.column=i||"value",this.selection=t,this.element=document.createElement("div"),this.element.setAttribute("class","input"),this.element.value=this,o){let u=document.createElement("label");u.setAttribute("for",this.id),u.innerText=o,this.element.appendChild(u)}this.slider=document.createElement("input"),this.slider.setAttribute("id",this.id),this.slider.setAttribute("type","range"),e!=null&&this.slider.setAttribute("min",e),r!=null&&this.slider.setAttribute("max",r),n!=null&&this.slider.setAttribute("step",n),c!=null&&(this.slider.setAttribute("value",c),this.selection?.value===void 0&&this.publish(c)),this.element.appendChild(this.slider),this.selection&&(this.slider.addEventListener("input",()=>{this.publish(+this.slider.value)}),E(this.selection)||this.selection.addEventListener("value",u=>{u!==+this.slider.value&&(this.slider.value=u)}))}publish(t){let{selection:e,column:r}=this;E(e)?e.update({source:this,schema:{type:"point"},value:t,predicate:j(r,L(t))}):R(this.selection)&&e.update(t)}};function G(s,t){if(s instanceof Date||(s=new Date(+s)),isNaN(s))return typeof t=="function"?t(s):t;let e=s.getUTCHours(),r=s.getUTCMinutes(),n=s.getUTCSeconds(),i=s.getUTCMilliseconds();return`${Ne(s.getUTCFullYear(),4)}-${T(s.getUTCMonth()+1,2)}-${T(s.getUTCDate(),2)}${e||r||n||i?`T${T(e,2)}:${T(r,2)}${n||i?`:${T(n,2)}${i?`.${T(i,3)}`:""}`:""}Z`:""}`}function Ne(s){return s<0?`-${T(-s,6)}`:s>9999?`+${T(s,6)}`:T(s,4)}function T(s,t){return`${s}`.padStart(t,"0")}var at=ft(s=>{let t=P(s);return e=>e==null?"":typeof e=="number"?t(e):e instanceof Date?ht(e):`${e}`}),P=ft(s=>t=>t===0?"0":t.toLocaleString(s)),br=at(),wr=P();function ht(s){return G(s,"Invalid Date")}function ft(s){let t=ft,e;return(r="en")=>r===t?e:e=s(t=r)}var Ce=-1,pt=class extends ${constructor({filterBy:t,from:e,columns:r=["*"],format:n,rowBatch:i=100,width:o,height:c=500}={}){super(t),this.id=`table-${++Ce}`,this.from=e,this.columns=r,this.format=n,this.offset=0,this.limit=+i,this.request=new C,this.pending=!1,this.sortHeader=null,this.sortColumn=null,this.sortDesc=!1,this.element=document.createElement("div"),this.element.setAttribute("id",this.id),this.element.value=this,o&&(this.element.style.maxWidth=`${o}px`),this.element.style.maxHeight=`${c}px`,this.element.style.overflow="auto";let u=-1;this.element.addEventListener("scroll",g=>{let{pending:S,loaded:v}=this,{scrollHeight:I,scrollTop:O,clientHeight:m}=g.target,Y=O<u;if(u=O,!(Y||S||v)&&I-O<2*m){this.pending=!0,this.offset+=this.limit;let a=this.queryInternal(this.filterBy?.predicate(this));this.request.update(a)}}),this.tbl=document.createElement("table"),this.element.appendChild(this.tbl),this.head=document.createElement("thead"),this.tbl.appendChild(this.head),this.body=document.createElement("tbody"),this.tbl.appendChild(this.body),this.style=document.createElement("style"),this.element.appendChild(this.style)}fields(){let{from:t,columns:e}=this;return e.map(r=>A(t,r))}fieldStats(t){this.stats=t;let e=this.head;e.innerHTML="";let r=document.createElement("tr");for(let{column:n}of t){let i=document.createElement("th");i.addEventListener("click",o=>this.sort(o,n)),i.appendChild(document.createElement("span")),i.appendChild(document.createTextNode(n)),r.appendChild(i)}return e.appendChild(r),this.formats=ve(this.format,t),this.style.innerText=Le(this.id,Ie({},t)),this}query(t){return this.offset=0,this.queryInternal(t)}queryInternal(t=[]){let{from:e,limit:r,offset:n,stats:i,sortColumn:o,sortDesc:c}=this;return p.from(e).select(i.map(u=>u.column)).where(t).orderby(o?c?V(o):o:[]).limit(r).offset(n)}queryResult(t){return this.pending||(this.loaded=!1,this.body.replaceChildren()),this.data=t,this}update(){let{body:t,formats:e,data:r,stats:n,limit:i}=this,o=n.length,c=0;for(let u of r){++c;let g=document.createElement("tr");for(let S=0;S<o;++S){let v=u[n[S].column],I=document.createElement("td");I.innerText=v==null?"":e[S](v),g.appendChild(I)}t.appendChild(g)}return c<i&&(this.loaded=!0),this.pending=!1,this}sort(t,e){e===this.sortColumn?this.sortDesc=!this.sortDesc:(this.sortColumn=e,this.sortDesc=!1);let r=t.currentTarget,n=this.sortHeader;n===r&&t.metaKey?(n.firstChild.textContent="",this.sortHeader=null,this.sortColumn=null):(n&&(n.firstChild.textContent=""),this.sortHeader=r,r.firstChild.textContent=this.sortDesc?"\u25BE":"\u25B4");let i=this.query(this.filterBy?.predicate(this));this.request.update(i)}};function ve(s={},t,e){return t.map(({column:r,type:n})=>{if(r in s)return s[r];switch(n){case"number":return P(e);case"date":return ht;default:return at(e)}})}function Ie(s={},t){return t.map(({column:e,type:r})=>e in s?s[e]:r==="number"?"right":"left")}function Le(s,t){let e=[];return t.forEach((r,n)=>{r!=="left"&&e.push(`#${s} tr>:nth-child(${n+1}) {text-align:${r}}`)}),e.join(" ")}export{ct as Menu,lt as Search,ut as Slider,pt as Table};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@uwdata/mosaic-inputs",
+  "version": "0.0.1",
+  "description": "Mosaic input components.",
+  "keywords": [
+    "inputs",
+    "mosaic"
+  ],
+  "license": "BSD-3-Clause",
+  "author": "Jeffrey Heer (http://idl.cs.washington.edu)",
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "jsdelivr": "dist/mosaic-inputs.min.js",
+  "unpkg": "dist/mosaic-inputs.min.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uwdata/mosaic.git"
+  },
+  "scripts": {
+    "prebuild": "rimraf dist && mkdir dist",
+    "build": "node ../../esbuild.js mosaic-inputs",
+    "lint": "eslint src test --ext .js",
+    "test": "mocha 'test/**/*-test.js'",
+    "prepublishOnly": "npm run test && npm run lint && npm run build"
+  },
+  "dependencies": {
+    "@uwdata/mosaic-core": "^0.0.1",
+    "@uwdata/mosaic-sql": "^0.0.1",
+    "isoformat": "^0.2.1"
+  }
+}

package/src/Menu.js

@@ -0,0 +1,104 @@
+import { isSelection, isSignal, MosaicClient } from '@uwdata/mosaic-core';
+import { Query, column as columnRef, eq, literal } from '@uwdata/mosaic-sql';
+
+const isObject = v => {
+  return v && typeof v === 'object' && !Array.isArray(v);
+};
+
+export class Menu extends MosaicClient {
+  constructor({
+    filterBy,
+    from,
+    column,
+    label = column,
+    options,
+    value,
+    as
+  } = {}) {
+    super(filterBy);
+    this.from = from;
+    this.column = column;
+    this.selection = as;
+
+    this.element = document.createElement('div');
+    this.element.setAttribute('class', 'input');
+    this.element.value = this;
+
+    const lab = document.createElement('label');
+    lab.innerText = label || column;
+    this.element.appendChild(lab);
+
+    this.select = document.createElement('select');
+    if (options) {
+      this.data = options.map(value => isObject(value) ? value : { value });
+      this.update();
+    }
+    value = value ?? this.selection?.value ?? this.data?.[0]?.value;
+    this.select.value = value;
+    if (this.selection?.value === undefined) this.publish(value);
+    this.element.appendChild(this.select);
+
+    if (this.selection) {
+      this.select.addEventListener('input', () => {
+        this.publish(this.select.value || null);
+      });
+      if (!isSelection(this.selection)) {
+        this.selection.addEventListener('value', value => {
+          if (value !== this.select.value) {
+            this.select.value = value;
+          }
+        });
+      }
+    }
+  }
+
+  publish(value) {
+    const { selection, column } = this;
+    if (isSelection(selection)) {
+      selection.update({
+        source: this,
+        schema: { type: 'point' },
+        value,
+        predicate: value ? eq(column, literal(value)) : null
+      });
+    } else if (isSignal(selection)) {
+      selection.update(value);
+    }
+  }
+
+  fields() {
+    const { from, column } = this;
+    return from ? [ columnRef(from, column) ] : null;
+  }
+
+  query(filter = []) {
+    const { from, column } = this;
+    if (!from) return null;
+    return Query
+      .from(from)
+      .select({ value: column })
+      .distinct()
+      .where(filter)
+      .orderby(column)
+  }
+
+  queryResult(data) {
+    this.data = [{ value: '', label: 'All' }, ...data];
+    return this;
+  }
+
+  update() {
+    const { data, select } = this;
+    select.replaceChildren();
+    for (const { value, label = value } of data) {
+      const opt = document.createElement('option');
+      opt.setAttribute('value', value);
+      opt.innerText = label; // TODO: label formatting?
+      this.select.appendChild(opt);
+    }
+    if (this.selection) {
+      this.select.value = this.selection?.value || '';
+    }
+    return this;
+  }
+}

package/src/Search.js

@@ -0,0 +1,104 @@
+import { isSelection, isSignal, MosaicClient } from '@uwdata/mosaic-core';
+import {
+  Query, column as columnRef, regexp_matches, contains, prefix, suffix, literal
+} from '@uwdata/mosaic-sql';
+
+const FUNCTIONS = { contains, prefix, suffix, regexp: regexp_matches };
+let _id = 0;
+
+export class Search extends MosaicClient {
+  constructor({
+    filterBy,
+    from,
+    column,
+    label,
+    type,
+    as
+  } = {}) {
+    super(filterBy);
+    this.id = 'search_' + (++_id);
+    this.type = type;
+    this.from = from;
+    this.column = column;
+    this.selection = as;
+
+    this.element = document.createElement('div');
+    this.element.setAttribute('class', 'input');
+    this.element.value = this;
+
+    if (label) {
+      const lab = document.createElement('label');
+      lab.setAttribute('for', this.id);
+      lab.innerText = label;
+      this.element.appendChild(lab);
+    }
+
+    this.searchbox = document.createElement('input');
+    this.searchbox.setAttribute('id', this.id);
+    this.searchbox.setAttribute('type', 'text');
+    this.searchbox.setAttribute('placeholder', 'Query');
+    this.element.appendChild(this.searchbox);
+
+    if (this.selection) {
+      this.searchbox.addEventListener('input', () => {
+        this.publish(this.searchbox.value || null);
+      });
+      if (!isSelection(this.selection)) {
+        this.selection.addEventListener('value', value => {
+          if (value !== this.searchbox.value) {
+            this.searchbox.value = value;
+          }
+        });
+      }
+    }
+  }
+
+  publish(value) {
+    const { selection, column, type } = this;
+    if (isSelection(selection)) {
+      selection.update({
+        source: this,
+        schema: { type },
+        value,
+        predicate: value ? FUNCTIONS[type](column, literal(value)) : null
+      });
+    } else if (isSignal(selection)) {
+      selection.update(value);
+    }
+  }
+
+  fields() {
+    const { from, column } = this;
+    return from ? [ columnRef(from, column) ] : null;
+  }
+
+  query(filter = []) {
+    const { from, column } = this;
+    if (!from) return null;
+    return Query
+      .from(from)
+      .select({ list: column })
+      .distinct()
+      .where(filter);
+  }
+
+  queryResult(data) {
+    this.data = data;
+    return this;
+  }
+
+  update() {
+    const list = document.createElement('datalist');
+    const id = `${this.id}_list`;
+    list.setAttribute('id', id);
+    for (const d of this.data) {
+      const opt = document.createElement('option');
+      opt.setAttribute('value', d.list);
+      list.append(opt);
+    }
+    if (this.datalist) this.datalist.remove();
+    this.element.appendChild(this.datalist = list);
+    this.searchbox.setAttribute('list', id);
+    return this;
+  }
+}

package/src/Slider.js

@@ -0,0 +1,70 @@
+import { isSelection, isSignal } from '@uwdata/mosaic-core';
+import { eq, literal } from '@uwdata/mosaic-sql';
+
+let _id = 0;
+
+export class Slider {
+  constructor({
+    as,
+    min,
+    max,
+    step,
+    column,
+    label = column,
+    value = as?.value
+  } = {}) {
+    this.id = 'slider_' + (++_id);
+    this.column = column || 'value';
+    this.selection = as;
+
+    this.element = document.createElement('div');
+    this.element.setAttribute('class', 'input');
+    this.element.value = this;
+
+    if (label) {
+      const lab = document.createElement('label');
+      lab.setAttribute('for', this.id);
+      lab.innerText = label;
+      this.element.appendChild(lab);
+    }
+
+    this.slider = document.createElement('input');
+    this.slider.setAttribute('id', this.id);
+    this.slider.setAttribute('type', 'range');
+    if (min != null) this.slider.setAttribute('min', min);
+    if (max != null) this.slider.setAttribute('max', max);
+    if (step != null) this.slider.setAttribute('step', step);
+    if (value != null) {
+      this.slider.setAttribute('value', value);
+      if (this.selection?.value === undefined) this.publish(value);
+    }
+    this.element.appendChild(this.slider);
+
+    if (this.selection) {
+      this.slider.addEventListener('input', () => {
+        this.publish(+this.slider.value);
+      });
+      if (!isSelection(this.selection)) {
+        this.selection.addEventListener('value', value => {
+          if (value !== +this.slider.value) {
+            this.slider.value = value;
+          }
+        });
+      }
+    }
+  }
+
+  publish(value) {
+    const { selection, column } = this;
+    if (isSelection(selection)) {
+      selection.update({
+        source: this,
+        schema: { type: 'point' },
+        value,
+        predicate: eq(column, literal(value))
+      });
+    } else if (isSignal(this.selection)) {
+      selection.update(value);
+    }
+  }
+}

package/src/Table.js

@@ -0,0 +1,210 @@
+import { MosaicClient, Signal } from '@uwdata/mosaic-core';
+import { Query, column, desc } from '@uwdata/mosaic-sql';
+import { formatDate, formatLocaleAuto, formatLocaleNumber } from './util/format.js';
+
+let _id = -1;
+
+export class Table extends MosaicClient {
+  constructor({
+    filterBy,
+    from,
+    columns = ['*'],
+    format,
+    rowBatch = 100,
+    width,
+    height = 500
+  } = {}) {
+    super(filterBy);
+    this.id = `table-${++_id}`;
+    this.from = from;
+    this.columns = columns;
+    this.format = format;
+    this.offset = 0;
+    this.limit = +rowBatch;
+    this.request = new Signal();
+    this.pending = false;
+
+    this.sortHeader = null;
+    this.sortColumn = null;
+    this.sortDesc = false;
+
+    this.element = document.createElement('div');
+    this.element.setAttribute('id', this.id);
+    this.element.value = this;
+    if (width) {
+      this.element.style.maxWidth = `${width}px`;
+    }
+    this.element.style.maxHeight = `${height}px`;
+    this.element.style.overflow = 'auto';
+
+    let prevScrollTop = -1;
+    this.element.addEventListener('scroll', evt => {
+      const { pending, loaded } = this;
+      const { scrollHeight, scrollTop, clientHeight } = evt.target;
+
+      const back = scrollTop < prevScrollTop;
+      prevScrollTop = scrollTop;
+      if (back || pending || loaded) return;
+
+      if (scrollHeight - scrollTop < 2 * clientHeight) {
+        this.pending = true;
+        this.offset += this.limit;
+        const query = this.queryInternal(this.filterBy?.predicate(this));
+        this.request.update(query);
+      }
+    });
+
+    this.tbl = document.createElement('table');
+    this.element.appendChild(this.tbl);
+
+    this.head = document.createElement('thead');
+    this.tbl.appendChild(this.head);
+
+    this.body = document.createElement('tbody');
+    this.tbl.appendChild(this.body);
+
+    this.style = document.createElement('style');
+    this.element.appendChild(this.style);
+  }
+
+  fields() {
+    const { from, columns } = this;
+    return columns.map(name => column(from, name));
+  }
+
+  fieldStats(stats) {
+    this.stats = stats;
+
+    const thead = this.head;
+    thead.innerHTML = '';
+    const tr = document.createElement('tr');
+    for (const { column } of stats) {
+      const th = document.createElement('th');
+      th.addEventListener('click', evt => this.sort(evt, column));
+      th.appendChild(document.createElement('span'));
+      th.appendChild(document.createTextNode(column));
+      tr.appendChild(th);
+    }
+    thead.appendChild(tr);
+
+    // get column formatters
+    this.formats = formatof(this.format, stats);
+
+    // get column alignment style
+    this.style.innerText = tableCSS(this.id, alignof({}, stats));
+
+    return this;
+  }
+
+  query(filter) {
+    this.offset = 0;
+    return this.queryInternal(filter);
+  }
+
+  queryInternal(filter = []) {
+    const { from, limit, offset, stats, sortColumn, sortDesc } = this;
+    return Query.from(from)
+      .select(stats.map(s => s.column))
+      .where(filter)
+      .orderby(sortColumn ? (sortDesc ? desc(sortColumn) : sortColumn) : [])
+      .limit(limit)
+      .offset(offset);
+  }
+
+  queryResult(data) {
+    if (!this.pending) {
+      // data is not from an internal request, so reset table
+      this.loaded = false;
+      this.body.replaceChildren();
+    }
+    this.data = data;
+    return this;
+  }
+
+  update() {
+    const { body, formats, data, stats, limit } = this;
+    const nf = stats.length;
+
+    let count = 0;
+    for (const row of data) {
+      ++count;
+      const tr = document.createElement('tr');
+      for (let i = 0; i < nf; ++i) {
+        const value = row[stats[i].column];
+        const td = document.createElement('td');
+        td.innerText = value == null ? '' : formats[i](value);
+        tr.appendChild(td);
+      }
+      body.appendChild(tr);
+    }
+
+    if (count < limit) {
+      // data table has been fully loaded
+      this.loaded = true;
+    }
+
+    this.pending = false;
+    return this;
+  }
+
+  sort(event, column) {
+    if (column === this.sortColumn) {
+      this.sortDesc = !this.sortDesc;
+    } else {
+      this.sortColumn = column;
+      this.sortDesc = false;
+    }
+
+    const th = event.currentTarget;
+    const currentHeader = this.sortHeader;
+    if (currentHeader === th && event.metaKey) {
+      currentHeader.firstChild.textContent = '';
+      this.sortHeader = null;
+      this.sortColumn = null;
+    } else {
+      if (currentHeader) currentHeader.firstChild.textContent = '';
+      this.sortHeader = th;
+      th.firstChild.textContent = this.sortDesc ? "▾"  : "▴";
+    }
+
+    // issue query for sorted data
+    const query = this.query(this.filterBy?.predicate(this));
+    this.request.update(query);
+  }
+}
+
+function formatof(base = {}, stats, locale) {
+  return stats.map(({ column, type }) => {
+    if (column in base) {
+      return base[column];
+    } else {
+      switch (type) {
+        case 'number': return formatLocaleNumber(locale);
+        case 'date': return formatDate;
+        default: return formatLocaleAuto(locale);
+      }
+    }
+  });
+}
+
+function alignof(base = {}, stats) {
+  return stats.map(({ column, type }) => {
+    if (column in base) {
+      return base[column];
+    } else if (type === 'number') {
+      return 'right';
+    } else {
+      return 'left';
+    }
+  });
+}
+
+function tableCSS(id, align) {
+  const styles = [];
+  align.forEach((a, i) => {
+    if (a !== 'left') {
+      styles.push(`#${id} tr>:nth-child(${i+1}) {text-align:${a}}`);
+    }
+  });
+  return styles.join(' ');
+}

package/src/index.js

@@ -0,0 +1,4 @@
+export { Menu } from './Menu.js';
+export { Search } from './Search.js';
+export { Slider } from './Slider.js';
+export { Table } from './Table.js';

package/src/util/format.js

@@ -0,0 +1,47 @@
+import { format as isoformat } from 'isoformat';
+
+// Note: use formatAuto (or any other localized format) to present values to the
+// user; stringify is only intended for machine values.
+export function stringify(x) {
+  return x == null ? '' : `${x}`;
+}
+
+export const formatLocaleAuto = localize(locale => {
+  const formatNumber = formatLocaleNumber(locale);
+  return value => value == null ? ''
+    : typeof value === 'number' ? formatNumber(value)
+    : value instanceof Date ? formatDate(value)
+    : `${value}`;
+});
+
+export const formatLocaleNumber = localize(locale => {
+  return value => value === 0 ? '0' : value.toLocaleString(locale); // handle negative zero
+});
+
+export const formatAuto = formatLocaleAuto();
+
+export const formatNumber = formatLocaleNumber();
+
+export function formatTrim(value) {
+  const s = value.toString();
+  const n = s.length;
+  let i0 = -1, i1;
+  out: for (let i = 1; i < n; ++i) {
+    switch (s[i]) {
+      case '.': i0 = i1 = i; break;
+      case '0': if (i0 === 0) i0 = i; i1 = i; break;
+      default: if (!+s[i]) break out; if (i0 > 0) i0 = 0; break;
+    }
+  }
+  return i0 > 0 ? s.slice(0, i0) + s.slice(i1 + 1) : s;
+}
+
+export function formatDate(date) {
+  return isoformat(date, 'Invalid Date');
+}
+
+// Memoize the last-returned locale.
+export function localize(f) {
+  let key = localize, value;
+  return (locale = 'en') => locale === key ? value : (value = f(key = locale));
+}