diff --git a/docs/01a85c17.b62cb06e.js b/docs/01a85c17.5007ae08.js similarity index 86% rename from docs/01a85c17.b62cb06e.js rename to docs/01a85c17.5007ae08.js index 3b6ddc9525..5b926d8f4b 100644 --- a/docs/01a85c17.b62cb06e.js +++ b/docs/01a85c17.5007ae08.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{56:function(e,a,t){"use strict";t.r(a);var n=t(0),c=t.n(n),l=t(292),r=t(290);a.default=function(e){const{tags:a}=e,t={};Object.keys(a).forEach((e=>{const a=function(e){return e[0].toUpperCase()}(e);t[a]=t[a]||[],t[a].push(e)}));const n=Object.entries(t).sort((([e],[a])=>e===a?0:e>a?1:-1)).map((([e,t])=>c.a.createElement("div",{key:e},c.a.createElement("h3",null,e),t.map((e=>c.a.createElement(r.a,{className:"padding-right--md",href:a[e].permalink,key:e},a[e].name," (",a[e].count,")"))),c.a.createElement("hr",null)))).filter((e=>null!=e));return c.a.createElement(l.a,{title:"Tags",description:"Blog Tags"},c.a.createElement("div",{className:"container margin-vert--lg"},c.a.createElement("div",{className:"row"},c.a.createElement("main",{className:"col col--8 col--offset-2"},c.a.createElement("h1",null,"Tags"),c.a.createElement("div",{className:"margin-vert--lg"},n)))))}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{56:function(e,a,t){"use strict";t.r(a);var n=t(0),c=t.n(n),l=t(295),r=t(293);a.default=function(e){const{tags:a}=e,t={};Object.keys(a).forEach((e=>{const a=function(e){return e[0].toUpperCase()}(e);t[a]=t[a]||[],t[a].push(e)}));const n=Object.entries(t).sort((([e],[a])=>e===a?0:e>a?1:-1)).map((([e,t])=>c.a.createElement("div",{key:e},c.a.createElement("h3",null,e),t.map((e=>c.a.createElement(r.a,{className:"padding-right--md",href:a[e].permalink,key:e},a[e].name," (",a[e].count,")"))),c.a.createElement("hr",null)))).filter((e=>null!=e));return c.a.createElement(l.a,{title:"Tags",description:"Blog Tags"},c.a.createElement("div",{className:"container margin-vert--lg"},c.a.createElement("div",{className:"row"},c.a.createElement("main",{className:"col col--8 col--offset-2"},c.a.createElement("h1",null,"Tags"),c.a.createElement("div",{className:"margin-vert--lg"},n)))))}}}]); \ No newline at end of file diff --git a/docs/0923c366.9ec727ca.js b/docs/0923c366.d31cd624.js similarity index 97% rename from docs/0923c366.9ec727ca.js rename to docs/0923c366.d31cd624.js index ceab097cd4..aca68dd588 100644 --- a/docs/0923c366.9ec727ca.js +++ b/docs/0923c366.d31cd624.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{287:function(e,o,t){"use strict";t.d(o,"a",(function(){return l})),t.d(o,"b",(function(){return w}));var n=t(0),a=t.n(n);function r(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}function i(e,o){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);o&&(n=n.filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable}))),t.push.apply(t,n)}return t}function s(e){for(var o=1;o=0||(a[t]=e[t]);return a}(e,o);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),u=function(e){var o=a.a.useContext(p),t=o;return e&&(t="function"==typeof e?e(o):s(s({},o),e)),t},l=function(e){var o=u(e.components);return a.a.createElement(p.Provider,{value:o},e.children)},g={inlineCode:"code",wrapper:function(e){var o=e.children;return a.a.createElement(a.a.Fragment,{},o)}},m=a.a.forwardRef((function(e,o){var t=e.components,n=e.mdxType,r=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),l=u(t),m=n,w=l["".concat(i,".").concat(m)]||l[m]||g[m]||r;return t?a.a.createElement(w,s(s({ref:o},p),{},{components:t})):a.a.createElement(w,s({ref:o},p))}));function w(e,o){var t=arguments,n=o&&o.mdxType;if("string"==typeof e||n){var r=t.length,i=new Array(r);i[0]=m;var s={};for(var c in o)hasOwnProperty.call(o,c)&&(s[c]=o[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,i[1]=s;for(var p=2;p=0||(a[t]=e[t]);return a}(e,o);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),u=function(e){var o=a.a.useContext(p),t=o;return e&&(t="function"==typeof e?e(o):s(s({},o),e)),t},l=function(e){var o=u(e.components);return a.a.createElement(p.Provider,{value:o},e.children)},g={inlineCode:"code",wrapper:function(e){var o=e.children;return a.a.createElement(a.a.Fragment,{},o)}},m=a.a.forwardRef((function(e,o){var t=e.components,n=e.mdxType,r=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),l=u(t),m=n,w=l["".concat(i,".").concat(m)]||l[m]||g[m]||r;return t?a.a.createElement(w,s(s({ref:o},p),{},{components:t})):a.a.createElement(w,s({ref:o},p))}));function w(e,o){var t=arguments,n=o&&o.mdxType;if("string"==typeof e||n){var r=t.length,i=new Array(r);i[0]=m;var s={};for(var c in o)hasOwnProperty.call(o,c)&&(s[c]=o[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,i[1]=s;for(var p=2;p=0||(r[a]=n[a]);return r}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(n,a)&&(r[a]=n[a])}return r}var p=r.a.createContext({}),u=function(n){var e=r.a.useContext(p),a=e;return n&&(a="function"==typeof n?n(e):o(o({},e),n)),a},s=function(n){var e=u(n.components);return r.a.createElement(p.Provider,{value:e},n.children)},d={inlineCode:"code",wrapper:function(n){var e=n.children;return r.a.createElement(r.a.Fragment,{},e)}},f=r.a.forwardRef((function(n,e){var a=n.components,t=n.mdxType,i=n.originalType,c=n.parentName,p=l(n,["components","mdxType","originalType","parentName"]),s=u(a),f=t,_=s["".concat(c,".").concat(f)]||s[f]||d[f]||i;return a?r.a.createElement(_,o(o({ref:e},p),{},{components:a})):r.a.createElement(_,o({ref:e},p))}));function _(n,e){var a=arguments,t=e&&e.mdxType;if("string"==typeof n||t){var i=a.length,c=new Array(i);c[0]=f;var o={};for(var l in e)hasOwnProperty.call(e,l)&&(o[l]=e[l]);o.originalType=n,o.mdxType="string"==typeof n?n:t,c[1]=o;for(var p=2;p 0:\n time.sleep(update_freq)\n\n for f, c in simples:\n val, pc = f.next()\n c.value = f'${val:.2f}',\n\n for f, c in simples_colored:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in lines:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in bars:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in large_lines:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in large_pcs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n for f, c in small_pcs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n for f, c in small_pbs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n for f, c in large_cards:\n val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc\n\n for f, c in large_pbs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n page.save()\n\n\ncreate_dashboard(update_freq=0.25)\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{290:function(n,e,a){"use strict";a.d(e,"a",(function(){return s})),a.d(e,"b",(function(){return _}));var t=a(0),r=a.n(t);function i(n,e,a){return e in n?Object.defineProperty(n,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):n[e]=a,n}function c(n,e){var a=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),a.push.apply(a,t)}return a}function o(n){for(var e=1;e=0||(r[a]=n[a]);return r}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(n,a)&&(r[a]=n[a])}return r}var p=r.a.createContext({}),u=function(n){var e=r.a.useContext(p),a=e;return n&&(a="function"==typeof n?n(e):o(o({},e),n)),a},s=function(n){var e=u(n.components);return r.a.createElement(p.Provider,{value:e},n.children)},d={inlineCode:"code",wrapper:function(n){var e=n.children;return r.a.createElement(r.a.Fragment,{},e)}},f=r.a.forwardRef((function(n,e){var a=n.components,t=n.mdxType,i=n.originalType,c=n.parentName,p=l(n,["components","mdxType","originalType","parentName"]),s=u(a),f=t,_=s["".concat(c,".").concat(f)]||s[f]||d[f]||i;return a?r.a.createElement(_,o(o({ref:e},p),{},{components:a})):r.a.createElement(_,o({ref:e},p))}));function _(n,e){var a=arguments,t=e&&e.mdxType;if("string"==typeof n||t){var i=a.length,c=new Array(i);c[0]=f;var o={};for(var l in e)hasOwnProperty.call(e,l)&&(o[l]=e[l]);o.originalType=n,o.mdxType="string"==typeof n?n:t,c[1]=o;for(var p=2;p 0:\n time.sleep(update_freq)\n\n for f, c in simples:\n val, pc = f.next()\n c.value = f'${val:.2f}',\n\n for f, c in simples_colored:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in lines:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in bars:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in large_lines:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in large_pcs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n for f, c in small_pcs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n for f, c in small_pbs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n for f, c in large_cards:\n val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc\n\n for f, c in large_pbs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n page.save()\n\n\ncreate_dashboard(update_freq=0.25)\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/docs/0a6c0f5b.1a813ff1.js b/docs/0a6c0f5b.192be162.js similarity index 98% rename from docs/0a6c0f5b.1a813ff1.js rename to docs/0a6c0f5b.192be162.js index 4c65dae140..58ba07e7b3 100644 --- a/docs/0a6c0f5b.1a813ff1.js +++ b/docs/0a6c0f5b.192be162.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{287:function(e,t,a){"use strict";a.d(t,"a",(function(){return b})),a.d(t,"b",(function(){return m}));var n=a(0),r=a.n(n);function l(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function o(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},b=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,l=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),b=p(a),d=n,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||l;return a?r.a.createElement(m,o(o({ref:t},s),{},{components:a})):r.a.createElement(m,o({ref:t},s))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var l=a.length,i=new Array(l);i[0]=d;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o.mdxType="string"==typeof e?e:n,i[1]=o;for(var s=2;s=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},b=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,l=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),b=p(a),d=n,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||l;return a?r.a.createElement(m,o(o({ref:t},s),{},{components:a})):r.a.createElement(m,o({ref:t},s))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var l=a.length,i=new Array(l);i[0]=d;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o.mdxType="string"==typeof e?e:n,i[1]=o;for(var s=2;s=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),p=function(e){var n=a.a.useContext(c),r=n;return e&&(r="function"==typeof e?e(n):s(s({},n),e)),r},u=function(e){var n=p(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=p(r),d=t,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return r?a.a.createElement(f,s(s({ref:n},c),{},{components:r})):a.a.createElement(f,s({ref:n},c))}));function f(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var o=r.length,i=new Array(o);i[0]=d;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s.mdxType="string"==typeof e?e:t,i[1]=s;for(var c=2;c=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),p=function(e){var n=a.a.useContext(c),r=n;return e&&(r="function"==typeof e?e(n):s(s({},n),e)),r},u=function(e){var n=p(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=p(r),d=t,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return r?a.a.createElement(f,s(s({ref:n},c),{},{components:r})):a.a.createElement(f,s({ref:n},c))}));function f(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var o=r.length,i=new Array(o);i[0]=d;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s.mdxType="string"==typeof e?e:t,i[1]=s;for(var c=2;c=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var b=r.a.createContext({}),p=function(e){var t=r.a.useContext(b),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},s=function(e){var t=p(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),s=p(a),d=n,m=s["".concat(i,".").concat(d)]||s[d]||u[d]||o;return a?r.a.createElement(m,c(c({ref:t},b),{},{components:a})):r.a.createElement(m,c({ref:t},b))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var b=2;b=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var b=r.a.createContext({}),p=function(e){var t=r.a.useContext(b),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},s=function(e){var t=p(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),s=p(a),d=n,m=s["".concat(i,".").concat(d)]||s[d]||u[d]||o;return a?r.a.createElement(m,c(c({ref:t},b),{},{components:a})):r.a.createElement(m,c({ref:t},b))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var b=2;b{}});var s=n(291),f=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);ot.startsWith("/"))(O=w)?b(O):O:void 0;var O;const A=Object(r.useRef)(!1),C=n?i.e:i.c,E=u.a.canUseIntersectionObserver;let S;Object(r.useEffect)((()=>(!E&&m&&window.docusaurus.prefetch(T),()=>{E&&S&&S.disconnect()})),[T,E,m]);const j=null!==(e=null==T?void 0:T.startsWith("#"))&&void 0!==e&&e,P=!T||!m||j;return T&&m&&!j&&!h&&g.collectLink(T),P?o.a.createElement("a",Object.assign({href:T},!m&&{target:"_blank",rel:"noopener noreferrer"},y)):o.a.createElement(C,Object.assign({},y,{onMouseEnter:()=>{A.current||(window.docusaurus.preload(T),A.current=!0)},innerRef:t=>{var e,n;E&&t&&m&&(e=t,n=()=>{window.docusaurus.prefetch(T)},S=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(S.unobserve(e),S.disconnect(),n())}))})),S.observe(e))},to:T||""},n&&{activeClassName:d}))}},291:function(t,e,n){"use strict";n.d(e,"b",(function(){return i})),n.d(e,"a",(function(){return a}));var r=n(288),o=n(294);function i(){const{siteConfig:{baseUrl:t="/",url:e}={}}=Object(r.a)();return{withBaseUrl:(n,r)=>function(t,e,n,{forcePrependBaseUrl:r=!1,absolute:i=!1}={}){if(!n)return n;if(n.startsWith("#"))return n;if(Object(o.b)(n))return n;if(r)return e+n;const a=n.startsWith(e)?n:e+n.replace(/^\//,"");return i?t+a:a}(e,t,n,r)}}function a(t,e={}){const{withBaseUrl:n}=i();return n(t,e)}},293:function(t,e,n){"use strict";var r=n(0),o=n.n(r),i=n(475);e.a=function(t){return o.a.createElement(i.a,Object.assign({},t))}},294:function(t,e,n){"use strict";function r(t){return!0===/^(\w*:|\/\/)/.test(t)}function o(t){return void 0!==t&&!r(t)}n.d(e,"b",(function(){return r})),n.d(e,"a",(function(){return o}))},296:function(t,e,n){"use strict";n.r(e);var r=n(13);n.d(e,"MemoryRouter",(function(){return r.d})),n.d(e,"Prompt",(function(){return r.f})),n.d(e,"Redirect",(function(){return r.g})),n.d(e,"Route",(function(){return r.h})),n.d(e,"Router",(function(){return r.i})),n.d(e,"StaticRouter",(function(){return r.j})),n.d(e,"Switch",(function(){return r.k})),n.d(e,"generatePath",(function(){return r.l})),n.d(e,"matchPath",(function(){return r.m})),n.d(e,"useHistory",(function(){return r.n})),n.d(e,"useLocation",(function(){return r.o})),n.d(e,"useParams",(function(){return r.p})),n.d(e,"useRouteMatch",(function(){return r.q})),n.d(e,"withRouter",(function(){return r.r})),n.d(e,"BrowserRouter",(function(){return r.a})),n.d(e,"HashRouter",(function(){return r.b})),n.d(e,"Link",(function(){return r.c})),n.d(e,"NavLink",(function(){return r.e}))},297:function(t,e,n){try{t.exports=n(484)}catch(r){t.exports={}}},475:function(t,e,n){"use strict";(function(t){n.d(e,"a",(function(){return bt}));var r,o,i,a,u=n(7),c=n.n(u),s=n(476),f=n.n(s),l=n(477),p=n.n(l),d=n(0),h=n.n(d),y=n(20),b=n.n(y),g="bodyAttributes",v="htmlAttributes",m="titleAttributes",w={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title"},T=(Object.keys(w).map((function(t){return w[t]})),"charset"),O="cssText",A="href",C="http-equiv",E="innerHTML",S="itemprop",j="name",P="property",L="rel",k="src",x="target",I={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},D="defaultTitle",R="defer",M="encodeSpecialCharacters",N="onChangeClientState",V="titleTemplate",_=Object.keys(I).reduce((function(t,e){return t[I[e]]=e,t}),{}),B=[w.NOSCRIPT,w.SCRIPT,w.STYLE],H="data-react-helmet",U="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},q=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},Y=function(){function t(t,e){for(var n=0;n=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},z=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},K=function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return!1===e?String(t):String(t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")},$=function(t){var e=Z(t,w.TITLE),n=Z(t,V);if(n&&e)return n.replace(/%s/g,(function(){return Array.isArray(e)?e.join(""):e}));var r=Z(t,D);return e||r||void 0},J=function(t){return Z(t,N)||function(){}},G=function(t,e){return e.filter((function(e){return void 0!==e[t]})).map((function(e){return e[t]})).reduce((function(t,e){return F({},t,e)}),{})},Q=function(t,e){return e.filter((function(t){return void 0!==t[w.BASE]})).map((function(t){return t[w.BASE]})).reverse().reduce((function(e,n){if(!e.length)for(var r=Object.keys(n),o=0;o=0;n--){var r=t[n];if(r.hasOwnProperty(e))return r[e]}return null},tt=(r=Date.now(),function(t){var e=Date.now();e-r>16?(r=e,t(e)):setTimeout((function(){tt(t)}),0)}),et=function(t){return clearTimeout(t)},nt="undefined"!=typeof window?window.requestAnimationFrame&&window.requestAnimationFrame.bind(window)||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||tt:t.requestAnimationFrame||tt,rt="undefined"!=typeof window?window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||et:t.cancelAnimationFrame||et,ot=function(t){return console&&"function"==typeof console.warn&&console.warn(t)},it=null,at=function(t,e){var n=t.baseTag,r=t.bodyAttributes,o=t.htmlAttributes,i=t.linkTags,a=t.metaTags,u=t.noscriptTags,c=t.onChangeClientState,s=t.scriptTags,f=t.styleTags,l=t.title,p=t.titleAttributes;st(w.BODY,r),st(w.HTML,o),ct(l,p);var d={baseTag:ft(w.BASE,n),linkTags:ft(w.LINK,i),metaTags:ft(w.META,a),noscriptTags:ft(w.NOSCRIPT,u),scriptTags:ft(w.SCRIPT,s),styleTags:ft(w.STYLE,f)},h={},y={};Object.keys(d).forEach((function(t){var e=d[t],n=e.newTags,r=e.oldTags;n.length&&(h[t]=n),r.length&&(y[t]=d[t].oldTags)})),e&&e(),c(t,h,y)},ut=function(t){return Array.isArray(t)?t.join(""):t},ct=function(t,e){void 0!==t&&document.title!==t&&(document.title=ut(t)),st(w.TITLE,e)},st=function(t,e){var n=document.getElementsByTagName(t)[0];if(n){for(var r=n.getAttribute(H),o=r?r.split(","):[],i=[].concat(o),a=Object.keys(e),u=0;u=0;l--)n.removeAttribute(i[l]);o.length===i.length?n.removeAttribute(H):n.getAttribute(H)!==a.join(",")&&n.setAttribute(H,a.join(","))}},ft=function(t,e){var n=document.head||document.querySelector(w.HEAD),r=n.querySelectorAll(t+"["+"data-react-helmet]"),o=Array.prototype.slice.call(r),i=[],a=void 0;return e&&e.length&&e.forEach((function(e){var n=document.createElement(t);for(var r in e)if(e.hasOwnProperty(r))if(r===E)n.innerHTML=e.innerHTML;else if(r===O)n.styleSheet?n.styleSheet.cssText=e.cssText:n.appendChild(document.createTextNode(e.cssText));else{var u=void 0===e[r]?"":e[r];n.setAttribute(r,u)}n.setAttribute(H,"true"),o.some((function(t,e){return a=e,n.isEqualNode(t)}))?o.splice(a,1):i.push(n)})),o.forEach((function(t){return t.parentNode.removeChild(t)})),i.forEach((function(t){return n.appendChild(t)})),{oldTags:o,newTags:i}},lt=function(t){return Object.keys(t).reduce((function(e,n){var r=void 0!==t[n]?n+'="'+t[n]+'"':""+n;return e?e+" "+r:r}),"")},pt=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(t).reduce((function(e,n){return e[I[n]||n]=t[n],e}),e)},dt=function(t,e,n){switch(t){case w.TITLE:return{toComponent:function(){return t=e.title,n=e.titleAttributes,(r={key:t})[H]=!0,o=pt(n,r),[h.a.createElement(w.TITLE,o,t)];var t,n,r,o},toString:function(){return function(t,e,n,r){var o=lt(n),i=ut(e);return o?"<"+t+' data-react-helmet="true" '+o+">"+K(i,r)+"":"<"+t+' data-react-helmet="true">'+K(i,r)+""}(t,e.title,e.titleAttributes,n)}};case g:case v:return{toComponent:function(){return pt(e)},toString:function(){return lt(e)}};default:return{toComponent:function(){return function(t,e){return e.map((function(e,n){var r,o=((r={key:n})[H]=!0,r);return Object.keys(e).forEach((function(t){var n=I[t]||t;if(n===E||n===O){var r=e.innerHTML||e.cssText;o.dangerouslySetInnerHTML={__html:r}}else o[n]=e[t]})),h.a.createElement(t,o)}))}(t,e)},toString:function(){return function(t,e,n){return e.reduce((function(e,r){var o=Object.keys(r).filter((function(t){return!(t===E||t===O)})).reduce((function(t,e){var o=void 0===r[e]?e:e+'="'+K(r[e],n)+'"';return t?t+" "+o:o}),""),i=r.innerHTML||r.cssText||"",a=-1===B.indexOf(t);return e+"<"+t+' data-react-helmet="true" '+o+(a?"/>":">"+i+"")}),"")}(t,e,n)}}}},ht=function(t){var e=t.baseTag,n=t.bodyAttributes,r=t.encode,o=t.htmlAttributes,i=t.linkTags,a=t.metaTags,u=t.noscriptTags,c=t.scriptTags,s=t.styleTags,f=t.title,l=void 0===f?"":f,p=t.titleAttributes;return{base:dt(w.BASE,e,r),bodyAttributes:dt(g,n,r),htmlAttributes:dt(v,o,r),link:dt(w.LINK,i,r),meta:dt(w.META,a,r),noscript:dt(w.NOSCRIPT,u,r),script:dt(w.SCRIPT,c,r),style:dt(w.STYLE,s,r),title:dt(w.TITLE,{title:l,titleAttributes:p},r)}},yt=f()((function(t){return{baseTag:Q([A,x],t),bodyAttributes:G(g,t),defer:Z(t,R),encode:Z(t,M),htmlAttributes:G(v,t),linkTags:X(w.LINK,[L,A],t),metaTags:X(w.META,[j,T,C,P,S],t),noscriptTags:X(w.NOSCRIPT,[E],t),onChangeClientState:J(t),scriptTags:X(w.SCRIPT,[k,E],t),styleTags:X(w.STYLE,[O],t),title:$(t),titleAttributes:G(m,t)}}),(function(t){it&&rt(it),t.defer?it=nt((function(){at(t,(function(){it=null}))})):(at(t),it=null)}),ht)((function(){return null})),bt=(o=yt,a=i=function(t){function e(){return q(this,e),z(this,t.apply(this,arguments))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.shouldComponentUpdate=function(t){return!p()(this.props,t)},e.prototype.mapNestedChildrenToProps=function(t,e){if(!e)return null;switch(t.type){case w.SCRIPT:case w.NOSCRIPT:return{innerHTML:e};case w.STYLE:return{cssText:e}}throw new Error("<"+t.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")},e.prototype.flattenArrayTypeChildren=function(t){var e,n=t.child,r=t.arrayTypeChildren,o=t.newChildProps,i=t.nestedChildren;return F({},r,((e={})[n.type]=[].concat(r[n.type]||[],[F({},o,this.mapNestedChildrenToProps(n,i))]),e))},e.prototype.mapObjectTypeChildren=function(t){var e,n,r=t.child,o=t.newProps,i=t.newChildProps,a=t.nestedChildren;switch(r.type){case w.TITLE:return F({},o,((e={})[r.type]=a,e.titleAttributes=F({},i),e));case w.BODY:return F({},o,{bodyAttributes:F({},i)});case w.HTML:return F({},o,{htmlAttributes:F({},i)})}return F({},o,((n={})[r.type]=F({},i),n))},e.prototype.mapArrayTypeChildrenToProps=function(t,e){var n=F({},e);return Object.keys(t).forEach((function(e){var r;n=F({},n,((r={})[e]=t[e],r))})),n},e.prototype.warnOnInvalidChildren=function(t,e){return!0},e.prototype.mapChildrenToProps=function(t,e){var n=this,r={};return h.a.Children.forEach(t,(function(t){if(t&&t.props){var o=t.props,i=o.children,a=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(t).reduce((function(e,n){return e[_[n]||n]=t[n],e}),e)}(W(o,["children"]));switch(n.warnOnInvalidChildren(t,i),t.type){case w.LINK:case w.META:case w.NOSCRIPT:case w.SCRIPT:case w.STYLE:r=n.flattenArrayTypeChildren({child:t,arrayTypeChildren:r,newChildProps:a,nestedChildren:i});break;default:e=n.mapObjectTypeChildren({child:t,newProps:e,newChildProps:a,nestedChildren:i})}}})),e=this.mapArrayTypeChildrenToProps(r,e)},e.prototype.render=function(){var t=this.props,e=t.children,n=W(t,["children"]),r=F({},n);return e&&(r=this.mapChildrenToProps(e,r)),h.a.createElement(o,r)},Y(e,null,[{key:"canUseDOM",set:function(t){o.canUseDOM=t}}]),e}(h.a.Component),i.propTypes={base:c.a.object,bodyAttributes:c.a.object,children:c.a.oneOfType([c.a.arrayOf(c.a.node),c.a.node]),defaultTitle:c.a.string,defer:c.a.bool,encodeSpecialCharacters:c.a.bool,htmlAttributes:c.a.object,link:c.a.arrayOf(c.a.object),meta:c.a.arrayOf(c.a.object),noscript:c.a.arrayOf(c.a.object),onChangeClientState:c.a.func,script:c.a.arrayOf(c.a.object),style:c.a.arrayOf(c.a.object),title:c.a.string,titleAttributes:c.a.object,titleTemplate:c.a.string},i.defaultProps={defer:!0,encodeSpecialCharacters:!0},i.peek=o.peek,i.rewind=function(){var t=o.rewind();return t||(t=ht({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}})),t},a);bt.renderStatic=bt.rewind}).call(this,n(28))},476:function(t,e,n){"use strict";var r,o=n(0),i=(r=o)&&"object"==typeof r&&"default"in r?r.default:r;function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var u=!("undefined"==typeof window||!window.document||!window.document.createElement);t.exports=function(t,e,n){if("function"!=typeof t)throw new Error("Expected reducePropsToState to be a function.");if("function"!=typeof e)throw new Error("Expected handleStateChangeOnClient to be a function.");if(void 0!==n&&"function"!=typeof n)throw new Error("Expected mapStateOnServer to either be undefined or a function.");return function(r){if("function"!=typeof r)throw new Error("Expected WrappedComponent to be a React component.");var c,s=[];function f(){c=t(s.map((function(t){return t.props}))),l.canUseDOM?e(c):n&&(c=n(c))}var l=function(t){var e,n;function o(){return t.apply(this,arguments)||this}n=t,(e=o).prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n,o.peek=function(){return c},o.rewind=function(){if(o.canUseDOM)throw new Error("You may only call rewind() on the server. Call peek() to read the current state.");var t=c;return c=void 0,s=[],t};var a=o.prototype;return a.UNSAFE_componentWillMount=function(){s.push(this),f()},a.componentDidUpdate=function(){f()},a.componentWillUnmount=function(){var t=s.indexOf(this);s.splice(t,1),f()},a.render=function(){return i.createElement(r,this.props)},o}(o.PureComponent);return a(l,"displayName","SideEffect("+function(t){return t.displayName||t.name||"Component"}(r)+")"),a(l,"canUseDOM",u),l}}},477:function(t,e){var n="undefined"!=typeof Element,r="function"==typeof Map,o="function"==typeof Set,i="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(t,e){if(t===e)return!0;if(t&&e&&"object"==typeof t&&"object"==typeof e){if(t.constructor!==e.constructor)return!1;var u,c,s,f;if(Array.isArray(t)){if((u=t.length)!=e.length)return!1;for(c=u;0!=c--;)if(!a(t[c],e[c]))return!1;return!0}if(r&&t instanceof Map&&e instanceof Map){if(t.size!==e.size)return!1;for(f=t.entries();!(c=f.next()).done;)if(!e.has(c.value[0]))return!1;for(f=t.entries();!(c=f.next()).done;)if(!a(c.value[1],e.get(c.value[0])))return!1;return!0}if(o&&t instanceof Set&&e instanceof Set){if(t.size!==e.size)return!1;for(f=t.entries();!(c=f.next()).done;)if(!e.has(c.value[0]))return!1;return!0}if(i&&ArrayBuffer.isView(t)&&ArrayBuffer.isView(e)){if((u=t.length)!=e.length)return!1;for(c=u;0!=c--;)if(t[c]!==e[c])return!1;return!0}if(t.constructor===RegExp)return t.source===e.source&&t.flags===e.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===e.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===e.toString();if((u=(s=Object.keys(t)).length)!==Object.keys(e).length)return!1;for(c=u;0!=c--;)if(!Object.prototype.hasOwnProperty.call(e,s[c]))return!1;if(n&&t instanceof Element)return!1;for(c=u;0!=c--;)if(("_owner"!==s[c]&&"__v"!==s[c]&&"__o"!==s[c]||!t.$$typeof)&&!a(t[s[c]],e[s[c]]))return!1;return!0}return t!=t&&e!=e}t.exports=function(t,e){try{return a(t,e)}catch(n){if((n.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw n}}},484:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.useDocVersionSuggestions=e.useActiveDocContext=e.useActiveVersion=e.useLatestVersion=e.useVersions=e.useActivePlugin=void 0;const r=n(296),o=n(485),i=n(486),a=t=>o.usePluginData("docusaurus-plugin-content-docs",t);e.useActivePlugin=(t={})=>{const e=o.useAllPluginInstancesData("docusaurus-plugin-content-docs"),{pathname:n}=r.useLocation();return i.getActivePlugin(e,n,t)},e.useVersions=t=>a(t).versions,e.useLatestVersion=t=>{const e=a(t);return i.getLatestVersion(e)},e.useActiveVersion=t=>{const e=a(t),{pathname:n}=r.useLocation();return i.getActiveVersion(e,n)},e.useActiveDocContext=t=>{const e=a(t),{pathname:n}=r.useLocation();return i.getActiveDocContext(e,n)},e.useDocVersionSuggestions=t=>{const e=a(t),{pathname:n}=r.useLocation();return i.getDocVersionSuggestions(e,n)}},485:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return o})),n.d(e,"useAllPluginInstancesData",(function(){return i})),n.d(e,"usePluginData",(function(){return a}));var r=n(288);function o(){const{globalData:t}=Object(r.a)();if(!t)throw new Error("Docusaurus global data not found");return t}function i(t){const e=o()[t];if(!e)throw new Error("Docusaurus plugin global data not found for pluginName="+t);return e}function a(t,e="default"){const n=i(t)[e];if(!n)throw new Error(`Docusaurus plugin global data not found for pluginName=${t} and pluginId=${e}`);return n}},486:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.getDocVersionSuggestions=e.getActiveDocContext=e.getActiveVersion=e.getLatestVersion=e.getActivePlugin=void 0;const r=n(296);e.getActivePlugin=function(t,e,n={}){const o=Object.entries(t).find((([t,n])=>!!r.matchPath(e,{path:n.path,exact:!1,strict:!1}))),i=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!i&&n.failfast)throw new Error(`Can't find active docs plugin for pathname=${e}, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(t).map((t=>t.path)).join(", ")}`);return i},e.getLatestVersion=t=>t.versions.find((t=>t.isLast)),e.getActiveVersion=(t,n)=>{const o=e.getLatestVersion(t);return[...t.versions.filter((t=>t!==o)),o].find((t=>!!r.matchPath(n,{path:t.path,exact:!1,strict:!1})))},e.getActiveDocContext=(t,n)=>{const o=e.getActiveVersion(t,n),i=null==o?void 0:o.docs.find((t=>!!r.matchPath(n,{path:t.path,exact:!0,strict:!1})));return{activeVersion:o,activeDoc:i,alternateDocVersions:i?function(e){const n={};return t.versions.forEach((t=>{t.docs.forEach((r=>{r.id===e&&(n[t.name]=r)}))})),n}(i.id):{}}},e.getDocVersionSuggestions=(t,n)=>{const r=e.getLatestVersion(t),o=e.getActiveDocContext(t,n),i=o.activeVersion!==r;return{latestDocSuggestion:i?null==o?void 0:o.alternateDocVersions[r.name]:void 0,latestVersionSuggestion:i?r:void 0}}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{291:function(t,e,n){"use strict";var r=n(0),o=n(23);e.a=function(){const t=Object(r.useContext)(o.a);if(null===t)throw new Error("Docusaurus context not provided");return t}},292:function(t,e,n){"use strict";function r(t){var e,n,o="";if("string"==typeof t||"number"==typeof t)o+=t;else if("object"==typeof t)if(Array.isArray(t))for(e=0;e{}});var s=n(294),f=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);ot.startsWith("/"))(O=w)?b(O):O:void 0;var O;const A=Object(r.useRef)(!1),C=n?i.e:i.c,E=u.a.canUseIntersectionObserver;let S;Object(r.useEffect)((()=>(!E&&m&&window.docusaurus.prefetch(T),()=>{E&&S&&S.disconnect()})),[T,E,m]);const j=null!==(e=null==T?void 0:T.startsWith("#"))&&void 0!==e&&e,P=!T||!m||j;return T&&m&&!j&&!h&&g.collectLink(T),P?o.a.createElement("a",Object.assign({href:T},!m&&{target:"_blank",rel:"noopener noreferrer"},y)):o.a.createElement(C,Object.assign({},y,{onMouseEnter:()=>{A.current||(window.docusaurus.preload(T),A.current=!0)},innerRef:t=>{var e,n;E&&t&&m&&(e=t,n=()=>{window.docusaurus.prefetch(T)},S=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(S.unobserve(e),S.disconnect(),n())}))})),S.observe(e))},to:T||""},n&&{activeClassName:d}))}},294:function(t,e,n){"use strict";n.d(e,"b",(function(){return i})),n.d(e,"a",(function(){return a}));var r=n(291),o=n(297);function i(){const{siteConfig:{baseUrl:t="/",url:e}={}}=Object(r.a)();return{withBaseUrl:(n,r)=>function(t,e,n,{forcePrependBaseUrl:r=!1,absolute:i=!1}={}){if(!n)return n;if(n.startsWith("#"))return n;if(Object(o.b)(n))return n;if(r)return e+n;const a=n.startsWith(e)?n:e+n.replace(/^\//,"");return i?t+a:a}(e,t,n,r)}}function a(t,e={}){const{withBaseUrl:n}=i();return n(t,e)}},296:function(t,e,n){"use strict";var r=n(0),o=n.n(r),i=n(480);e.a=function(t){return o.a.createElement(i.a,Object.assign({},t))}},297:function(t,e,n){"use strict";function r(t){return!0===/^(\w*:|\/\/)/.test(t)}function o(t){return void 0!==t&&!r(t)}n.d(e,"b",(function(){return r})),n.d(e,"a",(function(){return o}))},299:function(t,e,n){"use strict";n.r(e);var r=n(13);n.d(e,"MemoryRouter",(function(){return r.d})),n.d(e,"Prompt",(function(){return r.f})),n.d(e,"Redirect",(function(){return r.g})),n.d(e,"Route",(function(){return r.h})),n.d(e,"Router",(function(){return r.i})),n.d(e,"StaticRouter",(function(){return r.j})),n.d(e,"Switch",(function(){return r.k})),n.d(e,"generatePath",(function(){return r.l})),n.d(e,"matchPath",(function(){return r.m})),n.d(e,"useHistory",(function(){return r.n})),n.d(e,"useLocation",(function(){return r.o})),n.d(e,"useParams",(function(){return r.p})),n.d(e,"useRouteMatch",(function(){return r.q})),n.d(e,"withRouter",(function(){return r.r})),n.d(e,"BrowserRouter",(function(){return r.a})),n.d(e,"HashRouter",(function(){return r.b})),n.d(e,"Link",(function(){return r.c})),n.d(e,"NavLink",(function(){return r.e}))},300:function(t,e,n){try{t.exports=n(489)}catch(r){t.exports={}}},480:function(t,e,n){"use strict";(function(t){n.d(e,"a",(function(){return bt}));var r,o,i,a,u=n(7),c=n.n(u),s=n(481),f=n.n(s),l=n(482),p=n.n(l),d=n(0),h=n.n(d),y=n(20),b=n.n(y),g="bodyAttributes",v="htmlAttributes",m="titleAttributes",w={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title"},T=(Object.keys(w).map((function(t){return w[t]})),"charset"),O="cssText",A="href",C="http-equiv",E="innerHTML",S="itemprop",j="name",P="property",L="rel",k="src",x="target",I={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},D="defaultTitle",R="defer",M="encodeSpecialCharacters",N="onChangeClientState",V="titleTemplate",_=Object.keys(I).reduce((function(t,e){return t[I[e]]=e,t}),{}),B=[w.NOSCRIPT,w.SCRIPT,w.STYLE],H="data-react-helmet",U="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},q=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},Y=function(){function t(t,e){for(var n=0;n=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},z=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},K=function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return!1===e?String(t):String(t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")},$=function(t){var e=Z(t,w.TITLE),n=Z(t,V);if(n&&e)return n.replace(/%s/g,(function(){return Array.isArray(e)?e.join(""):e}));var r=Z(t,D);return e||r||void 0},J=function(t){return Z(t,N)||function(){}},G=function(t,e){return e.filter((function(e){return void 0!==e[t]})).map((function(e){return e[t]})).reduce((function(t,e){return F({},t,e)}),{})},Q=function(t,e){return e.filter((function(t){return void 0!==t[w.BASE]})).map((function(t){return t[w.BASE]})).reverse().reduce((function(e,n){if(!e.length)for(var r=Object.keys(n),o=0;o=0;n--){var r=t[n];if(r.hasOwnProperty(e))return r[e]}return null},tt=(r=Date.now(),function(t){var e=Date.now();e-r>16?(r=e,t(e)):setTimeout((function(){tt(t)}),0)}),et=function(t){return clearTimeout(t)},nt="undefined"!=typeof window?window.requestAnimationFrame&&window.requestAnimationFrame.bind(window)||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||tt:t.requestAnimationFrame||tt,rt="undefined"!=typeof window?window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||et:t.cancelAnimationFrame||et,ot=function(t){return console&&"function"==typeof console.warn&&console.warn(t)},it=null,at=function(t,e){var n=t.baseTag,r=t.bodyAttributes,o=t.htmlAttributes,i=t.linkTags,a=t.metaTags,u=t.noscriptTags,c=t.onChangeClientState,s=t.scriptTags,f=t.styleTags,l=t.title,p=t.titleAttributes;st(w.BODY,r),st(w.HTML,o),ct(l,p);var d={baseTag:ft(w.BASE,n),linkTags:ft(w.LINK,i),metaTags:ft(w.META,a),noscriptTags:ft(w.NOSCRIPT,u),scriptTags:ft(w.SCRIPT,s),styleTags:ft(w.STYLE,f)},h={},y={};Object.keys(d).forEach((function(t){var e=d[t],n=e.newTags,r=e.oldTags;n.length&&(h[t]=n),r.length&&(y[t]=d[t].oldTags)})),e&&e(),c(t,h,y)},ut=function(t){return Array.isArray(t)?t.join(""):t},ct=function(t,e){void 0!==t&&document.title!==t&&(document.title=ut(t)),st(w.TITLE,e)},st=function(t,e){var n=document.getElementsByTagName(t)[0];if(n){for(var r=n.getAttribute(H),o=r?r.split(","):[],i=[].concat(o),a=Object.keys(e),u=0;u=0;l--)n.removeAttribute(i[l]);o.length===i.length?n.removeAttribute(H):n.getAttribute(H)!==a.join(",")&&n.setAttribute(H,a.join(","))}},ft=function(t,e){var n=document.head||document.querySelector(w.HEAD),r=n.querySelectorAll(t+"["+"data-react-helmet]"),o=Array.prototype.slice.call(r),i=[],a=void 0;return e&&e.length&&e.forEach((function(e){var n=document.createElement(t);for(var r in e)if(e.hasOwnProperty(r))if(r===E)n.innerHTML=e.innerHTML;else if(r===O)n.styleSheet?n.styleSheet.cssText=e.cssText:n.appendChild(document.createTextNode(e.cssText));else{var u=void 0===e[r]?"":e[r];n.setAttribute(r,u)}n.setAttribute(H,"true"),o.some((function(t,e){return a=e,n.isEqualNode(t)}))?o.splice(a,1):i.push(n)})),o.forEach((function(t){return t.parentNode.removeChild(t)})),i.forEach((function(t){return n.appendChild(t)})),{oldTags:o,newTags:i}},lt=function(t){return Object.keys(t).reduce((function(e,n){var r=void 0!==t[n]?n+'="'+t[n]+'"':""+n;return e?e+" "+r:r}),"")},pt=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(t).reduce((function(e,n){return e[I[n]||n]=t[n],e}),e)},dt=function(t,e,n){switch(t){case w.TITLE:return{toComponent:function(){return t=e.title,n=e.titleAttributes,(r={key:t})[H]=!0,o=pt(n,r),[h.a.createElement(w.TITLE,o,t)];var t,n,r,o},toString:function(){return function(t,e,n,r){var o=lt(n),i=ut(e);return o?"<"+t+' data-react-helmet="true" '+o+">"+K(i,r)+"":"<"+t+' data-react-helmet="true">'+K(i,r)+""}(t,e.title,e.titleAttributes,n)}};case g:case v:return{toComponent:function(){return pt(e)},toString:function(){return lt(e)}};default:return{toComponent:function(){return function(t,e){return e.map((function(e,n){var r,o=((r={key:n})[H]=!0,r);return Object.keys(e).forEach((function(t){var n=I[t]||t;if(n===E||n===O){var r=e.innerHTML||e.cssText;o.dangerouslySetInnerHTML={__html:r}}else o[n]=e[t]})),h.a.createElement(t,o)}))}(t,e)},toString:function(){return function(t,e,n){return e.reduce((function(e,r){var o=Object.keys(r).filter((function(t){return!(t===E||t===O)})).reduce((function(t,e){var o=void 0===r[e]?e:e+'="'+K(r[e],n)+'"';return t?t+" "+o:o}),""),i=r.innerHTML||r.cssText||"",a=-1===B.indexOf(t);return e+"<"+t+' data-react-helmet="true" '+o+(a?"/>":">"+i+"")}),"")}(t,e,n)}}}},ht=function(t){var e=t.baseTag,n=t.bodyAttributes,r=t.encode,o=t.htmlAttributes,i=t.linkTags,a=t.metaTags,u=t.noscriptTags,c=t.scriptTags,s=t.styleTags,f=t.title,l=void 0===f?"":f,p=t.titleAttributes;return{base:dt(w.BASE,e,r),bodyAttributes:dt(g,n,r),htmlAttributes:dt(v,o,r),link:dt(w.LINK,i,r),meta:dt(w.META,a,r),noscript:dt(w.NOSCRIPT,u,r),script:dt(w.SCRIPT,c,r),style:dt(w.STYLE,s,r),title:dt(w.TITLE,{title:l,titleAttributes:p},r)}},yt=f()((function(t){return{baseTag:Q([A,x],t),bodyAttributes:G(g,t),defer:Z(t,R),encode:Z(t,M),htmlAttributes:G(v,t),linkTags:X(w.LINK,[L,A],t),metaTags:X(w.META,[j,T,C,P,S],t),noscriptTags:X(w.NOSCRIPT,[E],t),onChangeClientState:J(t),scriptTags:X(w.SCRIPT,[k,E],t),styleTags:X(w.STYLE,[O],t),title:$(t),titleAttributes:G(m,t)}}),(function(t){it&&rt(it),t.defer?it=nt((function(){at(t,(function(){it=null}))})):(at(t),it=null)}),ht)((function(){return null})),bt=(o=yt,a=i=function(t){function e(){return q(this,e),z(this,t.apply(this,arguments))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.shouldComponentUpdate=function(t){return!p()(this.props,t)},e.prototype.mapNestedChildrenToProps=function(t,e){if(!e)return null;switch(t.type){case w.SCRIPT:case w.NOSCRIPT:return{innerHTML:e};case w.STYLE:return{cssText:e}}throw new Error("<"+t.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")},e.prototype.flattenArrayTypeChildren=function(t){var e,n=t.child,r=t.arrayTypeChildren,o=t.newChildProps,i=t.nestedChildren;return F({},r,((e={})[n.type]=[].concat(r[n.type]||[],[F({},o,this.mapNestedChildrenToProps(n,i))]),e))},e.prototype.mapObjectTypeChildren=function(t){var e,n,r=t.child,o=t.newProps,i=t.newChildProps,a=t.nestedChildren;switch(r.type){case w.TITLE:return F({},o,((e={})[r.type]=a,e.titleAttributes=F({},i),e));case w.BODY:return F({},o,{bodyAttributes:F({},i)});case w.HTML:return F({},o,{htmlAttributes:F({},i)})}return F({},o,((n={})[r.type]=F({},i),n))},e.prototype.mapArrayTypeChildrenToProps=function(t,e){var n=F({},e);return Object.keys(t).forEach((function(e){var r;n=F({},n,((r={})[e]=t[e],r))})),n},e.prototype.warnOnInvalidChildren=function(t,e){return!0},e.prototype.mapChildrenToProps=function(t,e){var n=this,r={};return h.a.Children.forEach(t,(function(t){if(t&&t.props){var o=t.props,i=o.children,a=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(t).reduce((function(e,n){return e[_[n]||n]=t[n],e}),e)}(W(o,["children"]));switch(n.warnOnInvalidChildren(t,i),t.type){case w.LINK:case w.META:case w.NOSCRIPT:case w.SCRIPT:case w.STYLE:r=n.flattenArrayTypeChildren({child:t,arrayTypeChildren:r,newChildProps:a,nestedChildren:i});break;default:e=n.mapObjectTypeChildren({child:t,newProps:e,newChildProps:a,nestedChildren:i})}}})),e=this.mapArrayTypeChildrenToProps(r,e)},e.prototype.render=function(){var t=this.props,e=t.children,n=W(t,["children"]),r=F({},n);return e&&(r=this.mapChildrenToProps(e,r)),h.a.createElement(o,r)},Y(e,null,[{key:"canUseDOM",set:function(t){o.canUseDOM=t}}]),e}(h.a.Component),i.propTypes={base:c.a.object,bodyAttributes:c.a.object,children:c.a.oneOfType([c.a.arrayOf(c.a.node),c.a.node]),defaultTitle:c.a.string,defer:c.a.bool,encodeSpecialCharacters:c.a.bool,htmlAttributes:c.a.object,link:c.a.arrayOf(c.a.object),meta:c.a.arrayOf(c.a.object),noscript:c.a.arrayOf(c.a.object),onChangeClientState:c.a.func,script:c.a.arrayOf(c.a.object),style:c.a.arrayOf(c.a.object),title:c.a.string,titleAttributes:c.a.object,titleTemplate:c.a.string},i.defaultProps={defer:!0,encodeSpecialCharacters:!0},i.peek=o.peek,i.rewind=function(){var t=o.rewind();return t||(t=ht({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}})),t},a);bt.renderStatic=bt.rewind}).call(this,n(28))},481:function(t,e,n){"use strict";var r,o=n(0),i=(r=o)&&"object"==typeof r&&"default"in r?r.default:r;function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var u=!("undefined"==typeof window||!window.document||!window.document.createElement);t.exports=function(t,e,n){if("function"!=typeof t)throw new Error("Expected reducePropsToState to be a function.");if("function"!=typeof e)throw new Error("Expected handleStateChangeOnClient to be a function.");if(void 0!==n&&"function"!=typeof n)throw new Error("Expected mapStateOnServer to either be undefined or a function.");return function(r){if("function"!=typeof r)throw new Error("Expected WrappedComponent to be a React component.");var c,s=[];function f(){c=t(s.map((function(t){return t.props}))),l.canUseDOM?e(c):n&&(c=n(c))}var l=function(t){var e,n;function o(){return t.apply(this,arguments)||this}n=t,(e=o).prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n,o.peek=function(){return c},o.rewind=function(){if(o.canUseDOM)throw new Error("You may only call rewind() on the server. Call peek() to read the current state.");var t=c;return c=void 0,s=[],t};var a=o.prototype;return a.UNSAFE_componentWillMount=function(){s.push(this),f()},a.componentDidUpdate=function(){f()},a.componentWillUnmount=function(){var t=s.indexOf(this);s.splice(t,1),f()},a.render=function(){return i.createElement(r,this.props)},o}(o.PureComponent);return a(l,"displayName","SideEffect("+function(t){return t.displayName||t.name||"Component"}(r)+")"),a(l,"canUseDOM",u),l}}},482:function(t,e){var n="undefined"!=typeof Element,r="function"==typeof Map,o="function"==typeof Set,i="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(t,e){if(t===e)return!0;if(t&&e&&"object"==typeof t&&"object"==typeof e){if(t.constructor!==e.constructor)return!1;var u,c,s,f;if(Array.isArray(t)){if((u=t.length)!=e.length)return!1;for(c=u;0!=c--;)if(!a(t[c],e[c]))return!1;return!0}if(r&&t instanceof Map&&e instanceof Map){if(t.size!==e.size)return!1;for(f=t.entries();!(c=f.next()).done;)if(!e.has(c.value[0]))return!1;for(f=t.entries();!(c=f.next()).done;)if(!a(c.value[1],e.get(c.value[0])))return!1;return!0}if(o&&t instanceof Set&&e instanceof Set){if(t.size!==e.size)return!1;for(f=t.entries();!(c=f.next()).done;)if(!e.has(c.value[0]))return!1;return!0}if(i&&ArrayBuffer.isView(t)&&ArrayBuffer.isView(e)){if((u=t.length)!=e.length)return!1;for(c=u;0!=c--;)if(t[c]!==e[c])return!1;return!0}if(t.constructor===RegExp)return t.source===e.source&&t.flags===e.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===e.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===e.toString();if((u=(s=Object.keys(t)).length)!==Object.keys(e).length)return!1;for(c=u;0!=c--;)if(!Object.prototype.hasOwnProperty.call(e,s[c]))return!1;if(n&&t instanceof Element)return!1;for(c=u;0!=c--;)if(("_owner"!==s[c]&&"__v"!==s[c]&&"__o"!==s[c]||!t.$$typeof)&&!a(t[s[c]],e[s[c]]))return!1;return!0}return t!=t&&e!=e}t.exports=function(t,e){try{return a(t,e)}catch(n){if((n.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw n}}},489:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.useDocVersionSuggestions=e.useActiveDocContext=e.useActiveVersion=e.useLatestVersion=e.useVersions=e.useActivePlugin=void 0;const r=n(299),o=n(490),i=n(491),a=t=>o.usePluginData("docusaurus-plugin-content-docs",t);e.useActivePlugin=(t={})=>{const e=o.useAllPluginInstancesData("docusaurus-plugin-content-docs"),{pathname:n}=r.useLocation();return i.getActivePlugin(e,n,t)},e.useVersions=t=>a(t).versions,e.useLatestVersion=t=>{const e=a(t);return i.getLatestVersion(e)},e.useActiveVersion=t=>{const e=a(t),{pathname:n}=r.useLocation();return i.getActiveVersion(e,n)},e.useActiveDocContext=t=>{const e=a(t),{pathname:n}=r.useLocation();return i.getActiveDocContext(e,n)},e.useDocVersionSuggestions=t=>{const e=a(t),{pathname:n}=r.useLocation();return i.getDocVersionSuggestions(e,n)}},490:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return o})),n.d(e,"useAllPluginInstancesData",(function(){return i})),n.d(e,"usePluginData",(function(){return a}));var r=n(291);function o(){const{globalData:t}=Object(r.a)();if(!t)throw new Error("Docusaurus global data not found");return t}function i(t){const e=o()[t];if(!e)throw new Error("Docusaurus plugin global data not found for pluginName="+t);return e}function a(t,e="default"){const n=i(t)[e];if(!n)throw new Error(`Docusaurus plugin global data not found for pluginName=${t} and pluginId=${e}`);return n}},491:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.getDocVersionSuggestions=e.getActiveDocContext=e.getActiveVersion=e.getLatestVersion=e.getActivePlugin=void 0;const r=n(299);e.getActivePlugin=function(t,e,n={}){const o=Object.entries(t).find((([t,n])=>!!r.matchPath(e,{path:n.path,exact:!1,strict:!1}))),i=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!i&&n.failfast)throw new Error(`Can't find active docs plugin for pathname=${e}, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(t).map((t=>t.path)).join(", ")}`);return i},e.getLatestVersion=t=>t.versions.find((t=>t.isLast)),e.getActiveVersion=(t,n)=>{const o=e.getLatestVersion(t);return[...t.versions.filter((t=>t!==o)),o].find((t=>!!r.matchPath(n,{path:t.path,exact:!1,strict:!1})))},e.getActiveDocContext=(t,n)=>{const o=e.getActiveVersion(t,n),i=null==o?void 0:o.docs.find((t=>!!r.matchPath(n,{path:t.path,exact:!0,strict:!1})));return{activeVersion:o,activeDoc:i,alternateDocVersions:i?function(e){const n={};return t.versions.forEach((t=>{t.docs.forEach((r=>{r.id===e&&(n[t.name]=r)}))})),n}(i.id):{}}},e.getDocVersionSuggestions=(t,n)=>{const r=e.getLatestVersion(t),o=e.getActiveDocContext(t,n),i=o.activeVersion!==r;return{latestDocSuggestion:i?null==o?void 0:o.alternateDocVersions[r.name]:void 0,latestVersionSuggestion:i?r:void 0}}}}]); \ No newline at end of file diff --git a/docs/10172759.abc34e01.js b/docs/10172759.aa8c1123.js similarity index 97% rename from docs/10172759.abc34e01.js rename to docs/10172759.aa8c1123.js index dfb00898f2..ac40c46b1b 100644 --- a/docs/10172759.abc34e01.js +++ b/docs/10172759.aa8c1123.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{287:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return b}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,b=s["".concat(i,".").concat(f)]||s[f]||m[f]||o;return n?a.a.createElement(b,p(p({ref:t},l),{},{components:n})):a.a.createElement(b,p({ref:t},l))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:r,i[1]=p;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,b=s["".concat(i,".").concat(f)]||s[f]||m[f]||o;return n?a.a.createElement(b,p(p({ref:t},l),{},{components:n})):a.a.createElement(b,p({ref:t},l))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:r,i[1]=p;for(var l=2;l=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=o.a.createContext({}),s=function(e){var t=o.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,b=u["".concat(l,".").concat(f)]||u[f]||m[f]||a;return r?o.a.createElement(b,i(i({ref:t},c),{},{components:r})):o.a.createElement(b,i({ref:t},c))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,l=new Array(a);l[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var c=2;c=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=o.a.createContext({}),s=function(e){var t=o.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,b=u["".concat(l,".").concat(f)]||u[f]||m[f]||a;return r?o.a.createElement(b,i(i({ref:t},c),{},{components:r})):o.a.createElement(b,i({ref:t},c))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,l=new Array(a);l[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),d=p(n),m=a,v=d["".concat(o,".").concat(m)]||d[m]||u[m]||i;return n?r.a.createElement(v,l(l({ref:t},s),{},{components:n})):r.a.createElement(v,l({ref:t},s))}));function v(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,o[1]=l;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),d=p(n),m=a,v=d["".concat(o,".").concat(m)]||d[m]||u[m]||i;return n?r.a.createElement(v,l(l({ref:t},s),{},{components:n})):r.a.createElement(v,l({ref:t},s))}));function v(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,o[1]=l;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),d=n,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return r?a.a.createElement(f,c(c({ref:t},l),{},{components:r})):a.a.createElement(f,c({ref:t},l))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),d=n,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return r?a.a.createElement(f,c(c({ref:t},l),{},{components:r})):a.a.createElement(f,c({ref:t},l))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=u(n),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return n?a.a.createElement(f,c(c({ref:t},p),{},{components:n})):a.a.createElement(f,c({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=u(n),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return n?a.a.createElement(f,c(c({ref:t},p),{},{components:n})):a.a.createElement(f,c({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},f=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(t),f=r,m=p["".concat(s,".").concat(f)]||p[f]||b[f]||o;return t?a.a.createElement(m,i(i({ref:n},c),{},{components:t})):a.a.createElement(m,i({ref:n},c))}));function m(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,s=new Array(o);s[0]=f;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,s[1]=i;for(var c=2;c 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue', sortable=True, searchable=True, max_width='300'),\n ui.table_column(name='status', label='Status', filterable=True),\n ui.table_column(name='notifications', label='Notifications', filterable=True),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views', sortable=True),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n groupable=True,\n downloadable=True,\n resettable=True,\n height='800px'\n )\n ])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{290:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return m}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},f=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(t),f=r,m=p["".concat(s,".").concat(f)]||p[f]||b[f]||o;return t?a.a.createElement(m,i(i({ref:n},c),{},{components:t})):a.a.createElement(m,i({ref:n},c))}));function m(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,s=new Array(o);s[0]=f;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,s[1]=i;for(var c=2;c 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue', sortable=True, searchable=True, max_width='300'),\n ui.table_column(name='status', label='Status', filterable=True),\n ui.table_column(name='notifications', label='Notifications', filterable=True),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views', sortable=True),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n groupable=True,\n downloadable=True,\n resettable=True,\n height='800px'\n )\n ])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/docs/1375ade1.c1f5d652.js b/docs/1375ade1.b8608bd4.js similarity index 99% rename from docs/1375ade1.c1f5d652.js rename to docs/1375ade1.b8608bd4.js index 579bc0c778..78e5892c4b 100644 --- a/docs/1375ade1.c1f5d652.js +++ b/docs/1375ade1.b8608bd4.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{287:function(e,n,t){"use strict";t.d(n,"a",(function(){return b})),t.d(n,"b",(function(){return m}));var i=t(0),a=t.n(i);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function l(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),s=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},b=function(e){var n=s(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,i=e.mdxType,r=e.originalType,o=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),b=s(t),d=i,m=b["".concat(o,".").concat(d)]||b[d]||u[d]||r;return t?a.a.createElement(m,l(l({ref:n},c),{},{components:t})):a.a.createElement(m,l({ref:n},c))}));function m(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var r=t.length,o=new Array(r);o[0]=d;var l={};for(var p in n)hasOwnProperty.call(n,p)&&(l[p]=n[p]);l.originalType=e,l.mdxType="string"==typeof e?e:i,o[1]=l;for(var c=2;c")," command can be used to launch a new instance of that app.\nThe ",Object(r.b)("inlineCode",{parentName:"p"},"-v")," flag can be used with ",Object(r.b)("inlineCode",{parentName:"p"},"app run")," to specify app instance visibility settings."),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-sh"}),"$ q8s-cli app run bcd543210-1111-1111-1111-0123456789ab\nID 22222222-3333-4444-5555-666666666666\nURL https://22222222-3333-4444-5555-666666666666.q8s.h2o.ai\n")),Object(r.b)("h3",{id:"publishing-an-app-for-others-to-see-and-launch"},"Publishing an app for others to see and launch"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli bundle import")," in your app git repository. This will automatically package your\ncurrent directory into a ",Object(r.b)("inlineCode",{parentName:"p"},".qz")," package and import it to q8s."),Object(r.b)("p",null,"If you set the visibility to ",Object(r.b)("inlineCode",{parentName:"p"},"ALL_USERS")," (via the ",Object(r.b)("inlineCode",{parentName:"p"},"-v")," flag), others will be able use ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli app run"),"\nor the UI to launch the app in q8s."),Object(r.b)("p",null,"Note: the name-version combination from your ",Object(r.b)("inlineCode",{parentName:"p"},"q-app.toml")," has to be unique and q8s will reject\nthe request if such combination already exists. Therefore, you need to update the version in ",Object(r.b)("inlineCode",{parentName:"p"},"q-app.toml"),"\nbefore each run."),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-sh"}),"$ q8s-cli bundle import -v ALL_USERS\nID bcd543210-1111-1111-1111-0123456789ab\nTitle Q Peak\nVersion 0.1.2\nCategory Healthcare\nCreated At 2020-10-13 06:28:03.050226 +0000 UTC\nUpdated At 2020-10-13 06:28:03.050226 +0000 UTC\nOwner user1@h2o.ai\nVisibility ALL_USERS\nBundle Location ai.h2o.q.peak.0.1.2.qz\nIcon Location ai.h2o.q.peak.0.1.2/icon.jpg\nDescription Forecast of COVID-19 spread\n")),Object(r.b)("h3",{id:"running-an-app-under-development-in-q8s"},"Running an app under development in q8s"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli bundle deploy")," in your app git repository. This will automatically package your\ncurrent directory into a ",Object(r.b)("inlineCode",{parentName:"p"},".qz")," package, import it to q8s, and run it."),Object(r.b)("p",null,'In the output you will be able to find a URL where you can reach the instance, or visit\nthe "My Instances" in the UI.'),Object(r.b)("p",null,"Note: q8s will auto-generate the version so that you can keep executing this without worrying about\nversion conflicts, just don't forget to clean up old instances/versions."),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-sh"}),"$ q8s-cli bundle deploy\nID bcd543210-1111-1111-1111-0123456789ab\nTitle Q Peak\nVersion 0.1.2-20201013062803\nCategory Healthcare\nCreated At 2020-10-13 06:28:03.050226 +0000 UTC\nUpdated At 2020-10-13 06:28:03.050226 +0000 UTC\nOwner user1@h2o.ai\nVisibility PRIVATE\nBundle Location ai.h2o.q.peak.0.1.2-20201013062803.qz\nIcon Location ai.h2o.q.peak.0.1.2-20201013062803/icon.jpg\nDescription Forecast of COVID-19 spread\nID 22222222-3333-4444-5555-666666666666\nURL https://22222222-3333-4444-5555-666666666666.q8s.h2o.ai\n")),Object(r.b)("h3",{id:"getting-the-logs-of-a-running-q8s-instance"},"Getting the logs of a running q8s instance"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli instance logs"),", use the flag ",Object(r.b)("inlineCode",{parentName:"p"},"-f")," (",Object(r.b)("inlineCode",{parentName:"p"},"--follow"),") to tail the log."),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-sh"}),'$ q8s-cli instance logs c22222222-3333-4444-5555-666666666666\n...\n2020/10/15 12:04:40 # \n2020/10/15 12:04:40 # \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n2020/10/15 12:04:40 # \u2502 \u252c \u252c\u250c\u2500\u2510\u252c \u252c\u250c\u2500\u2510 \u2502\n2020/10/15 12:04:40 # \u2502 \u2502\u2502\u2502\u251c\u2500\u2524\u2514\u2510\u250c\u2518\u251c\u2524 \u2502\n2020/10/15 12:04:40 # \u2502 \u2514\u2534\u2518\u2534 \u2534 \u2514\u2518 \u2514\u2500\u2518 \u2502\n2020/10/15 12:04:40 # \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n2020/10/15 12:04:40 # \n2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/wave/www"}\n2020/10/15 12:04:40 # {"host":"ws://127.0.0.1:55556","route":"/","t":"relay"}\n...\n')),Object(r.b)("h3",{id:"running-the-app-in-q8s-like-environment-locally"},"Running the app in q8s-like environment locally"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli exec"),". This will bundle the app in a temporary ",Object(r.b)("inlineCode",{parentName:"p"},".qz")," and launch it locally\nusing our q8s docker image."),Object(r.b)("p",null,"Note that this requires that you have docker installed and that you have access to the docker image."),Object(r.b)("p",null,"Then navigate to ",Object(r.b)("inlineCode",{parentName:"p"},"http://localhost:55555/"),"."),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-sh"}),'$ q8s-cli exec\n{"level":"info","log_level":"debug","url":"file:///qz/q-peak.0.1.2.qz","app_root":"/app","venv_root":"/resources","server_path":"/wave/wave","py_module":"peak","tmp":"/tmp","startup_server":true,"version":"latest-20200929","time":"2020-10-13T06:42:21Z","message":"configuration"}\n{"level":"info","port":":55555","time":"2020-10-13T06:42:21Z","message":"starting launcher server"}\n{"level":"info","executable":"/wave/wave","time":"2020-10-13T06:42:21Z","message":"q executable found"}\n...\n')),Object(r.b)("h3",{id:"updating-app-visibility"},"Updating App Visibility"),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli app update -v ")," command can be used to modify an existing app's visibility."),Object(r.b)("p",null,"Authors who publish a new version of an app may want to de-list the old version. It is not possible\nto remove an app if there are instances running, as the data may still need to be available.\nThe preferred method to de-list previous versions is to modify the visibility setting to ",Object(r.b)("inlineCode",{parentName:"p"},"PRIVATE"),"."),Object(r.b)("h3",{id:"updating-instance-visibility"},"Updating Instance Visibility"),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli instance update -v ")," command, much like the ",Object(r.b)("inlineCode",{parentName:"p"},"app")," version,\ncan be used to modify an existing running instance's visibility setting."),Object(r.b)("h2",{id:"how-to"},"How-To"),Object(r.b)("h3",{id:"updating-app-to-a-newer-version"},"Updating App To a Newer Version"),Object(r.b)("p",null,'The "Catalog" page shows apps with visibility ',Object(r.b)("inlineCode",{parentName:"p"},"ALL_USERS"),", so rolling out a new app version is done by:"),Object(r.b)("ol",null,Object(r.b)("li",{parentName:"ol"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"#publishing-an-app-for-others-to-see-and-launch"}),"importing a new version")," of the app as ",Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE")),Object(r.b)("li",{parentName:"ol"},"testing the new version"),Object(r.b)("li",{parentName:"ol"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"#updating-app-visibility"}),"changing the visibility")," of the new version to ",Object(r.b)("inlineCode",{parentName:"li"},"ALL USERS")),Object(r.b)("li",{parentName:"ol"},"(optional) ",Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"#updating-app-visibility"}),"changing the visibility")," of the old version to ",Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE"))),Object(r.b)("p",null,"This is based on the ",Object(r.b)("a",Object(i.a)({parentName:"p"},{href:"basic-concepts#app"}),"Basic Concepts"),":"),Object(r.b)("blockquote",null,Object(r.b)("p",{parentName:"blockquote"},"Apps are mostly ",Object(r.b)("strong",{parentName:"p"},"immutable"),', meaning once uploaded, they cannot be changed (except for visibility).\nTo "update" an app, one has to upload a new version.')),Object(r.b)("p",null,"and:"),Object(r.b)("blockquote",null,Object(r.b)("p",{parentName:"blockquote"},"Internally, H2O AI Cloud treats every app name/version combination as a separate entity.\nThe UI then uses the app name to link several versions together; however each can have different\ntitle, description, owner, instances, etc.")),Object(r.b)("p",null,"An important corollary is that ",Object(r.b)("strong",{parentName:"p"},"instances of the old app version are not affected by the update"),"\n(as they are completely separate from the new app version). The update only prevents users from\nstarting new instances of the old version."),Object(r.b)("h3",{id:"utilizing-secrets"},"Utilizing Secrets"),Object(r.b)("p",null,"Developers can pass secrets registered with q8s to apps, exposed as environment variables, using\nthe ",Object(r.b)("inlineCode",{parentName:"p"},"[[Env]]")," section within the ",Object(r.b)("inlineCode",{parentName:"p"},"q-app.toml"),"."),Object(r.b)("p",null,"This allows developers to link their apps with external dependencies (e.g., S3, Driverless AI)\nsecurely, while allowing easy overrides for local development."),Object(r.b)("p",null,"Environment variables prefixed with ",Object(r.b)("inlineCode",{parentName:"p"},"Q8S")," are disallowed."),Object(r.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",Object(i.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(i.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(i.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(r.b)("path",Object(i.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})))),"note")),Object(r.b)("div",Object(i.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"There is currently not a self-service option for developers to add their own secrets,\nnor is there an API for listing the available secrets.\nSecrets are currently managed by Admins.\nContact your admins for the available secrets or for adding a new one."),Object(r.b)("p",{parentName:"div"},"We are actively working on improving this."))),Object(r.b)("h3",{id:"app-route"},"App Route"),Object(r.b)("p",null,"While it is not a strict requirement, since each app in q8s is deployed with its own Qd,\nit is advised that apps use ",Object(r.b)("inlineCode",{parentName:"p"},"/")," as its main route:"),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-python"}),"if __name__ == '__main__':\n listen('/', main_page)\n")))}s.isMDXComponent=!0}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{290:function(e,n,t){"use strict";t.d(n,"a",(function(){return b})),t.d(n,"b",(function(){return m}));var i=t(0),a=t.n(i);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function l(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),s=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},b=function(e){var n=s(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,i=e.mdxType,r=e.originalType,o=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),b=s(t),d=i,m=b["".concat(o,".").concat(d)]||b[d]||u[d]||r;return t?a.a.createElement(m,l(l({ref:n},c),{},{components:t})):a.a.createElement(m,l({ref:n},c))}));function m(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var r=t.length,o=new Array(r);o[0]=d;var l={};for(var p in n)hasOwnProperty.call(n,p)&&(l[p]=n[p]);l.originalType=e,l.mdxType="string"==typeof e?e:i,o[1]=l;for(var c=2;c")," command can be used to launch a new instance of that app.\nThe ",Object(r.b)("inlineCode",{parentName:"p"},"-v")," flag can be used with ",Object(r.b)("inlineCode",{parentName:"p"},"app run")," to specify app instance visibility settings."),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-sh"}),"$ q8s-cli app run bcd543210-1111-1111-1111-0123456789ab\nID 22222222-3333-4444-5555-666666666666\nURL https://22222222-3333-4444-5555-666666666666.q8s.h2o.ai\n")),Object(r.b)("h3",{id:"publishing-an-app-for-others-to-see-and-launch"},"Publishing an app for others to see and launch"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli bundle import")," in your app git repository. This will automatically package your\ncurrent directory into a ",Object(r.b)("inlineCode",{parentName:"p"},".qz")," package and import it to q8s."),Object(r.b)("p",null,"If you set the visibility to ",Object(r.b)("inlineCode",{parentName:"p"},"ALL_USERS")," (via the ",Object(r.b)("inlineCode",{parentName:"p"},"-v")," flag), others will be able use ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli app run"),"\nor the UI to launch the app in q8s."),Object(r.b)("p",null,"Note: the name-version combination from your ",Object(r.b)("inlineCode",{parentName:"p"},"q-app.toml")," has to be unique and q8s will reject\nthe request if such combination already exists. Therefore, you need to update the version in ",Object(r.b)("inlineCode",{parentName:"p"},"q-app.toml"),"\nbefore each run."),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-sh"}),"$ q8s-cli bundle import -v ALL_USERS\nID bcd543210-1111-1111-1111-0123456789ab\nTitle Q Peak\nVersion 0.1.2\nCategory Healthcare\nCreated At 2020-10-13 06:28:03.050226 +0000 UTC\nUpdated At 2020-10-13 06:28:03.050226 +0000 UTC\nOwner user1@h2o.ai\nVisibility ALL_USERS\nBundle Location ai.h2o.q.peak.0.1.2.qz\nIcon Location ai.h2o.q.peak.0.1.2/icon.jpg\nDescription Forecast of COVID-19 spread\n")),Object(r.b)("h3",{id:"running-an-app-under-development-in-q8s"},"Running an app under development in q8s"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli bundle deploy")," in your app git repository. This will automatically package your\ncurrent directory into a ",Object(r.b)("inlineCode",{parentName:"p"},".qz")," package, import it to q8s, and run it."),Object(r.b)("p",null,'In the output you will be able to find a URL where you can reach the instance, or visit\nthe "My Instances" in the UI.'),Object(r.b)("p",null,"Note: q8s will auto-generate the version so that you can keep executing this without worrying about\nversion conflicts, just don't forget to clean up old instances/versions."),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-sh"}),"$ q8s-cli bundle deploy\nID bcd543210-1111-1111-1111-0123456789ab\nTitle Q Peak\nVersion 0.1.2-20201013062803\nCategory Healthcare\nCreated At 2020-10-13 06:28:03.050226 +0000 UTC\nUpdated At 2020-10-13 06:28:03.050226 +0000 UTC\nOwner user1@h2o.ai\nVisibility PRIVATE\nBundle Location ai.h2o.q.peak.0.1.2-20201013062803.qz\nIcon Location ai.h2o.q.peak.0.1.2-20201013062803/icon.jpg\nDescription Forecast of COVID-19 spread\nID 22222222-3333-4444-5555-666666666666\nURL https://22222222-3333-4444-5555-666666666666.q8s.h2o.ai\n")),Object(r.b)("h3",{id:"getting-the-logs-of-a-running-q8s-instance"},"Getting the logs of a running q8s instance"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli instance logs"),", use the flag ",Object(r.b)("inlineCode",{parentName:"p"},"-f")," (",Object(r.b)("inlineCode",{parentName:"p"},"--follow"),") to tail the log."),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-sh"}),'$ q8s-cli instance logs c22222222-3333-4444-5555-666666666666\n...\n2020/10/15 12:04:40 # \n2020/10/15 12:04:40 # \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n2020/10/15 12:04:40 # \u2502 \u252c \u252c\u250c\u2500\u2510\u252c \u252c\u250c\u2500\u2510 \u2502\n2020/10/15 12:04:40 # \u2502 \u2502\u2502\u2502\u251c\u2500\u2524\u2514\u2510\u250c\u2518\u251c\u2524 \u2502\n2020/10/15 12:04:40 # \u2502 \u2514\u2534\u2518\u2534 \u2534 \u2514\u2518 \u2514\u2500\u2518 \u2502\n2020/10/15 12:04:40 # \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n2020/10/15 12:04:40 # \n2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/wave/www"}\n2020/10/15 12:04:40 # {"host":"ws://127.0.0.1:55556","route":"/","t":"relay"}\n...\n')),Object(r.b)("h3",{id:"running-the-app-in-q8s-like-environment-locally"},"Running the app in q8s-like environment locally"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli exec"),". This will bundle the app in a temporary ",Object(r.b)("inlineCode",{parentName:"p"},".qz")," and launch it locally\nusing our q8s docker image."),Object(r.b)("p",null,"Note that this requires that you have docker installed and that you have access to the docker image."),Object(r.b)("p",null,"Then navigate to ",Object(r.b)("inlineCode",{parentName:"p"},"http://localhost:55555/"),"."),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-sh"}),'$ q8s-cli exec\n{"level":"info","log_level":"debug","url":"file:///qz/q-peak.0.1.2.qz","app_root":"/app","venv_root":"/resources","server_path":"/wave/wave","py_module":"peak","tmp":"/tmp","startup_server":true,"version":"latest-20200929","time":"2020-10-13T06:42:21Z","message":"configuration"}\n{"level":"info","port":":55555","time":"2020-10-13T06:42:21Z","message":"starting launcher server"}\n{"level":"info","executable":"/wave/wave","time":"2020-10-13T06:42:21Z","message":"q executable found"}\n...\n')),Object(r.b)("h3",{id:"updating-app-visibility"},"Updating App Visibility"),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli app update -v ")," command can be used to modify an existing app's visibility."),Object(r.b)("p",null,"Authors who publish a new version of an app may want to de-list the old version. It is not possible\nto remove an app if there are instances running, as the data may still need to be available.\nThe preferred method to de-list previous versions is to modify the visibility setting to ",Object(r.b)("inlineCode",{parentName:"p"},"PRIVATE"),"."),Object(r.b)("h3",{id:"updating-instance-visibility"},"Updating Instance Visibility"),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"q8s-cli instance update -v ")," command, much like the ",Object(r.b)("inlineCode",{parentName:"p"},"app")," version,\ncan be used to modify an existing running instance's visibility setting."),Object(r.b)("h2",{id:"how-to"},"How-To"),Object(r.b)("h3",{id:"updating-app-to-a-newer-version"},"Updating App To a Newer Version"),Object(r.b)("p",null,'The "Catalog" page shows apps with visibility ',Object(r.b)("inlineCode",{parentName:"p"},"ALL_USERS"),", so rolling out a new app version is done by:"),Object(r.b)("ol",null,Object(r.b)("li",{parentName:"ol"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"#publishing-an-app-for-others-to-see-and-launch"}),"importing a new version")," of the app as ",Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE")),Object(r.b)("li",{parentName:"ol"},"testing the new version"),Object(r.b)("li",{parentName:"ol"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"#updating-app-visibility"}),"changing the visibility")," of the new version to ",Object(r.b)("inlineCode",{parentName:"li"},"ALL USERS")),Object(r.b)("li",{parentName:"ol"},"(optional) ",Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"#updating-app-visibility"}),"changing the visibility")," of the old version to ",Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE"))),Object(r.b)("p",null,"This is based on the ",Object(r.b)("a",Object(i.a)({parentName:"p"},{href:"basic-concepts#app"}),"Basic Concepts"),":"),Object(r.b)("blockquote",null,Object(r.b)("p",{parentName:"blockquote"},"Apps are mostly ",Object(r.b)("strong",{parentName:"p"},"immutable"),', meaning once uploaded, they cannot be changed (except for visibility).\nTo "update" an app, one has to upload a new version.')),Object(r.b)("p",null,"and:"),Object(r.b)("blockquote",null,Object(r.b)("p",{parentName:"blockquote"},"Internally, H2O AI Cloud treats every app name/version combination as a separate entity.\nThe UI then uses the app name to link several versions together; however each can have different\ntitle, description, owner, instances, etc.")),Object(r.b)("p",null,"An important corollary is that ",Object(r.b)("strong",{parentName:"p"},"instances of the old app version are not affected by the update"),"\n(as they are completely separate from the new app version). The update only prevents users from\nstarting new instances of the old version."),Object(r.b)("h3",{id:"utilizing-secrets"},"Utilizing Secrets"),Object(r.b)("p",null,"Developers can pass secrets registered with q8s to apps, exposed as environment variables, using\nthe ",Object(r.b)("inlineCode",{parentName:"p"},"[[Env]]")," section within the ",Object(r.b)("inlineCode",{parentName:"p"},"q-app.toml"),"."),Object(r.b)("p",null,"This allows developers to link their apps with external dependencies (e.g., S3, Driverless AI)\nsecurely, while allowing easy overrides for local development."),Object(r.b)("p",null,"Environment variables prefixed with ",Object(r.b)("inlineCode",{parentName:"p"},"Q8S")," are disallowed."),Object(r.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",Object(i.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(i.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(i.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(r.b)("path",Object(i.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})))),"note")),Object(r.b)("div",Object(i.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"There is currently not a self-service option for developers to add their own secrets,\nnor is there an API for listing the available secrets.\nSecrets are currently managed by Admins.\nContact your admins for the available secrets or for adding a new one."),Object(r.b)("p",{parentName:"div"},"We are actively working on improving this."))),Object(r.b)("h3",{id:"app-route"},"App Route"),Object(r.b)("p",null,"While it is not a strict requirement, since each app in q8s is deployed with its own Qd,\nit is advised that apps use ",Object(r.b)("inlineCode",{parentName:"p"},"/")," as its main route:"),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-python"}),"if __name__ == '__main__':\n listen('/', main_page)\n")))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/docs/1486e3bc.0ab5d1c3.js b/docs/1486e3bc.86163c5d.js similarity index 94% rename from docs/1486e3bc.0ab5d1c3.js rename to docs/1486e3bc.86163c5d.js index 749f74cc3f..1f26f1c661 100644 --- a/docs/1486e3bc.0ab5d1c3.js +++ b/docs/1486e3bc.86163c5d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{287:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return f}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),l=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(f,p(p({ref:t},c),{},{components:n})):a.a.createElement(f,p({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var p={};for(var s in t)hasOwnProperty.call(t,s)&&(p[s]=t[s]);p.originalType=e,p.mdxType="string"==typeof e?e:r,i[1]=p;for(var c=2;c\n\n\n
-

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

+

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- - + + \ No newline at end of file diff --git a/docs/4104f38c.6573fc95.js b/docs/4104f38c.e138268c.js similarity index 94% rename from docs/4104f38c.6573fc95.js rename to docs/4104f38c.e138268c.js index 9f6bb85159..67f344830b 100644 --- a/docs/4104f38c.6573fc95.js +++ b/docs/4104f38c.e138268c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{117:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return l})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(287)),i={title:"Plot / Vega-lite / Form"},l={unversionedId:"examples/plot-vegalite-form",id:"examples/plot-vegalite-form",isDocsHomePage:!1,title:"Plot / Vega-lite / Form",description:"Display a Vega-lite plot inside a form card",source:"@site/docs/examples/plot-vegalite-form.md",slug:"/examples/plot-vegalite-form",permalink:"/wave/docs/examples/plot-vegalite-form",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-vegalite-form.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Vega-lite / Update",permalink:"/wave/docs/examples/plot-vegalite-update"},next:{title:"Plot / Altair",permalink:"/wave/docs/examples/plot-altair"}},p=[],c={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display a Vega-lite plot inside a form card"),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(340).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),'from h2o_wave import site, data, ui\nimport random\nimport time\n\npage = site[\'/demo\']\n\nspec = \'\'\'\n{\n "description": "A simple bar plot with embedded data.",\n "mark": "bar",\n "encoding": {\n "x": {"field": "a", "type": "ordinal"},\n "y": {"field": "b", "type": "quantitative"}\n }\n}\n\'\'\'\n\n\n# Get data rows for our plot.\n# Typically, this data would be read from some external data source.\ndef poll():\n return [\n ["A", rnd()], ["B", rnd()], ["C", rnd()],\n ["D", rnd()], ["E", rnd()], ["F", rnd()],\n ["G", rnd()], ["H", rnd()], ["I", rnd()]\n ]\n\n\n# Generate random datum between 1 and 100\ndef rnd(): return random.randint(1, 100)\n\n\npage[\'example\'] = ui.form_card(\n box=\'1 1 2 -1\',\n items=[\n ui.text_xl(\'Example 1\'),\n ui.vega_visualization(\n specification=spec,\n data=data(fields=["a", "b"], rows=poll(), pack=True),\n ),\n ui.text_xl(\'Example 2\'),\n ui.vega_visualization(\n specification=spec,\n data=data(fields=["a", "b"], rows=poll(), pack=True),\n ),\n ui.text_xl(\'Example 3\'),\n ui.vega_visualization(\n specification=spec,\n data=data(fields=["a", "b"], rows=poll(), pack=True),\n ),\n ],\n)\n\npage.save()\n')))}s.isMDXComponent=!0},287:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return f}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),d=s(n),m=r,f=d["".concat(i,".").concat(m)]||d[m]||u[m]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),d=s(n),m=r,f=d["".concat(i,".").concat(m)]||d[m]||u[m]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c\n
  • Spam
    • \n
  • Ham
    • \n
  • Eggs
    • \n\n'''\n\npage['example'] = ui.form_card(\n box='1 1 2 2',\n items=[\n ui.markup(content=menu)\n ]\n)\npage.save()\n")))}s.isMDXComponent=!0},287:function(e,r,t){"use strict";t.d(r,"a",(function(){return m})),t.d(r,"b",(function(){return f}));var n=t(0),a=t.n(n);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function i(e){for(var r=1;r=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),s=function(e){var r=a.a.useContext(p),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},m=function(e){var r=s(e.components);return a.a.createElement(p.Provider,{value:r},e.children)},c={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},v=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,u=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),m=s(t),v=n,f=m["".concat(u,".").concat(v)]||m[v]||c[v]||o;return t?a.a.createElement(f,i(i({ref:r},p),{},{components:t})):a.a.createElement(f,i({ref:r},p))}));function f(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,u=new Array(o);u[0]=v;var i={};for(var l in r)hasOwnProperty.call(r,l)&&(i[l]=r[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,u[1]=i;for(var p=2;p\n
  • Spam
    • \n
  • Ham
    • \n
  • Eggs
    • \n\n'''\n\npage['example'] = ui.form_card(\n box='1 1 2 2',\n items=[\n ui.markup(content=menu)\n ]\n)\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,r,t){"use strict";t.d(r,"a",(function(){return m})),t.d(r,"b",(function(){return f}));var n=t(0),a=t.n(n);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function i(e){for(var r=1;r=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),s=function(e){var r=a.a.useContext(p),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},m=function(e){var r=s(e.components);return a.a.createElement(p.Provider,{value:r},e.children)},c={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},v=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,u=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),m=s(t),v=n,f=m["".concat(u,".").concat(v)]||m[v]||c[v]||o;return t?a.a.createElement(f,i(i({ref:r},p),{},{components:t})):a.a.createElement(f,i({ref:r},p))}));function f(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,u=new Array(o);u[0]=v;var i={};for(var l in r)hasOwnProperty.call(r,l)&&(i[l]=r[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,u[1]=i;for(var p=2;p=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),u=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=u(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),d=u(n),m=a,f=d["".concat(i,".").concat(m)]||d[m]||p[m]||o;return n?r.a.createElement(f,c(c({ref:t},s),{},{components:n})):r.a.createElement(f,c({ref:t},s))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),u=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=u(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),d=u(n),m=a,f=d["".concat(i,".").concat(m)]||d[m]||p[m]||o;return n?r.a.createElement(f,c(c({ref:t},s),{},{components:n})):r.a.createElement(f,c({ref:t},s))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s',id:"cypress",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Cypress ',id:"cypress-1",children:[]}]}],p={rightToc:o};function l(e){var t=e.components,n=Object(s.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"functions"},"Functions"),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"cypress"},"cypress ",Object(a.b)("a",{name:"h2o_wave.test.cypress"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"cypress"),"(description:\xa0str)"),Object(a.b)("div",{className:"api__description"}))),Object(a.b)("h2",{id:"classes"},"Classes"),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"cypress-1"},"Cypress ",Object(a.b)("a",{name:"h2o_wave.test.Cypress"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"class ",Object(a.b)("span",{class:"ident"},"Cypress")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Represents a Cypress test translator.")),Object(a.b)("h4",{id:"methods"},"Methods"),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api"},Object(a.b)("h4",{id:"run"},"run ",Object(a.b)("a",{name:"h2o_wave.test.Cypress.run"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"run"),"(self, f)"),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Includes all steps from the given test into the current test."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"f")),Object(a.b)("dd",null,"A Python function containing Cypress test steps.")))))))))}l.isMDXComponent=!0},287:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return O}));var r=n(0),s=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(s[n]=e[n]);return s}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}var p=s.a.createContext({}),l=function(e){var t=s.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},b=function(e){var t=l(e.components);return s.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return s.a.createElement(s.a.Fragment,{},t)}},d=s.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,p=o(e,["components","mdxType","originalType","parentName"]),b=l(n),d=r,O=b["".concat(c,".").concat(d)]||b[d]||u[d]||a;return n?s.a.createElement(O,i(i({ref:t},p),{},{components:n})):s.a.createElement(O,i({ref:t},p))}));function O(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,c=new Array(a);c[0]=d;var i={};for(var o in t)hasOwnProperty.call(t,o)&&(i[o]=t[o]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var p=2;p',id:"cypress",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Cypress ',id:"cypress-1",children:[]}]}],p={rightToc:o};function l(e){var t=e.components,n=Object(s.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"functions"},"Functions"),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"cypress"},"cypress ",Object(a.b)("a",{name:"h2o_wave.test.cypress"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"cypress"),"(description:\xa0str)"),Object(a.b)("div",{className:"api__description"}))),Object(a.b)("h2",{id:"classes"},"Classes"),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"cypress-1"},"Cypress ",Object(a.b)("a",{name:"h2o_wave.test.Cypress"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"class ",Object(a.b)("span",{class:"ident"},"Cypress")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Represents a Cypress test translator.")),Object(a.b)("h4",{id:"methods"},"Methods"),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api"},Object(a.b)("h4",{id:"run"},"run ",Object(a.b)("a",{name:"h2o_wave.test.Cypress.run"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"run"),"(self, f)"),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Includes all steps from the given test into the current test."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"f")),Object(a.b)("dd",null,"A Python function containing Cypress test steps.")))))))))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return O}));var r=n(0),s=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(s[n]=e[n]);return s}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}var p=s.a.createContext({}),l=function(e){var t=s.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},b=function(e){var t=l(e.components);return s.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return s.a.createElement(s.a.Fragment,{},t)}},d=s.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,p=o(e,["components","mdxType","originalType","parentName"]),b=l(n),d=r,O=b["".concat(c,".").concat(d)]||b[d]||u[d]||a;return n?s.a.createElement(O,i(i({ref:t},p),{},{components:n})):s.a.createElement(O,i({ref:t},p))}));function O(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,c=new Array(a);c[0]=d;var i={};for(var o in t)hasOwnProperty.call(t,o)&&(i[o]=t[o]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),l=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=l(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,u=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),d=l(n),m=r,b=d["".concat(u,".").concat(m)]||d[m]||p[m]||o;return n?a.a.createElement(b,i(i({ref:t},c),{},{components:n})):a.a.createElement(b,i({ref:t},c))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,u=new Array(o);u[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,u[1]=i;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),l=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=l(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,u=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),d=l(n),m=r,b=d["".concat(u,".").concat(m)]||d[m]||p[m]||o;return n?a.a.createElement(b,i(i({ref:t},c),{},{components:n})):a.a.createElement(b,i({ref:t},c))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,u=new Array(o);u[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,u[1]=i;for(var c=2;c=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var p=o.a.createContext({}),s=function(e){var r=o.a.useContext(p),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},u=function(e){var r=s(e.components);return o.a.createElement(p.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return o.a.createElement(o.a.Fragment,{},r)}},f=o.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(t),f=n,d=u["".concat(c,".").concat(f)]||u[f]||m[f]||a;return t?o.a.createElement(d,i(i({ref:r},p),{},{components:t})):o.a.createElement(d,i({ref:r},p))}));function d(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var a=t.length,c=new Array(a);c[0]=f;var i={};for(var l in r)hasOwnProperty.call(r,l)&&(i[l]=r[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var p=2;p=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var p=o.a.createContext({}),s=function(e){var r=o.a.useContext(p),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},u=function(e){var r=s(e.components);return o.a.createElement(p.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return o.a.createElement(o.a.Fragment,{},r)}},f=o.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(t),f=n,d=u["".concat(c,".").concat(f)]||u[f]||m[f]||a;return t?o.a.createElement(d,i(i({ref:r},p),{},{components:t})):o.a.createElement(d,i({ref:r},p))}));function d(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var a=t.length,c=new Array(a);c[0]=f;var i={};for(var l in r)hasOwnProperty.call(r,l)&&(i[l]=r[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var p=2;p=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,l=e.parentName,c=b(e,["components","mdxType","originalType","parentName"]),d=p(a),u=n,O=d["".concat(l,".").concat(u)]||d[u]||s[u]||i;return a?r.a.createElement(O,o(o({ref:t},c),{},{components:a})):r.a.createElement(O,o({ref:t},c))}));function O(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,l=new Array(i);l[0]=u;var o={};for(var b in t)hasOwnProperty.call(t,b)&&(o[b]=t[b]);o.originalType=e,o.mdxType="string"==typeof e?e:n,l[1]=o;for(var c=2;c=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,l=e.parentName,c=b(e,["components","mdxType","originalType","parentName"]),d=p(a),u=n,O=d["".concat(l,".").concat(u)]||d[u]||s[u]||i;return a?r.a.createElement(O,o(o({ref:t},c),{},{components:a})):r.a.createElement(O,o({ref:t},c))}));function O(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,l=new Array(i);l[0]=u;var o={};for(var b in t)hasOwnProperty.call(t,b)&&(o[b]=t[b]);o.originalType=e,o.mdxType="string"==typeof e?e:n,l[1]=o;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},m=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},l=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),m=u(r),l=n,b=m["".concat(c,".").concat(l)]||m[l]||d[l]||o;return r?a.a.createElement(b,s(s({ref:t},p),{},{components:r})):a.a.createElement(b,s({ref:t},p))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=l;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s.mdxType="string"==typeof e?e:n,c[1]=s;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},m=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},l=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),m=u(r),l=n,b=m["".concat(c,".").concat(l)]||m[l]||d[l]||o;return r?a.a.createElement(b,s(s({ref:t},p),{},{components:r})):a.a.createElement(b,s({ref:t},p))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=l;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s.mdxType="string"==typeof e?e:n,c[1]=s;for(var p=2;p=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),l=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},b=function(e){var t=l(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),b=l(n),d=a,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return n?r.a.createElement(m,c(c({ref:t},s),{},{components:n})):r.a.createElement(m,c({ref:t},s))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),l=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},b=function(e){var t=l(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),b=l(n),d=a,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return n?r.a.createElement(m,c(c({ref:t},s),{},{components:n})):r.a.createElement(m,c({ref:t},s))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}l.isMDXComponent=!0},287:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return b}));var r=n(0),a=n.n(r);function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,o=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),p=l(n),d=r,b=p["".concat(o,".").concat(d)]||p[d]||m[d]||c;return n?a.a.createElement(b,i(i({ref:t},s),{},{components:n})):a.a.createElement(b,i({ref:t},s))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,o=new Array(c);o[0]=d;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var s=2;s 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return b}));var r=n(0),a=n.n(r);function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,o=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),p=l(n),d=r,b=p["".concat(o,".").concat(d)]||p[d]||m[d]||c;return n?a.a.createElement(b,i(i({ref:t},s),{},{components:n})):a.a.createElement(b,i({ref:t},s))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,o=new Array(c);o[0]=d;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),s=u(r),m=n,d=s["".concat(i,".").concat(m)]||s[m]||f[m]||o;return r?a.a.createElement(d,c(c({ref:t},l),{},{components:r})):a.a.createElement(d,c({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),s=u(r),m=n,d=s["".concat(i,".").concat(m)]||s[m]||f[m]||o;return r?a.a.createElement(d,c(c({ref:t},l),{},{components:r})):a.a.createElement(d,c({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=o.a.createContext({}),l=function(e){var r=o.a.useContext(u),n=r;return e&&(n="function"==typeof e?e(r):c(c({},r),e)),n},p=function(e){var r=l(e.components);return o.a.createElement(u.Provider,{value:r},e.children)},b={inlineCode:"code",wrapper:function(e){var r=e.children;return o.a.createElement(o.a.Fragment,{},r)}},A=o.a.forwardRef((function(e,r){var n=e.components,t=e.mdxType,a=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),A=t,m=p["".concat(i,".").concat(A)]||p[A]||b[A]||a;return n?o.a.createElement(m,c(c({ref:r},u),{},{components:n})):o.a.createElement(m,c({ref:r},u))}));function m(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var a=n.length,i=new Array(a);i[0]=A;var c={};for(var s in r)hasOwnProperty.call(r,s)&&(c[s]=r[s]);c.originalType=e,c.mdxType="string"==typeof e?e:t,i[1]=c;for(var u=2;u=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=o.a.createContext({}),l=function(e){var r=o.a.useContext(u),n=r;return e&&(n="function"==typeof e?e(r):c(c({},r),e)),n},p=function(e){var r=l(e.components);return o.a.createElement(u.Provider,{value:r},e.children)},b={inlineCode:"code",wrapper:function(e){var r=e.children;return o.a.createElement(o.a.Fragment,{},r)}},A=o.a.forwardRef((function(e,r){var n=e.components,t=e.mdxType,a=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),A=t,m=p["".concat(i,".").concat(A)]||p[A]||b[A]||a;return n?o.a.createElement(m,c(c({ref:r},u),{},{components:n})):o.a.createElement(m,c({ref:r},u))}));function m(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var a=n.length,i=new Array(a);i[0]=A;var c={};for(var s in r)hasOwnProperty.call(r,s)&&(c[s]=r[s]);c.originalType=e,c.mdxType="string"==typeof e?e:t,i[1]=c;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,p=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),d=r,m=u["".concat(p,".").concat(d)]||u[d]||f[d]||o;return n?a.a.createElement(m,i(i({ref:t},s),{},{components:n})):a.a.createElement(m,i({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,p=new Array(o);p[0]=d;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,p[1]=i;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,p=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),d=r,m=u["".concat(p,".").concat(d)]||u[d]||f[d]||o;return n?a.a.createElement(m,i(i({ref:t},s),{},{components:n})):a.a.createElement(m,i({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,p=new Array(o);p[0]=d;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,p[1]=i;for(var s=2;s=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=o.a.createContext({}),l=function(e){var t=o.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},p=function(e){var t=l(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},b=o.a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,a=e.originalType,r=e.parentName,c=u(e,["components","mdxType","originalType","parentName"]),p=l(n),b=i,h=p["".concat(r,".").concat(b)]||p[b]||d[b]||a;return n?o.a.createElement(h,s(s({ref:t},c),{},{components:n})):o.a.createElement(h,s({ref:t},c))}));function h(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var a=n.length,r=new Array(a);r[0]=b;var s={};for(var u in t)hasOwnProperty.call(t,u)&&(s[u]=t[u]);s.originalType=e,s.mdxType="string"==typeof e?e:i,r[1]=s;for(var c=2;c=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=o.a.createContext({}),l=function(e){var t=o.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},p=function(e){var t=l(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},b=o.a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,a=e.originalType,r=e.parentName,c=u(e,["components","mdxType","originalType","parentName"]),p=l(n),b=i,h=p["".concat(r,".").concat(b)]||p[b]||d[b]||a;return n?o.a.createElement(h,s(s({ref:t},c),{},{components:n})):o.a.createElement(h,s({ref:t},c))}));function h(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var a=n.length,r=new Array(a);r[0]=b;var s={};for(var u in t)hasOwnProperty.call(t,u)&&(s[u]=t[u]);s.originalType=e,s.mdxType="string"==typeof e?e:i,r[1]=s;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var u=n.a.createContext({}),l=function(e){var r=n.a.useContext(u),t=r;return e&&(t="function"==typeof e?e(r):c(c({},r),e)),t},d=function(e){var r=l(e.components);return n.a.createElement(u.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return n.a.createElement(n.a.Fragment,{},r)}},s=n.a.forwardRef((function(e,r){var t=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),d=l(t),s=a,f=d["".concat(i,".").concat(s)]||d[s]||m[s]||o;return t?n.a.createElement(f,c(c({ref:r},u),{},{components:t})):n.a.createElement(f,c({ref:r},u))}));function f(e,r){var t=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var o=t.length,i=new Array(o);i[0]=s;var c={};for(var p in r)hasOwnProperty.call(r,p)&&(c[p]=r[p]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var u=2;u=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var u=n.a.createContext({}),l=function(e){var r=n.a.useContext(u),t=r;return e&&(t="function"==typeof e?e(r):c(c({},r),e)),t},d=function(e){var r=l(e.components);return n.a.createElement(u.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return n.a.createElement(n.a.Fragment,{},r)}},s=n.a.forwardRef((function(e,r){var t=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),d=l(t),s=a,f=d["".concat(i,".").concat(s)]||d[s]||m[s]||o;return t?n.a.createElement(f,c(c({ref:r},u),{},{components:t})):n.a.createElement(f,c({ref:r},u))}));function f(e,r){var t=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var o=t.length,i=new Array(o);i[0]=s;var c={};for(var p in r)hasOwnProperty.call(r,p)&&(c[p]=r[p]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var u=2;u=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var l=n.a.createContext({}),o=function(e){var a=n.a.useContext(l),t=a;return e&&(t="function"==typeof e?e(a):b(b({},a),e)),t},s=function(e){var a=o(e.components);return n.a.createElement(l.Provider,{value:a},e.children)},p={inlineCode:"code",wrapper:function(e){var a=e.children;return n.a.createElement(n.a.Fragment,{},a)}},u=n.a.forwardRef((function(e,a){var t=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,l=d(e,["components","mdxType","originalType","parentName"]),s=o(t),u=r,m=s["".concat(i,".").concat(u)]||s[u]||p[u]||c;return t?n.a.createElement(m,b(b({ref:a},l),{},{components:t})):n.a.createElement(m,b({ref:a},l))}));function m(e,a){var t=arguments,r=a&&a.mdxType;if("string"==typeof e||r){var c=t.length,i=new Array(c);i[0]=u;var b={};for(var d in a)hasOwnProperty.call(a,d)&&(b[d]=a[d]);b.originalType=e,b.mdxType="string"==typeof e?e:r,i[1]=b;for(var l=2;l=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var l=n.a.createContext({}),o=function(e){var a=n.a.useContext(l),t=a;return e&&(t="function"==typeof e?e(a):b(b({},a),e)),t},s=function(e){var a=o(e.components);return n.a.createElement(l.Provider,{value:a},e.children)},p={inlineCode:"code",wrapper:function(e){var a=e.children;return n.a.createElement(n.a.Fragment,{},a)}},u=n.a.forwardRef((function(e,a){var t=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,l=d(e,["components","mdxType","originalType","parentName"]),s=o(t),u=r,m=s["".concat(i,".").concat(u)]||s[u]||p[u]||c;return t?n.a.createElement(m,b(b({ref:a},l),{},{components:t})):n.a.createElement(m,b({ref:a},l))}));function m(e,a){var t=arguments,r=a&&a.mdxType;if("string"==typeof e||r){var c=t.length,i=new Array(c);i[0]=u;var b={};for(var d in a)hasOwnProperty.call(a,d)&&(b[d]=a[d]);b.originalType=e,b.mdxType="string"==typeof e?e:r,i[1]=b;for(var l=2;l The quick brown fox jumped over the lazy dog.\n\nUnordered list:\n\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n\nOrdered list:\n\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n\nImage:\n\n![Monty Python](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg)\n\nLinks:\n\nHere's a [link to an image](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg).\n\nTable:\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n'''\n\npage['example'] = ui.form_card(\n box='1 1 4 -1',\n items=[ui.text(sample_markdown)]\n)\npage.save()\n")))}l.isMDXComponent=!0},287:function(e,t,n){"use strict";n.d(t,"a",(function(){return m})),n.d(t,"b",(function(){return f}));var r=n(0),o=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=o.a.createContext({}),l=function(e){var t=o.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},m=function(e){var t=l(e.components);return o.a.createElement(u.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),m=l(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||s[d]||a;return n?o.a.createElement(f,c(c({ref:t},u),{},{components:n})):o.a.createElement(f,c({ref:t},u))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var u=2;u The quick brown fox jumped over the lazy dog.\n\nUnordered list:\n\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n\nOrdered list:\n\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n\nImage:\n\n![Monty Python](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg)\n\nLinks:\n\nHere's a [link to an image](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg).\n\nTable:\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n'''\n\npage['example'] = ui.form_card(\n box='1 1 4 -1',\n items=[ui.text(sample_markdown)]\n)\npage.save()\n")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return m})),n.d(t,"b",(function(){return f}));var r=n(0),o=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=o.a.createContext({}),l=function(e){var t=o.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},m=function(e){var t=l(e.components);return o.a.createElement(u.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),m=l(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||s[d]||a;return n?o.a.createElement(f,c(c({ref:t},u),{},{components:n})):o.a.createElement(f,c({ref:t},u))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var u=2;u=0||(r[n]=e[n]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),d=function(e){var a=r.a.useContext(l),n=a;return e&&(n="function"==typeof e?e(a):u(u({},a),e)),n},p=function(e){var a=d(e.components);return r.a.createElement(l.Provider,{value:a},e.children)},s={inlineCode:"code",wrapper:function(e){var a=e.children;return r.a.createElement(r.a.Fragment,{},a)}},f=r.a.forwardRef((function(e,a){var n=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=d(n),f=t,m=p["".concat(i,".").concat(f)]||p[f]||s[f]||o;return n?r.a.createElement(m,u(u({ref:a},l),{},{components:n})):r.a.createElement(m,u({ref:a},l))}));function m(e,a){var n=arguments,t=a&&a.mdxType;if("string"==typeof e||t){var o=n.length,i=new Array(o);i[0]=f;var u={};for(var c in a)hasOwnProperty.call(a,c)&&(u[c]=a[c]);u.originalType=e,u.mdxType="string"==typeof e?e:t,i[1]=u;for(var l=2;l=0||(r[n]=e[n]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),d=function(e){var a=r.a.useContext(l),n=a;return e&&(n="function"==typeof e?e(a):u(u({},a),e)),n},p=function(e){var a=d(e.components);return r.a.createElement(l.Provider,{value:a},e.children)},s={inlineCode:"code",wrapper:function(e){var a=e.children;return r.a.createElement(r.a.Fragment,{},a)}},f=r.a.forwardRef((function(e,a){var n=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=d(n),f=t,m=p["".concat(i,".").concat(f)]||p[f]||s[f]||o;return n?r.a.createElement(m,u(u({ref:a},l),{},{components:n})):r.a.createElement(m,u({ref:a},l))}));function m(e,a){var n=arguments,t=a&&a.mdxType;if("string"==typeof e||t){var o=n.length,i=new Array(o);i[0]=f;var u={};for(var c in a)hasOwnProperty.call(a,c)&&(u[c]=a[c]);u.originalType=e,u.mdxType="string"==typeof e?e:t,i[1]=u;for(var l=2;l=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var p=n.a.createContext({}),l=function(e){var t=n.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},b=function(e){var t=l(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),b=l(a),d=r,h=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return a?n.a.createElement(h,c(c({ref:t},p),{},{components:a})):n.a.createElement(h,c({ref:t},p))}));function h(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=d;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var p=n.a.createContext({}),l=function(e){var t=n.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},b=function(e){var t=l(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),b=l(a),d=r,h=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return a?n.a.createElement(h,c(c({ref:t},p),{},{components:a})):n.a.createElement(h,c({ref:t},p))}));function h(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=d;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return r?a.a.createElement(f,p(p({ref:t},l),{},{components:r})):a.a.createElement(f,p({ref:t},l))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return r?a.a.createElement(f,p(p({ref:t},l),{},{components:r})):a.a.createElement(f,p({ref:t},l))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var l=2;l=0||(i[n]=e[n]);return i}(e,s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),c=function(e){var s=i.a.useContext(l),n=s;return e&&(n="function"==typeof e?e(s):u(u({},s),e)),n},p=function(e){var s=c(e.components);return i.a.createElement(l.Provider,{value:s},e.children)},m={inlineCode:"code",wrapper:function(e){var s=e.children;return i.a.createElement(i.a.Fragment,{},s)}},f=i.a.forwardRef((function(e,s){var n=e.components,t=e.mdxType,a=e.originalType,r=e.parentName,l=o(e,["components","mdxType","originalType","parentName"]),p=c(n),f=t,d=p["".concat(r,".").concat(f)]||p[f]||m[f]||a;return n?i.a.createElement(d,u(u({ref:s},l),{},{components:n})):i.a.createElement(d,u({ref:s},l))}));function d(e,s){var n=arguments,t=s&&s.mdxType;if("string"==typeof e||t){var a=n.length,r=new Array(a);r[0]=f;var u={};for(var o in s)hasOwnProperty.call(s,o)&&(u[o]=s[o]);u.originalType=e,u.mdxType="string"==typeof e?e:t,r[1]=u;for(var l=2;l=0||(i[n]=e[n]);return i}(e,s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),c=function(e){var s=i.a.useContext(l),n=s;return e&&(n="function"==typeof e?e(s):u(u({},s),e)),n},p=function(e){var s=c(e.components);return i.a.createElement(l.Provider,{value:s},e.children)},m={inlineCode:"code",wrapper:function(e){var s=e.children;return i.a.createElement(i.a.Fragment,{},s)}},f=i.a.forwardRef((function(e,s){var n=e.components,t=e.mdxType,a=e.originalType,r=e.parentName,l=o(e,["components","mdxType","originalType","parentName"]),p=c(n),f=t,d=p["".concat(r,".").concat(f)]||p[f]||m[f]||a;return n?i.a.createElement(d,u(u({ref:s},l),{},{components:n})):i.a.createElement(d,u({ref:s},l))}));function d(e,s){var n=arguments,t=s&&s.mdxType;if("string"==typeof e||t){var a=n.length,r=new Array(a);r[0]=f;var u={};for(var o in s)hasOwnProperty.call(s,o)&&(u[o]=s[o]);u.originalType=e,u.mdxType="string"==typeof e?e:t,r[1]=u;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),p=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=p(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),m=r,b=u["".concat(l,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(b,i(i({ref:t},c),{},{components:n})):a.a.createElement(b,i({ref:t},c))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,l[1]=i;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),p=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=p(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),m=r,b=u["".concat(l,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(b,i(i({ref:t},c),{},{components:n})):a.a.createElement(b,i({ref:t},c))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,l[1]=i;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),b=function(e){var t=r.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=b(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),s=b(n),d=a,f=s["".concat(o,".").concat(d)]||s[d]||p[d]||i;return n?r.a.createElement(f,c(c({ref:t},l),{},{components:n})):r.a.createElement(f,c({ref:t},l))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=d;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var l=2;l=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),b=function(e){var t=r.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=b(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),s=b(n),d=a,f=s["".concat(o,".").concat(d)]||s[d]||p[d]||i;return n?r.a.createElement(f,c(c({ref:t},l),{},{components:n})):r.a.createElement(f,c({ref:t},l))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=d;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var l=2;l=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),l=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},b=function(e){var t=l(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),b=l(n),d=a,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return n?r.a.createElement(m,s(s({ref:t},c),{},{components:n})):r.a.createElement(m,s({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var s={};for(var p in t)hasOwnProperty.call(t,p)&&(s[p]=t[p]);s.originalType=e,s.mdxType="string"==typeof e?e:a,i[1]=s;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),l=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},b=function(e){var t=l(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),b=l(n),d=a,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return n?r.a.createElement(m,s(s({ref:t},c),{},{components:n})):r.a.createElement(m,s({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var s={};for(var p in t)hasOwnProperty.call(t,p)&&(s[p]=t[p]);s.originalType=e,s.mdxType="string"==typeof e?e:a,i[1]=s;for(var c=2;c=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var p=n.a.createContext({}),c=function(e){var t=n.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},m=function(e){var t=c(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),m=c(a),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||o;return a?n.a.createElement(f,l(l({ref:t},p),{},{components:a})):n.a.createElement(f,l({ref:t},p))}));function f(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var p=n.a.createContext({}),c=function(e){var t=n.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},m=function(e){var t=c(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),m=c(a),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||o;return a?n.a.createElement(f,l(l({ref:t},p),{},{components:a})):n.a.createElement(f,l({ref:t},p))}));function f(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var b=a.a.createContext({}),s=function(e){var t=a.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),d=s(n),p=r,O=d["".concat(c,".").concat(p)]||d[p]||u[p]||o;return n?a.a.createElement(O,i(i({ref:t},b),{},{components:n})):a.a.createElement(O,i({ref:t},b))}));function O(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=p;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var b=2;b=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var b=a.a.createContext({}),s=function(e){var t=a.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),d=s(n),p=r,O=d["".concat(c,".").concat(p)]||d[p]||u[p]||o;return n?a.a.createElement(O,i(i({ref:t},b),{},{components:n})):a.a.createElement(O,i({ref:t},b))}));function O(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=p;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var b=2;b 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue'),\n ui.table_column(name='status', label='Status', filterable=True),\n ui.table_column(name='notifications', label='Notifications', filterable=True),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues]\n )\n ])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0},287:function(e,n,t){"use strict";t.d(n,"a",(function(){return f})),t.d(n,"b",(function(){return b}));var r=t(0),a=t.n(r);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},f=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),f=u(t),m=r,b=f["".concat(s,".").concat(m)]||f[m]||p[m]||i;return t?a.a.createElement(b,o(o({ref:n},c),{},{components:t})):a.a.createElement(b,o({ref:n},c))}));function b(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var i=t.length,s=new Array(i);s[0]=m;var o={};for(var l in n)hasOwnProperty.call(n,l)&&(o[l]=n[l]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var c=2;c 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue'),\n ui.table_column(name='status', label='Status', filterable=True),\n ui.table_column(name='notifications', label='Notifications', filterable=True),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues]\n )\n ])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return f})),t.d(n,"b",(function(){return b}));var r=t(0),a=t.n(r);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},f=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),f=u(t),m=r,b=f["".concat(s,".").concat(m)]||f[m]||p[m]||i;return t?a.a.createElement(b,o(o({ref:n},c),{},{components:t})):a.a.createElement(b,o({ref:n},c))}));function b(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var i=t.length,s=new Array(i);s[0]=m;var o={};for(var l in n)hasOwnProperty.call(n,l)&&(o[l]=n[l]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var c=2;c\n")),Object(b.b)("p",null,"The drawing commands in the above example work like this:"),Object(b.b)("ol",null,Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"m 25 25"),": Move 25px left, 25px down"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"h 50"),": Draw a line 50px right"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"v 50"),": Draw a line 50px down"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"h -50"),": Draw a line 50px left"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"z"),": Close the path (going back to where we started)")),Object(b.b)("p",null,"The little drawing syntax above is part of the SVG specification, not something unique to Wave."),Object(b.b)("p",null,"Authoring ",Object(b.b)("inlineCode",{parentName:"p"},"path()")," drawing commands by hand is tedious, so Wave provides two utilities to make it easier: ",Object(b.b)("inlineCode",{parentName:"p"},"p()")," and ",Object(b.b)("inlineCode",{parentName:"p"},"turtle()"),"."),Object(b.b)("h2",{id:"drawing-with-paths"},"Drawing with paths"),Object(b.b)("p",null,Object(b.b)("inlineCode",{parentName:"p"},"p()")," creates a path generator with convenience methods to draw step by step. For example, the following two lines are equivalent:"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"red_square = g.path(d='m 25 25 h 50 v 50 h -50 z', fill='red')\nred_square = g.p().m(25, 25).h(50).v(50).h(-50).z().path(fill='red')\n")),Object(b.b)("h3",{id:"commands"},"Commands"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Method"),Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Use"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"M()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"H()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Horizontal line, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"V()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Vertical line, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"L()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Line, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"A()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Elliptical arc, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"C()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"S()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, smooth, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"Q()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"T()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, smooth, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"Z()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Close path")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"m()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"h()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Horizontal line, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"v()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Vertical line, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"l()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Line, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"a()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Elliptical arc, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"c()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"s()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, smooth, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"q()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"t()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, smooth, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"z()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Close path")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"d()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Serialize this path's commands into SVG path data.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"path()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Create a SVG path element")))),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(b.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(b.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})))),"info")),Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(b.b)("p",{parentName:"div"},"The upper-cased commands use absolute coordinates. The lower-cased commands use relative coordinates. For example, ",Object(b.b)("inlineCode",{parentName:"p"},"L(4,2)"),' means "draw a line to (4,2)", but ',Object(b.b)("inlineCode",{parentName:"p"},"l(4,2)"),' means "draw a line 4px right, 2px down from the current position".'))),Object(b.b)("h2",{id:"drawing-with-a-turtle"},"Drawing with a turtle"),Object(b.b)("p",null,Object(b.b)("inlineCode",{parentName:"p"},"turtle()")," creates a path generator (similar to ",Object(b.b)("inlineCode",{parentName:"p"},"p()"),"), but using ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/library/turtle.html"}),"Turtle Geometry"),"."),Object(b.b)("h3",{id:"commands-1"},"Commands"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Method"),Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Use"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"pd()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Pen down")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"pu()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Pen up")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"p()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Set the turtle's position")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"a()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Set the turtle's orientation")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"f()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move forward")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"b()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move backward")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"l()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Turn left")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"r()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Turn right")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"d()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Serialize this turtle's movements into SVG path data")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"path()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Create a SVG path element")))),Object(b.b)("h3",{id:"example"},"Example"),Object(b.b)("p",null,"Here is an example from ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/library/turtle.html"}),"Python's turtle module"),": "),Object(b.b)("p",null,Object(b.b)("img",Object(n.a)({parentName:"p"},{src:"https://docs.python.org/3/_images/turtle-star.png",alt:"star"}))),Object(b.b)("p",null,"Here is the above example recreated in Wave:"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from turtle import *\ncolor('red', 'yellow')\nbegin_fill()\nwhile True:\n forward(200)\n left(170)\n if abs(pos()) < 1:\n break\nend_fill()\ndone()\n")),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{3-6}","{3-6}":!0}),"from h2o_wave import site, ui, graphics as g\n\nt = g.turtle().f(100).r(90).pd()\nfor _ in range(36):\n t.f(200).l(170)\nspirograph = t.pu(1).path(stroke='red', fill='yellow')\n\npage = site['/demo']\npage['example'] = ui.graphics_card(\n box='1 1 2 3', view_box='0 0 220 220', width='100%', height='100%',\n scene=g.scene(foo=spirograph),\n)\n\npage.save()\n")),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(b.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(b.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})))),"info")),Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(b.b)("p",{parentName:"div"},"Turtle graphics is not just kid stuff: See ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"https://mitpress.mit.edu/books/turtle-geometry"}),"Turtle Geometry")," by Harold Abelson and Andrea diSessa."))))}d.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return o})),a.d(t,"b",(function(){return m}));var n=a(0),r=a.n(n);function b(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function c(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=r.a.createContext({}),d=function(e){var t=r.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},o=function(e){var t=d(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},O={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},j=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,b=e.originalType,l=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),o=d(a),j=n,m=o["".concat(l,".").concat(j)]||o[j]||O[j]||b;return a?r.a.createElement(m,c(c({ref:t},p),{},{components:a})):r.a.createElement(m,c({ref:t},p))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var b=a.length,l=new Array(b);l[0]=j;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:n,l[1]=c;for(var p=2;p\n")),Object(b.b)("p",null,"The drawing commands in the above example work like this:"),Object(b.b)("ol",null,Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"m 25 25"),": Move 25px left, 25px down"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"h 50"),": Draw a line 50px right"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"v 50"),": Draw a line 50px down"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"h -50"),": Draw a line 50px left"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"z"),": Close the path (going back to where we started)")),Object(b.b)("p",null,"The little drawing syntax above is part of the SVG specification, not something unique to Wave."),Object(b.b)("p",null,"Authoring ",Object(b.b)("inlineCode",{parentName:"p"},"path()")," drawing commands by hand is tedious, so Wave provides two utilities to make it easier: ",Object(b.b)("inlineCode",{parentName:"p"},"p()")," and ",Object(b.b)("inlineCode",{parentName:"p"},"turtle()"),"."),Object(b.b)("h2",{id:"drawing-with-paths"},"Drawing with paths"),Object(b.b)("p",null,Object(b.b)("inlineCode",{parentName:"p"},"p()")," creates a path generator with convenience methods to draw step by step. For example, the following two lines are equivalent:"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"red_square = g.path(d='m 25 25 h 50 v 50 h -50 z', fill='red')\nred_square = g.p().m(25, 25).h(50).v(50).h(-50).z().path(fill='red')\n")),Object(b.b)("h3",{id:"commands"},"Commands"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Method"),Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Use"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"M()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"H()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Horizontal line, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"V()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Vertical line, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"L()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Line, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"A()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Elliptical arc, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"C()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"S()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, smooth, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"Q()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"T()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, smooth, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"Z()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Close path")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"m()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"h()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Horizontal line, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"v()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Vertical line, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"l()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Line, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"a()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Elliptical arc, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"c()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"s()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, smooth, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"q()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"t()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, smooth, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"z()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Close path")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"d()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Serialize this path's commands into SVG path data.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"path()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Create a SVG path element")))),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(b.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(b.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})))),"info")),Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(b.b)("p",{parentName:"div"},"The upper-cased commands use absolute coordinates. The lower-cased commands use relative coordinates. For example, ",Object(b.b)("inlineCode",{parentName:"p"},"L(4,2)"),' means "draw a line to (4,2)", but ',Object(b.b)("inlineCode",{parentName:"p"},"l(4,2)"),' means "draw a line 4px right, 2px down from the current position".'))),Object(b.b)("h2",{id:"drawing-with-a-turtle"},"Drawing with a turtle"),Object(b.b)("p",null,Object(b.b)("inlineCode",{parentName:"p"},"turtle()")," creates a path generator (similar to ",Object(b.b)("inlineCode",{parentName:"p"},"p()"),"), but using ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/library/turtle.html"}),"Turtle Geometry"),"."),Object(b.b)("h3",{id:"commands-1"},"Commands"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Method"),Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Use"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"pd()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Pen down")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"pu()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Pen up")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"p()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Set the turtle's position")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"a()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Set the turtle's orientation")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"f()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move forward")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"b()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move backward")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"l()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Turn left")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"r()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Turn right")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"d()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Serialize this turtle's movements into SVG path data")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"path()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Create a SVG path element")))),Object(b.b)("h3",{id:"example"},"Example"),Object(b.b)("p",null,"Here is an example from ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/library/turtle.html"}),"Python's turtle module"),": "),Object(b.b)("p",null,Object(b.b)("img",Object(n.a)({parentName:"p"},{src:"https://docs.python.org/3/_images/turtle-star.png",alt:"star"}))),Object(b.b)("p",null,"Here is the above example recreated in Wave:"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from turtle import *\ncolor('red', 'yellow')\nbegin_fill()\nwhile True:\n forward(200)\n left(170)\n if abs(pos()) < 1:\n break\nend_fill()\ndone()\n")),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{3-6}","{3-6}":!0}),"from h2o_wave import site, ui, graphics as g\n\nt = g.turtle().f(100).r(90).pd()\nfor _ in range(36):\n t.f(200).l(170)\nspirograph = t.pu(1).path(stroke='red', fill='yellow')\n\npage = site['/demo']\npage['example'] = ui.graphics_card(\n box='1 1 2 3', view_box='0 0 220 220', width='100%', height='100%',\n scene=g.scene(foo=spirograph),\n)\n\npage.save()\n")),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(b.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(b.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})))),"info")),Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(b.b)("p",{parentName:"div"},"Turtle graphics is not just kid stuff: See ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"https://mitpress.mit.edu/books/turtle-geometry"}),"Turtle Geometry")," by Harold Abelson and Andrea diSessa."))))}d.isMDXComponent=!0},287:function(e,t,a){"use strict";a.d(t,"a",(function(){return o})),a.d(t,"b",(function(){return m}));var n=a(0),r=a.n(n);function b(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function c(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=r.a.createContext({}),d=function(e){var t=r.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},o=function(e){var t=d(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},O={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},j=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,b=e.originalType,l=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),o=d(a),j=n,m=o["".concat(l,".").concat(j)]||o[j]||O[j]||b;return a?r.a.createElement(m,c(c({ref:t},p),{},{components:a})):r.a.createElement(m,c({ref:t},p))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var b=a.length,l=new Array(b);l[0]=j;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:n,l[1]=c;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),b=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=b(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),p=b(n),d=r,m=p["".concat(c,".").concat(d)]||p[d]||u[d]||o;return n?a.a.createElement(m,l(l({ref:t},s),{},{components:n})):a.a.createElement(m,l({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=d;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l.mdxType="string"==typeof e?e:r,c[1]=l;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),b=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=b(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),p=b(n),d=r,m=p["".concat(c,".").concat(d)]||p[d]||u[d]||o;return n?a.a.createElement(m,l(l({ref:t},s),{},{components:n})):a.a.createElement(m,l({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=d;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l.mdxType="string"==typeof e?e:r,c[1]=l;for(var s=2;s=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var b=r.a.createContext({}),s=function(e){var t=r.a.useContext(b),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},u=function(e){var t=s(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},p=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),u=s(a),p=n,f=u["".concat(o,".").concat(p)]||u[p]||d[p]||i;return a?r.a.createElement(f,c(c({ref:t},b),{},{components:a})):r.a.createElement(f,c({ref:t},b))}));function f(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=p;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var b=2;b=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var b=r.a.createContext({}),s=function(e){var t=r.a.useContext(b),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},u=function(e){var t=s(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},p=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),u=s(a),p=n,f=u["".concat(o,".").concat(p)]||u[p]||d[p]||i;return a?r.a.createElement(f,c(c({ref:t},b),{},{components:a})):r.a.createElement(f,c({ref:t},b))}));function f(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=p;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var b=2;b=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var o=r.a.createContext({}),d=function(e){var t=r.a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=d(e.components);return r.a.createElement(o.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},O=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,b=e.originalType,i=e.parentName,o=l(e,["components","mdxType","originalType","parentName"]),p=d(n),O=a,s=p["".concat(i,".").concat(O)]||p[O]||m[O]||b;return n?r.a.createElement(s,c(c({ref:t},o),{},{components:n})):r.a.createElement(s,c({ref:t},o))}));function s(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var b=n.length,i=new Array(b);i[0]=O;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var o=2;o=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var o=r.a.createContext({}),d=function(e){var t=r.a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=d(e.components);return r.a.createElement(o.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},O=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,b=e.originalType,i=e.parentName,o=l(e,["components","mdxType","originalType","parentName"]),p=d(n),O=a,s=p["".concat(i,".").concat(O)]||p[O]||m[O]||b;return n?r.a.createElement(s,c(c({ref:t},o),{},{components:n})):r.a.createElement(s,c({ref:t},o))}));function s(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var b=n.length,i=new Array(b);i[0]=O;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var o=2;o=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},A=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),A=p(n),b=a,f=A["".concat(i,".").concat(b)]||A[b]||u[b]||o;return n?r.a.createElement(f,c(c({ref:t},s),{},{components:n})):r.a.createElement(f,c({ref:t},s))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=b;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},A=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),A=p(n),b=a,f=A["".concat(i,".").concat(b)]||A[b]||u[b]||o;return n?r.a.createElement(f,c(c({ref:t},s),{},{components:n})):r.a.createElement(f,c({ref:t},s))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=b;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s1?a+"s":a}(o,"post"),' tagged with "',s,'"'),l.a.createElement(m.a,{href:n},"View All Tags"),l.a.createElement("div",{className:"margin-vert--xl"},t.map((({content:e})=>l.a.createElement(c.a,{key:e.metadata.permalink,frontMatter:e.frontMatter,metadata:e.metadata,truncated:!0},l.a.createElement(e,null)))))))))}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{153:function(e,a,t){"use strict";t.r(a);var n=t(0),l=t.n(n),r=t(295),c=t(364),m=t(293);a.default=function(e){const{metadata:a,items:t}=e,{allTagsPath:n,name:s,count:o}=a;return l.a.createElement(r.a,{title:`Posts tagged "${s}"`,description:`Blog | Tagged "${s}"`},l.a.createElement("div",{className:"container margin-vert--lg"},l.a.createElement("div",{className:"row"},l.a.createElement("main",{className:"col col--8 col--offset-2"},l.a.createElement("h1",null,o," ",function(e,a){return e>1?a+"s":a}(o,"post"),' tagged with "',s,'"'),l.a.createElement(m.a,{href:n},"View All Tags"),l.a.createElement("div",{className:"margin-vert--xl"},t.map((({content:e})=>l.a.createElement(c.a,{key:e.metadata.permalink,frontMatter:e.frontMatter,metadata:e.metadata,truncated:!0},l.a.createElement(e,null)))))))))}}}]); \ No newline at end of file diff --git a/docs/692ea9bc.cb68aa57.js b/docs/692ea9bc.adf07d09.js similarity index 94% rename from docs/692ea9bc.cb68aa57.js rename to docs/692ea9bc.adf07d09.js index b20d2d2ed9..18d45ac36c 100644 --- a/docs/692ea9bc.cb68aa57.js +++ b/docs/692ea9bc.adf07d09.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{155:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return p}));var a=r(2),n=r(6),o=(r(0),r(287)),i={title:"Stat / Bar / Large"},c={unversionedId:"examples/stat-large-bar",id:"examples/stat-large-bar",isDocsHomePage:!1,title:"Stat / Bar / Large",description:"Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.",source:"@site/docs/examples/stat-large-bar.md",slug:"/examples/stat-large-bar",permalink:"/wave/docs/examples/stat-large-bar",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-large-bar.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Bar / Wide",permalink:"/wave/docs/examples/stat-wide-bar"},next:{title:"Stat / Series / Small / Area",permalink:"/wave/docs/examples/stat-small-series-area"}},l=[],s={rightToc:l};function p(e){var t=e.components,i=Object(n.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(362).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom faker import Faker\n\nfrom synth import FakePercent\nfrom h2o_wave import site, ui\n\npage = site['/demo']\n\nfake = Faker()\nf = FakePercent()\nval, pc = f.next()\nc = page.add(f'example', ui.large_bar_stat_card(\n box='1 1 2 2',\n title=fake.cryptocurrency_name(),\n value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n value_caption='This Month',\n aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n aux_value_caption='Previous Month',\n plot_color='$red',\n progress=pc,\n data=dict(foo=val, bar=pc),\n caption=' '.join(fake.sentences(2)),\n))\npage.save()\n\nwhile True:\n time.sleep(1)\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n page.save()\n")))}p.isMDXComponent=!0},287:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));var a=r(0),n=r.n(a);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function c(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var s=n.a.createContext({}),p=function(e){var t=n.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=p(e.components);return n.a.createElement(s.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},f=n.a.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(r),f=a,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return r?n.a.createElement(d,c(c({ref:t},s),{},{components:r})):n.a.createElement(d,c({ref:t},s))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=f;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var s=n.a.createContext({}),p=function(e){var t=n.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=p(e.components);return n.a.createElement(s.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},f=n.a.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(r),f=a,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return r?n.a.createElement(d,c(c({ref:t},s),{},{components:r})):n.a.createElement(d,c({ref:t},s))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=f;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(d,l(l({ref:t},p),{},{components:n})):a.a.createElement(d,l({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(d,l(l({ref:t},p),{},{components:n})):a.a.createElement(d,l({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),l=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=l(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,c=e.originalType,o=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=l(r),d=n,f=u["".concat(o,".").concat(d)]||u[d]||m[d]||c;return r?a.a.createElement(f,i(i({ref:t},p),{},{components:r})):a.a.createElement(f,i({ref:t},p))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var c=r.length,o=new Array(c);o[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,o[1]=i;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),l=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=l(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,c=e.originalType,o=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=l(r),d=n,f=u["".concat(o,".").concat(d)]||u[d]||m[d]||c;return r?a.a.createElement(f,i(i({ref:t},p),{},{components:r})):a.a.createElement(f,i({ref:t},p))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var c=r.length,o=new Array(c);o[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,o[1]=i;for(var p=2;p\n
  • Spam
    • \n
  • Ham
    • \n
  • Eggs
    • \n\n'''\n\npage['example'] = ui.markup_card(\n box='1 1 2 2',\n title='Menu',\n content=menu,\n)\npage.save()\n")))}p.isMDXComponent=!0},287:function(e,n,t){"use strict";t.d(n,"a",(function(){return d})),t.d(n,"b",(function(){return E}));var r=t(0),i=t.n(r);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var n=1;n=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var l=i.a.createContext({}),p=function(e){var n=i.a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},d=function(e){var n=p(e.components);return i.a.createElement(l.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return i.a.createElement(i.a.Fragment,{},n)}},m=i.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),d=p(t),m=r,E=d["".concat(s,".").concat(m)]||d[m]||u[m]||a;return t?i.a.createElement(E,o(o({ref:n},l),{},{components:t})):i.a.createElement(E,o({ref:n},l))}));function E(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,s=new Array(a);s[0]=m;var o={};for(var c in n)hasOwnProperty.call(n,c)&&(o[c]=n[c]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var l=2;l\n
  • Spam
    • \n
  • Ham
    • \n
  • Eggs
    • \n\n'''\n\npage['example'] = ui.markup_card(\n box='1 1 2 2',\n title='Menu',\n content=menu,\n)\npage.save()\n")))}p.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return d})),t.d(n,"b",(function(){return E}));var r=t(0),i=t.n(r);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var n=1;n=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var l=i.a.createContext({}),p=function(e){var n=i.a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},d=function(e){var n=p(e.components);return i.a.createElement(l.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return i.a.createElement(i.a.Fragment,{},n)}},m=i.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),d=p(t),m=r,E=d["".concat(s,".").concat(m)]||d[m]||u[m]||a;return t?i.a.createElement(E,o(o({ref:n},l),{},{components:t})):i.a.createElement(E,o({ref:n},l))}));function E(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,s=new Array(a);s[0]=m;var o={};for(var c in n)hasOwnProperty.call(n,c)&&(o[c]=n[c]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var l=2;l 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue'),\n ui.table_column(name='status', label='Status'),\n ui.table_column(name='notifications', label='Notifications'),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n groupable=True,\n )])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}c.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return f}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var u=a.a.createContext({}),c=function(e){var n=a.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=c(e.components);return a.a.createElement(u.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),p=c(t),m=r,f=p["".concat(s,".").concat(m)]||p[m]||b[m]||o;return t?a.a.createElement(f,i(i({ref:n},u),{},{components:t})):a.a.createElement(f,i({ref:n},u))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,s=new Array(o);s[0]=m;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,s[1]=i;for(var u=2;u 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue'),\n ui.table_column(name='status', label='Status'),\n ui.table_column(name='notifications', label='Notifications'),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n groupable=True,\n )])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}c.isMDXComponent=!0},287:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return f}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var u=a.a.createContext({}),c=function(e){var n=a.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=c(e.components);return a.a.createElement(u.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},b=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),p=c(t),b=r,f=p["".concat(s,".").concat(b)]||p[b]||m[b]||o;return t?a.a.createElement(f,i(i({ref:n},u),{},{components:t})):a.a.createElement(f,i({ref:n},u))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,s=new Array(o);s[0]=b;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,s[1]=i;for(var u=2;u -v "),'\nor via the "My Apps"/"My Instances" page.'),Object(r.b)("p",null,"Admin access is exempt from all the authorization rules (i.e., admins have full access to all apps/instances)."))}p.isMDXComponent=!0},287:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return m}));var a=n(0),i=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),p=function(e){var t=i.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},b=function(e){var t=p(e.components);return i.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},d=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),b=p(n),d=a,m=b["".concat(c,".").concat(d)]||b[d]||u[d]||r;return n?i.a.createElement(m,o(o({ref:t},l),{},{components:n})):i.a.createElement(m,o({ref:t},l))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,c=new Array(r);c[0]=d;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o.mdxType="string"==typeof e?e:a,c[1]=o;for(var l=2;l -v "),'\nor via the "My Apps"/"My Instances" page.'),Object(r.b)("p",null,"Admin access is exempt from all the authorization rules (i.e., admins have full access to all apps/instances)."))}p.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return m}));var a=n(0),i=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),p=function(e){var t=i.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},b=function(e){var t=p(e.components);return i.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},d=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),b=p(n),d=a,m=b["".concat(c,".").concat(d)]||b[d]||u[d]||r;return n?i.a.createElement(m,o(o({ref:t},l),{},{components:n})):i.a.createElement(m,o({ref:t},l))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,c=new Array(r);c[0]=d;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o.mdxType="string"==typeof e?e:a,c[1]=o;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return r?a.a.createElement(d,c(c({ref:t},l),{},{components:r})):a.a.createElement(d,c({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=f;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return r?a.a.createElement(d,c(c({ref:t},l),{},{components:r})):a.a.createElement(d,c({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=f;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,d=u["".concat(c,".").concat(f)]||u[f]||m[f]||o;return r?a.a.createElement(d,p(p({ref:t},l),{},{components:r})):a.a.createElement(d,p({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var p={};for(var i in t)hasOwnProperty.call(t,i)&&(p[i]=t[i]);p.originalType=e,p.mdxType="string"==typeof e?e:n,c[1]=p;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,d=u["".concat(c,".").concat(f)]||u[f]||m[f]||o;return r?a.a.createElement(d,p(p({ref:t},l),{},{components:r})):a.a.createElement(d,p({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var p={};for(var i in t)hasOwnProperty.call(t,i)&&(p[i]=t[i]);p.originalType=e,p.mdxType="string"==typeof e?e:n,c[1]=p;for(var l=2;l=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var m=a.a.createContext({}),s=function(e){var r=a.a.useContext(m),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},l=function(e){var r=s(e.components);return a.a.createElement(m.Provider,{value:r},e.children)},u={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,m=p(e,["components","mdxType","originalType","parentName"]),l=s(t),f=n,d=l["".concat(c,".").concat(f)]||l[f]||u[f]||o;return t?a.a.createElement(d,i(i({ref:r},m),{},{components:t})):a.a.createElement(d,i({ref:r},m))}));function d(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,c=new Array(o);c[0]=f;var i={};for(var p in r)hasOwnProperty.call(r,p)&&(i[p]=r[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var m=2;m=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var m=a.a.createContext({}),s=function(e){var r=a.a.useContext(m),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},l=function(e){var r=s(e.components);return a.a.createElement(m.Provider,{value:r},e.children)},u={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,m=p(e,["components","mdxType","originalType","parentName"]),l=s(t),f=n,d=l["".concat(c,".").concat(f)]||l[f]||u[f]||o;return t?a.a.createElement(d,i(i({ref:r},m),{},{components:t})):a.a.createElement(d,i({ref:r},m))}));function d(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,c=new Array(o);c[0]=f;var i={};for(var p in r)hasOwnProperty.call(r,p)&&(i[p]=r[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var m=2;m=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,d=u["".concat(o,".").concat(m)]||u[m]||f[m]||i;return r?a.a.createElement(d,c(c({ref:t},p),{},{components:r})):a.a.createElement(d,c({ref:t},p))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,d=u["".concat(o,".").concat(m)]||u[m]||f[m]||i;return r?a.a.createElement(d,c(c({ref:t},p),{},{components:r})):a.a.createElement(d,c({ref:t},p))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var b=a.a.createContext({}),u=function(e){var t=a.a.useContext(b),r=t;return e&&(r="function"==typeof e?e(t):x(x({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(b.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),s=u(r),p=n,d=s["".concat(i,".").concat(p)]||s[p]||c[p]||o;return r?a.a.createElement(d,x(x({ref:t},b),{},{components:r})):a.a.createElement(d,x({ref:t},b))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=p;var x={};for(var l in t)hasOwnProperty.call(t,l)&&(x[l]=t[l]);x.originalType=e,x.mdxType="string"==typeof e?e:n,i[1]=x;for(var b=2;b=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var b=a.a.createContext({}),u=function(e){var t=a.a.useContext(b),r=t;return e&&(r="function"==typeof e?e(t):x(x({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(b.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),s=u(r),p=n,d=s["".concat(i,".").concat(p)]||s[p]||c[p]||o;return r?a.a.createElement(d,x(x({ref:t},b),{},{components:r})):a.a.createElement(d,x({ref:t},b))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=p;var x={};for(var l in t)hasOwnProperty.call(t,l)&&(x[l]=t[l]);x.originalType=e,x.mdxType="string"==typeof e?e:n,i[1]=x;for(var b=2;b=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=r.a.createContext({}),m=function(e){var n=r.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=m(e.components);return r.a.createElement(s.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},u=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=m(t),u=a,f=p["".concat(i,".").concat(u)]||p[u]||d[u]||o;return t?r.a.createElement(f,c(c({ref:n},s),{},{components:t})):r.a.createElement(f,c({ref:n},s))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,i=new Array(o);i[0]=u;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=r.a.createContext({}),m=function(e){var n=r.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=m(e.components);return r.a.createElement(s.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},u=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=m(t),u=a,f=p["".concat(i,".").concat(u)]||p[u]||d[u]||o;return t?r.a.createElement(f,c(c({ref:n},s),{},{components:t})):r.a.createElement(f,c({ref:n},s))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,i=new Array(o);i[0]=u;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},m=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),m=s(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||c;return n?a.a.createElement(f,o(o({ref:t},l),{},{components:n})):a.a.createElement(f,o({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,i=new Array(c);i[0]=d;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},m=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),m=s(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||c;return n?a.a.createElement(f,o(o({ref:t},l),{},{components:n})):a.a.createElement(f,o({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,i=new Array(c);i[0]=d;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),u=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return r?a.a.createElement(f,p(p({ref:t},c),{},{components:r})):a.a.createElement(f,p({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),u=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return r?a.a.createElement(f,p(p({ref:t},c),{},{components:r})):a.a.createElement(f,p({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var c=2;c=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),l=function(e){var r=a.a.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},s=function(e){var r=l(e.components);return a.a.createElement(c.Provider,{value:r},e.children)},g={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},S=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,p=e.originalType,A=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),s=l(t),S=n,u=s["".concat(A,".").concat(S)]||s[S]||g[S]||p;return t?a.a.createElement(u,i(i({ref:r},c),{},{components:t})):a.a.createElement(u,i({ref:r},c))}));function u(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var p=t.length,A=new Array(p);A[0]=S;var i={};for(var o in r)hasOwnProperty.call(r,o)&&(i[o]=r[o]);i.originalType=e,i.mdxType="string"==typeof e?e:n,A[1]=i;for(var c=2;c=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),l=function(e){var r=a.a.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},s=function(e){var r=l(e.components);return a.a.createElement(c.Provider,{value:r},e.children)},g={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},S=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,p=e.originalType,A=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),s=l(t),S=n,u=s["".concat(A,".").concat(S)]||s[S]||g[S]||p;return t?a.a.createElement(u,i(i({ref:r},c),{},{components:t})):a.a.createElement(u,i({ref:r},c))}));function u(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var p=t.length,A=new Array(p);A[0]=S;var i={};for(var o in r)hasOwnProperty.call(r,o)&&(i[o]=r[o]);i.originalType=e,i.mdxType="string"==typeof e?e:n,A[1]=i;for(var c=2;c',id:"arc",children:[]},{value:'circle     ',id:"circle",children:[]},{value:'draw ',id:"draw",children:[]},{value:'ellipse ',id:"ellipse",children:[]},{value:'image ',id:"image",children:[]},{value:'line ',id:"line",children:[]},{value:'p ',id:"p",children:[]},{value:'path ',id:"path",children:[]},{value:'polygon ',id:"polygon",children:[]},{value:'polyline ',id:"polyline",children:[]},{value:'rect ',id:"rect",children:[]},{value:'reset ',id:"reset",children:[]},{value:'scene ',id:"scene",children:[]},{value:'spline ',id:"spline",children:[]},{value:'stage ',id:"stage",children:[]},{value:'text ',id:"text",children:[]},{value:'turtle ',id:"turtle",children:[]},{value:'type_of ',id:"type_of",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Path ',id:"path-1",children:[]},{value:'Turtle ',id:"turtle-1",children:[]}]}],r={rightToc:s};function o(e){var t=e.components,a=Object(b.a)(e,["components"]);return Object(l.b)("wrapper",Object(c.a)({},r,a,{components:t,mdxType:"MDXLayout"}),Object(l.b)("h2",{id:"functions"},"Functions"),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"arc"},"arc ",Object(l.b)("a",{name:"h2o_wave.graphics.arc"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"arc"),"(r1:\xa0float, r2:\xa0float, a1:\xa0float, a2:\xa0float, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw circular or annular sector, as in a pie or donut chart, centered at (0, 0)."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"r1")),Object(l.b)("dd",null,"inner radius."),Object(l.b)("dt",null,Object(l.b)("code",null,"r2")),Object(l.b)("dd",null,"outer radius."),Object(l.b)("dt",null,Object(l.b)("code",null,"a1")),Object(l.b)("dd",null,"start angle, in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"a2")),Object(l.b)("dd",null,"end angle, in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"circle"},"circle ",Object(l.b)("a",{name:"h2o_wave.graphics.circle"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"circle"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a circle. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"draw"},"draw ",Object(l.b)("a",{name:"h2o_wave.graphics.draw"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"draw"),"(element:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref"),", **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Schedule a redraw of the specified graphical element using the provided attributes."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"element")),Object(l.b)("dd",null,"A reference to a graphical element."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use while performing a redraw.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The element reference, without change.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"ellipse"},"ellipse ",Object(l.b)("a",{name:"h2o_wave.graphics.ellipse"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"ellipse"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw an ellipse. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"image"},"image ",Object(l.b)("a",{name:"h2o_wave.graphics.image"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"image"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw an image. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"line"},"line ",Object(l.b)("a",{name:"h2o_wave.graphics.line"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"line"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a line. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"p"},"p ",Object(l.b)("a",{name:"h2o_wave.graphics.p"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"p"),"() \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),"."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),".")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"path"},"path ",Object(l.b)("a",{name:"h2o_wave.graphics.path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"path"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a path. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"polygon"},"polygon ",Object(l.b)("a",{name:"h2o_wave.graphics.polygon"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"polygon"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a polygon. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"polyline"},"polyline ",Object(l.b)("a",{name:"h2o_wave.graphics.polyline"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"polyline"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a polyline. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"rect"},"rect ",Object(l.b)("a",{name:"h2o_wave.graphics.rect"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"rect"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a rectangle. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"reset"},"reset ",Object(l.b)("a",{name:"h2o_wave.graphics.reset"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"reset"),"(element:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref"),") \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Schedule a redraw of the specified graphical element using its original attributes. Calling this function clears any changes performed using the ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.draw",href:"#h2o_wave.graphics.draw"},"draw()"))," function."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"element")),Object(l.b)("dd",null,"A reference to a graphical element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The element reference, without change.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"scene"},"scene ",Object(l.b)("a",{name:"h2o_wave.graphics.scene"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"scene"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a scene. A scene holds graphic elements whose attributes need to be changed dynamically (causing a re-render). The return value must be assigned to the ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.scene",href:"#h2o_wave.graphics.scene"},"scene()"))," property of a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard")),"."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Graphical elements to render as part of the scene.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"spline"},"spline ",Object(l.b)("a",{name:"h2o_wave.graphics.spline"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"spline"),"(x:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, y:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, x0:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, y0:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, radial:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a spline."),Object(l.b)("p",null,"If x, y are specified, draws a regular spline."),Object(l.b)("p",null,"If x, y, y0 are specified, draws a horizontal area spline. Sets baseline to zero if y0 is an empty list."),Object(l.b)("p",null,"If x, x0, y are specified, draws a vertical area spline. Sets baseline to zero if x0 is an empty list"),Object(l.b)("p",null,"Missing information is rendered as gaps in the spline."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"x0")),Object(l.b)("dd",null,"base x-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"y0")),Object(l.b)("dd",null,"base y-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"curve")),Object(l.b)("dd",null,"Interpolation. One of basis, basis-closed, basis-open, cardinal, cardinal-closed, cardinal-open, smooth, smooth-closed, smooth-open, linear, linear-closed, monotone-x, monotone-y, natural, step, step-after, step-before. Defaults to linear."),Object(l.b)("dt",null,Object(l.b)("code",null,"radial")),Object(l.b)("dd",null,"Whether (x, y) should be treated as (angle,radius) or (x0, x, y0, y) should be treated as (start-angle, end-angle, inner-radius, outer-radius)."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"stage"},"stage ",Object(l.b)("a",{name:"h2o_wave.graphics.stage"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"stage"),"(**kwargs) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a stage. A stage holds static graphics elements that are rendered as part of the background (behind the scene). The return value must be assigned to the ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.stage",href:"#h2o_wave.graphics.stage"},"stage()"))," property of a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard")),"."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Graphical elements to render as part of the stage.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Packed data.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"text"},"text ",Object(l.b)("a",{name:"h2o_wave.graphics.text"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"text"),"(text:\xa0str, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw text. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"text")),Object(l.b)("dd",null,"The text content."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"turtle"},"turtle ",Object(l.b)("a",{name:"h2o_wave.graphics.turtle"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"turtle"),"(x=0.0, y=0.0, degrees=0.0) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),"."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"initial position x"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"initial position y"),Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"initial angle in degrees")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),".")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"type_of"},"type_of ",Object(l.b)("a",{name:"h2o_wave.graphics.type_of"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"type_of"),"(element:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),") \u2011>\xa0Union[str,\xa0NoneType]"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Get the type of the graphical element."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"element")),Object(l.b)("dd",null,"A graphical element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A string indicating the type of the element, e.g. 'circle', 'line', etc.")))),Object(l.b)("h2",{id:"classes"},"Classes"),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"path-1"},"Path ",Object(l.b)("a",{name:"h2o_wave.graphics.Path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"A convenience class for drawing SVG paths.")),Object(l.b)("h4",{id:"methods"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"a"},"A ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.A"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"A"),"(self, rx:\xa0float, ry:\xa0float, x_axis_rotation:\xa0float, large_arc:\xa0bool, sweep:\xa0bool, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an ",Object(l.b)("code",null,"x_axis_rotation"),", which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. ",Object(l.b)("code",null,"large_arc")," and ",Object(l.b)("code",null,"sweep_flag"),"contribute to the automatic calculations and help determine how the arc is drawn. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"rx")),Object(l.b)("dd",null,"x-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"ry")),Object(l.b)("dd",null,"y-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"x_axis_rotation")),Object(l.b)("dd",null,"Rotation in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"large_arc")),Object(l.b)("dd",null,"Determines if the arc should be greater than or less than 180 degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"sweep")),Object(l.b)("dd",null,"Determines if the arc should begin moving at positive angles or negative ones."),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"c"},"C ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.C"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"C"),"(self, x1:\xa0float, y1:\xa0float, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"h"},"H ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.H"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"H"),"(self, x:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a horizontal line from the current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"l"},"L ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.L"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"L"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"m"},"M ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.M"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"M"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Start a new sub-path at the given (x,y) coordinates. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"q"},"Q ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.Q"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"Q"),"(self, x1:\xa0float, y1:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"s"},"S ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.S"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"S"),"(self, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"t"},"T ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.T"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"T"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"v"},"V ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.V"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"V"),"(self, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a vertical line from the current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"z"},"Z ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.Z"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"Z"),"(self) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Close the current subpath by connecting it back to the current subpath's initial point."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand"},"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"a-1"},"a ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.a"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"a"),"(self, rx:\xa0float, ry:\xa0float, x_axis_rotation:\xa0float, large_arc:\xa0bool, sweep:\xa0bool, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an ",Object(l.b)("code",null,"x_axis_rotation"),", which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. ",Object(l.b)("code",null,"large_arc")," and ",Object(l.b)("code",null,"sweep_flag"),"contribute to the automatic calculations and help determine how the arc is drawn. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"rx")),Object(l.b)("dd",null,"x-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"ry")),Object(l.b)("dd",null,"y-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"x_axis_rotation")),Object(l.b)("dd",null,"Rotation in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"large_arc")),Object(l.b)("dd",null,"Determines if the arc should be greater than or less than 180 degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"sweep")),Object(l.b)("dd",null,"Determines if the arc should begin moving at positive angles or negative ones."),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"c-1"},"c ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.c"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"c"),"(self, x1:\xa0float, y1:\xa0float, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"d"},"d ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.d"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"d"),"(self) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Serialize this path's commands into SVG path data."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The ",Object(l.b)("code",null,"d")," attribute for a SVG path.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"h-1"},"h ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.h"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"h"),"(self, x:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a horizontal line from the current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"l-1"},"l ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.l"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"l"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"m-1"},"m ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.m"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"m"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Start a new sub-path at the given (x,y) coordinates. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"path-2"},"path ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"path"),"(self, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"A SVG path element representing the commands in this ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance. Same as calling ",Object(l.b)("code",null,"h2o_wave.graphics.path(d=path.d())")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Additional attributes for the SVG path element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A SVG path element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"q-1"},"q ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.q"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"q"),"(self, x1:\xa0float, y1:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"s-1"},"s ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.s"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"s"),"(self, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"t-1"},"t ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.t"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"t"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"v-1"},"v ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.v"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"v"),"(self, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a vertical line from the current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"z-1"},"z ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.z"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"z"),"(self) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Close the current subpath by connecting it back to the current subpath's initial point."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand"},"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance."))))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"turtle-1"},"Turtle ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Turtle"),"(x=0.0, y=0.0, degrees=0.0)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"A Logo-like Turtle implementation for generating SVG paths. This is not a complete Turtle implementation. Contains a useful subset relevant to generating paths without using trigonometry or mental gymnastics."),Object(l.b)("p",null,"Create a Turtle."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"initial position x"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"initial position y"),Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"initial angle in degrees"))),Object(l.b)("h4",{id:"methods-1"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"a-2"},"a ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.a"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"a"),"(self, degrees:\xa0float\xa0=\xa00) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Set the turtle's orientation."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"angle in degrees")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"b"},"b ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.b"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"b"),"(self, distance:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Move backward."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"distance")),Object(l.b)("dd",null,"Distance to move by.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"d-1"},"d ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.d"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"d"),"(self) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Serialize this turtle's movements into SVG path data."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The ",Object(l.b)("code",null,"d")," attribute for a SVG path.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"f"},"f ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.f"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"f"),"(self, distance:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Move forward."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"distance")),Object(l.b)("dd",null,"Distance to move by.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"l-2"},"l ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.l"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"l"),"(self, degrees:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Turn left."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"Angle in degrees.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"p-1"},"p ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.p"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"p"),"(self, x:\xa0float\xa0=\xa00.0, y:\xa0float\xa0=\xa00.0) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Set the turtle's position."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"path-3"},"path ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"path"),"(self, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a SVG path element that represents this turtle's movements."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Additional attributes for the SVG path element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A SVG path element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"pd"},"pd ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.pd"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"pd"),"(self) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Pen down."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"pu"},"pu ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.pu"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"pu"),"(self, close:\xa0bool) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Pen up."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"close")),Object(l.b)("dd",null,"Whether to close the current subpath.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"r"},"r ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.r"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"r"),"(self, degrees:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Turn right."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"Angle in degrees.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance."))))))))}o.isMDXComponent=!0},287:function(e,t,a){"use strict";a.d(t,"a",(function(){return d})),a.d(t,"b",(function(){return O}));var c=a(0),b=a.n(c);function l(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function n(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);t&&(c=c.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,c)}return a}function i(e){for(var t=1;t=0||(b[a]=e[a]);return b}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(c=0;c=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(b[a]=e[a])}return b}var r=b.a.createContext({}),o=function(e){var t=b.a.useContext(r),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},d=function(e){var t=o(e.components);return b.a.createElement(r.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return b.a.createElement(b.a.Fragment,{},t)}},p=b.a.forwardRef((function(e,t){var a=e.components,c=e.mdxType,l=e.originalType,n=e.parentName,r=s(e,["components","mdxType","originalType","parentName"]),d=o(a),p=c,O=d["".concat(n,".").concat(p)]||d[p]||h[p]||l;return a?b.a.createElement(O,i(i({ref:t},r),{},{components:a})):b.a.createElement(O,i({ref:t},r))}));function O(e,t){var a=arguments,c=t&&t.mdxType;if("string"==typeof e||c){var l=a.length,n=new Array(l);n[0]=p;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:c,n[1]=i;for(var r=2;r',id:"arc",children:[]},{value:'circle ',id:"circle",children:[]},{value:'draw ',id:"draw",children:[]},{value:'ellipse ',id:"ellipse",children:[]},{value:'image ',id:"image",children:[]},{value:'line ',id:"line",children:[]},{value:'p ',id:"p",children:[]},{value:'path ',id:"path",children:[]},{value:'polygon ',id:"polygon",children:[]},{value:'polyline ',id:"polyline",children:[]},{value:'rect ',id:"rect",children:[]},{value:'reset ',id:"reset",children:[]},{value:'scene ',id:"scene",children:[]},{value:'spline ',id:"spline",children:[]},{value:'stage ',id:"stage",children:[]},{value:'text ',id:"text",children:[]},{value:'turtle ',id:"turtle",children:[]},{value:'type_of ',id:"type_of",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Path ',id:"path-1",children:[]},{value:'Turtle ',id:"turtle-1",children:[]}]}],r={rightToc:s};function o(e){var t=e.components,a=Object(b.a)(e,["components"]);return Object(l.b)("wrapper",Object(c.a)({},r,a,{components:t,mdxType:"MDXLayout"}),Object(l.b)("h2",{id:"functions"},"Functions"),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"arc"},"arc ",Object(l.b)("a",{name:"h2o_wave.graphics.arc"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"arc"),"(r1:\xa0float, r2:\xa0float, a1:\xa0float, a2:\xa0float, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw circular or annular sector, as in a pie or donut chart, centered at (0, 0)."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"r1")),Object(l.b)("dd",null,"inner radius."),Object(l.b)("dt",null,Object(l.b)("code",null,"r2")),Object(l.b)("dd",null,"outer radius."),Object(l.b)("dt",null,Object(l.b)("code",null,"a1")),Object(l.b)("dd",null,"start angle, in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"a2")),Object(l.b)("dd",null,"end angle, in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"circle"},"circle ",Object(l.b)("a",{name:"h2o_wave.graphics.circle"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"circle"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a circle. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"draw"},"draw ",Object(l.b)("a",{name:"h2o_wave.graphics.draw"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"draw"),"(element:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref"),", **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Schedule a redraw of the specified graphical element using the provided attributes."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"element")),Object(l.b)("dd",null,"A reference to a graphical element."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use while performing a redraw.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The element reference, without change.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"ellipse"},"ellipse ",Object(l.b)("a",{name:"h2o_wave.graphics.ellipse"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"ellipse"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw an ellipse. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"image"},"image ",Object(l.b)("a",{name:"h2o_wave.graphics.image"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"image"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw an image. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"line"},"line ",Object(l.b)("a",{name:"h2o_wave.graphics.line"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"line"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a line. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"p"},"p ",Object(l.b)("a",{name:"h2o_wave.graphics.p"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"p"),"() \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),"."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),".")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"path"},"path ",Object(l.b)("a",{name:"h2o_wave.graphics.path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"path"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a path. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"polygon"},"polygon ",Object(l.b)("a",{name:"h2o_wave.graphics.polygon"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"polygon"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a polygon. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"polyline"},"polyline ",Object(l.b)("a",{name:"h2o_wave.graphics.polyline"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"polyline"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a polyline. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"rect"},"rect ",Object(l.b)("a",{name:"h2o_wave.graphics.rect"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"rect"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a rectangle. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"reset"},"reset ",Object(l.b)("a",{name:"h2o_wave.graphics.reset"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"reset"),"(element:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref"),") \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Schedule a redraw of the specified graphical element using its original attributes. Calling this function clears any changes performed using the ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.draw",href:"#h2o_wave.graphics.draw"},"draw()"))," function."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"element")),Object(l.b)("dd",null,"A reference to a graphical element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The element reference, without change.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"scene"},"scene ",Object(l.b)("a",{name:"h2o_wave.graphics.scene"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"scene"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a scene. A scene holds graphic elements whose attributes need to be changed dynamically (causing a re-render). The return value must be assigned to the ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.scene",href:"#h2o_wave.graphics.scene"},"scene()"))," property of a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard")),"."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Graphical elements to render as part of the scene.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"spline"},"spline ",Object(l.b)("a",{name:"h2o_wave.graphics.spline"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"spline"),"(x:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, y:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, x0:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, y0:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, radial:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a spline."),Object(l.b)("p",null,"If x, y are specified, draws a regular spline."),Object(l.b)("p",null,"If x, y, y0 are specified, draws a horizontal area spline. Sets baseline to zero if y0 is an empty list."),Object(l.b)("p",null,"If x, x0, y are specified, draws a vertical area spline. Sets baseline to zero if x0 is an empty list"),Object(l.b)("p",null,"Missing information is rendered as gaps in the spline."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"x0")),Object(l.b)("dd",null,"base x-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"y0")),Object(l.b)("dd",null,"base y-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"curve")),Object(l.b)("dd",null,"Interpolation. One of basis, basis-closed, basis-open, cardinal, cardinal-closed, cardinal-open, smooth, smooth-closed, smooth-open, linear, linear-closed, monotone-x, monotone-y, natural, step, step-after, step-before. Defaults to linear."),Object(l.b)("dt",null,Object(l.b)("code",null,"radial")),Object(l.b)("dd",null,"Whether (x, y) should be treated as (angle,radius) or (x0, x, y0, y) should be treated as (start-angle, end-angle, inner-radius, outer-radius)."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"stage"},"stage ",Object(l.b)("a",{name:"h2o_wave.graphics.stage"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"stage"),"(**kwargs) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a stage. A stage holds static graphics elements that are rendered as part of the background (behind the scene). The return value must be assigned to the ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.stage",href:"#h2o_wave.graphics.stage"},"stage()"))," property of a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard")),"."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Graphical elements to render as part of the stage.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Packed data.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"text"},"text ",Object(l.b)("a",{name:"h2o_wave.graphics.text"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"text"),"(text:\xa0str, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw text. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"text")),Object(l.b)("dd",null,"The text content."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"turtle"},"turtle ",Object(l.b)("a",{name:"h2o_wave.graphics.turtle"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"turtle"),"(x=0.0, y=0.0, degrees=0.0) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),"."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"initial position x"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"initial position y"),Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"initial angle in degrees")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),".")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"type_of"},"type_of ",Object(l.b)("a",{name:"h2o_wave.graphics.type_of"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"type_of"),"(element:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),") \u2011>\xa0Union[str,\xa0NoneType]"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Get the type of the graphical element."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"element")),Object(l.b)("dd",null,"A graphical element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A string indicating the type of the element, e.g. 'circle', 'line', etc.")))),Object(l.b)("h2",{id:"classes"},"Classes"),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"path-1"},"Path ",Object(l.b)("a",{name:"h2o_wave.graphics.Path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"A convenience class for drawing SVG paths.")),Object(l.b)("h4",{id:"methods"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"a"},"A ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.A"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"A"),"(self, rx:\xa0float, ry:\xa0float, x_axis_rotation:\xa0float, large_arc:\xa0bool, sweep:\xa0bool, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an ",Object(l.b)("code",null,"x_axis_rotation"),", which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. ",Object(l.b)("code",null,"large_arc")," and ",Object(l.b)("code",null,"sweep_flag"),"contribute to the automatic calculations and help determine how the arc is drawn. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"rx")),Object(l.b)("dd",null,"x-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"ry")),Object(l.b)("dd",null,"y-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"x_axis_rotation")),Object(l.b)("dd",null,"Rotation in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"large_arc")),Object(l.b)("dd",null,"Determines if the arc should be greater than or less than 180 degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"sweep")),Object(l.b)("dd",null,"Determines if the arc should begin moving at positive angles or negative ones."),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"c"},"C ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.C"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"C"),"(self, x1:\xa0float, y1:\xa0float, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"h"},"H ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.H"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"H"),"(self, x:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a horizontal line from the current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"l"},"L ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.L"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"L"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"m"},"M ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.M"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"M"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Start a new sub-path at the given (x,y) coordinates. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"q"},"Q ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.Q"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"Q"),"(self, x1:\xa0float, y1:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"s"},"S ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.S"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"S"),"(self, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"t"},"T ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.T"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"T"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"v"},"V ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.V"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"V"),"(self, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a vertical line from the current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"z"},"Z ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.Z"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"Z"),"(self) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Close the current subpath by connecting it back to the current subpath's initial point."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand"},"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"a-1"},"a ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.a"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"a"),"(self, rx:\xa0float, ry:\xa0float, x_axis_rotation:\xa0float, large_arc:\xa0bool, sweep:\xa0bool, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an ",Object(l.b)("code",null,"x_axis_rotation"),", which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. ",Object(l.b)("code",null,"large_arc")," and ",Object(l.b)("code",null,"sweep_flag"),"contribute to the automatic calculations and help determine how the arc is drawn. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"rx")),Object(l.b)("dd",null,"x-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"ry")),Object(l.b)("dd",null,"y-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"x_axis_rotation")),Object(l.b)("dd",null,"Rotation in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"large_arc")),Object(l.b)("dd",null,"Determines if the arc should be greater than or less than 180 degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"sweep")),Object(l.b)("dd",null,"Determines if the arc should begin moving at positive angles or negative ones."),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"c-1"},"c ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.c"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"c"),"(self, x1:\xa0float, y1:\xa0float, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"d"},"d ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.d"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"d"),"(self) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Serialize this path's commands into SVG path data."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The ",Object(l.b)("code",null,"d")," attribute for a SVG path.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"h-1"},"h ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.h"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"h"),"(self, x:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a horizontal line from the current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"l-1"},"l ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.l"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"l"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"m-1"},"m ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.m"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"m"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Start a new sub-path at the given (x,y) coordinates. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"path-2"},"path ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"path"),"(self, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"A SVG path element representing the commands in this ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance. Same as calling ",Object(l.b)("code",null,"h2o_wave.graphics.path(d=path.d())")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Additional attributes for the SVG path element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A SVG path element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"q-1"},"q ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.q"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"q"),"(self, x1:\xa0float, y1:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"s-1"},"s ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.s"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"s"),"(self, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"t-1"},"t ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.t"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"t"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"v-1"},"v ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.v"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"v"),"(self, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a vertical line from the current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"z-1"},"z ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.z"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"z"),"(self) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Close the current subpath by connecting it back to the current subpath's initial point."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand"},"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance."))))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"turtle-1"},"Turtle ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Turtle"),"(x=0.0, y=0.0, degrees=0.0)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"A Logo-like Turtle implementation for generating SVG paths. This is not a complete Turtle implementation. Contains a useful subset relevant to generating paths without using trigonometry or mental gymnastics."),Object(l.b)("p",null,"Create a Turtle."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"initial position x"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"initial position y"),Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"initial angle in degrees"))),Object(l.b)("h4",{id:"methods-1"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"a-2"},"a ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.a"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"a"),"(self, degrees:\xa0float\xa0=\xa00) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Set the turtle's orientation."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"angle in degrees")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"b"},"b ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.b"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"b"),"(self, distance:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Move backward."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"distance")),Object(l.b)("dd",null,"Distance to move by.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"d-1"},"d ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.d"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"d"),"(self) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Serialize this turtle's movements into SVG path data."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The ",Object(l.b)("code",null,"d")," attribute for a SVG path.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"f"},"f ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.f"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"f"),"(self, distance:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Move forward."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"distance")),Object(l.b)("dd",null,"Distance to move by.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"l-2"},"l ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.l"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"l"),"(self, degrees:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Turn left."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"Angle in degrees.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"p-1"},"p ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.p"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"p"),"(self, x:\xa0float\xa0=\xa00.0, y:\xa0float\xa0=\xa00.0) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Set the turtle's position."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"path-3"},"path ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"path"),"(self, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a SVG path element that represents this turtle's movements."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Additional attributes for the SVG path element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A SVG path element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"pd"},"pd ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.pd"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"pd"),"(self) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Pen down."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"pu"},"pu ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.pu"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"pu"),"(self, close:\xa0bool) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Pen up."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"close")),Object(l.b)("dd",null,"Whether to close the current subpath.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"r"},"r ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.r"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"r"),"(self, degrees:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Turn right."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"Angle in degrees.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance."))))))))}o.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return d})),a.d(t,"b",(function(){return O}));var c=a(0),b=a.n(c);function l(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function n(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);t&&(c=c.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,c)}return a}function i(e){for(var t=1;t=0||(b[a]=e[a]);return b}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(c=0;c=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(b[a]=e[a])}return b}var r=b.a.createContext({}),o=function(e){var t=b.a.useContext(r),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},d=function(e){var t=o(e.components);return b.a.createElement(r.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return b.a.createElement(b.a.Fragment,{},t)}},p=b.a.forwardRef((function(e,t){var a=e.components,c=e.mdxType,l=e.originalType,n=e.parentName,r=s(e,["components","mdxType","originalType","parentName"]),d=o(a),p=c,O=d["".concat(n,".").concat(p)]||d[p]||h[p]||l;return a?b.a.createElement(O,i(i({ref:t},r),{},{components:a})):b.a.createElement(O,i({ref:t},r))}));function O(e,t){var a=arguments,c=t&&t.mdxType;if("string"==typeof e||c){var l=a.length,n=new Array(l);n[0]=p;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:c,n[1]=i;for(var r=2;r=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var s=n.a.createContext({}),p=function(e){var t=n.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},l=function(e){var t=p(e.components);return n.a.createElement(s.Provider,{value:t},e.children)},g={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,c=e.originalType,a=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),l=p(r),d=o,m=l["".concat(a,".").concat(d)]||l[d]||g[d]||c;return r?n.a.createElement(m,i(i({ref:t},s),{},{components:r})):n.a.createElement(m,i({ref:t},s))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var c=r.length,a=new Array(c);a[0]=d;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i.mdxType="string"==typeof e?e:o,a[1]=i;for(var s=2;s=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var s=n.a.createContext({}),p=function(e){var t=n.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},l=function(e){var t=p(e.components);return n.a.createElement(s.Provider,{value:t},e.children)},g={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,c=e.originalType,a=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),l=p(r),d=o,m=l["".concat(a,".").concat(d)]||l[d]||g[d]||c;return r?n.a.createElement(m,i(i({ref:t},s),{},{components:r})):n.a.createElement(m,i({ref:t},s))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var c=r.length,a=new Array(c);a[0]=d;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i.mdxType="string"==typeof e?e:o,a[1]=i;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var m=a.a.createContext({}),u=function(e){var t=a.a.useContext(m),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(m.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),s=u(r),p=n,f=s["".concat(o,".").concat(p)]||s[p]||b[p]||i;return r?a.a.createElement(f,c(c({ref:t},m),{},{components:r})):a.a.createElement(f,c({ref:t},m))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=p;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var m=2;m=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var m=a.a.createContext({}),u=function(e){var t=a.a.useContext(m),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(m.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),s=u(r),p=n,f=s["".concat(o,".").concat(p)]||s[p]||b[p]||i;return r?a.a.createElement(f,c(c({ref:t},m),{},{components:r})):a.a.createElement(f,c({ref:t},m))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=p;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var m=2;m=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),d=p(a),b=n,m=d["".concat(i,".").concat(b)]||d[b]||u[b]||o;return a?r.a.createElement(m,l(l({ref:t},c),{},{components:a})):r.a.createElement(m,l({ref:t},c))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:n,i[1]=l;for(var c=2;c=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),d=p(a),b=n,m=d["".concat(i,".").concat(b)]||d[b]||u[b]||o;return a?r.a.createElement(m,l(l({ref:t},c),{},{components:a})):r.a.createElement(m,l({ref:t},c))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:n,i[1]=l;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),l=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):u(u({},t),e)),n},s=function(e){var t=l(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},c=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=b(e,["components","mdxType","originalType","parentName"]),s=l(n),c=a,m=s["".concat(i,".").concat(c)]||s[c]||d[c]||o;return n?r.a.createElement(m,u(u({ref:t},p),{},{components:n})):r.a.createElement(m,u({ref:t},p))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=c;var u={};for(var b in t)hasOwnProperty.call(t,b)&&(u[b]=t[b]);u.originalType=e,u.mdxType="string"==typeof e?e:a,i[1]=u;for(var p=2;p=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),l=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):u(u({},t),e)),n},s=function(e){var t=l(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},c=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=b(e,["components","mdxType","originalType","parentName"]),s=l(n),c=a,m=s["".concat(i,".").concat(c)]||s[c]||d[c]||o;return n?r.a.createElement(m,u(u({ref:t},p),{},{components:n})):r.a.createElement(m,u({ref:t},p))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=c;var u={};for(var b in t)hasOwnProperty.call(t,b)&&(u[b]=t[b]);u.originalType=e,u.mdxType="string"==typeof e?e:a,i[1]=u;for(var p=2;p\n
  • Spam
    • \n
  • Ham
    • \n
  • Eggs
    • \n\n'''\nmenu = '''\n
      \n{{#each dishes}}\n
    1. {{name}} costs {{price}}
      2. \n{{/each}}\n=0||(r[a]=e[a]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var u=r.a.createContext({}),s=function(e){var n=r.a.useContext(u),a=n;return e&&(a="function"==typeof e?e(n):l(l({},n),e)),a},p=function(e){var n=s(e.components);return r.a.createElement(u.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},b=r.a.forwardRef((function(e,n){var a=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),p=s(a),b=t,d=p["".concat(i,".").concat(b)]||p[b]||m[b]||o;return a?r.a.createElement(d,l(l({ref:n},u),{},{components:a})):r.a.createElement(d,l({ref:n},u))}));function d(e,n){var a=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var o=a.length,i=new Array(o);i[0]=b;var l={};for(var c in n)hasOwnProperty.call(n,c)&&(l[c]=n[c]);l.originalType=e,l.mdxType="string"==typeof e?e:t,i[1]=l;for(var u=2;u\n
    2. Spam
      3. \n
    3. Ham
      4. \n
    4. Eggs
      5. \n
    \n'''\nmenu = '''\n
      \n{{#each dishes}}\n
    1. {{name}} costs {{price}}
      2. \n{{/each}}\n=0||(r[a]=e[a]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var u=r.a.createContext({}),s=function(e){var n=r.a.useContext(u),a=n;return e&&(a="function"==typeof e?e(n):l(l({},n),e)),a},p=function(e){var n=s(e.components);return r.a.createElement(u.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},b=r.a.forwardRef((function(e,n){var a=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),p=s(a),b=t,d=p["".concat(i,".").concat(b)]||p[b]||m[b]||o;return a?r.a.createElement(d,l(l({ref:n},u),{},{components:a})):r.a.createElement(d,l({ref:n},u))}));function d(e,n){var a=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var o=a.length,i=new Array(o);i[0]=b;var l={};for(var c in n)hasOwnProperty.call(n,c)&&(l[c]=n[c]);l.originalType=e,l.mdxType="string"==typeof e?e:t,i[1]=l;for(var u=2;u=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),m=function(e){var n=a.a.useContext(c),r=n;return e&&(r="function"==typeof e?e(n):s(s({},n),e)),r},d=function(e){var n=m(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},f=a.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=m(r),f=t,p=d["".concat(i,".").concat(f)]||d[f]||u[f]||o;return r?a.a.createElement(p,s(s({ref:n},c),{},{components:r})):a.a.createElement(p,s({ref:n},c))}));function p(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var o=r.length,i=new Array(o);i[0]=f;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s.mdxType="string"==typeof e?e:t,i[1]=s;for(var c=2;c=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),m=function(e){var n=a.a.useContext(c),r=n;return e&&(r="function"==typeof e?e(n):s(s({},n),e)),r},d=function(e){var n=m(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},f=a.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=m(r),f=t,p=d["".concat(i,".").concat(f)]||d[f]||u[f]||o;return r?a.a.createElement(p,s(s({ref:n},c),{},{components:r})):a.a.createElement(p,s({ref:n},c))}));function p(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var o=r.length,i=new Array(o);i[0]=f;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s.mdxType="string"==typeof e?e:t,i[1]=s;for(var c=2;c 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue'),\n ui.table_column(name='status', label='Status'),\n ui.table_column(name='notifications', label='Notifications'),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n downloadable=True,\n )\n ])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}f.isMDXComponent=!0},287:function(e,n,t){"use strict";t.d(n,"a",(function(){return c})),t.d(n,"b",(function(){return A}));var i=t(0),r=t.n(i);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function s(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var u=r.a.createContext({}),f=function(e){var n=r.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):s(s({},n),e)),t},c=function(e){var n=f(e.components);return r.a.createElement(u.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},p=r.a.forwardRef((function(e,n){var t=e.components,i=e.mdxType,a=e.originalType,l=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),c=f(t),p=i,A=c["".concat(l,".").concat(p)]||c[p]||d[p]||a;return t?r.a.createElement(A,s(s({ref:n},u),{},{components:t})):r.a.createElement(A,s({ref:n},u))}));function A(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var a=t.length,l=new Array(a);l[0]=p;var s={};for(var o in n)hasOwnProperty.call(n,o)&&(s[o]=n[o]);s.originalType=e,s.mdxType="string"==typeof e?e:i,l[1]=s;for(var u=2;u 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue'),\n ui.table_column(name='status', label='Status'),\n ui.table_column(name='notifications', label='Notifications'),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n downloadable=True,\n )\n ])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}f.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return c})),t.d(n,"b",(function(){return A}));var i=t(0),r=t.n(i);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function s(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var u=r.a.createContext({}),f=function(e){var n=r.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):s(s({},n),e)),t},c=function(e){var n=f(e.components);return r.a.createElement(u.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},p=r.a.forwardRef((function(e,n){var t=e.components,i=e.mdxType,a=e.originalType,l=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),c=f(t),p=i,A=c["".concat(l,".").concat(p)]||c[p]||d[p]||a;return t?r.a.createElement(A,s(s({ref:n},u),{},{components:t})):r.a.createElement(A,s({ref:n},u))}));function A(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var a=t.length,l=new Array(a);l[0]=p;var s={};for(var o in n)hasOwnProperty.call(n,o)&&(s[o]=n[o]);s.originalType=e,s.mdxType="string"==typeof e?e:i,l[1]=s;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,d=u["".concat(o,".").concat(m)]||u[m]||h[m]||i;return n?a.a.createElement(d,p(p({ref:t},s),{},{components:n})):a.a.createElement(d,p({ref:t},s))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=m;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:r,o[1]=p;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,d=u["".concat(o,".").concat(m)]||u[m]||h[m]||i;return n?a.a.createElement(d,p(p({ref:t},s),{},{components:n})):a.a.createElement(d,p({ref:t},s))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=m;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:r,o[1]=p;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(c=0;c=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),l=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},b=function(e){var t=l(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},p=r.a.forwardRef((function(e,t){var n=e.components,c=e.mdxType,a=e.originalType,o=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),b=l(n),p=c,m=b["".concat(o,".").concat(p)]||b[p]||d[p]||a;return n?r.a.createElement(m,i(i({ref:t},u),{},{components:n})):r.a.createElement(m,i({ref:t},u))}));function m(e,t){var n=arguments,c=t&&t.mdxType;if("string"==typeof e||c){var a=n.length,o=new Array(a);o[0]=p;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:c,o[1]=i;for(var u=2;u=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(c=0;c=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),l=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},b=function(e){var t=l(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},p=r.a.forwardRef((function(e,t){var n=e.components,c=e.mdxType,a=e.originalType,o=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),b=l(n),p=c,m=b["".concat(o,".").concat(p)]||b[p]||d[p]||a;return n?r.a.createElement(m,i(i({ref:t},u),{},{components:n})):r.a.createElement(m,i({ref:t},u))}));function m(e,t){var n=arguments,c=t&&t.mdxType;if("string"==typeof e||c){var a=n.length,o=new Array(a);o[0]=p;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:c,o[1]=i;for(var u=2;u=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),l=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},u=function(e){var t=l(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,p=e.originalType,o=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),u=l(r),b=n,d=u["".concat(o,".").concat(b)]||u[b]||m[b]||p;return r?a.a.createElement(d,s(s({ref:t},c),{},{components:r})):a.a.createElement(d,s({ref:t},c))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var p=r.length,o=new Array(p);o[0]=b;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),l=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},u=function(e){var t=l(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,p=e.originalType,o=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),u=l(r),b=n,d=u["".concat(o,".").concat(b)]||u[b]||m[b]||p;return r?a.a.createElement(d,s(s({ref:t},c),{},{components:r})):a.a.createElement(d,s({ref:t},c))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var p=r.length,o=new Array(p);o[0]=b;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var c=2;c=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):u(u({},t),e)),r},p=function(e){var t=s(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=s(r),f=n,b=p["".concat(i,".").concat(f)]||p[f]||m[f]||a;return r?o.a.createElement(b,u(u({ref:t},l),{},{components:r})):o.a.createElement(b,u({ref:t},l))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,i=new Array(a);i[0]=f;var u={};for(var c in t)hasOwnProperty.call(t,c)&&(u[c]=t[c]);u.originalType=e,u.mdxType="string"==typeof e?e:n,i[1]=u;for(var l=2;l=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):u(u({},t),e)),r},p=function(e){var t=s(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=s(r),f=n,b=p["".concat(i,".").concat(f)]||p[f]||m[f]||a;return r?o.a.createElement(b,u(u({ref:t},l),{},{components:r})):o.a.createElement(b,u({ref:t},l))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,i=new Array(a);i[0]=f;var u={};for(var c in t)hasOwnProperty.call(t,c)&&(u[c]=t[c]);u.originalType=e,u.mdxType="string"==typeof e?e:n,i[1]=u;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,b=u["".concat(l,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(b,i(i({ref:t},p),{},{components:n})):a.a.createElement(b,i({ref:t},p))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=f;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,l[1]=i;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,b=u["".concat(l,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(b,i(i({ref:t},p),{},{components:n})):a.a.createElement(b,i({ref:t},p))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=f;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,l[1]=i;for(var p=2;p "Open...", then choose ',Object(o.b)("inlineCode",{parentName:"li"},"$HOME/wave-apps"),"."),Object(o.b)("li",{parentName:"ol"},"Right-click on ",Object(o.b)("inlineCode",{parentName:"li"},"wave-apps"),' in the "Project" tree, then click "New" -> "Python File".'),Object(o.b)("li",{parentName:"ol"},"Enter a file name, say, ",Object(o.b)("inlineCode",{parentName:"li"},"hello_world.py"),"."),Object(o.b)("li",{parentName:"ol"},"Write some code (see sample below)."),Object(o.b)("li",{parentName:"ol"},'Right-click anywhere inside the file and choose "Run hello_world" or "Debug hello_world".')),Object(o.b)("h2",{id:"using-visual-studio-code"},"Using Visual Studio Code"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"Launch Visual Studio Code"),Object(o.b)("li",{parentName:"ol"},'Click "File" -> "Open...", then choose ',Object(o.b)("inlineCode",{parentName:"li"},"$HOME/wave-apps"),"."),Object(o.b)("li",{parentName:"ol"},'Click "File" -> "New File"; save the file as, say, ',Object(o.b)("inlineCode",{parentName:"li"},"hello_world.py"),"."),Object(o.b)("li",{parentName:"ol"},'You should now get a prompt asking if you want to install extensions for Python. Click "Install".'),Object(o.b)("li",{parentName:"ol"},"Write some code (see sample below)."),Object(o.b)("li",{parentName:"ol"},"Hit ",Object(o.b)("inlineCode",{parentName:"li"},"Ctrl+F5")," to run, or ",Object(o.b)("inlineCode",{parentName:"li"},"F5")," to debug.")),Object(o.b)("h2",{id:"a-hello-world-sample"},"A hello world sample"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'title="$HOME/wave-apps/hello_world.py"',title:'"$HOME/wave-apps/hello_world.py"'}),"from h2o_wave import site, ui\n\n# Grab a reference to the page at route '/hello'\npage = site['/hello']\n\n# Add a markdown card to the page.\npage['quote'] = ui.markdown_card(\n box='1 1 2 2',\n title='Hello World',\n content='\"The Internet? Is that thing still around?\" - *Homer Simpson*',\n)\n\n# Finally, save the page.\npage.save()\n")))}s.isMDXComponent=!0},287:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return u}));var a=n(0),r=n.n(a);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),s=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=s(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),d=s(n),m=a,u=d["".concat(i,".").concat(m)]||d[m]||b[m]||o;return n?r.a.createElement(u,l(l({ref:t},p),{},{components:n})):r.a.createElement(u,l({ref:t},p))}));function u(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var p=2;p "Open...", then choose ',Object(o.b)("inlineCode",{parentName:"li"},"$HOME/wave-apps"),"."),Object(o.b)("li",{parentName:"ol"},"Right-click on ",Object(o.b)("inlineCode",{parentName:"li"},"wave-apps"),' in the "Project" tree, then click "New" -> "Python File".'),Object(o.b)("li",{parentName:"ol"},"Enter a file name, say, ",Object(o.b)("inlineCode",{parentName:"li"},"hello_world.py"),"."),Object(o.b)("li",{parentName:"ol"},"Write some code (see sample below)."),Object(o.b)("li",{parentName:"ol"},'Right-click anywhere inside the file and choose "Run hello_world" or "Debug hello_world".')),Object(o.b)("h2",{id:"using-visual-studio-code"},"Using Visual Studio Code"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"Launch Visual Studio Code"),Object(o.b)("li",{parentName:"ol"},'Click "File" -> "Open...", then choose ',Object(o.b)("inlineCode",{parentName:"li"},"$HOME/wave-apps"),"."),Object(o.b)("li",{parentName:"ol"},'Click "File" -> "New File"; save the file as, say, ',Object(o.b)("inlineCode",{parentName:"li"},"hello_world.py"),"."),Object(o.b)("li",{parentName:"ol"},'You should now get a prompt asking if you want to install extensions for Python. Click "Install".'),Object(o.b)("li",{parentName:"ol"},"Write some code (see sample below)."),Object(o.b)("li",{parentName:"ol"},"Hit ",Object(o.b)("inlineCode",{parentName:"li"},"Ctrl+F5")," to run, or ",Object(o.b)("inlineCode",{parentName:"li"},"F5")," to debug.")),Object(o.b)("h2",{id:"a-hello-world-sample"},"A hello world sample"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'title="$HOME/wave-apps/hello_world.py"',title:'"$HOME/wave-apps/hello_world.py"'}),"from h2o_wave import site, ui\n\n# Grab a reference to the page at route '/hello'\npage = site['/hello']\n\n# Add a markdown card to the page.\npage['quote'] = ui.markdown_card(\n box='1 1 2 2',\n title='Hello World',\n content='\"The Internet? Is that thing still around?\" - *Homer Simpson*',\n)\n\n# Finally, save the page.\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return u}));var a=n(0),r=n.n(a);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),s=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=s(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),d=s(n),m=a,u=d["".concat(i,".").concat(m)]||d[m]||b[m]||o;return n?r.a.createElement(u,l(l({ref:t},p),{},{components:n})):r.a.createElement(u,l({ref:t},p))}));function u(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var p=2;p=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=r.a.createContext({}),s=function(e){var n=r.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},d=function(e){var n=s(e.components);return r.a.createElement(p.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},u=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),d=s(t),u=a,f=d["".concat(c,".").concat(u)]||d[u]||m[u]||o;return t?r.a.createElement(f,l(l({ref:n},p),{},{components:t})):r.a.createElement(f,l({ref:n},p))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,c=new Array(o);c[0]=u;var l={};for(var i in n)hasOwnProperty.call(n,i)&&(l[i]=n[i]);l.originalType=e,l.mdxType="string"==typeof e?e:a,c[1]=l;for(var p=2;p=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=r.a.createContext({}),s=function(e){var n=r.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},d=function(e){var n=s(e.components);return r.a.createElement(p.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},u=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),d=s(t),u=a,f=d["".concat(c,".").concat(u)]||d[u]||m[u]||o;return t?r.a.createElement(f,l(l({ref:n},p),{},{components:t})):r.a.createElement(f,l({ref:n},p))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,c=new Array(o);c[0]=u;var l={};for(var i in n)hasOwnProperty.call(n,i)&&(l[i]=n[i]);l.originalType=e,l.mdxType="string"==typeof e?e:a,c[1]=l;for(var p=2;p 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n\n\nlisten('/demo', serve, mode='broadcast')\n")))}l.isMDXComponent=!0},287:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),b=r,m=p["".concat(c,".").concat(b)]||p[b]||d[b]||o;return n?a.a.createElement(m,i(i({ref:t},u),{},{components:n})):a.a.createElement(m,i({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=b;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var u=2;u 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n\n\nlisten('/demo', serve, mode='broadcast')\n")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),b=r,m=p["".concat(c,".").concat(b)]||p[b]||d[b]||o;return n?a.a.createElement(m,i(i({ref:t},u),{},{components:n})):a.a.createElement(m,i({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=b;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var u=2;u=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(r),m=n,b=u["".concat(c,".").concat(m)]||u[m]||f[m]||o;return r?a.a.createElement(b,i(i({ref:t},s),{},{components:r})):a.a.createElement(b,i({ref:t},s))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=m;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(r),m=n,b=u["".concat(c,".").concat(m)]||u[m]||f[m]||o;return r?a.a.createElement(b,i(i({ref:t},s),{},{components:r})):a.a.createElement(b,i({ref:t},s))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=m;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,d=u["".concat(i,".").concat(m)]||u[m]||f[m]||o;return r?a.a.createElement(d,p(p({ref:t},l),{},{components:r})):a.a.createElement(d,p({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,d=u["".concat(i,".").concat(m)]||u[m]||f[m]||o;return r?a.a.createElement(d,p(p({ref:t},l),{},{components:r})):a.a.createElement(d,p({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var l=2;l=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var s=o.a.createContext({}),u=function(e){var n=o.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=u(e.components);return o.a.createElement(s.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},m=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=u(t),m=r,d=p["".concat(i,".").concat(m)]||p[m]||b[m]||a;return t?o.a.createElement(d,c(c({ref:n},s),{},{components:t})):o.a.createElement(d,c({ref:n},s))}));function d(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=m;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var s=o.a.createContext({}),u=function(e){var n=o.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=u(e.components);return o.a.createElement(s.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},m=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=u(t),m=r,d=p["".concat(i,".").concat(m)]||p[m]||b[m]||a;return t?o.a.createElement(d,c(c({ref:n},s),{},{components:t})):o.a.createElement(d,c({ref:n},s))}));function d(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=m;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),s=function(e){var t=i.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=s(e.components);return i.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},u=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,r=e.parentName,l=b(e,["components","mdxType","originalType","parentName"]),p=s(n),u=a,m=p["".concat(r,".").concat(u)]||p[u]||d[u]||o;return n?i.a.createElement(m,c(c({ref:t},l),{},{components:n})):i.a.createElement(m,c({ref:t},l))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,r=new Array(o);r[0]=u;var c={};for(var b in t)hasOwnProperty.call(t,b)&&(c[b]=t[b]);c.originalType=e,c.mdxType="string"==typeof e?e:a,r[1]=c;for(var l=2;l=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),s=function(e){var t=i.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=s(e.components);return i.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},u=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,r=e.parentName,l=b(e,["components","mdxType","originalType","parentName"]),p=s(n),u=a,m=p["".concat(r,".").concat(u)]||p[u]||d[u]||o;return n?i.a.createElement(m,c(c({ref:t},l),{},{components:n})):i.a.createElement(m,c({ref:t},l))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,r=new Array(o);r[0]=u;var c={};for(var b in t)hasOwnProperty.call(t,b)&&(c[b]=t[b]);c.originalType=e,c.mdxType="string"==typeof e?e:a,r[1]=c;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),o=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=o(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,p=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),d=o(n),f=r,m=d["".concat(i,".").concat(f)]||d[f]||s[f]||p;return n?a.a.createElement(m,l(l({ref:t},u),{},{components:n})):a.a.createElement(m,l({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var p=n.length,i=new Array(p);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),o=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=o(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,p=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),d=o(n),f=r,m=d["".concat(i,".").concat(f)]||d[f]||s[f]||p;return n?a.a.createElement(m,l(l({ref:t},u),{},{components:n})):a.a.createElement(m,l({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var p=n.length,i=new Array(p);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var u=2;u=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,f=u["".concat(c,".").concat(m)]||u[m]||d[m]||o;return r?a.a.createElement(f,i(i({ref:t},l),{},{components:r})):a.a.createElement(f,i({ref:t},l))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=m;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,f=u["".concat(c,".").concat(m)]||u[m]||d[m]||o;return r?a.a.createElement(f,i(i({ref:t},l),{},{components:r})):a.a.createElement(f,i({ref:t},l))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=m;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),c=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=c(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,p=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=c(r),f=n,m=u["".concat(p,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},s),{},{components:r})):a.a.createElement(m,i({ref:t},s))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,p=new Array(o);p[0]=f;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,p[1]=i;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),c=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=c(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,p=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=c(r),f=n,m=u["".concat(p,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},s),{},{components:r})):a.a.createElement(m,i({ref:t},s))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,p=new Array(o);p[0]=f;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,p[1]=i;for(var s=2;s=0||(a[o]=e[o]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o])}return a}var l=a.a.createContext({}),c=function(e){var t=a.a.useContext(l),o=t;return e&&(o="function"==typeof e?e(t):r(r({},t),e)),o},p=function(e){var t=c(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},u=a.a.forwardRef((function(e,t){var o=e.components,n=e.mdxType,i=e.originalType,s=e.parentName,l=d(e,["components","mdxType","originalType","parentName"]),p=c(o),u=n,m=p["".concat(s,".").concat(u)]||p[u]||b[u]||i;return o?a.a.createElement(m,r(r({ref:t},l),{},{components:o})):a.a.createElement(m,r({ref:t},l))}));function m(e,t){var o=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=o.length,s=new Array(i);s[0]=u;var r={};for(var d in t)hasOwnProperty.call(t,d)&&(r[d]=t[d]);r.originalType=e,r.mdxType="string"==typeof e?e:n,s[1]=r;for(var l=2;l=0||(a[o]=e[o]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o])}return a}var l=a.a.createContext({}),c=function(e){var t=a.a.useContext(l),o=t;return e&&(o="function"==typeof e?e(t):r(r({},t),e)),o},p=function(e){var t=c(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},u=a.a.forwardRef((function(e,t){var o=e.components,n=e.mdxType,i=e.originalType,s=e.parentName,l=d(e,["components","mdxType","originalType","parentName"]),p=c(o),u=n,m=p["".concat(s,".").concat(u)]||p[u]||b[u]||i;return o?a.a.createElement(m,r(r({ref:t},l),{},{components:o})):a.a.createElement(m,r({ref:t},l))}));function m(e,t){var o=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=o.length,s=new Array(i);s[0]=u;var r={};for(var d in t)hasOwnProperty.call(t,d)&&(r[d]=t[d]);r.originalType=e,r.mdxType="string"==typeof e?e:n,s[1]=r;for(var l=2;l The quick brown fox jumped over the lazy dog.\n\nUnordered list:\n\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n\nOrdered list:\n\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n\nImage:\n\n![Monty Python](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg)\n\nTable:\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n\n'''\n\npage['example'] = ui.markdown_card(\n box='1 1 3 -1',\n title='I was made using markdown!',\n content=sample_markdown,\n)\npage.save()\n")))}m.isMDXComponent=!0},287:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return f}));var r=t(0),o=t.n(r);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var d=o.a.createContext({}),m=function(e){var n=o.a.useContext(d),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=m(e.components);return o.a.createElement(d.Provider,{value:n},e.children)},l={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},s=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,d=u(e,["components","mdxType","originalType","parentName"]),p=m(t),s=r,f=p["".concat(c,".").concat(s)]||p[s]||l[s]||a;return t?o.a.createElement(f,i(i({ref:n},d),{},{components:t})):o.a.createElement(f,i({ref:n},d))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,c=new Array(a);c[0]=s;var i={};for(var u in n)hasOwnProperty.call(n,u)&&(i[u]=n[u]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var d=2;d The quick brown fox jumped over the lazy dog.\n\nUnordered list:\n\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n\nOrdered list:\n\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n\nImage:\n\n![Monty Python](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg)\n\nTable:\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n\n'''\n\npage['example'] = ui.markdown_card(\n box='1 1 3 -1',\n title='I was made using markdown!',\n content=sample_markdown,\n)\npage.save()\n")))}m.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return f}));var r=t(0),o=t.n(r);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var d=o.a.createContext({}),m=function(e){var n=o.a.useContext(d),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=m(e.components);return o.a.createElement(d.Provider,{value:n},e.children)},l={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},s=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,d=u(e,["components","mdxType","originalType","parentName"]),p=m(t),s=r,f=p["".concat(c,".").concat(s)]||p[s]||l[s]||a;return t?o.a.createElement(f,i(i({ref:n},d),{},{components:t})):o.a.createElement(f,i({ref:n},d))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,c=new Array(a);c[0]=s;var i={};for(var u in n)hasOwnProperty.call(n,u)&&(i[u]=n[u]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var d=2;d=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(l,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},c),{},{components:r})):a.a.createElement(m,i({ref:t},c))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(l,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},c),{},{components:r})):a.a.createElement(m,i({ref:t},c))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var c=2;c=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var l=o.a.createContext({}),p=function(e){var n=o.a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},u=function(e){var n=p(e.components);return o.a.createElement(l.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},b=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),u=p(t),b=r,f=u["".concat(i,".").concat(b)]||u[b]||d[b]||a;return t?o.a.createElement(f,c(c({ref:n},l),{},{components:t})):o.a.createElement(f,c({ref:n},l))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=b;var c={};for(var s in n)hasOwnProperty.call(n,s)&&(c[s]=n[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),p=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=p(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),u=p(n),b=r,f=u["".concat(i,".").concat(b)]||u[b]||d[b]||o;return n?a.a.createElement(f,c(c({ref:t},l),{},{components:n})):a.a.createElement(f,c({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=b;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l',id:"teledb",children:[]},{value:'TeleDBError       ',id:"teledberror",children:[]}]}],s={rightToc:o};function b(e){var t=e.components,r=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},s,r,{components:t,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"classes"},"Classes"),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"teledb"},"TeleDB ",Object(c.b)("a",{name:"h2o_wave.db.TeleDB"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TeleDB"),"(address:\xa0str, key_id:\xa0str, key_secret:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Represents a TeleDB database client."),Object(c.b)("p",null,"Create a new client instance."),Object(c.b)("h5",{id:"args"},"Args"),Object(c.b)("dl",null,Object(c.b)("dt",null,Object(c.b)("code",null,"address")),Object(c.b)("dd",null,"database address"),Object(c.b)("dt",null,Object(c.b)("code",null,"key_id")),Object(c.b)("dd",null,"access key id"),Object(c.b)("dt",null,Object(c.b)("code",null,"key_secret")),Object(c.b)("dd",null,"access key secret"))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"teledberror"},"TeleDBError ",Object(c.b)("a",{name:"h2o_wave.db.TeleDBError"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TeleDBError"),"(*args, **kwargs)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Represents a remote exception thrown by the TeleDB database server.")),Object(c.b)("h4",{id:"ancestors"},"Ancestors"),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"builtins.Exception"),Object(c.b)("li",{parentName:"ul"},"builtins.BaseException")))))}b.isMDXComponent=!0},287:function(e,t,r){"use strict";r.d(t,"a",(function(){return d})),r.d(t,"b",(function(){return O}));var n=r(0),a=r.n(n);function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),b=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},d=function(e){var t=b(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,c=e.originalType,i=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),d=b(r),p=n,O=d["".concat(i,".").concat(p)]||d[p]||u[p]||c;return r?a.a.createElement(O,l(l({ref:t},s),{},{components:r})):a.a.createElement(O,l({ref:t},s))}));function O(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var c=r.length,i=new Array(c);i[0]=p;var l={};for(var o in t)hasOwnProperty.call(t,o)&&(l[o]=t[o]);l.originalType=e,l.mdxType="string"==typeof e?e:n,i[1]=l;for(var s=2;s',id:"teledb",children:[]},{value:'TeleDBError ',id:"teledberror",children:[]}]}],s={rightToc:o};function b(e){var t=e.components,r=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},s,r,{components:t,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"classes"},"Classes"),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"teledb"},"TeleDB ",Object(c.b)("a",{name:"h2o_wave.db.TeleDB"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TeleDB"),"(address:\xa0str, key_id:\xa0str, key_secret:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Represents a TeleDB database client."),Object(c.b)("p",null,"Create a new client instance."),Object(c.b)("h5",{id:"args"},"Args"),Object(c.b)("dl",null,Object(c.b)("dt",null,Object(c.b)("code",null,"address")),Object(c.b)("dd",null,"database address"),Object(c.b)("dt",null,Object(c.b)("code",null,"key_id")),Object(c.b)("dd",null,"access key id"),Object(c.b)("dt",null,Object(c.b)("code",null,"key_secret")),Object(c.b)("dd",null,"access key secret"))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"teledberror"},"TeleDBError ",Object(c.b)("a",{name:"h2o_wave.db.TeleDBError"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TeleDBError"),"(*args, **kwargs)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Represents a remote exception thrown by the TeleDB database server.")),Object(c.b)("h4",{id:"ancestors"},"Ancestors"),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"builtins.Exception"),Object(c.b)("li",{parentName:"ul"},"builtins.BaseException")))))}b.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return d})),r.d(t,"b",(function(){return O}));var n=r(0),a=r.n(n);function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),b=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},d=function(e){var t=b(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,c=e.originalType,i=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),d=b(r),p=n,O=d["".concat(i,".").concat(p)]||d[p]||u[p]||c;return r?a.a.createElement(O,l(l({ref:t},s),{},{components:r})):a.a.createElement(O,l({ref:t},s))}));function O(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var c=r.length,i=new Array(c);i[0]=p;var l={};for(var o in t)hasOwnProperty.call(t,o)&&(l[o]=t[o]);l.originalType=e,l.mdxType="string"==typeof e?e:n,i[1]=l;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),s=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=s(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},f=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),p=s(n),f=a,d=p["".concat(i,".").concat(f)]||p[f]||m[f]||o;return n?r.a.createElement(d,l(l({ref:t},u),{},{components:n})):r.a.createElement(d,l({ref:t},u))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var u=2;u=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),s=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=s(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},f=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),p=s(n),f=a,d=p["".concat(i,".").concat(f)]||p[f]||m[f]||o;return n?r.a.createElement(d,l(l({ref:t},u),{},{components:n})):r.a.createElement(d,l({ref:t},u))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var u=2;u=0||(r[t]=e[t]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=r.a.createContext({}),b=function(e){var a=r.a.useContext(l),t=a;return e&&(t="function"==typeof e?e(a):p(p({},a),e)),t},s=function(e){var a=b(e.components);return r.a.createElement(l.Provider,{value:a},e.children)},d={inlineCode:"code",wrapper:function(e){var a=e.children;return r.a.createElement(r.a.Fragment,{},a)}},u=r.a.forwardRef((function(e,a){var t=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),s=b(t),u=n,m=s["".concat(c,".").concat(u)]||s[u]||d[u]||o;return t?r.a.createElement(m,p(p({ref:a},l),{},{components:t})):r.a.createElement(m,p({ref:a},l))}));function m(e,a){var t=arguments,n=a&&a.mdxType;if("string"==typeof e||n){var o=t.length,c=new Array(o);c[0]=u;var p={};for(var i in a)hasOwnProperty.call(a,i)&&(p[i]=a[i]);p.originalType=e,p.mdxType="string"==typeof e?e:n,c[1]=p;for(var l=2;l=0||(r[t]=e[t]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=r.a.createContext({}),b=function(e){var a=r.a.useContext(l),t=a;return e&&(t="function"==typeof e?e(a):p(p({},a),e)),t},s=function(e){var a=b(e.components);return r.a.createElement(l.Provider,{value:a},e.children)},d={inlineCode:"code",wrapper:function(e){var a=e.children;return r.a.createElement(r.a.Fragment,{},a)}},u=r.a.forwardRef((function(e,a){var t=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),s=b(t),u=n,m=s["".concat(c,".").concat(u)]||s[u]||d[u]||o;return t?r.a.createElement(m,p(p({ref:a},l),{},{components:t})):r.a.createElement(m,p({ref:a},l))}));function m(e,a){var t=arguments,n=a&&a.mdxType;if("string"==typeof e||n){var o=t.length,c=new Array(o);c[0]=u;var p={};for(var i in a)hasOwnProperty.call(a,i)&&(p[i]=a[i]);p.originalType=e,p.mdxType="string"==typeof e?e:n,c[1]=p;for(var l=2;li.a.createElement(r.a,{key:a.metadata.permalink,frontMatter:a.frontMatter,metadata:a.metadata,truncated:a.metadata.truncated},i.a.createElement(a,null)))),i.a.createElement(o,{metadata:e})))))}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[148],{288:function(a,e,t){"use strict";t.r(e);var n=t(0),i=t.n(n),l=t(291),c=t(295),r=t(364),m=t(293);var o=function(a){const{metadata:e}=a,{previousPage:t,nextPage:n}=e;return i.a.createElement("nav",{className:"pagination-nav","aria-label":"Blog list page navigation"},i.a.createElement("div",{className:"pagination-nav__item"},t&&i.a.createElement(m.a,{className:"pagination-nav__link",to:t},i.a.createElement("h4",{className:"pagination-nav__label"},"\xab Newer Entries"))),i.a.createElement("div",{className:"pagination-nav__item pagination-nav__item--next"},n&&i.a.createElement(m.a,{className:"pagination-nav__link",to:n},i.a.createElement("h4",{className:"pagination-nav__label"},"Older Entries \xbb"))))};e.default=function(a){const{metadata:e,items:t}=a,{siteConfig:{title:n}}=Object(l.a)(),m="/"===e.permalink?n:"Blog",{blogDescription:s}=e;return i.a.createElement(c.a,{title:m,description:s},i.a.createElement("div",{className:"container margin-vert--lg"},i.a.createElement("div",{className:"row"},i.a.createElement("main",{className:"col col--8 col--offset-2"},t.map((({content:a})=>i.a.createElement(r.a,{key:a.metadata.permalink,frontMatter:a.frontMatter,metadata:a.metadata,truncated:a.metadata.truncated},i.a.createElement(a,null)))),i.a.createElement(o,{metadata:e})))))}}}]); \ No newline at end of file diff --git a/docs/a814b970.78045e01.js b/docs/a814b970.194c0040.js similarity index 93% rename from docs/a814b970.78045e01.js rename to docs/a814b970.194c0040.js index 3c6e27c49c..4978fc21ad 100644 --- a/docs/a814b970.78045e01.js +++ b/docs/a814b970.194c0040.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[149],{202:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return p})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return i})),n.d(t,"default",(function(){return u}));var r=n(2),o=n(6),a=(n(0),n(287)),p={title:"Plot / Polygon"},c={unversionedId:"examples/plot-polygon",id:"examples/plot-polygon",isDocsHomePage:!1,title:"Plot / Polygon",description:"Make a heatmap.",source:"@site/docs/examples/plot-polygon.md",slug:"/examples/plot-polygon",permalink:"/wave/docs/examples/plot-polygon",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-polygon.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area + Line / Groups",permalink:"/wave/docs/examples/plot-area-line-groups"},next:{title:"Plot / Histogram",permalink:"/wave/docs/examples/plot-histogram"}},i=[],l={rightToc:i};function u(e){var t=e.components,p=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,p,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a heatmap."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(397).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nk1, k2 = 20, 10\nf = FakeSeries()\nv = page.add('example', ui.plot_card(\n box='1 1 4 5',\n title='Heatmap',\n data=data('country product profit', k1 * k2),\n plot=ui.plot([\n ui.mark(type='polygon', x='=country', y='=product', color='=profit',\n color_range='#fee8c8 #fdbb84 #e34a33')])\n))\nrows = []\nfor i in range(k1):\n for j in range(k2):\n x, dx = f.next()\n rows.append((f'A{i + 1}', f'B{j + 1}', x))\nv.data = rows\n\npage.save()\n")))}u.isMDXComponent=!0},287:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return d}));var r=n(0),o=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=o.a.createContext({}),u=function(e){var t=o.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=u(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},m=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,p=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),s=u(n),m=r,d=s["".concat(p,".").concat(m)]||s[m]||f[m]||a;return n?o.a.createElement(d,c(c({ref:t},l),{},{components:n})):o.a.createElement(d,c({ref:t},l))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,p=new Array(a);p[0]=m;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:r,p[1]=c;for(var l=2;l=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=o.a.createContext({}),u=function(e){var t=o.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=u(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},m=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,p=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),s=u(n),m=r,d=s["".concat(p,".").concat(m)]||s[m]||f[m]||a;return n?o.a.createElement(d,c(c({ref:t},l),{},{components:n})):o.a.createElement(d,c({ref:t},l))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,p=new Array(a);p[0]=m;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:r,p[1]=c;for(var l=2;l=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var c=n.a.createContext({}),p=function(e){var t=n.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},s=function(e){var t=p(e.components);return n.a.createElement(c.Provider,{value:t},e.children)},w={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},b=n.a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,a=e.parentName,c=d(e,["components","mdxType","originalType","parentName"]),s=p(r),b=o,H=s["".concat(a,".").concat(b)]||s[b]||w[b]||i;return r?n.a.createElement(H,l(l({ref:t},c),{},{components:r})):n.a.createElement(H,l({ref:t},c))}));function H(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,a=new Array(i);a[0]=b;var l={};for(var d in t)hasOwnProperty.call(t,d)&&(l[d]=t[d]);l.originalType=e,l.mdxType="string"==typeof e?e:o,a[1]=l;for(var c=2;c=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var c=n.a.createContext({}),p=function(e){var t=n.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},s=function(e){var t=p(e.components);return n.a.createElement(c.Provider,{value:t},e.children)},w={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},b=n.a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,a=e.parentName,c=d(e,["components","mdxType","originalType","parentName"]),s=p(r),b=o,H=s["".concat(a,".").concat(b)]||s[b]||w[b]||i;return r?n.a.createElement(H,l(l({ref:t},c),{},{components:r})):n.a.createElement(H,l({ref:t},c))}));function H(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,a=new Array(i);a[0]=b;var l={};for(var d in t)hasOwnProperty.call(t,d)&&(l[d]=t[d]);l.originalType=e,l.mdxType="string"==typeof e?e:o,a[1]=l;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(r),m=n,b=p["".concat(i,".").concat(m)]||p[m]||d[m]||o;return r?a.a.createElement(b,c(c({ref:t},u),{},{components:r})):a.a.createElement(b,c({ref:t},u))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var u=2;u=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(r),m=n,b=p["".concat(i,".").concat(m)]||p[m]||d[m]||o;return r?a.a.createElement(b,c(c({ref:t},u),{},{components:r})):a.a.createElement(b,c({ref:t},u))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p\n{{#each dishes}}\n
    2. {{name}} costs {{price}}
      3. \n{{/each}}\n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),s=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=s(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),c=s(n),d=r,v=c["".concat(i,".").concat(d)]||c[d]||m[d]||o;return n?a.a.createElement(v,l(l({ref:t},u),{},{components:n})):a.a.createElement(v,l({ref:t},u))}));function v(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var u=2;u\n{{#each dishes}}\n
    3. {{name}} costs {{price}}
      4. \n{{/each}}\n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),s=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=s(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),c=s(n),d=r,v=c["".concat(i,".").concat(d)]||c[d]||m[d]||o;return n?a.a.createElement(v,l(l({ref:t},u),{},{components:n})):a.a.createElement(v,l({ref:t},u))}));function v(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(n),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(n),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),s=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,l=e.originalType,a=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),d=o,f=u["".concat(a,".").concat(d)]||u[d]||m[d]||l;return n?r.a.createElement(f,i(i({ref:t},c),{},{components:n})):r.a.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var l=n.length,a=new Array(l);a[0]=d;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:o,a[1]=i;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),s=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,l=e.originalType,a=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),d=o,f=u["".concat(a,".").concat(d)]||u[d]||m[d]||l;return n?r.a.createElement(f,i(i({ref:t},c),{},{components:n})):r.a.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var l=n.length,a=new Array(l);a[0]=d;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:o,a[1]=i;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return r?a.a.createElement(f,p(p({ref:t},c),{},{components:r})):a.a.createElement(f,p({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return r?a.a.createElement(f,p(p({ref:t},c),{},{components:r})):a.a.createElement(f,p({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var c=2;c=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var i=o.a.createContext({}),p=function(e){var t=o.a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=p(e.components);return o.a.createElement(i.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,l=e.parentName,i=u(e,["components","mdxType","originalType","parentName"]),s=p(r),f=n,m=s["".concat(l,".").concat(f)]||s[f]||b[f]||a;return r?o.a.createElement(m,c(c({ref:t},i),{},{components:r})):o.a.createElement(m,c({ref:t},i))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,l=new Array(a);l[0]=f;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:n,l[1]=c;for(var i=2;i=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var i=o.a.createContext({}),p=function(e){var t=o.a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=p(e.components);return o.a.createElement(i.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,l=e.parentName,i=u(e,["components","mdxType","originalType","parentName"]),s=p(r),f=n,m=s["".concat(l,".").concat(f)]||s[f]||b[f]||a;return r?o.a.createElement(m,c(c({ref:t},i),{},{components:r})):o.a.createElement(m,c({ref:t},i))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,l=new Array(a);l[0]=f;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:n,l[1]=c;for(var i=2;i=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=o.a.createContext({}),l=function(e){var n=o.a.useContext(s),r=n;return e&&(r="function"==typeof e?e(n):c(c({},n),e)),r},u=function(e){var n=l(e.components);return o.a.createElement(s.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},m=o.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,a=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(r),m=t,b=u["".concat(i,".").concat(m)]||u[m]||d[m]||a;return r?o.a.createElement(b,c(c({ref:n},s),{},{components:r})):o.a.createElement(b,c({ref:n},s))}));function b(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var a=r.length,i=new Array(a);i[0]=m;var c={};for(var p in n)hasOwnProperty.call(n,p)&&(c[p]=n[p]);c.originalType=e,c.mdxType="string"==typeof e?e:t,i[1]=c;for(var s=2;s=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=o.a.createContext({}),l=function(e){var n=o.a.useContext(s),r=n;return e&&(r="function"==typeof e?e(n):c(c({},n),e)),r},u=function(e){var n=l(e.components);return o.a.createElement(s.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},m=o.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,a=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(r),m=t,b=u["".concat(i,".").concat(m)]||u[m]||d[m]||a;return r?o.a.createElement(b,c(c({ref:n},s),{},{components:r})):o.a.createElement(b,c({ref:n},s))}));function b(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var a=r.length,i=new Array(a);i[0]=m;var c={};for(var p in n)hasOwnProperty.call(n,p)&&(c[p]=n[p]);c.originalType=e,c.mdxType="string"==typeof e?e:t,i[1]=c;for(var s=2;s 11:\n row, col = row + 1, 1\n\npage.save()\n")))}c.isMDXComponent=!0},287:function(e,n,r){"use strict";r.d(n,"a",(function(){return p})),r.d(n,"b",(function(){return g}));var t=r(0),s=r.n(t);function i(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function a(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function l(e){for(var n=1;n=0||(s[r]=e[r]);return s}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(s[r]=e[r])}return s}var o=s.a.createContext({}),c=function(e){var n=s.a.useContext(o),r=n;return e&&(r="function"==typeof e?e(n):l(l({},n),e)),r},p=function(e){var n=c(e.components);return s.a.createElement(o.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return s.a.createElement(s.a.Fragment,{},n)}},x=s.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,i=e.originalType,a=e.parentName,o=y(e,["components","mdxType","originalType","parentName"]),p=c(r),x=t,g=p["".concat(a,".").concat(x)]||p[x]||u[x]||i;return r?s.a.createElement(g,l(l({ref:n},o),{},{components:r})):s.a.createElement(g,l({ref:n},o))}));function g(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var i=r.length,a=new Array(i);a[0]=x;var l={};for(var y in n)hasOwnProperty.call(n,y)&&(l[y]=n[y]);l.originalType=e,l.mdxType="string"==typeof e?e:t,a[1]=l;for(var o=2;o 11:\n row, col = row + 1, 1\n\npage.save()\n")))}c.isMDXComponent=!0},290:function(e,n,r){"use strict";r.d(n,"a",(function(){return p})),r.d(n,"b",(function(){return g}));var t=r(0),s=r.n(t);function i(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function a(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function l(e){for(var n=1;n=0||(s[r]=e[r]);return s}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(s[r]=e[r])}return s}var o=s.a.createContext({}),c=function(e){var n=s.a.useContext(o),r=n;return e&&(r="function"==typeof e?e(n):l(l({},n),e)),r},p=function(e){var n=c(e.components);return s.a.createElement(o.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return s.a.createElement(s.a.Fragment,{},n)}},x=s.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,i=e.originalType,a=e.parentName,o=y(e,["components","mdxType","originalType","parentName"]),p=c(r),x=t,g=p["".concat(a,".").concat(x)]||p[x]||u[x]||i;return r?s.a.createElement(g,l(l({ref:n},o),{},{components:r})):s.a.createElement(g,l({ref:n},o))}));function g(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var i=r.length,a=new Array(i);a[0]=x;var l={};for(var y in n)hasOwnProperty.call(n,y)&&(l[y]=n[y]);l.originalType=e,l.mdxType="string"==typeof e?e:t,a[1]=l;for(var o=2;o\n\n\n

      Hello World!

      \n\n\n'''\n\npage = site['/demo']\n\npage['example'] = ui.frame_card(\n box='1 1 2 2',\n title='Example',\n content=html,\n)\n\npage.save()\n")))}u.isMDXComponent=!0},287:function(e,t,r){"use strict";r.d(t,"a",(function(){return f})),r.d(t,"b",(function(){return v}));var n=r(0),i=r.n(n);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var s=i.a.createContext({}),u=function(e){var t=i.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},f=function(e){var t=u(e.components);return i.a.createElement(s.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},p=i.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,o=e.parentName,s=m(e,["components","mdxType","originalType","parentName"]),f=u(r),p=n,v=f["".concat(o,".").concat(p)]||f[p]||d[p]||a;return r?i.a.createElement(v,c(c({ref:t},s),{},{components:r})):i.a.createElement(v,c({ref:t},s))}));function v(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,o=new Array(a);o[0]=p;var c={};for(var m in t)hasOwnProperty.call(t,m)&&(c[m]=t[m]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var s=2;s\n\n\n

      Hello World!

      \n\n\n'''\n\npage = site['/demo']\n\npage['example'] = ui.frame_card(\n box='1 1 2 2',\n title='Example',\n content=html,\n)\n\npage.save()\n")))}u.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return f})),r.d(t,"b",(function(){return v}));var n=r(0),i=r.n(n);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var s=i.a.createContext({}),u=function(e){var t=i.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},f=function(e){var t=u(e.components);return i.a.createElement(s.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},p=i.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,o=e.parentName,s=m(e,["components","mdxType","originalType","parentName"]),f=u(r),p=n,v=f["".concat(o,".").concat(p)]||f[p]||d[p]||a;return r?i.a.createElement(v,c(c({ref:t},s),{},{components:r})):i.a.createElement(v,c({ref:t},s))}));function v(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,o=new Array(a);o[0]=p;var c={};for(var m in t)hasOwnProperty.call(t,m)&&(c[m]=t[m]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var s=2;s=0||(a[n]=e[n]);return a}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),c=function(e){var i=a.a.useContext(l),n=i;return e&&(n="function"==typeof e?e(i):R(R({},i),e)),n},d=function(e){var i=c(e.components);return a.a.createElement(l.Provider,{value:i},e.children)},E={inlineCode:"code",wrapper:function(e){var i=e.children;return a.a.createElement(a.a.Fragment,{},i)}},p=a.a.forwardRef((function(e,i){var n=e.components,t=e.mdxType,o=e.originalType,r=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),d=c(n),p=t,s=d["".concat(r,".").concat(p)]||d[p]||E[p]||o;return n?a.a.createElement(s,R(R({ref:i},l),{},{components:n})):a.a.createElement(s,R({ref:i},l))}));function s(e,i){var n=arguments,t=i&&i.mdxType;if("string"==typeof e||t){var o=n.length,r=new Array(o);r[0]=p;var R={};for(var u in i)hasOwnProperty.call(i,u)&&(R[u]=i[u]);R.originalType=e,R.mdxType="string"==typeof e?e:t,r[1]=R;for(var l=2;l=0||(a[n]=e[n]);return a}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),c=function(e){var i=a.a.useContext(l),n=i;return e&&(n="function"==typeof e?e(i):R(R({},i),e)),n},d=function(e){var i=c(e.components);return a.a.createElement(l.Provider,{value:i},e.children)},E={inlineCode:"code",wrapper:function(e){var i=e.children;return a.a.createElement(a.a.Fragment,{},i)}},p=a.a.forwardRef((function(e,i){var n=e.components,t=e.mdxType,o=e.originalType,r=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),d=c(n),p=t,s=d["".concat(r,".").concat(p)]||d[p]||E[p]||o;return n?a.a.createElement(s,R(R({ref:i},l),{},{components:n})):a.a.createElement(s,R({ref:i},l))}));function s(e,i){var n=arguments,t=i&&i.mdxType;if("string"==typeof e||t){var o=n.length,r=new Array(o);r[0]=p;var R={};for(var u in i)hasOwnProperty.call(i,u)&&(R[u]=i[u]);R.originalType=e,R.mdxType="string"==typeof e?e:t,r[1]=R;for(var l=2;l=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),l=function(e){var n=a.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},m=function(e){var n=l(e.components);return a.a.createElement(s.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),m=l(t),d=r,b=m["".concat(i,".").concat(d)]||m[d]||u[d]||o;return t?a.a.createElement(b,c(c({ref:n},s),{},{components:t})):a.a.createElement(b,c({ref:n},s))}));function b(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=d;var c={};for(var p in n)hasOwnProperty.call(n,p)&&(c[p]=n[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),l=function(e){var n=a.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},m=function(e){var n=l(e.components);return a.a.createElement(s.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),m=l(t),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||o;return t?a.a.createElement(f,c(c({ref:n},s),{},{components:t})):a.a.createElement(f,c({ref:n},s))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=d;var c={};for(var p in n)hasOwnProperty.call(n,p)&&(c[p]=n[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},d=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),d=l(r),m=n,f=d["".concat(i,".").concat(m)]||d[m]||u[m]||o;return r?a.a.createElement(f,c(c({ref:t},s),{},{components:r})):a.a.createElement(f,c({ref:t},s))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},d=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),d=l(r),m=n,f=d["".concat(i,".").concat(m)]||d[m]||u[m]||o;return r?a.a.createElement(f,c(c({ref:t},s),{},{components:r})):a.a.createElement(f,c({ref:t},s))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var s=2;s',id:"breadcrumb",children:[]},{value:'BreadcrumbsCard       ',id:"breadcrumbscard",children:[]},{value:'Button ',id:"button",children:[]},{value:'Buttons ',id:"buttons",children:[]},{value:'Checkbox ',id:"checkbox",children:[]},{value:'Checklist ',id:"checklist",children:[]},{value:'Choice ',id:"choice",children:[]},{value:'ChoiceGroup ',id:"choicegroup",children:[]},{value:'ColorPicker ',id:"colorpicker",children:[]},{value:'Combobox ',id:"combobox",children:[]},{value:'Command ',id:"command",children:[]},{value:'Component ',id:"component",children:[]},{value:'DatePicker ',id:"datepicker",children:[]},{value:'Dropdown ',id:"dropdown",children:[]},{value:'Expander ',id:"expander",children:[]},{value:'FileUpload ',id:"fileupload",children:[]},{value:'FlexCard ',id:"flexcard",children:[]},{value:'FormCard ',id:"formcard",children:[]},{value:'Frame ',id:"frame",children:[]},{value:'FrameCard ',id:"framecard",children:[]},{value:'GraphicsCard ',id:"graphicscard",children:[]},{value:'GridCard ',id:"gridcard",children:[]},{value:'HeaderCard ',id:"headercard",children:[]},{value:'IconTableCellType ',id:"icontablecelltype",children:[]},{value:'ImageCard ',id:"imagecard",children:[]},{value:'Label ',id:"label",children:[]},{value:'LargeBarStatCard ',id:"largebarstatcard",children:[]},{value:'LargeStatCard ',id:"largestatcard",children:[]},{value:'Link ',id:"link",children:[]},{value:'ListCard ',id:"listcard",children:[]},{value:'ListItem1Card ',id:"listitem1card",children:[]},{value:'Mark ',id:"mark",children:[]},{value:'MarkdownCard ',id:"markdowncard",children:[]},{value:'Markup ',id:"markup",children:[]},{value:'MarkupCard ',id:"markupcard",children:[]},{value:'MessageBar ',id:"messagebar",children:[]},{value:'MetaCard ',id:"metacard",children:[]},{value:'NavCard ',id:"navcard",children:[]},{value:'NavGroup ',id:"navgroup",children:[]},{value:'NavItem ',id:"navitem",children:[]},{value:'Picker ',id:"picker",children:[]},{value:'PixelArtCard ',id:"pixelartcard",children:[]},{value:'Plot ',id:"plot",children:[]},{value:'PlotCard ',id:"plotcard",children:[]},{value:'Progress ',id:"progress",children:[]},{value:'ProgressTableCellType ',id:"progresstablecelltype",children:[]},{value:'RangeSlider ',id:"rangeslider",children:[]},{value:'RepeatCard ',id:"repeatcard",children:[]},{value:'Separator ',id:"separator",children:[]},{value:'Slider ',id:"slider",children:[]},{value:'SmallSeriesStatCard ',id:"smallseriesstatcard",children:[]},{value:'SmallStatCard ',id:"smallstatcard",children:[]},{value:'Spinbox ',id:"spinbox",children:[]},{value:'Step ',id:"step",children:[]},{value:'Stepper ',id:"stepper",children:[]},{value:'Tab ',id:"tab",children:[]},{value:'TabCard ',id:"tabcard",children:[]},{value:'Table ',id:"table",children:[]},{value:'TableCellType ',id:"tablecelltype",children:[]},{value:'TableColumn ',id:"tablecolumn",children:[]},{value:'TableRow ',id:"tablerow",children:[]},{value:'Tabs ',id:"tabs",children:[]},{value:'TallGaugeStatCard ',id:"tallgaugestatcard",children:[]},{value:'TallSeriesStatCard ',id:"tallseriesstatcard",children:[]},{value:'Template ',id:"template",children:[]},{value:'TemplateCard ',id:"templatecard",children:[]},{value:'Text ',id:"text",children:[]},{value:'TextL ',id:"textl",children:[]},{value:'TextM ',id:"textm",children:[]},{value:'TextS ',id:"texts",children:[]},{value:'TextXl ',id:"textxl",children:[]},{value:'TextXs ',id:"textxs",children:[]},{value:'Textbox ',id:"textbox",children:[]},{value:'Toggle ',id:"toggle",children:[]},{value:'ToolbarCard ',id:"toolbarcard",children:[]},{value:'VegaCard ',id:"vegacard",children:[]},{value:'VegaVisualization ',id:"vegavisualization",children:[]},{value:'Visualization ',id:"visualization",children:[]},{value:'WideBarStatCard ',id:"widebarstatcard",children:[]},{value:'WideGaugeStatCard ',id:"widegaugestatcard",children:[]},{value:'WideSeriesStatCard ',id:"wideseriesstatcard",children:[]}]}],o={rightToc:d};function l(e){var a=e.components,t=Object(i.a)(e,["components"]);return Object(c.b)("wrapper",Object(s.a)({},o,t,{components:a,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"classes"},"Classes"),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"breadcrumb"},"Breadcrumb ",Object(c.b)("a",{name:"h2o_wave.types.Breadcrumb"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Breadcrumb"),"(name:\xa0str, label:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a breadcrumb for a ",Object(c.b)("code",null,"h2o_q.types.BreadcrumbsCard()"),".")),Object(c.b)("h4",{id:"static-methods"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Breadcrumb.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Breadcrumb__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"#h2o_wave.types.Breadcrumb"},"Breadcrumb")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Breadcrumb.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The label to display.")),Object(c.b)("div",{id:"h2o_wave.types.Breadcrumb.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."))),Object(c.b)("h4",{id:"methods"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Breadcrumb.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"breadcrumbscard"},"BreadcrumbsCard ",Object(c.b)("a",{name:"h2o_wave.types.BreadcrumbsCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"BreadcrumbsCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"#h2o_wave.types.Breadcrumb"},"Breadcrumb"),"], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page\u2019s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.")),Object(c.b)("h4",{id:"static-methods-1"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-1"},"load ",Object(c.b)("a",{name:"h2o_wave.types.BreadcrumbsCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_BreadcrumbsCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-1"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.BreadcrumbsCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.BreadcrumbsCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.BreadcrumbsCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A list of ",Object(c.b)("code",null,"h2o_q.types.Breadcrumb")," instances to display. See ",Object(c.b)("code",null,"h2o_q.ui.breadcrumb()")))),Object(c.b)("h4",{id:"methods-1"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-1"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.BreadcrumbsCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"button"},"Button ",Object(c.b)("a",{name:"h2o_wave.types.Button"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Button"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, primary:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a button."),Object(c.b)("p",null,"Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog."),Object(c.b)("p",null,"When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements."),Object(c.b)("p",null,'Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.'),Object(c.b)("p",null,"While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.")),Object(c.b)("h4",{id:"static-methods-2"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-2"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Button.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Button__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Button",href:"#h2o_wave.types.Button"},"Button")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-2"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Button.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the label. Setting a caption renders a compound button.")),Object(c.b)("div",{id:"h2o_wave.types.Button.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the button should be disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Button.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the button.")),Object(c.b)("div",{id:"h2o_wave.types.Button.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the button should be rendered as link text and not a standard button.")),Object(c.b)("div",{id:"h2o_wave.types.Button.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.")),Object(c.b)("div",{id:"h2o_wave.types.Button.primary",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"primary")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the button should be rendered as the primary button in the set.")),Object(c.b)("div",{id:"h2o_wave.types.Button.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Button.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True."))),Object(c.b)("h4",{id:"methods-2"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-2"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Button.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"buttons"},"Buttons ",Object(c.b)("a",{name:"h2o_wave.types.Buttons"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Buttons"),"(items:\xa0List[ForwardRef('",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component"),"')], justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a set of buttons to be layed out horizontally.")),Object(c.b)("h4",{id:"static-methods-3"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-3"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Buttons.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Buttons__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Buttons",href:"#h2o_wave.types.Buttons"},"Buttons")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-3"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Buttons.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The button in this set.")),Object(c.b)("div",{id:"h2o_wave.types.Buttons.justify",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"justify")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'."))),Object(c.b)("h4",{id:"methods-3"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-3"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Buttons.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"checkbox"},"Checkbox ",Object(c.b)("a",{name:"h2o_wave.types.Checkbox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Checkbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, indeterminate:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a checkbox."),Object(c.b)("p",null,"A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component."),Object(c.b)("p",null,"A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected."),Object(c.b)("p",null,"For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action."),Object(c.b)("p",null,"Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.")),Object(c.b)("h4",{id:"static-methods-4"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-4"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Checkbox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Checkbox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Checkbox",href:"#h2o_wave.types.Checkbox"},"Checkbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-4"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Checkbox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the checkbox is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.indeterminate",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"indeterminate")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the selection is indeterminate (neither selected nor unselected).")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the checkbox.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the checkbox value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if selected, False if unselected."))),Object(c.b)("h4",{id:"methods-4"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-4"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Checkbox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"checklist"},"Checklist ",Object(c.b)("a",{name:"h2o_wave.types.Checklist"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Checklist"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.")),Object(c.b)("h4",{id:"static-methods-5"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-5"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Checklist.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Checklist__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Checklist",href:"#h2o_wave.types.Checklist"},"Checklist")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-5"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Checklist.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed above the component.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the checklist value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected choices."))),Object(c.b)("h4",{id:"methods-5"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-5"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Checklist.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"choice"},"Choice ",Object(c.b)("a",{name:"h2o_wave.types.Choice"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Choice"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a choice for a checklist, choice group or dropdown.")),Object(c.b)("h4",{id:"static-methods-6"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-6"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Choice.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Choice__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-6"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Choice.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the checkbox is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Choice.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Choice.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-6"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-6"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Choice.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"choicegroup"},"ChoiceGroup ",Object(c.b)("a",{name:"h2o_wave.types.ChoiceGroup"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ChoiceGroup"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group."),Object(c.b)("p",null,"Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead."),Object(c.b)("p",null,'If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don\'t agree."')),Object(c.b)("h4",{id:"static-methods-7"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-7"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ChoiceGroup.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ChoiceGroup__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"#h2o_wave.types.ChoiceGroup"},"ChoiceGroup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-7"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is required.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the selection changes.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the selected choice."))),Object(c.b)("h4",{id:"methods-7"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-7"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ChoiceGroup.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"colorpicker"},"ColorPicker ",Object(c.b)("a",{name:"h2o_wave.types.ColorPicker"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ColorPicker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a color picker."),Object(c.b)("p",null,"A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.")),Object(c.b)("h4",{id:"static-methods-8"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-8"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ColorPicker.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ColorPicker__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ColorPicker",href:"#h2o_wave.types.ColorPicker"},"ColorPicker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-8"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A list of colors (CSS-compatible strings) to limit color choices to.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The selected color (CSS-compatible string)"))),Object(c.b)("h4",{id:"methods-8"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-8"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ColorPicker.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"combobox"},"Combobox ",Object(c.b)("a",{name:"h2o_wave.types.Combobox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Combobox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a combobox."),Object(c.b)("p",null,"A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI."),Object(c.b)("p",null,"When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.")),Object(c.b)("h4",{id:"static-methods-9"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-9"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Combobox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Combobox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Combobox",href:"#h2o_wave.types.Combobox"},"Combobox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-9"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Combobox.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.error",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"error")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed as an error below the text box.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the selected choice."))),Object(c.b)("h4",{id:"methods-9"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-9"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Combobox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"command"},"Command ",Object(c.b)("a",{name:"h2o_wave.types.Command"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Command"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[ForwardRef('",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"')],\xa0NoneType]\xa0=\xa0None, data:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a command."),Object(c.b)("p",null,"Commands are typically displayed as context menu items or toolbar button.")),Object(c.b)("h4",{id:"static-methods-10"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-10"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Command.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Command__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-10"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Command.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption for this command (typically a tooltip).")),Object(c.b)("div",{id:"h2o_wave.types.Command.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data associated with this command, if any.")),Object(c.b)("div",{id:"h2o_wave.types.Command.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon to be displayed for this command.")),Object(c.b)("div",{id:"h2o_wave.types.Command.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Sub-commands, if any")),Object(c.b)("div",{id:"h2o_wave.types.Command.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed for this command.")),Object(c.b)("div",{id:"h2o_wave.types.Command.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed."))),Object(c.b)("h4",{id:"methods-10"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-10"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Command.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"component"},"Component ",Object(c.b)("a",{name:"h2o_wave.types.Component"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Component"),"(text:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Text",href:"#h2o_wave.types.Text"},"Text"),",\xa0NoneType]\xa0=\xa0None, text_xl:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextXl",href:"#h2o_wave.types.TextXl"},"TextXl"),",\xa0NoneType]\xa0=\xa0None, text_l:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextL",href:"#h2o_wave.types.TextL"},"TextL"),",\xa0NoneType]\xa0=\xa0None, text_m:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextM",href:"#h2o_wave.types.TextM"},"TextM"),",\xa0NoneType]\xa0=\xa0None, text_s:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextS",href:"#h2o_wave.types.TextS"},"TextS"),",\xa0NoneType]\xa0=\xa0None, text_xs:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextXs",href:"#h2o_wave.types.TextXs"},"TextXs"),",\xa0NoneType]\xa0=\xa0None, label:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Label",href:"#h2o_wave.types.Label"},"Label"),",\xa0NoneType]\xa0=\xa0None, separator:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Separator",href:"#h2o_wave.types.Separator"},"Separator"),",\xa0NoneType]\xa0=\xa0None, progress:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Progress",href:"#h2o_wave.types.Progress"},"Progress"),",\xa0NoneType]\xa0=\xa0None, message_bar:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.MessageBar",href:"#h2o_wave.types.MessageBar"},"MessageBar"),",\xa0NoneType]\xa0=\xa0None, textbox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Textbox",href:"#h2o_wave.types.Textbox"},"Textbox"),",\xa0NoneType]\xa0=\xa0None, checkbox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Checkbox",href:"#h2o_wave.types.Checkbox"},"Checkbox"),",\xa0NoneType]\xa0=\xa0None, toggle:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Toggle",href:"#h2o_wave.types.Toggle"},"Toggle"),",\xa0NoneType]\xa0=\xa0None, choice_group:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"#h2o_wave.types.ChoiceGroup"},"ChoiceGroup"),",\xa0NoneType]\xa0=\xa0None, checklist:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Checklist",href:"#h2o_wave.types.Checklist"},"Checklist"),",\xa0NoneType]\xa0=\xa0None, dropdown:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Dropdown",href:"#h2o_wave.types.Dropdown"},"Dropdown"),",\xa0NoneType]\xa0=\xa0None, combobox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Combobox",href:"#h2o_wave.types.Combobox"},"Combobox"),",\xa0NoneType]\xa0=\xa0None, slider:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Slider",href:"#h2o_wave.types.Slider"},"Slider"),",\xa0NoneType]\xa0=\xa0None, spinbox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Spinbox",href:"#h2o_wave.types.Spinbox"},"Spinbox"),",\xa0NoneType]\xa0=\xa0None, date_picker:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.DatePicker",href:"#h2o_wave.types.DatePicker"},"DatePicker"),",\xa0NoneType]\xa0=\xa0None, color_picker:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.ColorPicker",href:"#h2o_wave.types.ColorPicker"},"ColorPicker"),",\xa0NoneType]\xa0=\xa0None, button:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Button",href:"#h2o_wave.types.Button"},"Button"),",\xa0NoneType]\xa0=\xa0None, buttons:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Buttons",href:"#h2o_wave.types.Buttons"},"Buttons"),",\xa0NoneType]\xa0=\xa0None, file_upload:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.FileUpload",href:"#h2o_wave.types.FileUpload"},"FileUpload"),",\xa0NoneType]\xa0=\xa0None, table:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Table",href:"#h2o_wave.types.Table"},"Table"),",\xa0NoneType]\xa0=\xa0None, link:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Link",href:"#h2o_wave.types.Link"},"Link"),",\xa0NoneType]\xa0=\xa0None, tabs:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Tabs",href:"#h2o_wave.types.Tabs"},"Tabs"),",\xa0NoneType]\xa0=\xa0None, expander:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Expander",href:"#h2o_wave.types.Expander"},"Expander"),",\xa0NoneType]\xa0=\xa0None, frame:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Frame",href:"#h2o_wave.types.Frame"},"Frame"),",\xa0NoneType]\xa0=\xa0None, markup:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Markup",href:"#h2o_wave.types.Markup"},"Markup"),",\xa0NoneType]\xa0=\xa0None, template:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Template",href:"#h2o_wave.types.Template"},"Template"),",\xa0NoneType]\xa0=\xa0None, picker:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Picker",href:"#h2o_wave.types.Picker"},"Picker"),",\xa0NoneType]\xa0=\xa0None, range_slider:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.RangeSlider",href:"#h2o_wave.types.RangeSlider"},"RangeSlider"),",\xa0NoneType]\xa0=\xa0None, stepper:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Stepper",href:"#h2o_wave.types.Stepper"},"Stepper"),",\xa0NoneType]\xa0=\xa0None, visualization:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Visualization",href:"#h2o_wave.types.Visualization"},"Visualization"),",\xa0NoneType]\xa0=\xa0None, vega_visualization:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"#h2o_wave.types.VegaVisualization"},"VegaVisualization"),",\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a component.")),Object(c.b)("h4",{id:"static-methods-11"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-11"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Component.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Component__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-11"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Component.button",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"button")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Button.")),Object(c.b)("div",{id:"h2o_wave.types.Component.buttons",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"buttons")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Button set.")),Object(c.b)("div",{id:"h2o_wave.types.Component.checkbox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"checkbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Checkbox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.checklist",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"checklist")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Checklist.")),Object(c.b)("div",{id:"h2o_wave.types.Component.choice_group",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choice_group")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Choice group.")),Object(c.b)("div",{id:"h2o_wave.types.Component.color_picker",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color_picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Color picker.")),Object(c.b)("div",{id:"h2o_wave.types.Component.combobox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"combobox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Combobox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.date_picker",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"date_picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Date picker.")),Object(c.b)("div",{id:"h2o_wave.types.Component.dropdown",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"dropdown")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Dropdown.")),Object(c.b)("div",{id:"h2o_wave.types.Component.expander",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"expander")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Expander.")),Object(c.b)("div",{id:"h2o_wave.types.Component.file_upload",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"file_upload")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"File upload.")),Object(c.b)("div",{id:"h2o_wave.types.Component.frame",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"frame")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Frame.")),Object(c.b)("div",{id:"h2o_wave.types.Component.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label.")),Object(c.b)("div",{id:"h2o_wave.types.Component.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Link.")),Object(c.b)("div",{id:"h2o_wave.types.Component.markup",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"markup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Markup")),Object(c.b)("div",{id:"h2o_wave.types.Component.message_bar",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"message_bar")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Message bar.")),Object(c.b)("div",{id:"h2o_wave.types.Component.picker",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Picker.")),Object(c.b)("div",{id:"h2o_wave.types.Component.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Progress bar.")),Object(c.b)("div",{id:"h2o_wave.types.Component.range_slider",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"range_slider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Range Slider.")),Object(c.b)("div",{id:"h2o_wave.types.Component.separator",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"separator")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Separator.")),Object(c.b)("div",{id:"h2o_wave.types.Component.slider",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"slider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Slider.")),Object(c.b)("div",{id:"h2o_wave.types.Component.spinbox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"spinbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.stepper",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stepper")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Stepper.")),Object(c.b)("div",{id:"h2o_wave.types.Component.table",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"table")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Table.")),Object(c.b)("div",{id:"h2o_wave.types.Component.tabs",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tabs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tabs.")),Object(c.b)("div",{id:"h2o_wave.types.Component.template",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"template")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Template")),Object(c.b)("div",{id:"h2o_wave.types.Component.text",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_l",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_l")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Large sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_m",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_m")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Medium sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_s",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_s")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Small sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_xl",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_xl")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Extra-large sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_xs",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_xs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Extra-small sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.textbox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"textbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Textbox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.toggle",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"toggle")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Toggle.")),Object(c.b)("div",{id:"h2o_wave.types.Component.vega_visualization",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"vega_visualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Vega-lite Visualization.")),Object(c.b)("div",{id:"h2o_wave.types.Component.visualization",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Visualization."))),Object(c.b)("h4",{id:"methods-11"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-11"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Component.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"datepicker"},"DatePicker ",Object(c.b)("a",{name:"h2o_wave.types.DatePicker"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"DatePicker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a date picker."),Object(c.b)("p",null,"A date picker allows a user to pick a date value.")),Object(c.b)("h4",{id:"static-methods-12"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-12"},"load ",Object(c.b)("a",{name:"h2o_wave.types.DatePicker.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_DatePicker__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.DatePicker",href:"#h2o_wave.types.DatePicker"},"DatePicker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-12"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.DatePicker.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The date value in YYYY-MM-DD format."))),Object(c.b)("h4",{id:"methods-12"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-12"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.DatePicker.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"dropdown"},"Dropdown ",Object(c.b)("a",{name:"h2o_wave.types.Dropdown"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Dropdown"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a dropdown."),Object(c.b)("p",null,"A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible."),Object(c.b)("p",null,"To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value."),Object(c.b)("p",null,"Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.")),Object(c.b)("h4",{id:"static-methods-13"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-13"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Dropdown.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Dropdown__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Dropdown",href:"#h2o_wave.types.Dropdown"},"Dropdown")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-13"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Dropdown.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this is a required field.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the dropdown value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the selected choice.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected choices. If this parameter is set, multiple selections will be allowed."))),Object(c.b)("h4",{id:"methods-13"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-13"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Dropdown.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"expander"},"Expander ",Object(c.b)("a",{name:"h2o_wave.types.Expander"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Expander"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, expanded:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[ForwardRef('",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component"),"')],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates a new expander."),Object(c.b)("p",null,"Expanders can be used to show or hide a group of related components.")),Object(c.b)("h4",{id:"static-methods-14"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-14"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Expander.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Expander__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Expander",href:"#h2o_wave.types.Expander"},"Expander")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-14"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Expander.expanded",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"expanded")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if expanded, False if collapsed.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"List of components to be hideable by the expander.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the expander.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-14"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-14"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Expander.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"fileupload"},"FileUpload ",Object(c.b)("a",{name:"h2o_wave.types.FileUpload"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FileUpload"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, file_extensions:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_file_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.")),Object(c.b)("h4",{id:"static-methods-15"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-15"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FileUpload.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FileUpload__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FileUpload",href:"#h2o_wave.types.FileUpload"},"FileUpload")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-15"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FileUpload.file_extensions",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"file_extensions")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"List of allowed file extensions, e.g. ",Object(c.b)("code",null,"pdf"),", ",Object(c.b)("code",null,"docx"),", etc.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the file upload, e.g. '400px', '50%', etc.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.max_file_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_file_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Maximum allowed size (Mb) per file. Defaults to no limit.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.max_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Maximum allowed size (Mb) for all files combined. Defaults to no limit.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.multiple",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"multiple")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should allow multiple files to be uploaded.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."))),Object(c.b)("h4",{id:"methods-15"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-15"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FileUpload.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"flexcard"},"FlexCard ",Object(c.b)("a",{name:"h2o_wave.types.FlexCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FlexCard"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], direction:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, wrap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.")),Object(c.b)("h4",{id:"static-methods-16"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-16"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FlexCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FlexCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FlexCard",href:"#h2o_wave.types.FlexCard"},"FlexCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-16"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FlexCard.align",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"align")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.direction",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"direction")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Layout direction. One of 'horizontal', 'vertical'.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.item_props",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_props")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card properties.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.item_view",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_view")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card type.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.justify",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"justify")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.wrap",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"wrap")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'."))),Object(c.b)("h4",{id:"methods-16"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-16"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FlexCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"formcard"},"FormCard ",Object(c.b)("a",{name:"h2o_wave.types.FormCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FormCard"),"(box:\xa0str, items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component"),"],\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a form.")),Object(c.b)("h4",{id:"static-methods-17"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-17"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FormCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FormCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FormCard",href:"#h2o_wave.types.FormCard"},"FormCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-17"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FormCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.FormCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FormCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The components in this form."))),Object(c.b)("h4",{id:"methods-17"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-17"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FormCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"frame"},"Frame ",Object(c.b)("a",{name:"h2o_wave.types.Frame"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Frame"),"(path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a new inline frame (an ",Object(c.b)("code",null,"iframe"),").")),Object(c.b)("h4",{id:"static-methods-18"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-18"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Frame.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Frame__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Frame",href:"#h2o_wave.types.Frame"},"Frame")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-18"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Frame.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content of the page. A string containing ",Object(c.b)("code",null,"..."),".")),Object(c.b)("div",{id:"h2o_wave.types.Frame.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the frame, e.g. ",Object(c.b)("code",null,"200px"),", ",Object(c.b)("code",null,"50%"),", etc. Defaults to ",Object(c.b)("code",null,"150px"),".")),Object(c.b)("div",{id:"h2o_wave.types.Frame.path",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"path")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The path or URL of the web page, e.g. ",Object(c.b)("code",null,"/foo.html")," or ",Object(c.b)("code",null,"http://example.com/foo.html"))),Object(c.b)("div",{id:"h2o_wave.types.Frame.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The width of the frame, e.g. ",Object(c.b)("code",null,"200px"),", ",Object(c.b)("code",null,"50%"),", etc. Defaults to ",Object(c.b)("code",null,"100%"),"."))),Object(c.b)("h4",{id:"methods-18"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-18"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Frame.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"framecard"},"FrameCard ",Object(c.b)("a",{name:"h2o_wave.types.FrameCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FrameCard"),"(box:\xa0str, title:\xa0str, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render a card containing a HTML page inside an inline frame (an ",Object(c.b)("code",null,"iframe"),")."),Object(c.b)("p",null,"Either a path or content can be provided as arguments.")),Object(c.b)("h4",{id:"static-methods-19"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-19"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FrameCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FrameCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FrameCard",href:"#h2o_wave.types.FrameCard"},"FrameCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-19"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FrameCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content of the page. A string containing ",Object(c.b)("code",null,"..."))),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.path",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"path")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The path or URL of the web page, e.g. ",Object(c.b)("code",null,"/foo.html")," or ",Object(c.b)("code",null,"http://example.com/foo.html"))),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-19"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-19"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FrameCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"graphicscard"},"GraphicsCard ",Object(c.b)("a",{name:"h2o_wave.types.GraphicsCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"GraphicsCard"),"(box:\xa0str, view_box:\xa0str, stage:\xa0Union[List[dict],\xa0str,\xa0NoneType]\xa0=\xa0None, scene:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card for displaying vector graphics.")),Object(c.b)("h4",{id:"static-methods-20"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-20"},"load ",Object(c.b)("a",{name:"h2o_wave.types.GraphicsCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_GraphicsCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"#h2o_wave.types.GraphicsCard"},"GraphicsCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-20"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The displayed height of the rectangular viewport. (Not the height of its coordinate system.)")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.scene",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"scene")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Foreground layer for rendering dynamic SVG elements.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.stage",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stage")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Background layer for rendering static SVG elements. Must be packed to conserve memory.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.view_box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"view_box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: ",Object(c.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox"))),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The displayed width of the rectangular viewport. (Not the width of its coordinate system.)"))),Object(c.b)("h4",{id:"methods-20"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-20"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.GraphicsCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"gridcard"},"GridCard ",Object(c.b)("a",{name:"h2o_wave.types.GridCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"GridCard"),"(box:\xa0str, title:\xa0str, cells:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("h4",{id:"static-methods-21"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-21"},"load ",Object(c.b)("a",{name:"h2o_wave.types.GridCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_GridCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.GridCard",href:"#h2o_wave.types.GridCard"},"GridCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-21"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.GridCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.cells",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"cells")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE."))),Object(c.b)("h4",{id:"methods-21"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-21"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.GridCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"headercard"},"HeaderCard ",Object(c.b)("a",{name:"h2o_wave.types.HeaderCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"HeaderCard"),"(box:\xa0str, title:\xa0str, subtitle:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render a card containing a HTML page inside an inline frame (iframe)."),Object(c.b)("p",null,"Either a path or content can be provided as arguments.")),Object(c.b)("h4",{id:"static-methods-22"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-22"},"load ",Object(c.b)("a",{name:"h2o_wave.types.HeaderCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_HeaderCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.HeaderCard",href:"#h2o_wave.types.HeaderCard"},"HeaderCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-22"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon type, displayed to the left.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.icon_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon's color.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.subtitle",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"subtitle")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The subtitle, displayed below the title.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title."))),Object(c.b)("h4",{id:"methods-22"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-22"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.HeaderCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"icontablecelltype"},"IconTableCellType ",Object(c.b)("a",{name:"h2o_wave.types.IconTableCellType"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"IconTableCellType"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.")),Object(c.b)("h4",{id:"static-methods-23"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-23"},"load ",Object(c.b)("a",{name:"h2o_wave.types.IconTableCellType.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_IconTableCellType__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"#h2o_wave.types.IconTableCellType"},"IconTableCellType")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-23"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.IconTableCellType.color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Icon color."))),Object(c.b)("h4",{id:"methods-23"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-23"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.IconTableCellType.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"imagecard"},"ImageCard ",Object(c.b)("a",{name:"h2o_wave.types.ImageCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ImageCard"),"(box:\xa0str, title:\xa0str, type:\xa0str, image:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card that displays a base64-encoded image.")),Object(c.b)("h4",{id:"static-methods-24"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-24"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ImageCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ImageCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ImageCard",href:"#h2o_wave.types.ImageCard"},"ImageCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-24"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ImageCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.image",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"image")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Image data, base64-encoded.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The image MIME subtype. One of ",Object(c.b)("code",null,"apng"),", ",Object(c.b)("code",null,"bmp"),", ",Object(c.b)("code",null,"gif"),", ",Object(c.b)("code",null,"x-icon"),", ",Object(c.b)("code",null,"jpeg"),", ",Object(c.b)("code",null,"png"),", ",Object(c.b)("code",null,"webp"),"."))),Object(c.b)("h4",{id:"methods-24"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-24"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ImageCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"label"},"Label ",Object(c.b)("a",{name:"h2o_wave.types.Label"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Label"),"(label:\xa0str, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a label."),Object(c.b)("p",null,"Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component\u2019s purpose.")),Object(c.b)("h4",{id:"static-methods-25"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-25"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Label.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Label__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Label",href:"#h2o_wave.types.Label"},"Label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-25"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Label.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the label should be disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Label.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the label.")),Object(c.b)("div",{id:"h2o_wave.types.Label.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the field is required.")),Object(c.b)("div",{id:"h2o_wave.types.Label.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."))),Object(c.b)("h4",{id:"methods-25"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-25"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Label.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"largebarstatcard"},"LargeBarStatCard ",Object(c.b)("a",{name:"h2o_wave.types.LargeBarStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"LargeBarStatCard"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, value_caption:\xa0str, aux_value_caption:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.")),Object(c.b)("h4",{id:"static-methods-26"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-26"},"load ",Object(c.b)("a",{name:"h2o_wave.types.LargeBarStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_LargeBarStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.LargeBarStatCard",href:"#h2o_wave.types.LargeBarStatCard"},"LargeBarStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-26"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value, typically a target value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.aux_value_caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value_caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the auxiliary value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's caption.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress bar.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress bar, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.value_caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value_caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the primary value."))),Object(c.b)("h4",{id:"methods-26"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-26"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.LargeBarStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"largestatcard"},"LargeStatCard ",Object(c.b)("a",{name:"h2o_wave.types.LargeStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"LargeStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, caption:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a stat card displaying a primary value, an auxiliary value and a caption.")),Object(c.b)("h4",{id:"static-methods-27"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-27"},"load ",Object(c.b)("a",{name:"h2o_wave.types.LargeStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_LargeStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.LargeStatCard",href:"#h2o_wave.types.LargeStatCard"},"LargeStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-27"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-27"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-27"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.LargeStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"link"},"Link ",Object(c.b)("a",{name:"h2o_wave.types.Link"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Link"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, download:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, button:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a hyperlink."),Object(c.b)("p",null,"Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a ",Object(c.b)("code",null,"/")," and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.")),Object(c.b)("h4",{id:"static-methods-28"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-28"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Link.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Link__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Link",href:"#h2o_wave.types.Link"},"Link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-28"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Link.button",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"button")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the link should be rendered as a button.")),Object(c.b)("div",{id:"h2o_wave.types.Link.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the link should be disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Link.download",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"download")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the link should be used for file download.")),Object(c.b)("div",{id:"h2o_wave.types.Link.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text to be displayed. If blank, the ",Object(c.b)("code",null,"path")," is used as the label.")),Object(c.b)("div",{id:"h2o_wave.types.Link.path",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"path")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The path or URL to link to.")),Object(c.b)("div",{id:"h2o_wave.types.Link.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."))),Object(c.b)("h4",{id:"methods-28"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-28"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Link.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"listcard"},"ListCard ",Object(c.b)("a",{name:"h2o_wave.types.ListCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ListCard"),"(box:\xa0str, title:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).")),Object(c.b)("h4",{id:"static-methods-29"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-29"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ListCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ListCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ListCard",href:"#h2o_wave.types.ListCard"},"ListCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-29"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ListCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.item_props",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_props")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card properties.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.item_view",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_view")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card type.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-29"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-29"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ListCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"listitem1card"},"ListItem1Card ",Object(c.b)("a",{name:"h2o_wave.types.ListItem1Card"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ListItem1Card"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("h4",{id:"static-methods-30"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-30"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ListItem1Card.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ListItem1Card__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ListItem1Card",href:"#h2o_wave.types.ListItem1Card"},"ListItem1Card")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-30"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE."))),Object(c.b)("h4",{id:"methods-30"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-30"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ListItem1Card.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"mark"},"Mark ",Object(c.b)("a",{name:"h2o_wave.types.Mark"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Mark"),"(coord:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, x_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, y_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_domain:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, shape:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, shape_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, size:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, size_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stack:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, dodge:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_offset:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_x:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_y:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_rotation:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_position:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_overlap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_weight:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_line_height:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.")),Object(c.b)("h4",{id:"static-methods-31"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-31"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Mark.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Mark__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Mark",href:"#h2o_wave.types.Mark"},"Mark")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-31"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Mark.color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark color field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.color_domain",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color_domain")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The unique values in the data (labels or categories or classes) to map colors to, e.g. ",Object(c.b)("code",null,"['high', 'medium', 'low']"),". If this is not provided, the unique values are automatically inferred from the ",Object(c.b)("code",null,"color")," attribute.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.color_range",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color_range")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark color range for multi-series plots. A string containing space-separated colors, e.g. ",Object(c.b)("code",null,"'#fee8c8 #fdbb84 #e34a33'"))),Object(c.b)("div",{id:"h2o_wave.types.Mark.coord",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"coord")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Coordinate system. ",Object(c.b)("code",null,"rect")," is synonymous to ",Object(c.b)("code",null,"cartesian"),". ",Object(c.b)("code",null,"theta")," is transposed ",Object(c.b)("code",null,"polar"),". One of 'rect', 'cartesian', 'polar', 'theta', 'helix'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Curve type for ",Object(c.b)("code",null,"line")," and ",Object(c.b)("code",null,"area")," mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.dodge",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"dodge")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Field to dodge marks by, or 'auto' to infer.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.fill_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"fill_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark fill color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.fill_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"fill_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark fill opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_align",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_align")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label text alignment. One of 'left', 'right', 'center', 'start', 'end'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_fill_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_fill_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label fill color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_fill_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_fill_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label fill opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_font_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_font_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label font size.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_font_weight",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_font_weight")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label font weight.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_line_height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_line_height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label line height.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_offset",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_offset")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Distance between label and mark.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_offset_x",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_offset_x")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Horizontal distance between label and mark.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_offset_y",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_offset_y")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Vertical distance between label and mark.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_overlap",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_overlap")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_position",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_position")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_rotation",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_rotation")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_stroke_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_stroke_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label stroke color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_stroke_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_stroke_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label stroke opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_stroke_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_stroke_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label stroke size (line width or pen thickness).")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_dash",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_dash")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke size (line width or pen thickness).")),Object(c.b)("div",{id:"h2o_wave.types.Mark.shape",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"shape")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark shape field or value for ",Object(c.b)("code",null,"point")," mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.shape_range",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"shape_range")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark shape range for multi-series plots using ",Object(c.b)("code",null,"point")," mark types. A string containing space-separated shapes, e.g. ",Object(c.b)("code",null,"'circle square diamond'"))),Object(c.b)("div",{id:"h2o_wave.types.Mark.size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark size field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.size_range",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"size_range")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark size range. A string containing space-separated integers, e.g. ",Object(c.b)("code",null,"'4 30'"))),Object(c.b)("div",{id:"h2o_wave.types.Mark.stack",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stack")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Field to stack marks by, or 'auto' to infer.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_dash",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_dash")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke size.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x0",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x0")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X base field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x1",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x1")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X bin lower bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x2",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x2")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X bin upper bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis scale maximum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis scale minimum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_nice",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_nice")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Whether to nice X axis scale ticks.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_scale",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_scale")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis title.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y0",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y0")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y base field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y1",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y1")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y bin lower bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y2",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y2")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y bin upper bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis scale maximum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis scale minimum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_nice",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_nice")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Whether to nice Y axis scale ticks.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_scale",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_scale")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis title."))),Object(c.b)("h4",{id:"methods-31"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-31"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Mark.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"markdowncard"},"MarkdownCard ",Object(c.b)("a",{name:"h2o_wave.types.MarkdownCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MarkdownCard"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card that renders Markdown content."),Object(c.b)("p",null,"Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.")),Object(c.b)("h4",{id:"static-methods-32"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-32"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MarkdownCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MarkdownCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MarkdownCard",href:"#h2o_wave.types.MarkdownCard"},"MarkdownCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-32"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The markdown content. Supports Github Flavored Markdown (GFM): ",Object(c.b)("a",{href:"https://guides.github.com/features/mastering-markdown/"},"https://guides.github.com/features/mastering-markdown/"))),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Additional data for the card.")),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-32"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-32"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MarkdownCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"markup"},"Markup ",Object(c.b)("a",{name:"h2o_wave.types.Markup"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Markup"),"(content:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render HTML content.")),Object(c.b)("h4",{id:"static-methods-33"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-33"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Markup.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Markup__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Markup",href:"#h2o_wave.types.Markup"},"Markup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-33"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Markup.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content."))),Object(c.b)("h4",{id:"methods-33"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-33"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Markup.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"markupcard"},"MarkupCard ",Object(c.b)("a",{name:"h2o_wave.types.MarkupCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MarkupCard"),"(box:\xa0str, title:\xa0str, content:\xa0str, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render HTML content.")),Object(c.b)("h4",{id:"static-methods-34"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-34"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MarkupCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MarkupCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MarkupCard",href:"#h2o_wave.types.MarkupCard"},"MarkupCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-34"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content.")),Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-34"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-34"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MarkupCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"messagebar"},"MessageBar ",Object(c.b)("a",{name:"h2o_wave.types.MessageBar"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MessageBar"),"(type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, text:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a message bar."),Object(c.b)("p",null,"A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.")),Object(c.b)("h4",{id:"static-methods-35"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-35"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MessageBar.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MessageBar__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MessageBar",href:"#h2o_wave.types.MessageBar"},"MessageBar")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-35"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MessageBar.text",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the message bar.")),Object(c.b)("div",{id:"h2o_wave.types.MessageBar.type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'."))),Object(c.b)("h4",{id:"methods-35"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-35"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MessageBar.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"metacard"},"MetaCard ",Object(c.b)("a",{name:"h2o_wave.types.MetaCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MetaCard"),"(box:\xa0str, title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, refresh:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, notification:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, redirect:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Represents page-global state."),Object(c.b)("p",null,"This card is invisible. It is used to control attributes of the active page.")),Object(c.b)("h4",{id:"static-methods-36"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-36"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MetaCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MetaCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MetaCard",href:"#h2o_wave.types.MetaCard"},"MetaCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-36"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MetaCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.notification",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"notification")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Display a desktop notification to the user.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.redirect",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"redirect")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Redirect the page to a new URL.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.refresh",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"refresh")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title of the page."))),Object(c.b)("h4",{id:"methods-36"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-36"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MetaCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"navcard"},"NavCard ",Object(c.b)("a",{name:"h2o_wave.types.NavCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"NavCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.NavGroup",href:"#h2o_wave.types.NavGroup"},"NavGroup"),"], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing a navigation pane.")),Object(c.b)("h4",{id:"static-methods-37"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-37"},"load ",Object(c.b)("a",{name:"h2o_wave.types.NavCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_NavCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.NavCard",href:"#h2o_wave.types.NavCard"},"NavCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-37"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.NavCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.NavCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.NavCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The navigation groups contained in this pane."))),Object(c.b)("h4",{id:"methods-37"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-37"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.NavCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"navgroup"},"NavGroup ",Object(c.b)("a",{name:"h2o_wave.types.NavGroup"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"NavGroup"),"(label:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.NavItem",href:"#h2o_wave.types.NavItem"},"NavItem"),"])"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a group of navigation items.")),Object(c.b)("h4",{id:"static-methods-38"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-38"},"load ",Object(c.b)("a",{name:"h2o_wave.types.NavGroup.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_NavGroup__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.NavGroup",href:"#h2o_wave.types.NavGroup"},"NavGroup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-38"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.NavGroup.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The navigation items contained in this group.")),Object(c.b)("div",{id:"h2o_wave.types.NavGroup.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The label to display for this group."))),Object(c.b)("h4",{id:"methods-38"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-38"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.NavGroup.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"navitem"},"NavItem ",Object(c.b)("a",{name:"h2o_wave.types.NavItem"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"NavItem"),"(name:\xa0str, label:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a navigation item.")),Object(c.b)("h4",{id:"static-methods-39"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-39"},"load ",Object(c.b)("a",{name:"h2o_wave.types.NavItem.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_NavItem__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.NavItem",href:"#h2o_wave.types.NavItem"},"NavItem")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-39"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.NavItem.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The label to display.")),Object(c.b)("div",{id:"h2o_wave.types.NavItem.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."))),Object(c.b)("h4",{id:"methods-39"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-39"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.NavItem.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"picker"},"Picker ",Object(c.b)("a",{name:"h2o_wave.types.Picker"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Picker"),"(name:\xa0str, choices:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"], label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_choices:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.")),Object(c.b)("h4",{id:"static-methods-40"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-40"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Picker.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Picker__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Picker",href:"#h2o_wave.types.Picker"},"Picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-40"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Picker.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Controls whether the picker should be disabled or not.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed above the component.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.max_choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Maximum number of selectable choices. Defaults to no limit.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected choices."))),Object(c.b)("h4",{id:"methods-40"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-40"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Picker.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"pixelartcard"},"PixelArtCard ",Object(c.b)("a",{name:"h2o_wave.types.PixelArtCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"PixelArtCard"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card displaying a collaborative Pixel art tool, just for kicks.")),Object(c.b)("h4",{id:"static-methods-41"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-41"},"load ",Object(c.b)("a",{name:"h2o_wave.types.PixelArtCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_PixelArtCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.PixelArtCard",href:"#h2o_wave.types.PixelArtCard"},"PixelArtCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-41"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-41"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-41"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.PixelArtCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"plot"},"Plot ",Object(c.b)("a",{name:"h2o_wave.types.Plot"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Plot"),"(marks:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Mark",href:"#h2o_wave.types.Mark"},"Mark"),"])"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a plot. A plot is composed of one or more graphical mark layers.")),Object(c.b)("h4",{id:"static-methods-42"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-42"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Plot.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Plot__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Plot",href:"#h2o_wave.types.Plot"},"Plot")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-42"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Plot.marks",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"marks")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The graphical mark layers contained in this plot."))),Object(c.b)("h4",{id:"methods-42"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-42"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Plot.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"plotcard"},"PlotCard ",Object(c.b)("a",{name:"h2o_wave.types.PlotCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"PlotCard"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], plot:\xa0",Object(c.b)("a",{title:"h2o_wave.types.Plot",href:"#h2o_wave.types.Plot"},"Plot"),", commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card displaying a plot.")),Object(c.b)("h4",{id:"static-methods-43"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-43"},"load ",Object(c.b)("a",{name:"h2o_wave.types.PlotCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_PlotCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.PlotCard",href:"#h2o_wave.types.PlotCard"},"PlotCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-43"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.PlotCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.plot",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot to be displayed in this card.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-43"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-43"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.PlotCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"progress"},"Progress ",Object(c.b)("a",{name:"h2o_wave.types.Progress"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Progress"),"(label:\xa0str, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a progress bar."),Object(c.b)("p",null,"Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing."),Object(c.b)("p",null,"Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]"),Object(c.b)("p",null,"Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid \u201crewinding\u201d the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.")),Object(c.b)("h4",{id:"static-methods-44"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-44"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Progress.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Progress__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Progress",href:"#h2o_wave.types.Progress"},"Progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-44"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Progress.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed below the bar.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed above the bar.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The progress, between 0.0 and 1.0, or -1 (default) if indeterminate."))),Object(c.b)("h4",{id:"methods-44"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-44"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Progress.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"progresstablecelltype"},"ProgressTableCellType ",Object(c.b)("a",{name:"h2o_wave.types.ProgressTableCellType"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ProgressTableCellType"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.")),Object(c.b)("h4",{id:"static-methods-45"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-45"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ProgressTableCellType.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ProgressTableCellType__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-45"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ProgressTableCellType.color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Color of the progress arc."))),Object(c.b)("h4",{id:"methods-45"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-45"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ProgressTableCellType.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"rangeslider"},"RangeSlider ",Object(c.b)("a",{name:"h2o_wave.types.RangeSlider"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"RangeSlider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, min_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a range slider."),Object(c.b)("p",null,"A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.")),Object(c.b)("h4",{id:"static-methods-46"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-46"},"load ",Object(c.b)("a",{name:"h2o_wave.types.RangeSlider.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_RangeSlider__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.RangeSlider",href:"#h2o_wave.types.RangeSlider"},"RangeSlider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-46"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum value of the slider. Defaults to 100.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.max_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The upper bound of the selected range.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum value of the slider. Defaults to 0.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.min_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The lower bound of the selected range.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.step",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The difference between two adjacent values of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the slider value changes."))),Object(c.b)("h4",{id:"methods-46"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-46"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.RangeSlider.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"repeatcard"},"RepeatCard ",Object(c.b)("a",{name:"h2o_wave.types.RepeatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"RepeatCard"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards.")),Object(c.b)("h4",{id:"static-methods-47"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-47"},"load ",Object(c.b)("a",{name:"h2o_wave.types.RepeatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_RepeatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.RepeatCard",href:"#h2o_wave.types.RepeatCard"},"RepeatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-47"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.item_props",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_props")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card properties.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.item_view",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_view")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE."))),Object(c.b)("h4",{id:"methods-47"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-47"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.RepeatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"separator"},"Separator ",Object(c.b)("a",{name:"h2o_wave.types.Separator"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Separator"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a separator."),Object(c.b)("p",null,"A separator visually separates content into groups.")),Object(c.b)("h4",{id:"static-methods-48"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-48"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Separator.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Separator__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Separator",href:"#h2o_wave.types.Separator"},"Separator")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-48"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Separator.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the separator."))),Object(c.b)("h4",{id:"methods-48"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-48"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Separator.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"slider"},"Slider ",Object(c.b)("a",{name:"h2o_wave.types.Slider"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Slider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a slider."),Object(c.b)("p",null,"A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value."),Object(c.b)("p",null,"A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium \u2014 not about setting the value to two or five."),Object(c.b)("p",null,"The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.")),Object(c.b)("h4",{id:"static-methods-49"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-49"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Slider.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Slider__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Slider",href:"#h2o_wave.types.Slider"},"Slider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-49"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Slider.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum value of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum value of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.step",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The difference between two adjacent values of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the slider value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The current value of the slider."))),Object(c.b)("h4",{id:"methods-49"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-49"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Slider.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"smallseriesstatcard"},"SmallSeriesStatCard ",Object(c.b)("a",{name:"h2o_wave.types.SmallSeriesStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"SmallSeriesStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, plot_data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a small stat card displaying a primary value and a series plot.")),Object(c.b)("h4",{id:"static-methods-50"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-50"},"load ",Object(c.b)("a",{name:"h2o_wave.types.SmallSeriesStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_SmallSeriesStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.SmallSeriesStatCard",href:"#h2o_wave.types.SmallSeriesStatCard"},"SmallSeriesStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-50"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_category",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_category")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for x-axis values (ignored if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"area"),"; must be provided if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"interval"),"). Defaults to 'x'.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's color.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's curve style. Defaults to ",Object(c.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's data.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The type of plot. Defaults to ",Object(c.b)("code",null,"area"),". One of 'area', 'interval'.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for y-axis values.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_zero_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_zero_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The base value to use for each y-axis mark. Set this to ",Object(c.b)("code",null,"0")," if you want to pin the x-axis at ",Object(c.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-50"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-50"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.SmallSeriesStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"smallstatcard"},"SmallStatCard ",Object(c.b)("a",{name:"h2o_wave.types.SmallStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"SmallStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a stat card displaying a single value.")),Object(c.b)("h4",{id:"static-methods-51"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-51"},"load ",Object(c.b)("a",{name:"h2o_wave.types.SmallStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_SmallStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.SmallStatCard",href:"#h2o_wave.types.SmallStatCard"},"SmallStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-51"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-51"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-51"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.SmallStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"spinbox"},"Spinbox ",Object(c.b)("a",{name:"h2o_wave.types.Spinbox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Spinbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a spinbox."),Object(c.b)("p",null,"A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.")),Object(c.b)("h4",{id:"static-methods-52"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-52"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Spinbox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Spinbox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Spinbox",href:"#h2o_wave.types.Spinbox"},"Spinbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-52"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Spinbox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum value of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum value of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.step",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The difference between two adjacent values of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The current value of the spinbox."))),Object(c.b)("h4",{id:"methods-52"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-52"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Spinbox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"step"},"Step ",Object(c.b)("a",{name:"h2o_wave.types.Step"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Step"),"(label:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, done:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a step for a stepper.")),Object(c.b)("h4",{id:"static-methods-53"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-53"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Step.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Step__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Step",href:"#h2o_wave.types.Step"},"Step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-53"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Step.done",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"done")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether this step has already been completed.")),Object(c.b)("div",{id:"h2o_wave.types.Step.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Icon to be displayed.")),Object(c.b)("div",{id:"h2o_wave.types.Step.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text displayed below icon."))),Object(c.b)("h4",{id:"methods-53"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-53"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Step.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"stepper"},"Stepper ",Object(c.b)("a",{name:"h2o_wave.types.Stepper"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Stepper"),"(name:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Step",href:"#h2o_wave.types.Step"},"Step"),"], tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.")),Object(c.b)("h4",{id:"static-methods-54"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-54"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Stepper.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Stepper__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Stepper",href:"#h2o_wave.types.Stepper"},"Stepper")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-54"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Stepper.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The sequence of steps to be displayed.")),Object(c.b)("div",{id:"h2o_wave.types.Stepper.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Stepper.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."))),Object(c.b)("h4",{id:"methods-54"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-54"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Stepper.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tab"},"Tab ",Object(c.b)("a",{name:"h2o_wave.types.Tab"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Tab"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tab.")),Object(c.b)("h4",{id:"static-methods-55"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-55"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Tab.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Tab__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Tab",href:"#h2o_wave.types.Tab"},"Tab")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-55"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Tab.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon displayed on the tab.")),Object(c.b)("div",{id:"h2o_wave.types.Tab.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the tab.")),Object(c.b)("div",{id:"h2o_wave.types.Tab.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-55"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-55"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Tab.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tabcard"},"TabCard ",Object(c.b)("a",{name:"h2o_wave.types.TabCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TabCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Tab",href:"#h2o_wave.types.Tab"},"Tab"),"], value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing tabs for navigation.")),Object(c.b)("h4",{id:"static-methods-56"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-56"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TabCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TabCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TabCard",href:"#h2o_wave.types.TabCard"},"TabCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-56"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TabCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if tabs should be rendered as links and not a standard tab.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the tab to select."))),Object(c.b)("h4",{id:"methods-56"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-56"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TabCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"table"},"Table ",Object(c.b)("a",{name:"h2o_wave.types.Table"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Table"),"(name:\xa0str, columns:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.TableColumn",href:"#h2o_wave.types.TableColumn"},"TableColumn"),"], rows:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.TableRow",href:"#h2o_wave.types.TableRow"},"TableRow"),"], multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, groupable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, downloadable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, resettable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create an interactive table."),Object(c.b)("p",null,"This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table."),Object(c.b)("p",null,"If ",Object(c.b)("code",null,"multiple")," is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and ",Object(c.b)("code",null,"q.args.table_name")," is set to ",Object(c.b)("code",null,"[row_name]"),", where ",Object(c.b)("code",null,"table_name")," is the ",Object(c.b)("code",null,"name")," of the table, and ",Object(c.b)("code",null,"row_name")," is the ",Object(c.b)("code",null,"name")," of the row that was clicked on."),Object(c.b)("p",null,"If ",Object(c.b)("code",null,"multiple")," is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,",Object(c.b)("code",null,"q.args.table_name")," is set to ",Object(c.b)("code",null,"[row1_name, row2_name, \u2026]")," where ",Object(c.b)("code",null,"table_name")," is the ",Object(c.b)("code",null,"name")," of the table, and ",Object(c.b)("code",null,"row1_name"),", ",Object(c.b)("code",null,"row2_name")," are the ",Object(c.b)("code",null,"name")," of the rows that were selected. Note that if ",Object(c.b)("code",null,"multiple")," is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.")),Object(c.b)("h4",{id:"static-methods-57"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-57"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Table.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Table__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Table",href:"#h2o_wave.types.Table"},"Table")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-57"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Table.columns",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"columns")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The columns in this table.")),Object(c.b)("div",{id:"h2o_wave.types.Table.downloadable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"downloadable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.")),Object(c.b)("div",{id:"h2o_wave.types.Table.groupable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"groupable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True to allow group by feature.")),Object(c.b)("div",{id:"h2o_wave.types.Table.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the table, e.g. '400px', '50%', etc.")),Object(c.b)("div",{id:"h2o_wave.types.Table.multiple",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"multiple")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True to allow multiple rows to be selected.")),Object(c.b)("div",{id:"h2o_wave.types.Table.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Table.resettable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"resettable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.")),Object(c.b)("div",{id:"h2o_wave.types.Table.rows",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"rows")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The rows in this table.")),Object(c.b)("div",{id:"h2o_wave.types.Table.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."))),Object(c.b)("h4",{id:"methods-57"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-57"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Table.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tablecelltype"},"TableCellType ",Object(c.b)("a",{name:"h2o_wave.types.TableCellType"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TableCellType"),"(progress:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType"),",\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"#h2o_wave.types.IconTableCellType"},"IconTableCellType"),",\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Defines cell content to be rendered instead of a simple text.")),Object(c.b)("h4",{id:"static-methods-58"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-58"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TableCellType.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TableCellType__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TableCellType",href:"#h2o_wave.types.TableCellType"},"TableCellType")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-58"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TableCellType.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"No documentation available.")),Object(c.b)("div",{id:"h2o_wave.types.TableCellType.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"No documentation available."))),Object(c.b)("h4",{id:"methods-58"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-58"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TableCellType.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tablecolumn"},"TableColumn ",Object(c.b)("a",{name:"h2o_wave.types.TableColumn"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TableColumn"),"(name:\xa0str, label:\xa0str, min_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, max_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, sortable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, searchable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, filterable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, cell_type:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TableCellType",href:"#h2o_wave.types.TableCellType"},"TableCellType"),",\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a table column.")),Object(c.b)("h4",{id:"static-methods-59"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-59"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TableColumn.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TableColumn__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TableColumn",href:"#h2o_wave.types.TableColumn"},"TableColumn")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-59"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TableColumn.cell_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"cell_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Defines how to render each cell in this column. Defaults to plain text.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.filterable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"filterable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the contents of this column are displayed as filters in a dropdown.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the column header.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether each cell in this column should be displayed as a clickable link.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.max_width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum width of this column, e.g. '100px'. Only ",Object(c.b)("code",null,"px")," units are supported at this time.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.min_width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min_width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum width of this column, e.g. '50px'. Only ",Object(c.b)("code",null,"px")," units are supported at this time.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this column.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.searchable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"searchable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.sortable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"sortable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the column is sortable."))),Object(c.b)("h4",{id:"methods-59"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-59"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TableColumn.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tablerow"},"TableRow ",Object(c.b)("a",{name:"h2o_wave.types.TableRow"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TableRow"),"(name:\xa0str, cells:\xa0List[str])"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a table row.")),Object(c.b)("h4",{id:"static-methods-60"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-60"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TableRow.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TableRow__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TableRow",href:"#h2o_wave.types.TableRow"},"TableRow")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-60"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TableRow.cells",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"cells")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The cells in this row (displayed left to right).")),Object(c.b)("div",{id:"h2o_wave.types.TableRow.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this row."))),Object(c.b)("h4",{id:"methods-60"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-60"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TableRow.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tabs"},"Tabs ",Object(c.b)("a",{name:"h2o_wave.types.Tabs"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Tabs"),"(name:\xa0str, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Tab",href:"#h2o_wave.types.Tab"},"Tab"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tab bar.")),Object(c.b)("h4",{id:"static-methods-61"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-61"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Tabs.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Tabs__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Tabs",href:"#h2o_wave.types.Tabs"},"Tabs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-61"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Tabs.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The tabs in this tab bar.")),Object(c.b)("div",{id:"h2o_wave.types.Tabs.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Tabs.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the tab to select."))),Object(c.b)("h4",{id:"methods-61"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-61"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Tabs.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tallgaugestatcard"},"TallGaugeStatCard ",Object(c.b)("a",{name:"h2o_wave.types.TallGaugeStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TallGaugeStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.")),Object(c.b)("h4",{id:"static-methods-62"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-62"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TallGaugeStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TallGaugeStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TallGaugeStatCard",href:"#h2o_wave.types.TallGaugeStatCard"},"TallGaugeStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-62"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress gauge.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress gauge, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-62"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-62"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TallGaugeStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tallseriesstatcard"},"TallSeriesStatCard ",Object(c.b)("a",{name:"h2o_wave.types.TallSeriesStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TallSeriesStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a series plot.")),Object(c.b)("h4",{id:"static-methods-63"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-63"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TallSeriesStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TallSeriesStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TallSeriesStatCard",href:"#h2o_wave.types.TallSeriesStatCard"},"TallSeriesStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-63"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed below the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_category",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_category")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for x-axis values (ignored if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"area"),"; must be provided if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"interval"),"). Defaults to 'x'.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's color.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's curve style. Defaults to ",Object(c.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's data.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The type of plot. Defaults to ",Object(c.b)("code",null,"area"),". One of 'area', 'interval'.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for y-axis values.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_zero_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_zero_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The base value to use for each y-axis mark. Set this to ",Object(c.b)("code",null,"0")," if you want to pin the x-axis at ",Object(c.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-63"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-63"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TallSeriesStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"template"},"Template ",Object(c.b)("a",{name:"h2o_wave.types.Template"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Template"),"(content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render dynamic content using a HTML template.")),Object(c.b)("h4",{id:"static-methods-64"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-64"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Template.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Template__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Template",href:"#h2o_wave.types.Template"},"Template")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-64"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Template.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Handlebars template. ",Object(c.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/"))),Object(c.b)("div",{id:"h2o_wave.types.Template.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the Handlebars template"))),Object(c.b)("h4",{id:"methods-64"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-64"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Template.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"templatecard"},"TemplateCard ",Object(c.b)("a",{name:"h2o_wave.types.TemplateCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TemplateCard"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render dynamic content using a HTML template.")),Object(c.b)("h4",{id:"static-methods-65"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-65"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TemplateCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TemplateCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TemplateCard",href:"#h2o_wave.types.TemplateCard"},"TemplateCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-65"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Handlebars template. ",Object(c.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/"))),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the Handlebars template")),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-65"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-65"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TemplateCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"text"},"Text ",Object(c.b)("a",{name:"h2o_wave.types.Text"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Text"),"(content:\xa0str, size:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create text content.")),Object(c.b)("h4",{id:"static-methods-66"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-66"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Text.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Text__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Text",href:"#h2o_wave.types.Text"},"Text")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-66"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Text.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.Text.size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'.")),Object(c.b)("div",{id:"h2o_wave.types.Text.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message."))),Object(c.b)("h4",{id:"methods-66"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-66"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Text.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textl"},"TextL ",Object(c.b)("a",{name:"h2o_wave.types.TextL"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextL"),"(content:\xa0str, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create large sized text content.")),Object(c.b)("h4",{id:"static-methods-67"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-67"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextL.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextL__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextL",href:"#h2o_wave.types.TextL"},"TextL")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-67"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextL.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message."))),Object(c.b)("h4",{id:"methods-67"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-67"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextL.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textm"},"TextM ",Object(c.b)("a",{name:"h2o_wave.types.TextM"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextM"),"(content:\xa0str, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create medium sized text content.")),Object(c.b)("h4",{id:"static-methods-68"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-68"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextM.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextM__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextM",href:"#h2o_wave.types.TextM"},"TextM")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-68"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextM.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextM.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message."))),Object(c.b)("h4",{id:"methods-68"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-68"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextM.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"texts"},"TextS ",Object(c.b)("a",{name:"h2o_wave.types.TextS"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextS"),"(content:\xa0str, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create small sized text content.")),Object(c.b)("h4",{id:"static-methods-69"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-69"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextS.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextS__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextS",href:"#h2o_wave.types.TextS"},"TextS")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-69"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextS.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextS.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message."))),Object(c.b)("h4",{id:"methods-69"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-69"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextS.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textxl"},"TextXl ",Object(c.b)("a",{name:"h2o_wave.types.TextXl"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextXl"),"(content:\xa0str, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create extra-large sized text content.")),Object(c.b)("h4",{id:"static-methods-70"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-70"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextXl.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextXl__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextXl",href:"#h2o_wave.types.TextXl"},"TextXl")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-70"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextXl.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message."))),Object(c.b)("h4",{id:"methods-70"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-70"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextXl.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textxs"},"TextXs ",Object(c.b)("a",{name:"h2o_wave.types.TextXs"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextXs"),"(content:\xa0str, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create extra-small sized text content.")),Object(c.b)("h4",{id:"static-methods-71"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-71"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextXs.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextXs__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextXs",href:"#h2o_wave.types.TextXs"},"TextXs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-71"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextXs.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextXs.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message."))),Object(c.b)("h4",{id:"methods-71"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-71"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextXs.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textbox"},"Textbox ",Object(c.b)("a",{name:"h2o_wave.types.Textbox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Textbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, mask:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, prefix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, suffix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, readonly:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, multiline:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, password:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a text box."),Object(c.b)("p",null,"The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.")),Object(c.b)("h4",{id:"static-methods-72"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-72"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Textbox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Textbox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Textbox",href:"#h2o_wave.types.Textbox"},"Textbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-72"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Textbox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.error",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"error")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed as an error below the text box.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Icon displayed in the far right end of the text field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed above the field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.mask",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"mask")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.multiline",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"multiline")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box should allow multi-line text entry.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.password",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"password")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box should hide text content.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.prefix",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"prefix")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed before the text box contents.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.readonly",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"readonly")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box is a read-only field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box is a required field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.suffix",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"suffix")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed after the text box contents.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the text value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed inside the text box."))),Object(c.b)("h4",{id:"methods-72"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-72"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Textbox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"toggle"},"Toggle ",Object(c.b)("a",{name:"h2o_wave.types.Toggle"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Toggle"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action."),Object(c.b)("p",null,"Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.")),Object(c.b)("h4",{id:"static-methods-73"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-73"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Toggle.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Toggle__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Toggle",href:"#h2o_wave.types.Toggle"},"Toggle")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-73"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Toggle.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the checkbox is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the toggle value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if selected, False if unselected."))),Object(c.b)("h4",{id:"methods-73"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-73"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Toggle.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"toolbarcard"},"ToolbarCard ",Object(c.b)("a",{name:"h2o_wave.types.ToolbarCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ToolbarCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"], secondary_items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, overflow_items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing a toolbar.")),Object(c.b)("h4",{id:"static-methods-74"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-74"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ToolbarCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ToolbarCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ToolbarCard",href:"#h2o_wave.types.ToolbarCard"},"ToolbarCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-74"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.overflow_items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"overflow_items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render in an overflow menu.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.secondary_items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"secondary_items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render on the right side (or left, in RTL)."))),Object(c.b)("h4",{id:"methods-74"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-74"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ToolbarCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"vegacard"},"VegaCard ",Object(c.b)("a",{name:"h2o_wave.types.VegaCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"VegaCard"),"(box:\xa0str, title:\xa0str, specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing a Vega-lite plot.")),Object(c.b)("h4",{id:"static-methods-75"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-75"},"load ",Object(c.b)("a",{name:"h2o_wave.types.VegaCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_VegaCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.VegaCard",href:"#h2o_wave.types.VegaCard"},"VegaCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-75"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.VegaCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the plot, if any.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.specification",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"specification")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Vega-lite specification.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title of this card."))),Object(c.b)("h4",{id:"methods-75"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-75"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.VegaCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"vegavisualization"},"VegaVisualization ",Object(c.b)("a",{name:"h2o_wave.types.VegaVisualization"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"VegaVisualization"),"(specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a Vega-lite plot for display inside a form.")),Object(c.b)("h4",{id:"static-methods-76"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-76"},"load ",Object(c.b)("a",{name:"h2o_wave.types.VegaVisualization.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_VegaVisualization__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"#h2o_wave.types.VegaVisualization"},"VegaVisualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-76"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the plot, if any.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the visualization. Defaults to 300px.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.specification",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"specification")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Vega-lite specification.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The width of the visualization. Defaults to 100%."))),Object(c.b)("h4",{id:"methods-76"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-76"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.VegaVisualization.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"visualization"},"Visualization ",Object(c.b)("a",{name:"h2o_wave.types.Visualization"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Visualization"),"(plot:\xa0",Object(c.b)("a",{title:"h2o_wave.types.Plot",href:"#h2o_wave.types.Plot"},"Plot"),", data:\xa0Union[dict,\xa0str], width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a visualization for display inside a form.")),Object(c.b)("h4",{id:"static-methods-77"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-77"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Visualization.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Visualization__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Visualization",href:"#h2o_wave.types.Visualization"},"Visualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-77"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Visualization.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this visualization.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the visualization. Defaults to 300px.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.plot",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot to be rendered in this visualization.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The width of the visualization. Defaults to 100%."))),Object(c.b)("h4",{id:"methods-77"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-77"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Visualization.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"widebarstatcard"},"WideBarStatCard ",Object(c.b)("a",{name:"h2o_wave.types.WideBarStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"WideBarStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.")),Object(c.b)("h4",{id:"static-methods-78"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-78"},"load ",Object(c.b)("a",{name:"h2o_wave.types.WideBarStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_WideBarStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.WideBarStatCard",href:"#h2o_wave.types.WideBarStatCard"},"WideBarStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-78"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress bar.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress bar, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-78"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-78"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.WideBarStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"widegaugestatcard"},"WideGaugeStatCard ",Object(c.b)("a",{name:"h2o_wave.types.WideGaugeStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"WideGaugeStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.")),Object(c.b)("h4",{id:"static-methods-79"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-79"},"load ",Object(c.b)("a",{name:"h2o_wave.types.WideGaugeStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_WideGaugeStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.WideGaugeStatCard",href:"#h2o_wave.types.WideGaugeStatCard"},"WideGaugeStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-79"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress gauge.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress gauge, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-79"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-79"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.WideGaugeStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"wideseriesstatcard"},"WideSeriesStatCard ",Object(c.b)("a",{name:"h2o_wave.types.WideSeriesStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"WideSeriesStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a series plot.")),Object(c.b)("h4",{id:"static-methods-80"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-80"},"load ",Object(c.b)("a",{name:"h2o_wave.types.WideSeriesStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_WideSeriesStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.WideSeriesStatCard",href:"#h2o_wave.types.WideSeriesStatCard"},"WideSeriesStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-80"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed below the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_category",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_category")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for x-axis values (ignored if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"area"),"; must be provided if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"interval"),"). Defaults to 'x'.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's color.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's curve style. Defaults to ",Object(c.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's data.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The type of plot. Defaults to ",Object(c.b)("code",null,"area"),". One of 'area', 'interval'.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for y-axis values.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_zero_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_zero_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The base value to use for each y-axis mark. Set this to ",Object(c.b)("code",null,"0")," if you want to pin the x-axis at ",Object(c.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-80"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-80"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.WideSeriesStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))))}l.isMDXComponent=!0},287:function(e,a,t){"use strict";t.d(a,"a",(function(){return p})),t.d(a,"b",(function(){return m}));var s=t(0),i=t.n(s);function c(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function b(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);a&&(s=s.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,s)}return t}function n(e){for(var a=1;a=0||(i[t]=e[t]);return i}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(s=0;s=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var o=i.a.createContext({}),l=function(e){var a=i.a.useContext(o),t=a;return e&&(t="function"==typeof e?e(a):n(n({},a),e)),t},p=function(e){var a=l(e.components);return i.a.createElement(o.Provider,{value:a},e.children)},r={inlineCode:"code",wrapper:function(e){var a=e.children;return i.a.createElement(i.a.Fragment,{},a)}},_=i.a.forwardRef((function(e,a){var t=e.components,s=e.mdxType,c=e.originalType,b=e.parentName,o=d(e,["components","mdxType","originalType","parentName"]),p=l(t),_=s,m=p["".concat(b,".").concat(_)]||p[_]||r[_]||c;return t?i.a.createElement(m,n(n({ref:a},o),{},{components:t})):i.a.createElement(m,n({ref:a},o))}));function m(e,a){var t=arguments,s=a&&a.mdxType;if("string"==typeof e||s){var c=t.length,b=new Array(c);b[0]=_;var n={};for(var d in a)hasOwnProperty.call(a,d)&&(n[d]=a[d]);n.originalType=e,n.mdxType="string"==typeof e?e:s,b[1]=n;for(var o=2;o',id:"breadcrumb",children:[]},{value:'BreadcrumbsCard ',id:"breadcrumbscard",children:[]},{value:'Button ',id:"button",children:[]},{value:'Buttons ',id:"buttons",children:[]},{value:'Checkbox ',id:"checkbox",children:[]},{value:'Checklist ',id:"checklist",children:[]},{value:'Choice ',id:"choice",children:[]},{value:'ChoiceGroup ',id:"choicegroup",children:[]},{value:'ColorPicker ',id:"colorpicker",children:[]},{value:'Combobox ',id:"combobox",children:[]},{value:'Command ',id:"command",children:[]},{value:'Component ',id:"component",children:[]},{value:'DatePicker ',id:"datepicker",children:[]},{value:'Dropdown ',id:"dropdown",children:[]},{value:'Expander ',id:"expander",children:[]},{value:'FileUpload ',id:"fileupload",children:[]},{value:'FlexCard ',id:"flexcard",children:[]},{value:'FormCard ',id:"formcard",children:[]},{value:'Frame ',id:"frame",children:[]},{value:'FrameCard ',id:"framecard",children:[]},{value:'GraphicsCard ',id:"graphicscard",children:[]},{value:'GridCard ',id:"gridcard",children:[]},{value:'HeaderCard ',id:"headercard",children:[]},{value:'IconTableCellType ',id:"icontablecelltype",children:[]},{value:'ImageCard ',id:"imagecard",children:[]},{value:'Label ',id:"label",children:[]},{value:'LargeBarStatCard ',id:"largebarstatcard",children:[]},{value:'LargeStatCard ',id:"largestatcard",children:[]},{value:'Link ',id:"link",children:[]},{value:'ListCard ',id:"listcard",children:[]},{value:'ListItem1Card ',id:"listitem1card",children:[]},{value:'Mark ',id:"mark",children:[]},{value:'MarkdownCard ',id:"markdowncard",children:[]},{value:'Markup ',id:"markup",children:[]},{value:'MarkupCard ',id:"markupcard",children:[]},{value:'MessageBar ',id:"messagebar",children:[]},{value:'MetaCard ',id:"metacard",children:[]},{value:'NavCard ',id:"navcard",children:[]},{value:'NavGroup ',id:"navgroup",children:[]},{value:'NavItem ',id:"navitem",children:[]},{value:'Picker ',id:"picker",children:[]},{value:'PixelArtCard ',id:"pixelartcard",children:[]},{value:'Plot ',id:"plot",children:[]},{value:'PlotCard ',id:"plotcard",children:[]},{value:'Progress ',id:"progress",children:[]},{value:'ProgressTableCellType ',id:"progresstablecelltype",children:[]},{value:'RangeSlider ',id:"rangeslider",children:[]},{value:'RepeatCard ',id:"repeatcard",children:[]},{value:'Separator ',id:"separator",children:[]},{value:'Slider ',id:"slider",children:[]},{value:'SmallSeriesStatCard ',id:"smallseriesstatcard",children:[]},{value:'SmallStatCard ',id:"smallstatcard",children:[]},{value:'Spinbox ',id:"spinbox",children:[]},{value:'Step ',id:"step",children:[]},{value:'Stepper ',id:"stepper",children:[]},{value:'Tab ',id:"tab",children:[]},{value:'TabCard ',id:"tabcard",children:[]},{value:'Table ',id:"table",children:[]},{value:'TableCellType ',id:"tablecelltype",children:[]},{value:'TableColumn ',id:"tablecolumn",children:[]},{value:'TableRow ',id:"tablerow",children:[]},{value:'Tabs ',id:"tabs",children:[]},{value:'TallGaugeStatCard ',id:"tallgaugestatcard",children:[]},{value:'TallSeriesStatCard ',id:"tallseriesstatcard",children:[]},{value:'Template ',id:"template",children:[]},{value:'TemplateCard ',id:"templatecard",children:[]},{value:'Text ',id:"text",children:[]},{value:'TextL ',id:"textl",children:[]},{value:'TextM ',id:"textm",children:[]},{value:'TextS ',id:"texts",children:[]},{value:'TextXl ',id:"textxl",children:[]},{value:'TextXs ',id:"textxs",children:[]},{value:'Textbox ',id:"textbox",children:[]},{value:'Toggle ',id:"toggle",children:[]},{value:'ToolbarCard ',id:"toolbarcard",children:[]},{value:'VegaCard ',id:"vegacard",children:[]},{value:'VegaVisualization ',id:"vegavisualization",children:[]},{value:'Visualization ',id:"visualization",children:[]},{value:'WideBarStatCard ',id:"widebarstatcard",children:[]},{value:'WideGaugeStatCard ',id:"widegaugestatcard",children:[]},{value:'WideSeriesStatCard ',id:"wideseriesstatcard",children:[]}]}],d={rightToc:o};function l(e){var a=e.components,t=Object(i.a)(e,["components"]);return Object(c.b)("wrapper",Object(s.a)({},d,t,{components:a,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"classes"},"Classes"),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"breadcrumb"},"Breadcrumb ",Object(c.b)("a",{name:"h2o_wave.types.Breadcrumb"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Breadcrumb"),"(name:\xa0str, label:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a breadcrumb for a ",Object(c.b)("code",null,Object(c.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),".")),Object(c.b)("h4",{id:"static-methods"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Breadcrumb.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Breadcrumb__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"#h2o_wave.types.Breadcrumb"},"Breadcrumb")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Breadcrumb.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The label to display.")),Object(c.b)("div",{id:"h2o_wave.types.Breadcrumb.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."))),Object(c.b)("h4",{id:"methods"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Breadcrumb.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"breadcrumbscard"},"BreadcrumbsCard ",Object(c.b)("a",{name:"h2o_wave.types.BreadcrumbsCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"BreadcrumbsCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"#h2o_wave.types.Breadcrumb"},"Breadcrumb"),"], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page\u2019s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.")),Object(c.b)("h4",{id:"static-methods-1"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-1"},"load ",Object(c.b)("a",{name:"h2o_wave.types.BreadcrumbsCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_BreadcrumbsCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-1"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.BreadcrumbsCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.BreadcrumbsCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.BreadcrumbsCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A list of ",Object(c.b)("code",null,Object(c.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"#h2o_wave.types.Breadcrumb"},"Breadcrumb"))," instances to display. See ",Object(c.b)("code",null,Object(c.b)("a",{title:"h2o_wave.ui.breadcrumb",href:"ui#h2o_wave.ui.breadcrumb"},"breadcrumb()"))))),Object(c.b)("h4",{id:"methods-1"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-1"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.BreadcrumbsCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"button"},"Button ",Object(c.b)("a",{name:"h2o_wave.types.Button"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Button"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, primary:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a button."),Object(c.b)("p",null,"Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog."),Object(c.b)("p",null,"When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements."),Object(c.b)("p",null,'Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.'),Object(c.b)("p",null,"While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.")),Object(c.b)("h4",{id:"static-methods-2"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-2"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Button.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Button__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Button",href:"#h2o_wave.types.Button"},"Button")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-2"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Button.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the label. Setting a caption renders a compound button.")),Object(c.b)("div",{id:"h2o_wave.types.Button.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the button should be disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Button.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the button.")),Object(c.b)("div",{id:"h2o_wave.types.Button.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the button should be rendered as link text and not a standard button.")),Object(c.b)("div",{id:"h2o_wave.types.Button.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.")),Object(c.b)("div",{id:"h2o_wave.types.Button.primary",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"primary")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the button should be rendered as the primary button in the set.")),Object(c.b)("div",{id:"h2o_wave.types.Button.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Button.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.")),Object(c.b)("div",{id:"h2o_wave.types.Button.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-2"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-2"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Button.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"buttons"},"Buttons ",Object(c.b)("a",{name:"h2o_wave.types.Buttons"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Buttons"),"(items:\xa0List[ForwardRef('",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component"),"')], justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a set of buttons to be layed out horizontally.")),Object(c.b)("h4",{id:"static-methods-3"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-3"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Buttons.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Buttons__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Buttons",href:"#h2o_wave.types.Buttons"},"Buttons")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-3"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Buttons.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The button in this set.")),Object(c.b)("div",{id:"h2o_wave.types.Buttons.justify",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"justify")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'.")),Object(c.b)("div",{id:"h2o_wave.types.Buttons.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Buttons.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-3"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-3"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Buttons.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"checkbox"},"Checkbox ",Object(c.b)("a",{name:"h2o_wave.types.Checkbox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Checkbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, indeterminate:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a checkbox."),Object(c.b)("p",null,"A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component."),Object(c.b)("p",null,"A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected."),Object(c.b)("p",null,"For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action."),Object(c.b)("p",null,"Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.")),Object(c.b)("h4",{id:"static-methods-4"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-4"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Checkbox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Checkbox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Checkbox",href:"#h2o_wave.types.Checkbox"},"Checkbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-4"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Checkbox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the checkbox is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.indeterminate",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"indeterminate")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the selection is indeterminate (neither selected nor unselected).")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the checkbox.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the checkbox value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if selected, False if unselected.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-4"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-4"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Checkbox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"checklist"},"Checklist ",Object(c.b)("a",{name:"h2o_wave.types.Checklist"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Checklist"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.")),Object(c.b)("h4",{id:"static-methods-5"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-5"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Checklist.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Checklist__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Checklist",href:"#h2o_wave.types.Checklist"},"Checklist")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-5"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Checklist.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed above the component.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the checklist value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected choices.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-5"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-5"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Checklist.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"choice"},"Choice ",Object(c.b)("a",{name:"h2o_wave.types.Choice"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Choice"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a choice for a checklist, choice group or dropdown.")),Object(c.b)("h4",{id:"static-methods-6"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-6"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Choice.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Choice__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-6"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Choice.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the checkbox is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Choice.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Choice.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-6"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-6"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Choice.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"choicegroup"},"ChoiceGroup ",Object(c.b)("a",{name:"h2o_wave.types.ChoiceGroup"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ChoiceGroup"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group."),Object(c.b)("p",null,"Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead."),Object(c.b)("p",null,'If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don\'t agree."')),Object(c.b)("h4",{id:"static-methods-7"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-7"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ChoiceGroup.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ChoiceGroup__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"#h2o_wave.types.ChoiceGroup"},"ChoiceGroup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-7"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is required.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the selection changes.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the selected choice.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-7"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-7"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ChoiceGroup.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"colorpicker"},"ColorPicker ",Object(c.b)("a",{name:"h2o_wave.types.ColorPicker"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ColorPicker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a color picker."),Object(c.b)("p",null,"A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.")),Object(c.b)("h4",{id:"static-methods-8"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-8"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ColorPicker.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ColorPicker__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ColorPicker",href:"#h2o_wave.types.ColorPicker"},"ColorPicker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-8"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A list of colors (CSS-compatible strings) to limit color choices to.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The selected color (CSS-compatible string)")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-8"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-8"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ColorPicker.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"combobox"},"Combobox ",Object(c.b)("a",{name:"h2o_wave.types.Combobox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Combobox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a combobox."),Object(c.b)("p",null,"A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI."),Object(c.b)("p",null,"When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.")),Object(c.b)("h4",{id:"static-methods-9"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-9"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Combobox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Combobox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Combobox",href:"#h2o_wave.types.Combobox"},"Combobox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-9"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Combobox.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.error",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"error")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed as an error below the text box.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the selected choice.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-9"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-9"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Combobox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"command"},"Command ",Object(c.b)("a",{name:"h2o_wave.types.Command"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Command"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[ForwardRef('",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"')],\xa0NoneType]\xa0=\xa0None, data:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a command."),Object(c.b)("p",null,"Commands are typically displayed as context menu items or toolbar button.")),Object(c.b)("h4",{id:"static-methods-10"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-10"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Command.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Command__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-10"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Command.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption for this command (typically a tooltip).")),Object(c.b)("div",{id:"h2o_wave.types.Command.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data associated with this command, if any.")),Object(c.b)("div",{id:"h2o_wave.types.Command.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon to be displayed for this command.")),Object(c.b)("div",{id:"h2o_wave.types.Command.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Sub-commands, if any")),Object(c.b)("div",{id:"h2o_wave.types.Command.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed for this command.")),Object(c.b)("div",{id:"h2o_wave.types.Command.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed."))),Object(c.b)("h4",{id:"methods-10"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-10"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Command.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"component"},"Component ",Object(c.b)("a",{name:"h2o_wave.types.Component"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Component"),"(text:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Text",href:"#h2o_wave.types.Text"},"Text"),",\xa0NoneType]\xa0=\xa0None, text_xl:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextXl",href:"#h2o_wave.types.TextXl"},"TextXl"),",\xa0NoneType]\xa0=\xa0None, text_l:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextL",href:"#h2o_wave.types.TextL"},"TextL"),",\xa0NoneType]\xa0=\xa0None, text_m:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextM",href:"#h2o_wave.types.TextM"},"TextM"),",\xa0NoneType]\xa0=\xa0None, text_s:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextS",href:"#h2o_wave.types.TextS"},"TextS"),",\xa0NoneType]\xa0=\xa0None, text_xs:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextXs",href:"#h2o_wave.types.TextXs"},"TextXs"),",\xa0NoneType]\xa0=\xa0None, label:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Label",href:"#h2o_wave.types.Label"},"Label"),",\xa0NoneType]\xa0=\xa0None, separator:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Separator",href:"#h2o_wave.types.Separator"},"Separator"),",\xa0NoneType]\xa0=\xa0None, progress:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Progress",href:"#h2o_wave.types.Progress"},"Progress"),",\xa0NoneType]\xa0=\xa0None, message_bar:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.MessageBar",href:"#h2o_wave.types.MessageBar"},"MessageBar"),",\xa0NoneType]\xa0=\xa0None, textbox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Textbox",href:"#h2o_wave.types.Textbox"},"Textbox"),",\xa0NoneType]\xa0=\xa0None, checkbox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Checkbox",href:"#h2o_wave.types.Checkbox"},"Checkbox"),",\xa0NoneType]\xa0=\xa0None, toggle:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Toggle",href:"#h2o_wave.types.Toggle"},"Toggle"),",\xa0NoneType]\xa0=\xa0None, choice_group:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"#h2o_wave.types.ChoiceGroup"},"ChoiceGroup"),",\xa0NoneType]\xa0=\xa0None, checklist:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Checklist",href:"#h2o_wave.types.Checklist"},"Checklist"),",\xa0NoneType]\xa0=\xa0None, dropdown:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Dropdown",href:"#h2o_wave.types.Dropdown"},"Dropdown"),",\xa0NoneType]\xa0=\xa0None, combobox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Combobox",href:"#h2o_wave.types.Combobox"},"Combobox"),",\xa0NoneType]\xa0=\xa0None, slider:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Slider",href:"#h2o_wave.types.Slider"},"Slider"),",\xa0NoneType]\xa0=\xa0None, spinbox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Spinbox",href:"#h2o_wave.types.Spinbox"},"Spinbox"),",\xa0NoneType]\xa0=\xa0None, date_picker:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.DatePicker",href:"#h2o_wave.types.DatePicker"},"DatePicker"),",\xa0NoneType]\xa0=\xa0None, color_picker:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.ColorPicker",href:"#h2o_wave.types.ColorPicker"},"ColorPicker"),",\xa0NoneType]\xa0=\xa0None, button:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Button",href:"#h2o_wave.types.Button"},"Button"),",\xa0NoneType]\xa0=\xa0None, buttons:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Buttons",href:"#h2o_wave.types.Buttons"},"Buttons"),",\xa0NoneType]\xa0=\xa0None, file_upload:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.FileUpload",href:"#h2o_wave.types.FileUpload"},"FileUpload"),",\xa0NoneType]\xa0=\xa0None, table:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Table",href:"#h2o_wave.types.Table"},"Table"),",\xa0NoneType]\xa0=\xa0None, link:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Link",href:"#h2o_wave.types.Link"},"Link"),",\xa0NoneType]\xa0=\xa0None, tabs:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Tabs",href:"#h2o_wave.types.Tabs"},"Tabs"),",\xa0NoneType]\xa0=\xa0None, expander:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Expander",href:"#h2o_wave.types.Expander"},"Expander"),",\xa0NoneType]\xa0=\xa0None, frame:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Frame",href:"#h2o_wave.types.Frame"},"Frame"),",\xa0NoneType]\xa0=\xa0None, markup:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Markup",href:"#h2o_wave.types.Markup"},"Markup"),",\xa0NoneType]\xa0=\xa0None, template:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Template",href:"#h2o_wave.types.Template"},"Template"),",\xa0NoneType]\xa0=\xa0None, picker:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Picker",href:"#h2o_wave.types.Picker"},"Picker"),",\xa0NoneType]\xa0=\xa0None, range_slider:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.RangeSlider",href:"#h2o_wave.types.RangeSlider"},"RangeSlider"),",\xa0NoneType]\xa0=\xa0None, stepper:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Stepper",href:"#h2o_wave.types.Stepper"},"Stepper"),",\xa0NoneType]\xa0=\xa0None, visualization:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Visualization",href:"#h2o_wave.types.Visualization"},"Visualization"),",\xa0NoneType]\xa0=\xa0None, vega_visualization:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"#h2o_wave.types.VegaVisualization"},"VegaVisualization"),",\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a component.")),Object(c.b)("h4",{id:"static-methods-11"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-11"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Component.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Component__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-11"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Component.button",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"button")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Button.")),Object(c.b)("div",{id:"h2o_wave.types.Component.buttons",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"buttons")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Button set.")),Object(c.b)("div",{id:"h2o_wave.types.Component.checkbox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"checkbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Checkbox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.checklist",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"checklist")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Checklist.")),Object(c.b)("div",{id:"h2o_wave.types.Component.choice_group",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choice_group")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Choice group.")),Object(c.b)("div",{id:"h2o_wave.types.Component.color_picker",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color_picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Color picker.")),Object(c.b)("div",{id:"h2o_wave.types.Component.combobox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"combobox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Combobox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.date_picker",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"date_picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Date picker.")),Object(c.b)("div",{id:"h2o_wave.types.Component.dropdown",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"dropdown")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Dropdown.")),Object(c.b)("div",{id:"h2o_wave.types.Component.expander",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"expander")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Expander.")),Object(c.b)("div",{id:"h2o_wave.types.Component.file_upload",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"file_upload")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"File upload.")),Object(c.b)("div",{id:"h2o_wave.types.Component.frame",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"frame")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Frame.")),Object(c.b)("div",{id:"h2o_wave.types.Component.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label.")),Object(c.b)("div",{id:"h2o_wave.types.Component.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Link.")),Object(c.b)("div",{id:"h2o_wave.types.Component.markup",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"markup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Markup")),Object(c.b)("div",{id:"h2o_wave.types.Component.message_bar",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"message_bar")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Message bar.")),Object(c.b)("div",{id:"h2o_wave.types.Component.picker",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Picker.")),Object(c.b)("div",{id:"h2o_wave.types.Component.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Progress bar.")),Object(c.b)("div",{id:"h2o_wave.types.Component.range_slider",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"range_slider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Range Slider.")),Object(c.b)("div",{id:"h2o_wave.types.Component.separator",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"separator")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Separator.")),Object(c.b)("div",{id:"h2o_wave.types.Component.slider",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"slider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Slider.")),Object(c.b)("div",{id:"h2o_wave.types.Component.spinbox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"spinbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.stepper",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stepper")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Stepper.")),Object(c.b)("div",{id:"h2o_wave.types.Component.table",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"table")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Table.")),Object(c.b)("div",{id:"h2o_wave.types.Component.tabs",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tabs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tabs.")),Object(c.b)("div",{id:"h2o_wave.types.Component.template",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"template")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Template")),Object(c.b)("div",{id:"h2o_wave.types.Component.text",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_l",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_l")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Large sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_m",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_m")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Medium sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_s",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_s")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Small sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_xl",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_xl")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Extra-large sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_xs",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_xs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Extra-small sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.textbox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"textbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Textbox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.toggle",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"toggle")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Toggle.")),Object(c.b)("div",{id:"h2o_wave.types.Component.vega_visualization",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"vega_visualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Vega-lite Visualization.")),Object(c.b)("div",{id:"h2o_wave.types.Component.visualization",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Visualization."))),Object(c.b)("h4",{id:"methods-11"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-11"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Component.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"datepicker"},"DatePicker ",Object(c.b)("a",{name:"h2o_wave.types.DatePicker"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"DatePicker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a date picker."),Object(c.b)("p",null,"A date picker allows a user to pick a date value.")),Object(c.b)("h4",{id:"static-methods-12"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-12"},"load ",Object(c.b)("a",{name:"h2o_wave.types.DatePicker.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_DatePicker__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.DatePicker",href:"#h2o_wave.types.DatePicker"},"DatePicker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-12"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.DatePicker.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the datepicker value changes.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The date value in YYYY-MM-DD format.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-12"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-12"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.DatePicker.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"dropdown"},"Dropdown ",Object(c.b)("a",{name:"h2o_wave.types.Dropdown"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Dropdown"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a dropdown."),Object(c.b)("p",null,"A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible."),Object(c.b)("p",null,"To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value."),Object(c.b)("p",null,"Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.")),Object(c.b)("h4",{id:"static-methods-13"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-13"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Dropdown.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Dropdown__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Dropdown",href:"#h2o_wave.types.Dropdown"},"Dropdown")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-13"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Dropdown.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this is a required field.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the dropdown value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the selected choice.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected choices. If this parameter is set, multiple selections will be allowed.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-13"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-13"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Dropdown.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"expander"},"Expander ",Object(c.b)("a",{name:"h2o_wave.types.Expander"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Expander"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, expanded:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[ForwardRef('",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component"),"')],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates a new expander."),Object(c.b)("p",null,"Expanders can be used to show or hide a group of related components.")),Object(c.b)("h4",{id:"static-methods-14"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-14"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Expander.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Expander__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Expander",href:"#h2o_wave.types.Expander"},"Expander")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-14"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Expander.expanded",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"expanded")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if expanded, False if collapsed.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"List of components to be hideable by the expander.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the expander.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-14"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-14"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Expander.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"fileupload"},"FileUpload ",Object(c.b)("a",{name:"h2o_wave.types.FileUpload"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FileUpload"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, file_extensions:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_file_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.")),Object(c.b)("h4",{id:"static-methods-15"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-15"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FileUpload.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FileUpload__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FileUpload",href:"#h2o_wave.types.FileUpload"},"FileUpload")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-15"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FileUpload.file_extensions",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"file_extensions")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"List of allowed file extensions, e.g. ",Object(c.b)("code",null,"pdf"),", ",Object(c.b)("code",null,"docx"),", etc.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the file upload, e.g. '400px', '50%', etc.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.max_file_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_file_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Maximum allowed size (Mb) per file. Defaults to no limit.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.max_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Maximum allowed size (Mb) for all files combined. Defaults to no limit.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.multiple",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"multiple")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should allow multiple files to be uploaded.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-15"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-15"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FileUpload.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"flexcard"},"FlexCard ",Object(c.b)("a",{name:"h2o_wave.types.FlexCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FlexCard"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], direction:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, wrap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.")),Object(c.b)("h4",{id:"static-methods-16"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-16"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FlexCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FlexCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FlexCard",href:"#h2o_wave.types.FlexCard"},"FlexCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-16"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FlexCard.align",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"align")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.direction",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"direction")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Layout direction. One of 'horizontal', 'vertical'.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.item_props",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_props")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card properties.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.item_view",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_view")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card type.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.justify",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"justify")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.wrap",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"wrap")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'."))),Object(c.b)("h4",{id:"methods-16"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-16"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FlexCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"formcard"},"FormCard ",Object(c.b)("a",{name:"h2o_wave.types.FormCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FormCard"),"(box:\xa0str, items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component"),"],\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a form.")),Object(c.b)("h4",{id:"static-methods-17"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-17"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FormCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FormCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FormCard",href:"#h2o_wave.types.FormCard"},"FormCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-17"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FormCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.FormCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FormCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The components in this form."))),Object(c.b)("h4",{id:"methods-17"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-17"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FormCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"frame"},"Frame ",Object(c.b)("a",{name:"h2o_wave.types.Frame"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Frame"),"(path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a new inline frame (an ",Object(c.b)("code",null,"iframe"),").")),Object(c.b)("h4",{id:"static-methods-18"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-18"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Frame.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Frame__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Frame",href:"#h2o_wave.types.Frame"},"Frame")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-18"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Frame.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content of the page. A string containing ",Object(c.b)("code",null,"..."),".")),Object(c.b)("div",{id:"h2o_wave.types.Frame.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the frame, e.g. ",Object(c.b)("code",null,"200px"),", ",Object(c.b)("code",null,"50%"),", etc. Defaults to ",Object(c.b)("code",null,"150px"),".")),Object(c.b)("div",{id:"h2o_wave.types.Frame.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Frame.path",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"path")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The path or URL of the web page, e.g. ",Object(c.b)("code",null,"/foo.html")," or ",Object(c.b)("code",null,"http://example.com/foo.html"))),Object(c.b)("div",{id:"h2o_wave.types.Frame.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true.")),Object(c.b)("div",{id:"h2o_wave.types.Frame.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The width of the frame, e.g. ",Object(c.b)("code",null,"200px"),", ",Object(c.b)("code",null,"50%"),", etc. Defaults to ",Object(c.b)("code",null,"100%"),"."))),Object(c.b)("h4",{id:"methods-18"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-18"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Frame.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"framecard"},"FrameCard ",Object(c.b)("a",{name:"h2o_wave.types.FrameCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FrameCard"),"(box:\xa0str, title:\xa0str, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render a card containing a HTML page inside an inline frame (an ",Object(c.b)("code",null,"iframe"),")."),Object(c.b)("p",null,"Either a path or content can be provided as arguments.")),Object(c.b)("h4",{id:"static-methods-19"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-19"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FrameCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FrameCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FrameCard",href:"#h2o_wave.types.FrameCard"},"FrameCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-19"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FrameCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content of the page. A string containing ",Object(c.b)("code",null,"..."))),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.path",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"path")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The path or URL of the web page, e.g. ",Object(c.b)("code",null,"/foo.html")," or ",Object(c.b)("code",null,"http://example.com/foo.html"))),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-19"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-19"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FrameCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"graphicscard"},"GraphicsCard ",Object(c.b)("a",{name:"h2o_wave.types.GraphicsCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"GraphicsCard"),"(box:\xa0str, view_box:\xa0str, stage:\xa0Union[List[dict],\xa0str,\xa0NoneType]\xa0=\xa0None, scene:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card for displaying vector graphics.")),Object(c.b)("h4",{id:"static-methods-20"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-20"},"load ",Object(c.b)("a",{name:"h2o_wave.types.GraphicsCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_GraphicsCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"#h2o_wave.types.GraphicsCard"},"GraphicsCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-20"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The displayed height of the rectangular viewport. (Not the height of its coordinate system.)")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.scene",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"scene")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Foreground layer for rendering dynamic SVG elements.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.stage",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stage")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Background layer for rendering static SVG elements. Must be packed to conserve memory.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.view_box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"view_box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: ",Object(c.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox"))),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The displayed width of the rectangular viewport. (Not the width of its coordinate system.)"))),Object(c.b)("h4",{id:"methods-20"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-20"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.GraphicsCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"gridcard"},"GridCard ",Object(c.b)("a",{name:"h2o_wave.types.GridCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"GridCard"),"(box:\xa0str, title:\xa0str, cells:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("h4",{id:"static-methods-21"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-21"},"load ",Object(c.b)("a",{name:"h2o_wave.types.GridCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_GridCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.GridCard",href:"#h2o_wave.types.GridCard"},"GridCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-21"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.GridCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.cells",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"cells")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE."))),Object(c.b)("h4",{id:"methods-21"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-21"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.GridCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"headercard"},"HeaderCard ",Object(c.b)("a",{name:"h2o_wave.types.HeaderCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"HeaderCard"),"(box:\xa0str, title:\xa0str, subtitle:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render a card containing a HTML page inside an inline frame (iframe)."),Object(c.b)("p",null,"Either a path or content can be provided as arguments.")),Object(c.b)("h4",{id:"static-methods-22"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-22"},"load ",Object(c.b)("a",{name:"h2o_wave.types.HeaderCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_HeaderCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.HeaderCard",href:"#h2o_wave.types.HeaderCard"},"HeaderCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-22"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon type, displayed to the left.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.icon_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon's color.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.subtitle",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"subtitle")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The subtitle, displayed below the title.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title."))),Object(c.b)("h4",{id:"methods-22"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-22"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.HeaderCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"icontablecelltype"},"IconTableCellType ",Object(c.b)("a",{name:"h2o_wave.types.IconTableCellType"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"IconTableCellType"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.")),Object(c.b)("h4",{id:"static-methods-23"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-23"},"load ",Object(c.b)("a",{name:"h2o_wave.types.IconTableCellType.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_IconTableCellType__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"#h2o_wave.types.IconTableCellType"},"IconTableCellType")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-23"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.IconTableCellType.color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Icon color.")),Object(c.b)("div",{id:"h2o_wave.types.IconTableCellType.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-23"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-23"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.IconTableCellType.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"imagecard"},"ImageCard ",Object(c.b)("a",{name:"h2o_wave.types.ImageCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ImageCard"),"(box:\xa0str, title:\xa0str, type:\xa0str, image:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card that displays a base64-encoded image.")),Object(c.b)("h4",{id:"static-methods-24"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-24"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ImageCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ImageCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ImageCard",href:"#h2o_wave.types.ImageCard"},"ImageCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-24"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ImageCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.image",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"image")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Image data, base64-encoded.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The image MIME subtype. One of ",Object(c.b)("code",null,"apng"),", ",Object(c.b)("code",null,"bmp"),", ",Object(c.b)("code",null,"gif"),", ",Object(c.b)("code",null,"x-icon"),", ",Object(c.b)("code",null,"jpeg"),", ",Object(c.b)("code",null,"png"),", ",Object(c.b)("code",null,"webp"),"."))),Object(c.b)("h4",{id:"methods-24"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-24"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ImageCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"label"},"Label ",Object(c.b)("a",{name:"h2o_wave.types.Label"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Label"),"(label:\xa0str, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a label."),Object(c.b)("p",null,"Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component\u2019s purpose.")),Object(c.b)("h4",{id:"static-methods-25"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-25"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Label.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Label__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Label",href:"#h2o_wave.types.Label"},"Label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-25"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Label.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the label should be disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Label.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the label.")),Object(c.b)("div",{id:"h2o_wave.types.Label.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Label.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the field is required.")),Object(c.b)("div",{id:"h2o_wave.types.Label.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Label.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-25"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-25"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Label.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"largebarstatcard"},"LargeBarStatCard ",Object(c.b)("a",{name:"h2o_wave.types.LargeBarStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"LargeBarStatCard"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, value_caption:\xa0str, aux_value_caption:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.")),Object(c.b)("h4",{id:"static-methods-26"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-26"},"load ",Object(c.b)("a",{name:"h2o_wave.types.LargeBarStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_LargeBarStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.LargeBarStatCard",href:"#h2o_wave.types.LargeBarStatCard"},"LargeBarStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-26"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value, typically a target value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.aux_value_caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value_caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the auxiliary value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's caption.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress bar.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress bar, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.value_caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value_caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the primary value."))),Object(c.b)("h4",{id:"methods-26"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-26"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.LargeBarStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"largestatcard"},"LargeStatCard ",Object(c.b)("a",{name:"h2o_wave.types.LargeStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"LargeStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, caption:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a stat card displaying a primary value, an auxiliary value and a caption.")),Object(c.b)("h4",{id:"static-methods-27"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-27"},"load ",Object(c.b)("a",{name:"h2o_wave.types.LargeStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_LargeStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.LargeStatCard",href:"#h2o_wave.types.LargeStatCard"},"LargeStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-27"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-27"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-27"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.LargeStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"link"},"Link ",Object(c.b)("a",{name:"h2o_wave.types.Link"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Link"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, download:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, button:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a hyperlink."),Object(c.b)("p",null,"Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a ",Object(c.b)("code",null,"/")," and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.")),Object(c.b)("h4",{id:"static-methods-28"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-28"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Link.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Link__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Link",href:"#h2o_wave.types.Link"},"Link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-28"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Link.button",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"button")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the link should be rendered as a button.")),Object(c.b)("div",{id:"h2o_wave.types.Link.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the link should be disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Link.download",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"download")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the link should be used for file download.")),Object(c.b)("div",{id:"h2o_wave.types.Link.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text to be displayed. If blank, the ",Object(c.b)("code",null,"path")," is used as the label.")),Object(c.b)("div",{id:"h2o_wave.types.Link.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Link.path",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"path")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The path or URL to link to.")),Object(c.b)("div",{id:"h2o_wave.types.Link.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Link.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-28"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-28"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Link.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"listcard"},"ListCard ",Object(c.b)("a",{name:"h2o_wave.types.ListCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ListCard"),"(box:\xa0str, title:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).")),Object(c.b)("h4",{id:"static-methods-29"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-29"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ListCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ListCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ListCard",href:"#h2o_wave.types.ListCard"},"ListCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-29"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ListCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.item_props",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_props")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card properties.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.item_view",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_view")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card type.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-29"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-29"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ListCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"listitem1card"},"ListItem1Card ",Object(c.b)("a",{name:"h2o_wave.types.ListItem1Card"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ListItem1Card"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("h4",{id:"static-methods-30"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-30"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ListItem1Card.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ListItem1Card__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ListItem1Card",href:"#h2o_wave.types.ListItem1Card"},"ListItem1Card")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-30"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE."))),Object(c.b)("h4",{id:"methods-30"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-30"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ListItem1Card.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"mark"},"Mark ",Object(c.b)("a",{name:"h2o_wave.types.Mark"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Mark"),"(coord:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, x_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, y_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_domain:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, shape:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, shape_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, size:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, size_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stack:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, dodge:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_offset:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_x:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_y:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_rotation:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_position:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_overlap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_weight:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_line_height:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.")),Object(c.b)("h4",{id:"static-methods-31"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-31"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Mark.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Mark__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Mark",href:"#h2o_wave.types.Mark"},"Mark")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-31"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Mark.color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark color field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.color_domain",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color_domain")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The unique values in the data (labels or categories or classes) to map colors to, e.g. ",Object(c.b)("code",null,"['high', 'medium', 'low']"),". If this is not provided, the unique values are automatically inferred from the ",Object(c.b)("code",null,"color")," attribute.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.color_range",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color_range")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark color range for multi-series plots. A string containing space-separated colors, e.g. ",Object(c.b)("code",null,"'#fee8c8 #fdbb84 #e34a33'"))),Object(c.b)("div",{id:"h2o_wave.types.Mark.coord",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"coord")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Coordinate system. ",Object(c.b)("code",null,"rect")," is synonymous to ",Object(c.b)("code",null,"cartesian"),". ",Object(c.b)("code",null,"theta")," is transposed ",Object(c.b)("code",null,"polar"),". One of 'rect', 'cartesian', 'polar', 'theta', 'helix'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Curve type for ",Object(c.b)("code",null,"line")," and ",Object(c.b)("code",null,"area")," mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.dodge",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"dodge")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Field to dodge marks by, or 'auto' to infer.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.fill_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"fill_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark fill color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.fill_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"fill_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark fill opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_align",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_align")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label text alignment. One of 'left', 'right', 'center', 'start', 'end'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_fill_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_fill_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label fill color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_fill_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_fill_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label fill opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_font_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_font_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label font size.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_font_weight",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_font_weight")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label font weight.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_line_height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_line_height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label line height.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_offset",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_offset")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Distance between label and mark.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_offset_x",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_offset_x")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Horizontal distance between label and mark.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_offset_y",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_offset_y")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Vertical distance between label and mark.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_overlap",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_overlap")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_position",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_position")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_rotation",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_rotation")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_stroke_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_stroke_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label stroke color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_stroke_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_stroke_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label stroke opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_stroke_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_stroke_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label stroke size (line width or pen thickness).")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_dash",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_dash")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke size (line width or pen thickness).")),Object(c.b)("div",{id:"h2o_wave.types.Mark.shape",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"shape")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark shape field or value for ",Object(c.b)("code",null,"point")," mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.shape_range",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"shape_range")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark shape range for multi-series plots using ",Object(c.b)("code",null,"point")," mark types. A string containing space-separated shapes, e.g. ",Object(c.b)("code",null,"'circle square diamond'"))),Object(c.b)("div",{id:"h2o_wave.types.Mark.size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark size field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.size_range",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"size_range")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark size range. A string containing space-separated integers, e.g. ",Object(c.b)("code",null,"'4 30'"))),Object(c.b)("div",{id:"h2o_wave.types.Mark.stack",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stack")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Field to stack marks by, or 'auto' to infer.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_dash",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_dash")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke size.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x0",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x0")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X base field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x1",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x1")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X bin lower bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x2",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x2")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X bin upper bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis scale maximum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis scale minimum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_nice",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_nice")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Whether to nice X axis scale ticks.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_scale",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_scale")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis title.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y0",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y0")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y base field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y1",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y1")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y bin lower bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y2",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y2")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y bin upper bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis scale maximum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis scale minimum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_nice",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_nice")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Whether to nice Y axis scale ticks.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_scale",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_scale")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis title."))),Object(c.b)("h4",{id:"methods-31"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-31"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Mark.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"markdowncard"},"MarkdownCard ",Object(c.b)("a",{name:"h2o_wave.types.MarkdownCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MarkdownCard"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card that renders Markdown content."),Object(c.b)("p",null,"Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.")),Object(c.b)("h4",{id:"static-methods-32"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-32"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MarkdownCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MarkdownCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MarkdownCard",href:"#h2o_wave.types.MarkdownCard"},"MarkdownCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-32"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The markdown content. Supports Github Flavored Markdown (GFM): ",Object(c.b)("a",{href:"https://guides.github.com/features/mastering-markdown/"},"https://guides.github.com/features/mastering-markdown/"))),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Additional data for the card.")),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-32"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-32"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MarkdownCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"markup"},"Markup ",Object(c.b)("a",{name:"h2o_wave.types.Markup"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Markup"),"(content:\xa0str, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render HTML content.")),Object(c.b)("h4",{id:"static-methods-33"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-33"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Markup.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Markup__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Markup",href:"#h2o_wave.types.Markup"},"Markup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-33"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Markup.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content.")),Object(c.b)("div",{id:"h2o_wave.types.Markup.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Markup.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-33"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-33"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Markup.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"markupcard"},"MarkupCard ",Object(c.b)("a",{name:"h2o_wave.types.MarkupCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MarkupCard"),"(box:\xa0str, title:\xa0str, content:\xa0str, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render HTML content.")),Object(c.b)("h4",{id:"static-methods-34"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-34"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MarkupCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MarkupCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MarkupCard",href:"#h2o_wave.types.MarkupCard"},"MarkupCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-34"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content.")),Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-34"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-34"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MarkupCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"messagebar"},"MessageBar ",Object(c.b)("a",{name:"h2o_wave.types.MessageBar"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MessageBar"),"(type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, text:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a message bar."),Object(c.b)("p",null,"A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.")),Object(c.b)("h4",{id:"static-methods-35"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-35"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MessageBar.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MessageBar__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MessageBar",href:"#h2o_wave.types.MessageBar"},"MessageBar")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-35"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MessageBar.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MessageBar.text",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the message bar.")),Object(c.b)("div",{id:"h2o_wave.types.MessageBar.type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'.")),Object(c.b)("div",{id:"h2o_wave.types.MessageBar.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-35"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-35"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MessageBar.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"metacard"},"MetaCard ",Object(c.b)("a",{name:"h2o_wave.types.MetaCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MetaCard"),"(box:\xa0str, title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, refresh:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, notification:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, redirect:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Represents page-global state."),Object(c.b)("p",null,"This card is invisible. It is used to control attributes of the active page.")),Object(c.b)("h4",{id:"static-methods-36"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-36"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MetaCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MetaCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MetaCard",href:"#h2o_wave.types.MetaCard"},"MetaCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-36"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MetaCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.notification",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"notification")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Display a desktop notification to the user.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.redirect",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"redirect")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Redirect the page to a new URL.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.refresh",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"refresh")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title of the page."))),Object(c.b)("h4",{id:"methods-36"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-36"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MetaCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"navcard"},"NavCard ",Object(c.b)("a",{name:"h2o_wave.types.NavCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"NavCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.NavGroup",href:"#h2o_wave.types.NavGroup"},"NavGroup"),"], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing a navigation pane.")),Object(c.b)("h4",{id:"static-methods-37"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-37"},"load ",Object(c.b)("a",{name:"h2o_wave.types.NavCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_NavCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.NavCard",href:"#h2o_wave.types.NavCard"},"NavCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-37"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.NavCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.NavCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.NavCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The navigation groups contained in this pane."))),Object(c.b)("h4",{id:"methods-37"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-37"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.NavCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"navgroup"},"NavGroup ",Object(c.b)("a",{name:"h2o_wave.types.NavGroup"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"NavGroup"),"(label:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.NavItem",href:"#h2o_wave.types.NavItem"},"NavItem"),"])"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a group of navigation items.")),Object(c.b)("h4",{id:"static-methods-38"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-38"},"load ",Object(c.b)("a",{name:"h2o_wave.types.NavGroup.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_NavGroup__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.NavGroup",href:"#h2o_wave.types.NavGroup"},"NavGroup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-38"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.NavGroup.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The navigation items contained in this group.")),Object(c.b)("div",{id:"h2o_wave.types.NavGroup.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The label to display for this group."))),Object(c.b)("h4",{id:"methods-38"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-38"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.NavGroup.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"navitem"},"NavItem ",Object(c.b)("a",{name:"h2o_wave.types.NavItem"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"NavItem"),"(name:\xa0str, label:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a navigation item.")),Object(c.b)("h4",{id:"static-methods-39"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-39"},"load ",Object(c.b)("a",{name:"h2o_wave.types.NavItem.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_NavItem__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.NavItem",href:"#h2o_wave.types.NavItem"},"NavItem")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-39"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.NavItem.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The label to display.")),Object(c.b)("div",{id:"h2o_wave.types.NavItem.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."))),Object(c.b)("h4",{id:"methods-39"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-39"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.NavItem.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"picker"},"Picker ",Object(c.b)("a",{name:"h2o_wave.types.Picker"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Picker"),"(name:\xa0str, choices:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"], label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_choices:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.")),Object(c.b)("h4",{id:"static-methods-40"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-40"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Picker.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Picker__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Picker",href:"#h2o_wave.types.Picker"},"Picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-40"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Picker.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Controls whether the picker should be disabled or not.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed above the component.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.max_choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Maximum number of selectable choices. Defaults to no limit.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected choices.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-40"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-40"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Picker.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"pixelartcard"},"PixelArtCard ",Object(c.b)("a",{name:"h2o_wave.types.PixelArtCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"PixelArtCard"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card displaying a collaborative Pixel art tool, just for kicks.")),Object(c.b)("h4",{id:"static-methods-41"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-41"},"load ",Object(c.b)("a",{name:"h2o_wave.types.PixelArtCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_PixelArtCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.PixelArtCard",href:"#h2o_wave.types.PixelArtCard"},"PixelArtCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-41"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-41"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-41"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.PixelArtCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"plot"},"Plot ",Object(c.b)("a",{name:"h2o_wave.types.Plot"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Plot"),"(marks:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Mark",href:"#h2o_wave.types.Mark"},"Mark"),"])"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a plot. A plot is composed of one or more graphical mark layers.")),Object(c.b)("h4",{id:"static-methods-42"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-42"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Plot.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Plot__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Plot",href:"#h2o_wave.types.Plot"},"Plot")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-42"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Plot.marks",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"marks")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The graphical mark layers contained in this plot."))),Object(c.b)("h4",{id:"methods-42"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-42"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Plot.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"plotcard"},"PlotCard ",Object(c.b)("a",{name:"h2o_wave.types.PlotCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"PlotCard"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], plot:\xa0",Object(c.b)("a",{title:"h2o_wave.types.Plot",href:"#h2o_wave.types.Plot"},"Plot"),", commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card displaying a plot.")),Object(c.b)("h4",{id:"static-methods-43"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-43"},"load ",Object(c.b)("a",{name:"h2o_wave.types.PlotCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_PlotCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.PlotCard",href:"#h2o_wave.types.PlotCard"},"PlotCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-43"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.PlotCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.plot",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot to be displayed in this card.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-43"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-43"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.PlotCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"progress"},"Progress ",Object(c.b)("a",{name:"h2o_wave.types.Progress"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Progress"),"(label:\xa0str, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a progress bar."),Object(c.b)("p",null,"Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing."),Object(c.b)("p",null,"Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]"),Object(c.b)("p",null,"Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid \u201crewinding\u201d the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.")),Object(c.b)("h4",{id:"static-methods-44"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-44"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Progress.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Progress__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Progress",href:"#h2o_wave.types.Progress"},"Progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-44"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Progress.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed below the bar.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed above the bar.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-44"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-44"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Progress.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"progresstablecelltype"},"ProgressTableCellType ",Object(c.b)("a",{name:"h2o_wave.types.ProgressTableCellType"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ProgressTableCellType"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.")),Object(c.b)("h4",{id:"static-methods-45"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-45"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ProgressTableCellType.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ProgressTableCellType__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-45"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ProgressTableCellType.color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Color of the progress arc.")),Object(c.b)("div",{id:"h2o_wave.types.ProgressTableCellType.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-45"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-45"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ProgressTableCellType.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"rangeslider"},"RangeSlider ",Object(c.b)("a",{name:"h2o_wave.types.RangeSlider"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"RangeSlider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, min_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a range slider."),Object(c.b)("p",null,"A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.")),Object(c.b)("h4",{id:"static-methods-46"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-46"},"load ",Object(c.b)("a",{name:"h2o_wave.types.RangeSlider.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_RangeSlider__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.RangeSlider",href:"#h2o_wave.types.RangeSlider"},"RangeSlider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-46"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum value of the slider. Defaults to 100.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.max_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The upper bound of the selected range.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum value of the slider. Defaults to 0.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.min_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The lower bound of the selected range.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.step",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The difference between two adjacent values of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the slider value changes.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-46"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-46"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.RangeSlider.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"repeatcard"},"RepeatCard ",Object(c.b)("a",{name:"h2o_wave.types.RepeatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"RepeatCard"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards.")),Object(c.b)("h4",{id:"static-methods-47"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-47"},"load ",Object(c.b)("a",{name:"h2o_wave.types.RepeatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_RepeatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.RepeatCard",href:"#h2o_wave.types.RepeatCard"},"RepeatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-47"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.item_props",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_props")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card properties.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.item_view",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_view")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE."))),Object(c.b)("h4",{id:"methods-47"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-47"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.RepeatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"separator"},"Separator ",Object(c.b)("a",{name:"h2o_wave.types.Separator"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Separator"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a separator."),Object(c.b)("p",null,"A separator visually separates content into groups.")),Object(c.b)("h4",{id:"static-methods-48"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-48"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Separator.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Separator__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Separator",href:"#h2o_wave.types.Separator"},"Separator")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-48"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Separator.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the separator.")),Object(c.b)("div",{id:"h2o_wave.types.Separator.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Separator.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-48"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-48"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Separator.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"slider"},"Slider ",Object(c.b)("a",{name:"h2o_wave.types.Slider"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Slider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a slider."),Object(c.b)("p",null,"A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value."),Object(c.b)("p",null,"A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium \u2014 not about setting the value to two or five."),Object(c.b)("p",null,"The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.")),Object(c.b)("h4",{id:"static-methods-49"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-49"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Slider.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Slider__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Slider",href:"#h2o_wave.types.Slider"},"Slider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-49"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Slider.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum value of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum value of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.step",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The difference between two adjacent values of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the slider value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The current value of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-49"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-49"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Slider.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"smallseriesstatcard"},"SmallSeriesStatCard ",Object(c.b)("a",{name:"h2o_wave.types.SmallSeriesStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"SmallSeriesStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, plot_data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a small stat card displaying a primary value and a series plot.")),Object(c.b)("h4",{id:"static-methods-50"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-50"},"load ",Object(c.b)("a",{name:"h2o_wave.types.SmallSeriesStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_SmallSeriesStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.SmallSeriesStatCard",href:"#h2o_wave.types.SmallSeriesStatCard"},"SmallSeriesStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-50"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_category",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_category")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for x-axis values (ignored if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"area"),"; must be provided if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"interval"),"). Defaults to 'x'.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's color.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's curve style. Defaults to ",Object(c.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's data.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The type of plot. Defaults to ",Object(c.b)("code",null,"area"),". One of 'area', 'interval'.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for y-axis values.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_zero_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_zero_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The base value to use for each y-axis mark. Set this to ",Object(c.b)("code",null,"0")," if you want to pin the x-axis at ",Object(c.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-50"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-50"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.SmallSeriesStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"smallstatcard"},"SmallStatCard ",Object(c.b)("a",{name:"h2o_wave.types.SmallStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"SmallStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a stat card displaying a single value.")),Object(c.b)("h4",{id:"static-methods-51"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-51"},"load ",Object(c.b)("a",{name:"h2o_wave.types.SmallStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_SmallStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.SmallStatCard",href:"#h2o_wave.types.SmallStatCard"},"SmallStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-51"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-51"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-51"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.SmallStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"spinbox"},"Spinbox ",Object(c.b)("a",{name:"h2o_wave.types.Spinbox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Spinbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a spinbox."),Object(c.b)("p",null,"A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.")),Object(c.b)("h4",{id:"static-methods-52"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-52"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Spinbox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Spinbox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Spinbox",href:"#h2o_wave.types.Spinbox"},"Spinbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-52"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Spinbox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum value of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum value of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.step",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The difference between two adjacent values of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The current value of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-52"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-52"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Spinbox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"step"},"Step ",Object(c.b)("a",{name:"h2o_wave.types.Step"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Step"),"(label:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, done:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a step for a stepper.")),Object(c.b)("h4",{id:"static-methods-53"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-53"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Step.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Step__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Step",href:"#h2o_wave.types.Step"},"Step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-53"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Step.done",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"done")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether this step has already been completed.")),Object(c.b)("div",{id:"h2o_wave.types.Step.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Icon to be displayed.")),Object(c.b)("div",{id:"h2o_wave.types.Step.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text displayed below icon."))),Object(c.b)("h4",{id:"methods-53"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-53"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Step.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"stepper"},"Stepper ",Object(c.b)("a",{name:"h2o_wave.types.Stepper"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Stepper"),"(name:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Step",href:"#h2o_wave.types.Step"},"Step"),"], visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.")),Object(c.b)("h4",{id:"static-methods-54"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-54"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Stepper.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Stepper__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Stepper",href:"#h2o_wave.types.Stepper"},"Stepper")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-54"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Stepper.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The sequence of steps to be displayed.")),Object(c.b)("div",{id:"h2o_wave.types.Stepper.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Stepper.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Stepper.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-54"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-54"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Stepper.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tab"},"Tab ",Object(c.b)("a",{name:"h2o_wave.types.Tab"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Tab"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tab.")),Object(c.b)("h4",{id:"static-methods-55"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-55"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Tab.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Tab__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Tab",href:"#h2o_wave.types.Tab"},"Tab")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-55"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Tab.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon displayed on the tab.")),Object(c.b)("div",{id:"h2o_wave.types.Tab.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the tab.")),Object(c.b)("div",{id:"h2o_wave.types.Tab.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-55"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-55"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Tab.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tabcard"},"TabCard ",Object(c.b)("a",{name:"h2o_wave.types.TabCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TabCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Tab",href:"#h2o_wave.types.Tab"},"Tab"),"], value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing tabs for navigation.")),Object(c.b)("h4",{id:"static-methods-56"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-56"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TabCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TabCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TabCard",href:"#h2o_wave.types.TabCard"},"TabCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-56"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TabCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if tabs should be rendered as links and not a standard tab.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the tab to select."))),Object(c.b)("h4",{id:"methods-56"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-56"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TabCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"table"},"Table ",Object(c.b)("a",{name:"h2o_wave.types.Table"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Table"),"(name:\xa0str, columns:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.TableColumn",href:"#h2o_wave.types.TableColumn"},"TableColumn"),"], rows:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.TableRow",href:"#h2o_wave.types.TableRow"},"TableRow"),"], multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, groupable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, downloadable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, resettable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create an interactive table."),Object(c.b)("p",null,"This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table."),Object(c.b)("p",null,"If ",Object(c.b)("code",null,"multiple")," is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and ",Object(c.b)("code",null,"q.args.table_name")," is set to ",Object(c.b)("code",null,"[row_name]"),", where ",Object(c.b)("code",null,"table_name")," is the ",Object(c.b)("code",null,"name")," of the table, and ",Object(c.b)("code",null,"row_name")," is the ",Object(c.b)("code",null,"name")," of the row that was clicked on."),Object(c.b)("p",null,"If ",Object(c.b)("code",null,"multiple")," is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,",Object(c.b)("code",null,"q.args.table_name")," is set to ",Object(c.b)("code",null,"[row1_name, row2_name, \u2026]")," where ",Object(c.b)("code",null,"table_name")," is the ",Object(c.b)("code",null,"name")," of the table, and ",Object(c.b)("code",null,"row1_name"),", ",Object(c.b)("code",null,"row2_name")," are the ",Object(c.b)("code",null,"name")," of the rows that were selected. Note that if ",Object(c.b)("code",null,"multiple")," is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.")),Object(c.b)("h4",{id:"static-methods-57"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-57"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Table.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Table__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Table",href:"#h2o_wave.types.Table"},"Table")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-57"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Table.columns",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"columns")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The columns in this table.")),Object(c.b)("div",{id:"h2o_wave.types.Table.downloadable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"downloadable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.")),Object(c.b)("div",{id:"h2o_wave.types.Table.groupable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"groupable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True to allow group by feature.")),Object(c.b)("div",{id:"h2o_wave.types.Table.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the table, e.g. '400px', '50%', etc.")),Object(c.b)("div",{id:"h2o_wave.types.Table.multiple",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"multiple")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True to allow multiple rows to be selected.")),Object(c.b)("div",{id:"h2o_wave.types.Table.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Table.resettable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"resettable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.")),Object(c.b)("div",{id:"h2o_wave.types.Table.rows",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"rows")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The rows in this table.")),Object(c.b)("div",{id:"h2o_wave.types.Table.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Table.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected rows. If this parameter is set, multiple selections will be allowed (",Object(c.b)("code",null,"multiple")," is assumed to be ",Object(c.b)("code",null,"True"),").")),Object(c.b)("div",{id:"h2o_wave.types.Table.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-57"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-57"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Table.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tablecelltype"},"TableCellType ",Object(c.b)("a",{name:"h2o_wave.types.TableCellType"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TableCellType"),"(progress:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType"),",\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"#h2o_wave.types.IconTableCellType"},"IconTableCellType"),",\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Defines cell content to be rendered instead of a simple text.")),Object(c.b)("h4",{id:"static-methods-58"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-58"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TableCellType.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TableCellType__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TableCellType",href:"#h2o_wave.types.TableCellType"},"TableCellType")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-58"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TableCellType.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"No documentation available.")),Object(c.b)("div",{id:"h2o_wave.types.TableCellType.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"No documentation available."))),Object(c.b)("h4",{id:"methods-58"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-58"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TableCellType.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tablecolumn"},"TableColumn ",Object(c.b)("a",{name:"h2o_wave.types.TableColumn"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TableColumn"),"(name:\xa0str, label:\xa0str, min_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, max_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, sortable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, searchable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, filterable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, cell_type:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TableCellType",href:"#h2o_wave.types.TableCellType"},"TableCellType"),",\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a table column.")),Object(c.b)("h4",{id:"static-methods-59"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-59"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TableColumn.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TableColumn__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TableColumn",href:"#h2o_wave.types.TableColumn"},"TableColumn")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-59"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TableColumn.cell_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"cell_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Defines how to render each cell in this column. Defaults to plain text.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.filterable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"filterable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the contents of this column are displayed as filters in a dropdown.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the column header.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether each cell in this column should be displayed as a clickable link.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.max_width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum width of this column, e.g. '100px'. Only ",Object(c.b)("code",null,"px")," units are supported at this time.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.min_width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min_width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum width of this column, e.g. '50px'. Only ",Object(c.b)("code",null,"px")," units are supported at this time.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this column.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.searchable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"searchable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.sortable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"sortable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the column is sortable."))),Object(c.b)("h4",{id:"methods-59"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-59"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TableColumn.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tablerow"},"TableRow ",Object(c.b)("a",{name:"h2o_wave.types.TableRow"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TableRow"),"(name:\xa0str, cells:\xa0List[str])"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a table row.")),Object(c.b)("h4",{id:"static-methods-60"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-60"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TableRow.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TableRow__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TableRow",href:"#h2o_wave.types.TableRow"},"TableRow")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-60"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TableRow.cells",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"cells")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The cells in this row (displayed left to right).")),Object(c.b)("div",{id:"h2o_wave.types.TableRow.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this row."))),Object(c.b)("h4",{id:"methods-60"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-60"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TableRow.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tabs"},"Tabs ",Object(c.b)("a",{name:"h2o_wave.types.Tabs"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Tabs"),"(name:\xa0str, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Tab",href:"#h2o_wave.types.Tab"},"Tab"),"],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tab bar.")),Object(c.b)("h4",{id:"static-methods-61"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-61"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Tabs.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Tabs__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Tabs",href:"#h2o_wave.types.Tabs"},"Tabs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-61"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Tabs.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The tabs in this tab bar.")),Object(c.b)("div",{id:"h2o_wave.types.Tabs.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Tabs.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the tab to select.")),Object(c.b)("div",{id:"h2o_wave.types.Tabs.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-61"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-61"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Tabs.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tallgaugestatcard"},"TallGaugeStatCard ",Object(c.b)("a",{name:"h2o_wave.types.TallGaugeStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TallGaugeStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.")),Object(c.b)("h4",{id:"static-methods-62"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-62"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TallGaugeStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TallGaugeStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TallGaugeStatCard",href:"#h2o_wave.types.TallGaugeStatCard"},"TallGaugeStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-62"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress gauge.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress gauge, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-62"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-62"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TallGaugeStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tallseriesstatcard"},"TallSeriesStatCard ",Object(c.b)("a",{name:"h2o_wave.types.TallSeriesStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TallSeriesStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a series plot.")),Object(c.b)("h4",{id:"static-methods-63"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-63"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TallSeriesStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TallSeriesStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TallSeriesStatCard",href:"#h2o_wave.types.TallSeriesStatCard"},"TallSeriesStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-63"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed below the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_category",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_category")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for x-axis values (ignored if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"area"),"; must be provided if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"interval"),"). Defaults to 'x'.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's color.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's curve style. Defaults to ",Object(c.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's data.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The type of plot. Defaults to ",Object(c.b)("code",null,"area"),". One of 'area', 'interval'.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for y-axis values.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_zero_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_zero_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The base value to use for each y-axis mark. Set this to ",Object(c.b)("code",null,"0")," if you want to pin the x-axis at ",Object(c.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-63"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-63"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TallSeriesStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"template"},"Template ",Object(c.b)("a",{name:"h2o_wave.types.Template"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Template"),"(content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render dynamic content using an HTML template.")),Object(c.b)("h4",{id:"static-methods-64"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-64"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Template.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Template__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Template",href:"#h2o_wave.types.Template"},"Template")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-64"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Template.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Handlebars template. ",Object(c.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/"))),Object(c.b)("div",{id:"h2o_wave.types.Template.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the Handlebars template")),Object(c.b)("div",{id:"h2o_wave.types.Template.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Template.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-64"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-64"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Template.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"templatecard"},"TemplateCard ",Object(c.b)("a",{name:"h2o_wave.types.TemplateCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TemplateCard"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render dynamic content using an HTML template.")),Object(c.b)("h4",{id:"static-methods-65"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-65"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TemplateCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TemplateCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TemplateCard",href:"#h2o_wave.types.TemplateCard"},"TemplateCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-65"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Handlebars template. ",Object(c.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/"))),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the Handlebars template.")),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-65"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-65"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TemplateCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"text"},"Text ",Object(c.b)("a",{name:"h2o_wave.types.Text"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Text"),"(content:\xa0str, size:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create text content.")),Object(c.b)("h4",{id:"static-methods-66"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-66"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Text.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Text__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Text",href:"#h2o_wave.types.Text"},"Text")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-66"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Text.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.Text.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Text.size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'.")),Object(c.b)("div",{id:"h2o_wave.types.Text.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.Text.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-66"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-66"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Text.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textl"},"TextL ",Object(c.b)("a",{name:"h2o_wave.types.TextL"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextL"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create large sized text content.")),Object(c.b)("h4",{id:"static-methods-67"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-67"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextL.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextL__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextL",href:"#h2o_wave.types.TextL"},"TextL")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-67"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextL.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-67"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-67"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextL.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textm"},"TextM ",Object(c.b)("a",{name:"h2o_wave.types.TextM"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextM"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create medium sized text content.")),Object(c.b)("h4",{id:"static-methods-68"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-68"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextM.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextM__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextM",href:"#h2o_wave.types.TextM"},"TextM")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-68"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextM.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextM.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextM.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextM.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-68"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-68"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextM.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"texts"},"TextS ",Object(c.b)("a",{name:"h2o_wave.types.TextS"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextS"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create small sized text content.")),Object(c.b)("h4",{id:"static-methods-69"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-69"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextS.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextS__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextS",href:"#h2o_wave.types.TextS"},"TextS")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-69"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextS.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextS.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextS.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextS.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-69"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-69"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextS.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textxl"},"TextXl ",Object(c.b)("a",{name:"h2o_wave.types.TextXl"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextXl"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create extra-large sized text content.")),Object(c.b)("h4",{id:"static-methods-70"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-70"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextXl.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextXl__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextXl",href:"#h2o_wave.types.TextXl"},"TextXl")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-70"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextXl.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-70"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-70"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextXl.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textxs"},"TextXs ",Object(c.b)("a",{name:"h2o_wave.types.TextXs"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextXs"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create extra-small sized text content.")),Object(c.b)("h4",{id:"static-methods-71"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-71"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextXs.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextXs__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextXs",href:"#h2o_wave.types.TextXs"},"TextXs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-71"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextXs.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextXs.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextXs.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextXs.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-71"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-71"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextXs.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textbox"},"Textbox ",Object(c.b)("a",{name:"h2o_wave.types.Textbox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Textbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, mask:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, prefix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, suffix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, readonly:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, multiline:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, password:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a text box."),Object(c.b)("p",null,"The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.")),Object(c.b)("h4",{id:"static-methods-72"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-72"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Textbox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Textbox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Textbox",href:"#h2o_wave.types.Textbox"},"Textbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-72"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Textbox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.error",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"error")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed as an error below the text box.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Icon displayed in the far right end of the text field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed above the field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.mask",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"mask")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.multiline",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"multiline")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box should allow multi-line text entry.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.password",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"password")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box should hide text content.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.prefix",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"prefix")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed before the text box contents.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.readonly",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"readonly")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box is a read-only field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box is a required field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.suffix",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"suffix")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed after the text box contents.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the text value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed inside the text box.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-72"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-72"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Textbox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"toggle"},"Toggle ",Object(c.b)("a",{name:"h2o_wave.types.Toggle"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Toggle"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action."),Object(c.b)("p",null,"Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.")),Object(c.b)("h4",{id:"static-methods-73"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-73"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Toggle.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Toggle__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Toggle",href:"#h2o_wave.types.Toggle"},"Toggle")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-73"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Toggle.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the checkbox is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the toggle value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if selected, False if unselected.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-73"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-73"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Toggle.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"toolbarcard"},"ToolbarCard ",Object(c.b)("a",{name:"h2o_wave.types.ToolbarCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ToolbarCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"], secondary_items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, overflow_items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing a toolbar.")),Object(c.b)("h4",{id:"static-methods-74"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-74"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ToolbarCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ToolbarCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ToolbarCard",href:"#h2o_wave.types.ToolbarCard"},"ToolbarCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-74"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.overflow_items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"overflow_items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render in an overflow menu.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.secondary_items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"secondary_items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render on the right side (or left, in RTL)."))),Object(c.b)("h4",{id:"methods-74"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-74"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ToolbarCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"vegacard"},"VegaCard ",Object(c.b)("a",{name:"h2o_wave.types.VegaCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"VegaCard"),"(box:\xa0str, title:\xa0str, specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing a Vega-lite plot.")),Object(c.b)("h4",{id:"static-methods-75"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-75"},"load ",Object(c.b)("a",{name:"h2o_wave.types.VegaCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_VegaCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.VegaCard",href:"#h2o_wave.types.VegaCard"},"VegaCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-75"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.VegaCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the plot, if any.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.specification",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"specification")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Vega-lite specification.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title of this card."))),Object(c.b)("h4",{id:"methods-75"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-75"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.VegaCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"vegavisualization"},"VegaVisualization ",Object(c.b)("a",{name:"h2o_wave.types.VegaVisualization"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"VegaVisualization"),"(specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a Vega-lite plot for display inside a form.")),Object(c.b)("h4",{id:"static-methods-76"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-76"},"load ",Object(c.b)("a",{name:"h2o_wave.types.VegaVisualization.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_VegaVisualization__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"#h2o_wave.types.VegaVisualization"},"VegaVisualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-76"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the plot, if any.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the visualization. Defaults to 300px.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.specification",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"specification")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Vega-lite specification.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The width of the visualization. Defaults to 100%."))),Object(c.b)("h4",{id:"methods-76"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-76"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.VegaVisualization.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"visualization"},"Visualization ",Object(c.b)("a",{name:"h2o_wave.types.Visualization"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Visualization"),"(plot:\xa0",Object(c.b)("a",{title:"h2o_wave.types.Plot",href:"#h2o_wave.types.Plot"},"Plot"),", data:\xa0Union[dict,\xa0str], width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a visualization for display inside a form.")),Object(c.b)("h4",{id:"static-methods-77"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-77"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Visualization.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Visualization__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Visualization",href:"#h2o_wave.types.Visualization"},"Visualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-77"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Visualization.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this visualization.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The hight of the visualization. Defaults to 300px.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.plot",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot to be rendered in this visualization.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The width of the visualization. Defaults to 100%."))),Object(c.b)("h4",{id:"methods-77"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-77"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Visualization.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"widebarstatcard"},"WideBarStatCard ",Object(c.b)("a",{name:"h2o_wave.types.WideBarStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"WideBarStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.")),Object(c.b)("h4",{id:"static-methods-78"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-78"},"load ",Object(c.b)("a",{name:"h2o_wave.types.WideBarStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_WideBarStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.WideBarStatCard",href:"#h2o_wave.types.WideBarStatCard"},"WideBarStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-78"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress bar.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress bar, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-78"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-78"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.WideBarStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"widegaugestatcard"},"WideGaugeStatCard ",Object(c.b)("a",{name:"h2o_wave.types.WideGaugeStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"WideGaugeStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.")),Object(c.b)("h4",{id:"static-methods-79"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-79"},"load ",Object(c.b)("a",{name:"h2o_wave.types.WideGaugeStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_WideGaugeStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.WideGaugeStatCard",href:"#h2o_wave.types.WideGaugeStatCard"},"WideGaugeStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-79"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress gauge.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress gauge, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-79"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-79"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.WideGaugeStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"wideseriesstatcard"},"WideSeriesStatCard ",Object(c.b)("a",{name:"h2o_wave.types.WideSeriesStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"WideSeriesStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a series plot.")),Object(c.b)("h4",{id:"static-methods-80"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-80"},"load ",Object(c.b)("a",{name:"h2o_wave.types.WideSeriesStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_WideSeriesStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.WideSeriesStatCard",href:"#h2o_wave.types.WideSeriesStatCard"},"WideSeriesStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-80"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed below the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_category",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_category")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for x-axis values (ignored if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"area"),"; must be provided if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"interval"),"). Defaults to 'x'.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's color.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's curve style. Defaults to ",Object(c.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's data.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The type of plot. Defaults to ",Object(c.b)("code",null,"area"),". One of 'area', 'interval'.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for y-axis values.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_zero_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_zero_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The base value to use for each y-axis mark. Set this to ",Object(c.b)("code",null,"0")," if you want to pin the x-axis at ",Object(c.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-80"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-80"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.WideSeriesStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))))}l.isMDXComponent=!0},290:function(e,a,t){"use strict";t.d(a,"a",(function(){return p})),t.d(a,"b",(function(){return m}));var s=t(0),i=t.n(s);function c(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function b(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);a&&(s=s.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,s)}return t}function n(e){for(var a=1;a=0||(i[t]=e[t]);return i}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(s=0;s=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var d=i.a.createContext({}),l=function(e){var a=i.a.useContext(d),t=a;return e&&(t="function"==typeof e?e(a):n(n({},a),e)),t},p=function(e){var a=l(e.components);return i.a.createElement(d.Provider,{value:a},e.children)},r={inlineCode:"code",wrapper:function(e){var a=e.children;return i.a.createElement(i.a.Fragment,{},a)}},_=i.a.forwardRef((function(e,a){var t=e.components,s=e.mdxType,c=e.originalType,b=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),p=l(t),_=s,m=p["".concat(b,".").concat(_)]||p[_]||r[_]||c;return t?i.a.createElement(m,n(n({ref:a},d),{},{components:t})):i.a.createElement(m,n({ref:a},d))}));function m(e,a){var t=arguments,s=a&&a.mdxType;if("string"==typeof e||s){var c=t.length,b=new Array(c);b[0]=_;var n={};for(var o in a)hasOwnProperty.call(a,o)&&(n[o]=a[o]);n.originalType=e,n.mdxType="string"==typeof e?e:s,b[1]=n;for(var d=2;d=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var m=a.a.createContext({}),p=function(e){var r=a.a.useContext(m),t=r;return e&&(t="function"==typeof e?e(r):s(s({},r),e)),t},f=function(e){var r=p(e.components);return a.a.createElement(m.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},l=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,c=e.originalType,o=e.parentName,m=u(e,["components","mdxType","originalType","parentName"]),f=p(t),l=n,b=f["".concat(o,".").concat(l)]||f[l]||d[l]||c;return t?a.a.createElement(b,s(s({ref:r},m),{},{components:t})):a.a.createElement(b,s({ref:r},m))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var c=t.length,o=new Array(c);o[0]=l;var s={};for(var u in r)hasOwnProperty.call(r,u)&&(s[u]=r[u]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var m=2;m=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var m=a.a.createContext({}),p=function(e){var r=a.a.useContext(m),t=r;return e&&(t="function"==typeof e?e(r):s(s({},r),e)),t},f=function(e){var r=p(e.components);return a.a.createElement(m.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},l=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,c=e.originalType,o=e.parentName,m=u(e,["components","mdxType","originalType","parentName"]),f=p(t),l=n,b=f["".concat(o,".").concat(l)]||f[l]||d[l]||c;return t?a.a.createElement(b,s(s({ref:r},m),{},{components:t})):a.a.createElement(b,s({ref:r},m))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var c=t.length,o=new Array(c);o[0]=l;var s={};for(var u in r)hasOwnProperty.call(r,u)&&(s[u]=r[u]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var m=2;m=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=o.a.createContext({}),u=function(e){var t=o.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=u(e.components);return o.a.createElement(s.Provider,{value:t},e.children)},g={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,l=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),p=u(n),d=r,m=p["".concat(l,".").concat(d)]||p[d]||g[d]||a;return n?o.a.createElement(m,c(c({ref:t},s),{},{components:n})):o.a.createElement(m,c({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,l=new Array(a);l[0]=d;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:r,l[1]=c;for(var s=2;s=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=o.a.createContext({}),u=function(e){var t=o.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=u(e.components);return o.a.createElement(s.Provider,{value:t},e.children)},g={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,l=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),p=u(n),d=r,m=p["".concat(l,".").concat(d)]||p[d]||g[d]||a;return n?o.a.createElement(m,c(c({ref:t},s),{},{components:n})):o.a.createElement(m,c({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,l=new Array(a);l[0]=d;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:r,l[1]=c;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),p=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},s=function(e){var t=p(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},f=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),s=p(n),f=a,d=s["".concat(c,".").concat(f)]||s[f]||m[f]||i;return n?r.a.createElement(d,o(o({ref:t},u),{},{components:n})):r.a.createElement(d,o({ref:t},u))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,c=new Array(i);c[0]=f;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o.mdxType="string"==typeof e?e:a,c[1]=o;for(var u=2;u=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),p=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},s=function(e){var t=p(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},f=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),s=p(n),f=a,d=s["".concat(c,".").concat(f)]||s[f]||m[f]||i;return n?r.a.createElement(d,o(o({ref:t},u),{},{components:n})):r.a.createElement(d,o({ref:t},u))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,c=new Array(i);c[0]=f;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o.mdxType="string"==typeof e?e:a,c[1]=o;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}var c=r.a.createContext({}),l=function(e){var t=r.a.useContext(c),o=t;return e&&(o="function"==typeof e?e(t):i(i({},t),e)),o},u=function(e){var t=l(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},A={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},p=r.a.forwardRef((function(e,t){var o=e.components,n=e.mdxType,a=e.originalType,d=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=l(o),p=n,f=u["".concat(d,".").concat(p)]||u[p]||A[p]||a;return o?r.a.createElement(f,i(i({ref:t},c),{},{components:o})):r.a.createElement(f,i({ref:t},c))}));function f(e,t){var o=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=o.length,d=new Array(a);d[0]=p;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,d[1]=i;for(var c=2;c=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}var c=r.a.createContext({}),l=function(e){var t=r.a.useContext(c),o=t;return e&&(o="function"==typeof e?e(t):i(i({},t),e)),o},u=function(e){var t=l(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},A={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},p=r.a.forwardRef((function(e,t){var o=e.components,n=e.mdxType,a=e.originalType,d=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=l(o),p=n,f=u["".concat(d,".").concat(p)]||u[p]||A[p]||a;return o?r.a.createElement(f,i(i({ref:t},c),{},{components:o})):r.a.createElement(f,i({ref:t},c))}));function f(e,t){var o=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=o.length,d=new Array(a);d[0]=p;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,d[1]=i;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n\n\nlisten('/demo', serve, mode='multicast')\n")))}l.isMDXComponent=!0},287:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return b}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),d=r,b=p["".concat(c,".").concat(d)]||p[d]||m[d]||o;return n?a.a.createElement(b,i(i({ref:t},u),{},{components:n})):a.a.createElement(b,i({ref:t},u))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var u=2;u 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n\n\nlisten('/demo', serve, mode='multicast')\n")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return b}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),d=r,b=p["".concat(c,".").concat(d)]||p[d]||m[d]||o;return n?a.a.createElement(b,i(i({ref:t},u),{},{components:n})):a.a.createElement(b,i({ref:t},u))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var u=2;u=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),l=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=l(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,a=e.originalType,o=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),s=l(n),b=i,f=s["".concat(o,".").concat(b)]||s[b]||m[b]||a;return n?r.a.createElement(f,p(p({ref:t},u),{},{components:n})):r.a.createElement(f,p({ref:t},u))}));function f(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var a=n.length,o=new Array(a);o[0]=b;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:i,o[1]=p;for(var u=2;u=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),l=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=l(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,a=e.originalType,o=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),s=l(n),b=i,f=s["".concat(o,".").concat(b)]||s[b]||m[b]||a;return n?r.a.createElement(f,p(p({ref:t},u),{},{components:n})):r.a.createElement(f,p({ref:t},u))}));function f(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var a=n.length,o=new Array(a);o[0]=b;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:i,o[1]=p;for(var u=2;u=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):u(u({},t),e)),r},p=function(e){var t=s(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=s(r),f=n,b=p["".concat(i,".").concat(f)]||p[f]||m[f]||a;return r?o.a.createElement(b,u(u({ref:t},l),{},{components:r})):o.a.createElement(b,u({ref:t},l))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,i=new Array(a);i[0]=f;var u={};for(var c in t)hasOwnProperty.call(t,c)&&(u[c]=t[c]);u.originalType=e,u.mdxType="string"==typeof e?e:n,i[1]=u;for(var l=2;l=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):u(u({},t),e)),r},p=function(e){var t=s(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=s(r),f=n,b=p["".concat(i,".").concat(f)]||p[f]||m[f]||a;return r?o.a.createElement(b,u(u({ref:t},l),{},{components:r})):o.a.createElement(b,u({ref:t},l))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,i=new Array(a);i[0]=f;var u={};for(var c in t)hasOwnProperty.call(t,c)&&(u[c]=t[c]);u.originalType=e,u.mdxType="string"==typeof e?e:n,i[1]=u;for(var l=2;l=0||(d[t]=A[t]);return d}(A,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(A);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(A,t)&&(d[t]=A[t])}return d}var b=d.a.createContext({}),f=function(A){var e=d.a.useContext(b),t=e;return A&&(t="function"==typeof A?A(e):u(u({},e),A)),t},r=function(A){var e=f(A.components);return d.a.createElement(b.Provider,{value:e},A.children)},n={inlineCode:"code",wrapper:function(A){var e=A.children;return d.a.createElement(d.a.Fragment,{},e)}},c=d.a.forwardRef((function(A,e){var t=A.components,a=A.mdxType,i=A.originalType,l=A.parentName,b=s(A,["components","mdxType","originalType","parentName"]),r=f(t),c=a,I=r["".concat(l,".").concat(c)]||r[c]||n[c]||i;return t?d.a.createElement(I,u(u({ref:e},b),{},{components:t})):d.a.createElement(I,u({ref:e},b))}));function I(A,e){var t=arguments,a=e&&e.mdxType;if("string"==typeof A||a){var i=t.length,l=new Array(i);l[0]=c;var u={};for(var s in e)hasOwnProperty.call(e,s)&&(u[s]=e[s]);u.originalType=A,u.mdxType="string"==typeof A?A:a,l[1]=u;for(var b=2;b=0||(d[t]=A[t]);return d}(A,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(A);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(A,t)&&(d[t]=A[t])}return d}var b=d.a.createContext({}),f=function(A){var e=d.a.useContext(b),t=e;return A&&(t="function"==typeof A?A(e):u(u({},e),A)),t},r=function(A){var e=f(A.components);return d.a.createElement(b.Provider,{value:e},A.children)},n={inlineCode:"code",wrapper:function(A){var e=A.children;return d.a.createElement(d.a.Fragment,{},e)}},c=d.a.forwardRef((function(A,e){var t=A.components,a=A.mdxType,i=A.originalType,l=A.parentName,b=s(A,["components","mdxType","originalType","parentName"]),r=f(t),c=a,I=r["".concat(l,".").concat(c)]||r[c]||n[c]||i;return t?d.a.createElement(I,u(u({ref:e},b),{},{components:t})):d.a.createElement(I,u({ref:e},b))}));function I(A,e){var t=arguments,a=e&&e.mdxType;if("string"==typeof A||a){var i=t.length,l=new Array(i);l[0]=c;var u={};for(var s in e)hasOwnProperty.call(e,s)&&(u[s]=e[s]);u.originalType=A,u.mdxType="string"==typeof A?A:a,l[1]=u;for(var b=2;b Hello | H2O Wave - - - - - - - + + + + + + +
      -
      +
      - - - - - - - + + + + + + + \ No newline at end of file diff --git a/docs/blog/hola/index.html b/docs/blog/hola/index.html index cd2e18895c..7348d06a55 100644 --- a/docs/blog/hola/index.html +++ b/docs/blog/hola/index.html @@ -6,24 +6,24 @@ Hola | H2O Wave - - - - - - - + + + + + + +
      -

      Hola

      Gao Wei

      Gao Wei

      Docusaurus Core Team

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

      +

      Hola

      Gao Wei

      Gao Wei

      Docusaurus Core Team

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

      - - - - - - - + + + + + + + \ No newline at end of file diff --git a/docs/blog/index.html b/docs/blog/index.html index aeb46ae94e..c76a7b70fc 100644 --- a/docs/blog/index.html +++ b/docs/blog/index.html @@ -6,30 +6,30 @@ Blog | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      Hola

      Gao Wei

      Gao Wei

      Docusaurus Core Team

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

      +

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      Hola

      Gao Wei

      Gao Wei

      Docusaurus Core Team

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/blog/tags/docusaurus/index.html b/docs/blog/tags/docusaurus/index.html index c0a17a71df..a913402584 100644 --- a/docs/blog/tags/docusaurus/index.html +++ b/docs/blog/tags/docusaurus/index.html @@ -6,30 +6,30 @@ Posts tagged "docusaurus" | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      3 posts tagged with "docusaurus"

      View All Tags

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      Hola

      Gao Wei

      Gao Wei

      Docusaurus Core Team

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

      +

      3 posts tagged with "docusaurus"

      View All Tags

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      Hola

      Gao Wei

      Gao Wei

      Docusaurus Core Team

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/blog/tags/facebook/index.html b/docs/blog/tags/facebook/index.html index a6f40e45d5..4e4a1df733 100644 --- a/docs/blog/tags/facebook/index.html +++ b/docs/blog/tags/facebook/index.html @@ -6,26 +6,26 @@ Posts tagged "facebook" | H2O Wave - - - - - - - + + + + + + +
      -

      1 post tagged with "facebook"

      View All Tags

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      +

      1 post tagged with "facebook"

      View All Tags

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      - - - - - - - + + + + + + + \ No newline at end of file diff --git a/docs/blog/tags/hello/index.html b/docs/blog/tags/hello/index.html index 06e5d3de87..d1420fb5ff 100644 --- a/docs/blog/tags/hello/index.html +++ b/docs/blog/tags/hello/index.html @@ -6,28 +6,28 @@ Posts tagged "hello" | H2O Wave - - - - - - - - + + + + + + + +
      -

      2 posts tagged with "hello"

      View All Tags

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      +

      2 posts tagged with "hello"

      View All Tags

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      - - - - - - - - + + + + + + + + \ No newline at end of file diff --git a/docs/blog/tags/hola/index.html b/docs/blog/tags/hola/index.html index 8e06e18f62..7dac6e99b9 100644 --- a/docs/blog/tags/hola/index.html +++ b/docs/blog/tags/hola/index.html @@ -6,26 +6,26 @@ Posts tagged "hola" | H2O Wave - - - - - - - + + + + + + +
      -

      1 post tagged with "hola"

      View All Tags

      Hola

      Gao Wei

      Gao Wei

      Docusaurus Core Team

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

      +

      1 post tagged with "hola"

      View All Tags

      Hola

      Gao Wei

      Gao Wei

      Docusaurus Core Team

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

      - - - - - - - + + + + + + + \ No newline at end of file diff --git a/docs/blog/tags/index.html b/docs/blog/tags/index.html index 939857651a..a5afcb3867 100644 --- a/docs/blog/tags/index.html +++ b/docs/blog/tags/index.html @@ -6,22 +6,22 @@ Tags | H2O Wave - - - - - + + + + +
      -

      Tags

      +

      Tags

      - - - - - + + + + + \ No newline at end of file diff --git a/docs/blog/welcome/index.html b/docs/blog/welcome/index.html index cc00156b89..bc57020063 100644 --- a/docs/blog/welcome/index.html +++ b/docs/blog/welcome/index.html @@ -6,24 +6,24 @@ Welcome | H2O Wave - - - - - - - + + + + + + +
      -

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      +

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      - - - - - - - + + + + + + + \ No newline at end of file diff --git a/docs/c07c3c71.c9bb90e7.js b/docs/c07c3c71.c8e15b94.js similarity index 97% rename from docs/c07c3c71.c9bb90e7.js rename to docs/c07c3c71.c8e15b94.js index e9b0aca06b..4d4b7c6530 100644 --- a/docs/c07c3c71.c9bb90e7.js +++ b/docs/c07c3c71.c8e15b94.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[175],{228:function(e,r,n){"use strict";n.r(r),n.d(r,"frontMatter",(function(){return o})),n.d(r,"metadata",(function(){return i})),n.d(r,"rightToc",(function(){return c})),n.d(r,"default",(function(){return p}));var t=n(2),a=n(6),u=(n(0),n(287)),o={title:"Breadcrumbs"},i={unversionedId:"examples/breadcrumbs",id:"examples/breadcrumbs",isDocsHomePage:!1,title:"Breadcrumbs",description:"Breadcrumbs should be used as a navigational aid in your app or site.",source:"@site/docs/examples/breadcrumbs.md",slug:"/examples/breadcrumbs",permalink:"/wave/docs/examples/breadcrumbs",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/breadcrumbs.md",version:"current",sidebar:"someSidebar",previous:{title:"Tabs / Navigation",permalink:"/wave/docs/examples/tab-delete"},next:{title:"Header",permalink:"/wave/docs/examples/header"}},c=[],s={rightToc:c};function p(e){var r=e.components,o=Object(a.a)(e,["components"]);return Object(u.b)("wrapper",Object(t.a)({},s,o,{components:r,mdxType:"MDXLayout"}),Object(u.b)("p",null,"Breadcrumbs should be used as a navigational aid in your app or site.\nThey indicate the current page\u2019s location within a hierarchy and help\nthe user understand where they are in relation to the rest of that hierarchy.\nThey also afford one-click access to higher levels of that hierarchy.\nBreadcrumbs are typically placed, in horizontal form, under the masthead\nor navigation of an experience, above the primary content area."),Object(u.b)("div",{className:"cover",style:{backgroundImage:"url("+n(435).default+")"}}),Object(u.b)("pre",null,Object(u.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['breadcrumbs'] = ui.breadcrumbs_card(\n box='1 1 4 -1',\n items=[\n ui.breadcrumb(name='#menu1', label='Menu 1'),\n ui.breadcrumb(name='#menu2', label='Menu 2'),\n ui.breadcrumb(name='#menu3', label='Menu 3'),\n ],\n)\n\npage.save()\n")))}p.isMDXComponent=!0},287:function(e,r,n){"use strict";n.d(r,"a",(function(){return l})),n.d(r,"b",(function(){return m}));var t=n(0),a=n.n(t);function u(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function o(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r&&(t=t.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),n.push.apply(n,t)}return n}function i(e){for(var r=1;r=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),p=function(e){var r=a.a.useContext(s),n=r;return e&&(n="function"==typeof e?e(r):i(i({},r),e)),n},l=function(e){var r=p(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},b=a.a.forwardRef((function(e,r){var n=e.components,t=e.mdxType,u=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),l=p(n),b=t,m=l["".concat(o,".").concat(b)]||l[b]||d[b]||u;return n?a.a.createElement(m,i(i({ref:r},s),{},{components:n})):a.a.createElement(m,i({ref:r},s))}));function m(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var u=n.length,o=new Array(u);o[0]=b;var i={};for(var c in r)hasOwnProperty.call(r,c)&&(i[c]=r[c]);i.originalType=e,i.mdxType="string"==typeof e?e:t,o[1]=i;for(var s=2;s=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),p=function(e){var r=a.a.useContext(s),n=r;return e&&(n="function"==typeof e?e(r):i(i({},r),e)),n},l=function(e){var r=p(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},b=a.a.forwardRef((function(e,r){var n=e.components,t=e.mdxType,u=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),l=p(n),b=t,m=l["".concat(o,".").concat(b)]||l[b]||d[b]||u;return n?a.a.createElement(m,i(i({ref:r},s),{},{components:n})):a.a.createElement(m,i({ref:r},s))}));function m(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var u=n.length,o=new Array(u);o[0]=b;var i={};for(var c in r)hasOwnProperty.call(r,c)&&(i[c]=r[c]);i.originalType=e,i.mdxType="string"==typeof e?e:t,o[1]=i;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(d,l(l({ref:t},p),{},{components:n})):a.a.createElement(d,l({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(d,l(l({ref:t},p),{},{components:n})):a.a.createElement(d,l({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue', searchable=True),\n ui.table_column(name='status', label='Status'),\n ui.table_column(name='notifications', label='Notifications'),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n )\n ])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0},287:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return b}));var r=t(0),a=t.n(r);function s(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},f={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,s=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(t),m=r,b=p["".concat(o,".").concat(m)]||p[m]||f[m]||s;return t?a.a.createElement(b,i(i({ref:n},c),{},{components:t})):a.a.createElement(b,i({ref:n},c))}));function b(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var s=t.length,o=new Array(s);o[0]=m;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var c=2;c 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue', searchable=True),\n ui.table_column(name='status', label='Status'),\n ui.table_column(name='notifications', label='Notifications'),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n )\n ])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return b}));var r=t(0),a=t.n(r);function s(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},f={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,s=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(t),m=r,b=p["".concat(o,".").concat(m)]||p[m]||f[m]||s;return t?a.a.createElement(b,i(i({ref:n},c),{},{components:t})):a.a.createElement(b,i({ref:n},c))}));function b(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var s=t.length,o=new Array(s);o[0]=m;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var c=2;c=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=r.a.createContext({}),c=function(e){var n=r.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},u=function(e){var n=c(e.components);return r.a.createElement(p.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},m=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(t),m=a,f=u["".concat(l,".").concat(m)]||u[m]||d[m]||o;return t?r.a.createElement(f,i(i({ref:n},p),{},{components:t})):r.a.createElement(f,i({ref:n},p))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,l=new Array(o);l[0]=m;var i={};for(var s in n)hasOwnProperty.call(n,s)&&(i[s]=n[s]);i.originalType=e,i.mdxType="string"==typeof e?e:a,l[1]=i;for(var p=2;p=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=r.a.createContext({}),c=function(e){var n=r.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},u=function(e){var n=c(e.components);return r.a.createElement(p.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},m=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(t),m=a,f=u["".concat(l,".").concat(m)]||u[m]||d[m]||o;return t?r.a.createElement(f,i(i({ref:n},p),{},{components:t})):r.a.createElement(f,i({ref:n},p))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,l=new Array(o);l[0]=m;var i={};for(var s in n)hasOwnProperty.call(n,s)&&(i[s]=n[s]);i.originalType=e,i.mdxType="string"==typeof e?e:a,l[1]=i;for(var p=2;p=0||(n[a]=A[a]);return n}(A,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(A);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(A,a)&&(n[a]=A[a])}return n}var l=n.a.createContext({}),p=function(A){var e=n.a.useContext(l),a=e;return A&&(a="function"==typeof A?A(e):i(i({},e),A)),a},b=function(A){var e=p(A.components);return n.a.createElement(l.Provider,{value:e},A.children)},v={inlineCode:"code",wrapper:function(A){var e=A.children;return n.a.createElement(n.a.Fragment,{},e)}},f=n.a.forwardRef((function(A,e){var a=A.components,t=A.mdxType,r=A.originalType,o=A.parentName,l=u(A,["components","mdxType","originalType","parentName"]),b=p(a),f=t,m=b["".concat(o,".").concat(f)]||b[f]||v[f]||r;return a?n.a.createElement(m,i(i({ref:e},l),{},{components:a})):n.a.createElement(m,i({ref:e},l))}));function m(A,e){var a=arguments,t=e&&e.mdxType;if("string"==typeof A||t){var r=a.length,o=new Array(r);o[0]=f;var i={};for(var u in e)hasOwnProperty.call(e,u)&&(i[u]=e[u]);i.originalType=A,i.mdxType="string"==typeof A?A:t,o[1]=i;for(var l=2;l=0||(n[a]=A[a]);return n}(A,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(A);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(A,a)&&(n[a]=A[a])}return n}var l=n.a.createContext({}),p=function(A){var e=n.a.useContext(l),a=e;return A&&(a="function"==typeof A?A(e):i(i({},e),A)),a},b=function(A){var e=p(A.components);return n.a.createElement(l.Provider,{value:e},A.children)},v={inlineCode:"code",wrapper:function(A){var e=A.children;return n.a.createElement(n.a.Fragment,{},e)}},f=n.a.forwardRef((function(A,e){var a=A.components,t=A.mdxType,r=A.originalType,o=A.parentName,l=u(A,["components","mdxType","originalType","parentName"]),b=p(a),f=t,m=b["".concat(o,".").concat(f)]||b[f]||v[f]||r;return a?n.a.createElement(m,i(i({ref:e},l),{},{components:a})):n.a.createElement(m,i({ref:e},l))}));function m(A,e){var a=arguments,t=e&&e.mdxType;if("string"==typeof A||t){var r=a.length,o=new Array(r);o[0]=f;var i={};for(var u in e)hasOwnProperty.call(e,u)&&(i[u]=e[u]);i.originalType=A,i.mdxType="string"==typeof A?A:t,o[1]=i;for(var l=2;l=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=o.a.createContext({}),u=function(e){var t=o.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},s=function(e){var t=u(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,f=s["".concat(p,".").concat(d)]||s[d]||m[d]||a;return r?o.a.createElement(f,i(i({ref:t},c),{},{components:r})):o.a.createElement(f,i({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,p=new Array(a);p[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,p[1]=i;for(var c=2;c=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=o.a.createContext({}),u=function(e){var t=o.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},s=function(e){var t=u(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,f=s["".concat(p,".").concat(d)]||s[d]||m[d]||a;return r?o.a.createElement(f,i(i({ref:t},c),{},{components:r})):o.a.createElement(f,i({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,p=new Array(a);p[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,p[1]=i;for(var c=2;c"},l.a.createElement("header",{className:Object(r.a)("hero hero--primary",d.a.heroBanner)},l.a.createElement("div",{className:"container"},l.a.createElement("h1",{className:"hero__title"},"Realtime Web Apps and Dashboards for Python"),l.a.createElement("p",{className:"hero__subtitle"},t.tagline),l.a.createElement("div",{className:d.a.buttons},l.a.createElement(c.a,{className:Object(r.a)("button button--outline button--secondary button--lg",d.a.getStarted),to:Object(m.a)("docs/getting-started")},"Get Started")))),l.a.createElement("main",null,p&&p.length>0&&l.a.createElement("section",{className:d.a.features},l.a.createElement("div",{className:"container"},l.a.createElement("div",{className:"row"},p.map(((e,t)=>l.a.createElement(f,Object(n.a)({key:t},e)))))))))}}}]); \ No newline at end of file diff --git a/docs/c4f5d8e4.b2d38941.js b/docs/c4f5d8e4.b2d38941.js deleted file mode 100644 index 7b468e7f0d..0000000000 --- a/docs/c4f5d8e4.b2d38941.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[181],{234:function(e,a,t){"use strict";t.r(a);var n=t(2),r=t(0),i=t.n(r),l=t(289),o=t(292),c=t(290),s=t(288),m=t(291),u=t(235),d=t.n(u),p=[{title:"Know Python?",icon:"fab fa-python",description:i.a.createElement(i.a.Fragment,null,"No HTML, CSS, Javascript skills required. Build rich, interactive web apps using pure Python.")},{title:"Realtime Sync",icon:"fas fa-stopwatch",description:i.a.createElement(i.a.Fragment,null,"Broadcast live information, visualizations and graphics using Wave's low-latency realtime server.")},{title:"Collaborative Content",icon:"fas fa-users",description:i.a.createElement(i.a.Fragment,null,"Instant control over every connected web browser using a simple and intuitive programming model.")},{title:"Develop Quickly",icon:"fas fa-laptop-code",description:i.a.createElement(i.a.Fragment,null,"Preview your app live as you code. Dramatically reduce the time and effort to build web apps.")},{title:"Deploy Instantly",icon:"fas fa-upload",description:i.a.createElement(i.a.Fragment,null,"Easily share your apps with end-users, get feedback, improve and iterate.")},{title:"Run Anywhere",icon:"fas fa-terminal",description:i.a.createElement(i.a.Fragment,null,"~10MB static executables for Linux, Windows, OSX, BSD, Solaris on AMD64, 386, ARM, PPC. Run it on a RPi Zero for great good!")}];function f(e){var a=e.icon,t=e.title,n=e.description;return i.a.createElement("div",{className:Object(l.a)("col col--4",d.a.feature)},i.a.createElement("div",null,i.a.createElement("i",{class:a})),i.a.createElement("h3",null,t),i.a.createElement("p",null,n))}a.default=function(){var e=Object(s.a)().siteConfig,a=void 0===e?{}:e;return i.a.createElement(o.a,{title:"Hello from "+a.title,description:"Description will go into a meta tag in "},i.a.createElement("header",{className:Object(l.a)("hero hero--primary",d.a.heroBanner)},i.a.createElement("div",{className:"container"},i.a.createElement("h1",{className:"hero__title"},"Realtime Web Apps and Dashboards for Python"),i.a.createElement("p",{className:"hero__subtitle"},a.tagline),i.a.createElement("div",{className:d.a.buttons},i.a.createElement(c.a,{className:Object(l.a)("button button--outline button--secondary button--lg",d.a.getStarted),to:Object(m.a)("docs/getting-started")},"Get Started")))),i.a.createElement("main",null,p&&p.length>0&&i.a.createElement("section",{className:d.a.features},i.a.createElement("div",{className:"container"},i.a.createElement("div",{className:"row"},p.map((function(e,a){return i.a.createElement(f,Object(n.a)({key:a},e))})))))))}}}]); \ No newline at end of file diff --git a/docs/c641a4e8.b6573cb5.js b/docs/c641a4e8.56e47608.js similarity index 97% rename from docs/c641a4e8.b6573cb5.js rename to docs/c641a4e8.56e47608.js index 70f01244c6..3622030614 100644 --- a/docs/c641a4e8.b6573cb5.js +++ b/docs/c641a4e8.56e47608.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[182],{236:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return i})),t.d(r,"metadata",(function(){return p})),t.d(r,"rightToc",(function(){return c})),t.d(r,"default",(function(){return l}));var n=t(2),a=t(6),o=(t(0),t(287)),i={title:"Form / Progress / Updating"},p={unversionedId:"examples/progress-update",id:"examples/progress-update",isDocsHomePage:!1,title:"Form / Progress / Updating",description:"Update a progress bar's completion status periodically.",source:"@site/docs/examples/progress-update.md",slug:"/examples/progress-update",permalink:"/wave/docs/examples/progress-update",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/progress-update.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Progress",permalink:"/wave/docs/examples/progress"},next:{title:"Form / Message Bar",permalink:"/wave/docs/examples/message-bar"}},c=[],s={rightToc:c};function l(e){var r=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,i,{components:r,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Update a progress bar's completion status periodically."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(423).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom h2o_wave import site, ui\n\npage = site['/demo']\n\npage['example'] = ui.form_card(\n box='1 1 4 -1',\n items=[\n ui.progress(label='Basic Progress'),\n ]\n)\npage.save()\n\nfor i in range(1, 11):\n time.sleep(1)\n page['example'].items = [\n ui.progress(label='Basic Progress', caption=f'{i * 10}% complete', value=i / 10),\n ]\n\n # This will work, too:\n # page['example'].items[0].progress.value = i/10\n\n page.save()\n")))}l.isMDXComponent=!0},287:function(e,r,t){"use strict";t.d(r,"a",(function(){return u})),t.d(r,"b",(function(){return v}));var n=t(0),a=t.n(n);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function p(e){for(var r=1;r=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),l=function(e){var r=a.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):p(p({},r),e)),t},u=function(e){var r=l(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(t),f=n,v=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return t?a.a.createElement(v,p(p({ref:r},s),{},{components:t})):a.a.createElement(v,p({ref:r},s))}));function v(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,i=new Array(o);i[0]=f;var p={};for(var c in r)hasOwnProperty.call(r,c)&&(p[c]=r[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var s=2;s=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),l=function(e){var r=a.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):p(p({},r),e)),t},u=function(e){var r=l(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(t),f=n,v=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return t?a.a.createElement(v,p(p({ref:r},s),{},{components:t})):a.a.createElement(v,p({ref:r},s))}));function v(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,i=new Array(o);i[0]=f;var p={};for(var c in r)hasOwnProperty.call(r,c)&&(p[c]=r[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},l),{},{components:r})):a.a.createElement(m,i({ref:t},l))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},l),{},{components:r})):a.a.createElement(m,i({ref:t},l))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var l=2;l=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,p=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,d=u["".concat(p,".").concat(f)]||u[f]||m[f]||a;return r?o.a.createElement(d,c(c({ref:t},l),{},{components:r})):o.a.createElement(d,c({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,p=new Array(a);p[0]=f;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:n,p[1]=c;for(var l=2;l=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,p=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,d=u["".concat(p,".").concat(f)]||u[f]||m[f]||a;return r?o.a.createElement(d,c(c({ref:t},l),{},{components:r})):o.a.createElement(d,c({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,p=new Array(a);p[0]=f;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:n,p[1]=c;for(var l=2;l=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=o.a.createContext({}),s=function(e){var t=o.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=s(e.components);return o.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||a;return n?o.a.createElement(d,c(c({ref:t},p),{},{components:n})):o.a.createElement(d,c({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=f;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=o.a.createContext({}),s=function(e){var t=o.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=s(e.components);return o.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||a;return n?o.a.createElement(d,c(c({ref:t},p),{},{components:n})):o.a.createElement(d,c({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=f;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(n),m=a,b=d["".concat(o,".").concat(m)]||d[m]||u[m]||i;return n?r.a.createElement(b,s(s({ref:t},c),{},{components:n})):r.a.createElement(b,s({ref:t},c))}));function b(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:a,o[1]=s;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(n),m=a,b=d["".concat(o,".").concat(m)]||d[m]||u[m]||i;return n?r.a.createElement(b,s(s({ref:t},c),{},{components:n})):r.a.createElement(b,s({ref:t},c))}));function b(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:a,o[1]=s;for(var c=2;c=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var r=a.a.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):s(s({},r),e)),t},p=function(e){var r=u(e.components);return a.a.createElement(c.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},m=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(t),m=n,f=p["".concat(o,".").concat(m)]||p[m]||d[m]||i;return t?a.a.createElement(f,s(s({ref:r},c),{},{components:t})):a.a.createElement(f,s({ref:r},c))}));function f(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var i=t.length,o=new Array(i);o[0]=m;var s={};for(var l in r)hasOwnProperty.call(r,l)&&(s[l]=r[l]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var c=2;c=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var r=a.a.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):s(s({},r),e)),t},p=function(e){var r=u(e.components);return a.a.createElement(c.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},m=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(t),m=n,f=p["".concat(o,".").concat(m)]||p[m]||d[m]||i;return t?a.a.createElement(f,s(s({ref:r},c),{},{components:t})):a.a.createElement(f,s({ref:r},c))}));function f(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var i=t.length,o=new Array(i);o[0]=m;var s={};for(var l in r)hasOwnProperty.call(r,l)&&(s[l]=r[l]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var c=2;c=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),u=function(e){var r=a.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):p(p({},r),e)),t},l=function(e){var r=u(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),l=u(t),f=n,b=l["".concat(i,".").concat(f)]||l[f]||m[f]||o;return t?a.a.createElement(b,p(p({ref:r},s),{},{components:t})):a.a.createElement(b,p({ref:r},s))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,i=new Array(o);i[0]=f;var p={};for(var c in r)hasOwnProperty.call(r,c)&&(p[c]=r[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var s=2;s=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),u=function(e){var r=a.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):p(p({},r),e)),t},l=function(e){var r=u(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),l=u(t),f=n,b=l["".concat(i,".").concat(f)]||l[f]||m[f]||o;return t?a.a.createElement(b,p(p({ref:r},s),{},{components:t})):a.a.createElement(b,p({ref:r},s))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,i=new Array(o);i[0]=f;var p={};for(var c in r)hasOwnProperty.call(r,c)&&(p[c]=r[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var s=2;s{let n,r;function c(){const c=function(){let e=0,t=null;for(n=document.getElementsByClassName("anchor");e=0&&i<=a&&(t=l),e+=1}return t}();if(c){let a=0,n=!1;for(r=document.getElementsByClassName(e);a{document.removeEventListener("scroll",c),document.removeEventListener("resize",c)}}))},r=a(46),c=a.n(r);const s="table-of-contents__link";function o({headings:e,isChild:t}){return e.length?l.a.createElement("ul",{className:t?"":"table-of-contents table-of-contents__left-border"},e.map((e=>l.a.createElement("li",{key:e.id},l.a.createElement("a",{href:"#"+e.id,className:s,dangerouslySetInnerHTML:{__html:e.value}}),l.a.createElement(o,{isChild:!0,headings:e.children}))))):null}t.a=function({headings:e}){return i(s,"table-of-contents__link--active",100),l.a.createElement("div",{className:c.a.tableOfContents},l.a.createElement(o,{headings:e}))}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[189],{289:function(e,t,a){"use strict";a.r(t);var n=a(0),l=a.n(n),i=a(295),r=a(364),c=a(293);var s=function(e){const{nextItem:t,prevItem:a}=e;return l.a.createElement("nav",{className:"pagination-nav","aria-label":"Blog post page navigation"},l.a.createElement("div",{className:"pagination-nav__item"},a&&l.a.createElement(c.a,{className:"pagination-nav__link",to:a.permalink},l.a.createElement("div",{className:"pagination-nav__sublabel"},"Newer Post"),l.a.createElement("div",{className:"pagination-nav__label"},"\xab ",a.title))),l.a.createElement("div",{className:"pagination-nav__item pagination-nav__item--next"},t&&l.a.createElement(c.a,{className:"pagination-nav__link",to:t.permalink},l.a.createElement("div",{className:"pagination-nav__sublabel"},"Older Post"),l.a.createElement("div",{className:"pagination-nav__label"},t.title," \xbb"))))},o=a(467);t.default=function(e){const{content:t}=e,{frontMatter:a,metadata:n}=t,{title:c,description:m,nextItem:d,prevItem:v,editUrl:g}=n,{hide_table_of_contents:u}=a;return l.a.createElement(i.a,{title:c,description:m},t&&l.a.createElement("div",{className:"container margin-vert--lg"},l.a.createElement("div",{className:"row"},l.a.createElement("div",{className:"col col--8 col--offset-2"},l.a.createElement(r.a,{frontMatter:a,metadata:n,isBlogPostPage:!0},l.a.createElement(t,null)),l.a.createElement("div",null,g&&l.a.createElement("a",{href:g,target:"_blank",rel:"noreferrer noopener"},l.a.createElement("svg",{fill:"currentColor",height:"1.2em",width:"1.2em",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 40 40",style:{marginRight:"0.3em",verticalAlign:"sub"}},l.a.createElement("g",null,l.a.createElement("path",{d:"m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"}))),"Edit this page")),(d||v)&&l.a.createElement("div",{className:"margin-vert--xl"},l.a.createElement(s,{nextItem:d,prevItem:v}))),!u&&t.rightToc&&l.a.createElement("div",{className:"col col--2"},l.a.createElement(o.a,{headings:t.rightToc})))))}},467:function(e,t,a){"use strict";var n=a(0),l=a.n(n);var i=function(e,t,a){const[l,i]=Object(n.useState)(void 0);Object(n.useEffect)((()=>{let n,r;function c(){const c=function(){let e=0,t=null;for(n=document.getElementsByClassName("anchor");e=0&&i<=a&&(t=l),e+=1}return t}();if(c){let a=0,n=!1;for(r=document.getElementsByClassName(e);a{document.removeEventListener("scroll",c),document.removeEventListener("resize",c)}}))},r=a(46),c=a.n(r);const s="table-of-contents__link";function o({headings:e,isChild:t}){return e.length?l.a.createElement("ul",{className:t?"":"table-of-contents table-of-contents__left-border"},e.map((e=>l.a.createElement("li",{key:e.id},l.a.createElement("a",{href:"#"+e.id,className:s,dangerouslySetInnerHTML:{__html:e.value}}),l.a.createElement(o,{isChild:!0,headings:e.children}))))):null}t.a=function({headings:e}){return i(s,"table-of-contents__link--active",100),l.a.createElement("div",{className:c.a.tableOfContents},l.a.createElement(o,{headings:e}))}}}]); \ No newline at end of file diff --git a/docs/cd329814.2dff7ed3.js b/docs/cd329814.7a492562.js similarity index 94% rename from docs/cd329814.2dff7ed3.js rename to docs/cd329814.7a492562.js index bc6033ad7d..7c39e748ef 100644 --- a/docs/cd329814.2dff7ed3.js +++ b/docs/cd329814.7a492562.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[190],{243:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return c})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(287)),c={title:"Plot / Interval / Stacked / Transpose"},i={unversionedId:"examples/plot-interval-stacked-transpose",id:"examples/plot-interval-stacked-transpose",isDocsHomePage:!1,title:"Plot / Interval / Stacked / Transpose",description:"Make a stacked bar plot.",source:"@site/docs/examples/plot-interval-stacked-transpose.md",slug:"/examples/plot-interval-stacked-transpose",permalink:"/wave/docs/examples/plot-interval-stacked-transpose",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-stacked-transpose.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Stacked",permalink:"/wave/docs/examples/plot-interval-stacked"},next:{title:"Plot / Interval / Stacked / Grouped",permalink:"/wave/docs/examples/plot-interval-stacked-grouped"}},l=[],p={rightToc:l};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},p,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a stacked bar plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(439).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeMultiCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 10\nk = 5\nf = FakeMultiCategoricalSeries(groups=k)\nv = page.add('example', ui.plot_card(\n box='1 1 4 5',\n title='Intervals, stacked',\n data=data('country product price', n * k),\n plot=ui.plot([ui.mark(type='interval', x='=price', y='=product', color='=country', stack='auto', y_min=0)])\n))\n\nv.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]\n\npage.save()\n")))}s.isMDXComponent=!0},287:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return m}));var n=r(0),a=r.n(n);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},p),{},{components:r})):a.a.createElement(m,i({ref:t},p))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},p),{},{components:r})):a.a.createElement(m,i({ref:t},p))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var p=2;p=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},p=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(t),d=r,f=p["".concat(i,".").concat(d)]||p[d]||m[d]||o;return t?a.a.createElement(f,l(l({ref:n},c),{},{components:t})):a.a.createElement(f,l({ref:n},c))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=d;var l={};for(var s in n)hasOwnProperty.call(n,s)&&(l[s]=n[s]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},p=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(t),d=r,f=p["".concat(i,".").concat(d)]||p[d]||m[d]||o;return t?a.a.createElement(f,l(l({ref:n},c),{},{components:t})):a.a.createElement(f,l({ref:n},c))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=d;var l={};for(var s in n)hasOwnProperty.call(n,s)&&(l[s]=n[s]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(d,l(l({ref:t},p),{},{components:n})):a.a.createElement(d,l({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(d,l(l({ref:t},p),{},{components:n})):a.a.createElement(d,l({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(r[i]=e[i]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(r[i]=e[i])}return r}var u=r.a.createContext({}),d=function(e){var n=r.a.useContext(u),i=n;return e&&(i="function"==typeof e?e(n):s(s({},n),e)),i},c=function(e){var n=d(e.components);return r.a.createElement(u.Provider,{value:n},e.children)},I={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},R=r.a.forwardRef((function(e,n){var i=e.components,t=e.mdxType,a=e.originalType,o=e.parentName,u=f(e,["components","mdxType","originalType","parentName"]),c=d(i),R=t,E=c["".concat(o,".").concat(R)]||c[R]||I[R]||a;return i?r.a.createElement(E,s(s({ref:n},u),{},{components:i})):r.a.createElement(E,s({ref:n},u))}));function E(e,n){var i=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var a=i.length,o=new Array(a);o[0]=R;var s={};for(var f in n)hasOwnProperty.call(n,f)&&(s[f]=n[f]);s.originalType=e,s.mdxType="string"==typeof e?e:t,o[1]=s;for(var u=2;u=0||(r[i]=e[i]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(r[i]=e[i])}return r}var u=r.a.createContext({}),d=function(e){var n=r.a.useContext(u),i=n;return e&&(i="function"==typeof e?e(n):s(s({},n),e)),i},c=function(e){var n=d(e.components);return r.a.createElement(u.Provider,{value:n},e.children)},I={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},R=r.a.forwardRef((function(e,n){var i=e.components,t=e.mdxType,a=e.originalType,o=e.parentName,u=f(e,["components","mdxType","originalType","parentName"]),c=d(i),R=t,E=c["".concat(o,".").concat(R)]||c[R]||I[R]||a;return i?r.a.createElement(E,s(s({ref:n},u),{},{components:i})):r.a.createElement(E,s({ref:n},u))}));function E(e,n){var i=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var a=i.length,o=new Array(a);o[0]=R;var s={};for(var f in n)hasOwnProperty.call(n,f)&&(s[f]=n[f]);s.originalType=e,s.mdxType="string"==typeof e?e:t,o[1]=s;for(var u=2;u=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),s=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},b=function(e){var t=s(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),b=s(n),m=a,d=b["".concat(o,".").concat(m)]||b[m]||u[m]||i;return n?r.a.createElement(d,c(c({ref:t},p),{},{components:n})):r.a.createElement(d,c({ref:t},p))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var p=2;p=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),s=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},b=function(e){var t=s(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),b=s(n),m=a,d=b["".concat(o,".").concat(m)]||b[m]||u[m]||i;return n?r.a.createElement(d,c(c({ref:t},p),{},{components:n})):r.a.createElement(d,c({ref:t},p))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var p=2;p\n{{#each dishes}}\n
    4. {{name}} costs {{price}}
      5. \n{{/each}}\n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},u=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),d=s(n),u=r,f=d["".concat(i,".").concat(u)]||d[u]||m[u]||o;return n?a.a.createElement(f,c(c({ref:t},l),{},{components:n})):a.a.createElement(f,c({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=u;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l\n{{#each dishes}}\n
    5. {{name}} costs {{price}}
      6. \n{{/each}}\n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},u=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),d=s(n),u=r,f=d["".concat(i,".").concat(u)]||d[u]||m[u]||o;return n?a.a.createElement(f,c(c({ref:t},l),{},{components:n})):a.a.createElement(f,c({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=u;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var c=r.a.createContext({}),u=function(e){var t=r.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},b=function(e){var t=u(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),b=u(a),d=n,m=b["".concat(o,".").concat(d)]||b[d]||p[d]||i;return a?r.a.createElement(m,s(s({ref:t},c),{},{components:a})):r.a.createElement(m,s({ref:t},c))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=d;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var c=2;c=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var c=r.a.createContext({}),u=function(e){var t=r.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},b=function(e){var t=u(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),b=u(a),d=n,m=b["".concat(o,".").concat(d)]||b[d]||p[d]||i;return a?r.a.createElement(m,s(s({ref:t},c),{},{components:a})):r.a.createElement(m,s({ref:t},c))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=d;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var c=2;c=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var u=o.a.createContext({}),p=function(e){var t=o.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=p(e.components);return o.a.createElement(u.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,l=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),s=p(r),f=n,m=s["".concat(l,".").concat(f)]||s[f]||b[f]||a;return r?o.a.createElement(m,c(c({ref:t},u),{},{components:r})):o.a.createElement(m,c({ref:t},u))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,l=new Array(a);l[0]=f;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:n,l[1]=c;for(var u=2;u=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var u=o.a.createContext({}),p=function(e){var t=o.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=p(e.components);return o.a.createElement(u.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,l=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),s=p(r),f=n,m=s["".concat(l,".").concat(f)]||s[f]||b[f]||a;return r?o.a.createElement(m,c(c({ref:t},u),{},{components:r})):o.a.createElement(m,c({ref:t},u))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,l=new Array(a);l[0]=f;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:n,l[1]=c;for(var u=2;u=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var u=i.a.createContext({}),p=function(e){var t=i.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return i.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},f=i.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,u=b(e,["components","mdxType","originalType","parentName"]),c=p(n),f=r,R=c["".concat(s,".").concat(f)]||c[f]||d[f]||a;return n?i.a.createElement(R,o(o({ref:t},u),{},{components:n})):i.a.createElement(R,o({ref:t},u))}));function R(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,s=new Array(a);s[0]=f;var o={};for(var b in t)hasOwnProperty.call(t,b)&&(o[b]=t[b]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var u=2;u=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var u=i.a.createContext({}),p=function(e){var t=i.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return i.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},f=i.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,u=b(e,["components","mdxType","originalType","parentName"]),c=p(n),f=r,R=c["".concat(s,".").concat(f)]||c[f]||d[f]||a;return n?i.a.createElement(R,o(o({ref:t},u),{},{components:n})):i.a.createElement(R,o({ref:t},u))}));function R(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,s=new Array(a);s[0]=f;var o={};for(var b in t)hasOwnProperty.call(t,b)&&(o[b]=t[b]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),u=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=u(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,s=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(n),f=r,b=p["".concat(o,".").concat(f)]||p[f]||m[f]||s;return n?a.a.createElement(b,i(i({ref:t},c),{},{components:n})):a.a.createElement(b,i({ref:t},c))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var s=n.length,o=new Array(s);o[0]=f;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var c=2;c=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=i.a.createContext({}),s=function(e){var t=i.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=s(e.components);return i.a.createElement(p.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},d=i.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(o,".").concat(d)]||u[d]||b[d]||a;return n?i.a.createElement(f,c(c({ref:t},p),{},{components:n})):i.a.createElement(f,c({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,o=new Array(a);o[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,o[1]=c;for(var p=2;p=0||(n[r]=A[r]);return n}(A,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(A);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(A,r)&&(n[r]=A[r])}return n}var p=n.a.createContext({}),d=function(A){var e=n.a.useContext(p),r=e;return A&&(r="function"==typeof A?A(e):m(m({},e),A)),r},i=function(A){var e=d(A.components);return n.a.createElement(p.Provider,{value:e},A.children)},u={inlineCode:"code",wrapper:function(A){var e=A.children;return n.a.createElement(n.a.Fragment,{},e)}},s=n.a.forwardRef((function(A,e){var r=A.components,t=A.mdxType,a=A.originalType,o=A.parentName,p=c(A,["components","mdxType","originalType","parentName"]),i=d(r),s=t,f=i["".concat(o,".").concat(s)]||i[s]||u[s]||a;return r?n.a.createElement(f,m(m({ref:e},p),{},{components:r})):n.a.createElement(f,m({ref:e},p))}));function f(A,e){var r=arguments,t=e&&e.mdxType;if("string"==typeof A||t){var a=r.length,o=new Array(a);o[0]=s;var m={};for(var c in e)hasOwnProperty.call(e,c)&&(m[c]=e[c]);m.originalType=A,m.mdxType="string"==typeof A?A:t,o[1]=m;for(var p=2;p=0||(n[r]=A[r]);return n}(A,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(A);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(A,r)&&(n[r]=A[r])}return n}var p=n.a.createContext({}),d=function(A){var e=n.a.useContext(p),r=e;return A&&(r="function"==typeof A?A(e):m(m({},e),A)),r},i=function(A){var e=d(A.components);return n.a.createElement(p.Provider,{value:e},A.children)},u={inlineCode:"code",wrapper:function(A){var e=A.children;return n.a.createElement(n.a.Fragment,{},e)}},s=n.a.forwardRef((function(A,e){var r=A.components,t=A.mdxType,a=A.originalType,o=A.parentName,p=c(A,["components","mdxType","originalType","parentName"]),i=d(r),s=t,f=i["".concat(o,".").concat(s)]||i[s]||u[s]||a;return r?n.a.createElement(f,m(m({ref:e},p),{},{components:r})):n.a.createElement(f,m({ref:e},p))}));function f(A,e){var r=arguments,t=e&&e.mdxType;if("string"==typeof A||t){var a=r.length,o=new Array(a);o[0]=s;var m={};for(var c in e)hasOwnProperty.call(e,c)&&(m[c]=e[c]);m.originalType=A,m.mdxType="string"==typeof A?A:t,o[1]=m;for(var p=2;p 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n\n\nlisten('/demo', serve, mode='broadcast')\n")))}u.isMDXComponent=!0},287:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),u=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=u(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=u(n),d=r,m=p["".concat(c,".").concat(d)]||p[d]||b[d]||o;return n?a.a.createElement(m,i(i({ref:t},s),{},{components:n})):a.a.createElement(m,i({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var s=2;s 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n\n\nlisten('/demo', serve, mode='broadcast')\n")))}u.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),u=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=u(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=u(n),d=r,m=p["".concat(c,".").concat(d)]||p[d]||b[d]||o;return n?a.a.createElement(m,i(i({ref:t},s),{},{components:n})):a.a.createElement(m,i({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,p=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,d=u["".concat(p,".").concat(m)]||u[m]||f[m]||o;return n?a.a.createElement(d,i(i({ref:t},l),{},{components:n})):a.a.createElement(d,i({ref:t},l))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,p=new Array(o);p[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,p[1]=i;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,p=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,d=u["".concat(p,".").concat(m)]||u[m]||f[m]||o;return n?a.a.createElement(d,i(i({ref:t},l),{},{components:n})):a.a.createElement(d,i({ref:t},l))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,p=new Array(o);p[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,p[1]=i;for(var l=2;l -_start_q | H2O Wave +_start_q | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      _start_q

      To start the Wave server, simply open a new terminal window execute wave (or wave.exe on Windows).

      cd $HOME/wave
      ./wave
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # ┌───────────────────┐
      2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
      2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
      2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
      2020/10/15 12:04:40 # └───────────────────┘
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}

      The Wave server should now be running at http://localhost:55555.

      Don't close this terminal window!

      To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app.

      Edit this page
      +

      _start_q

      To start the Wave server, simply open a new terminal window and execute wave (or wave.exe on Windows).

      cd $HOME/wave
      ./wave
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # ┌───────────────────┐
      2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
      2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
      2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
      2020/10/15 12:04:40 # └───────────────────┘
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}

      The Wave server should now be running at http://localhost:55555.

      Don't close this terminal window!

      To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app.

      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/autoreload/index.html b/docs/docs/api/autoreload/index.html index eef69be925..fad2721543 100644 --- a/docs/docs/api/autoreload/index.html +++ b/docs/docs/api/autoreload/index.html @@ -4,30 +4,30 @@ -Module h2o_wave.autoreload | H2O Wave +Module h2o_wave.autoreload | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Module h2o_wave.autoreload

      Functions

      add_reload_hook

      def add_reload_hook(fn: Callable[[], NoneType]) ‑> NoneType

      Add a function to be called before reloading the process.

      Note that for open file and socket handles it is generally preferable to set the FD_CLOEXEC flag (using fcntl oros.set_inheritable) instead of using a reload hook to close them.

      main

      def main() ‑> NoneType

      Command-line wrapper to re-run a script whenever its source changes.

      Scripts may be specified by filename or module name::

      python -m h2o_wave -m h2o_wave.test.runtests python -m h2o_wave h2o_wave/test/runtests.py

      Running a script with this wrapper is similar to callingwait() at the end of the script, but this wrapper can catch import-time problems like syntax errors that would otherwise prevent the script from reaching its call to wait().

      rerun

      def rerun(code: Any, glob: Dict[str, Any], loc: Union[Mapping[str, Any], NoneType] = None) ‑> NoneType

      start

      def start(check_time: int = 500) ‑> NoneType

      Begins watching source files for changes.

      wait

      def wait() ‑> NoneType

      Wait for a watched file to change, then restart the process.

      Intended to be used at the end of scripts like unit test runners, to run the tests again after any source file changes (but see also the command-line interface in main())

      watch

      def watch(filename: str) ‑> NoneType

      Add a file to the watch list.

      All imported modules are watched by default.

      Edit this page
      +

      Module h2o_wave.autoreload

      Functions

      add_reload_hook

      def add_reload_hook(fn: Callable[[], NoneType]) ‑> NoneType

      Add a function to be called before reloading the process.

      Note that for open file and socket handles it is generally preferable to set the FD_CLOEXEC flag (using fcntl oros.set_inheritable) instead of using a reload hook to close them.

      main

      def main() ‑> NoneType

      Command-line wrapper to re-run a script whenever its source changes.

      Scripts may be specified by filename or module name::

      python -m h2o_wave -m h2o_wave.test.runtests python -m h2o_wave h2o_wave/test/runtests.py

      Running a script with this wrapper is similar to callingwait() at the end of the script, but this wrapper can catch import-time problems like syntax errors that would otherwise prevent the script from reaching its call to wait().

      rerun

      def rerun(code: Any, glob: Dict[str, Any], loc: Union[Mapping[str, Any], NoneType] = None) ‑> NoneType

      start

      def start(check_time: int = 500) ‑> NoneType

      Begins watching source files for changes.

      wait

      def wait() ‑> NoneType

      Wait for a watched file to change, then restart the process.

      Intended to be used at the end of scripts like unit test runners, to run the tests again after any source file changes (but see also the command-line interface in main())

      watch

      def watch(filename: str) ‑> NoneType

      Add a file to the watch list.

      All imported modules are watched by default.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/core/index.html b/docs/docs/api/core/index.html index e8e3069fdb..7036aa30e3 100644 --- a/docs/docs/api/core/index.html +++ b/docs/docs/api/core/index.html @@ -4,30 +4,30 @@ -Module h2o_wave.core | H2O Wave +Module h2o_wave.core | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Module h2o_wave.core

      Functions

      clone_expando

      def clone_expando(source: Expando, exclude_keys: Union[list, tuple, NoneType] = None, include_keys: Union[list, tuple, NoneType] = None) ‑> Expando

      Clone an expando instance. Creates a shallow clone.

      Args
      source
      The expando to clone.
      exclude_keys
      Keys to exclude while cloning.
      include_keys
      Keys to include while cloning.
      Returns

      The expando clone.

      configure

      def configure(internal_address: Union[str, NoneType] = None, external_address: Union[str, NoneType] = None, hub_address: Union[str, NoneType] = None, hub_access_key_id: Union[str, NoneType] = None, hub_access_key_secret: Union[str, NoneType] = None)

      Configure networking addresses/credentials before use.

      Args
      internal_address
      The local host:port to listen on.
      external_address
      The remote host:port of this server.
      hub_address
      The host:port of the Q server.
      hub_access_key_id
      The access key ID to use while connecting to the Q server.
      hub_access_key_secret
      The access key secret to use while connecting to the Q server.

      copy_expando

      def copy_expando(source: Expando, target: Expando, exclude_keys: Union[list, tuple, NoneType] = None, include_keys: Union[list, tuple, NoneType] = None) ‑> Expando

      Copy all entries from the source expando instance to the target expando instance.

      Args
      source
      The expando to copy from.
      target
      The expando to copy to.
      exclude_keys
      Keys to exclude while copying.
      include_keys
      Keys to include while copying.
      Returns

      The target expando.

      data

      def data(fields: Union[str, tuple, list], size: int = 0, rows: Union[dict, list, NoneType] = None, columns: Union[dict, list, NoneType] = None, pack=False) ‑> Union[Data, str]

      Create a Data instance for associating data with cards.

      data()(fields, size) creates a placeholder for data and allocates memory on the Q server.

      data()(fields, size, rows) creates a placeholder and initializes it with the provided rows.

      If pack() is True, the size parameter is ignored, and the function returns a packed string representing the data.

      Args
      fields
      The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names.
      size
      The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers.
      rows
      The rows in this data.
      columns
      The columns in this data.
      pack
      True to return a packed string representing the data instead of a Data placeholder.
      Returns

      Either a Data placeholder or a packed string representing the data.

      expando_to_dict

      def expando_to_dict(e: Expando) ‑> dict

      Extract an expando's underlying dictionary. Any modifications to the dictionary also affect the original expando.

      Args
      e
      The expando instance.
      Returns

      The expando's dictionary.

      marshal

      def marshal(d: Any) ‑> str

      Marshal to JSON.

      Args
      d
      Any object or value.
      Returns

      A string containing the JSON-serialized form.

      pack

      def pack(data: Any) ‑> str

      Pack (compress) the provided value.

      Args
      data
      Any object or value.

      The object or value compressed into a string.

      unmarshal

      def unmarshal(s: str) ‑> Any

      Unmarshal a JSON string.

      Args
      s
      A string containing JSON-serialized data.
      Returns

      The deserialized object or value.

      Classes

      AsyncPage

      class AsyncPage(site: AsyncSite, url: str)

      Represents a reference to a remote Q page. Similar to Page except that this class exposes async methods.

      Args
      site
      The parent site.
      url
      The URL of this page.

      Methods

      load

      async def load(self) ‑> dict

      Retrieve the serialized form of this page from the remote site.

      Returns

      The serialized form of this page

      poll

      async def poll(self) ‑> Q

      EXPERIMENTAL. DO NOT USE.

      pull

      async def pull(self) ‑> Q

      EXPERIMENTAL. DO NOT USE.

      push

      async def push(self)

      DEPRECATED: Use AsyncPage.save() instead.

      save

      async def save(self)

      Save the page. Sends all local changes made to this page to the remote site.

      Ancestors

      Inherited members

      AsyncSite

      class AsyncSite(ws: websockets.server.WebSocketServerProtocol)

      Represents a reference to the remote Q site. Similar to Site except that this class exposes async methods.

      Methods

      download

      async def download(self, url: str, path: str) ‑> str

      Download a file from the site.

      Args
      url
      The URL of the file.
      path
      The local directory or file path to download to. If a directory is provided, the original name of the file is retained.
      Returns

      The path to the downloaded file.

      load

      async def load(self, url) ‑> dict

      Retrieve data at the given URL, typically the serialized form of a page.

      Args
      url
      The URL to read.
      Returns

      The serialized page.

      unload

      async def unload(self, url: str)

      Delete an uploaded file from the site.

      Args
      url
      The URL of the file to delete.

      upload

      async def upload(self, files: List[str]) ‑> List[str]

      Upload local files to the site.

      Args
      files
      A list of file paths of the files to be uploaded..
      Returns

      A list of remote URLs for the uploaded files, in order.

      Data

      class Data(fields: Union[str, tuple, list], size: int = 0, data: Union[dict, list, NoneType] = None)

      Represents a data placeholder. A data placeholder is used to allocate memory on the Q server to store data.

      Args
      fields
      The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names.
      size
      The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers.
      data
      Initial data. Must be either a key-row dict for variable-length buffers OR a row list for fixed-size and circular buffers.

      Methods

      dump

      def dump(self)

      Expando

      class Expando(args: Union[Dict, NoneType] = None)

      Represents an object whose members (attributes) can be dynamically added and removed at run time.

      Args
      args
      An optional dict of attribute-value pairs to initialize the expando instance with.

      Page

      class Page(site: Site, url: str)

      Represents a reference to a remote Q page.

      Args
      site
      The parent site.
      url
      The URL of this page.

      Methods

      load

      def load(self) ‑> dict

      Retrieve the serialized form of this page from the remote site.

      Returns

      The serialized form of this page

      save

      def save(self)

      Save the page. Sends all local changes made to this page to the remote site.

      sync

      def sync(self)

      DEPRECATED: Use Page.save() instead.

      Ancestors

      Inherited members

      PageBase

      class PageBase(url: str)

      Represents a remote page.

      Args
      url
      The URL of the remote page.

      Methods

      add

      def add(self, key: str, card: Any) ‑> Ref

      Add a card to this page.

      Args
      key
      The card's key. Must uniquely identify the card on the page. Overwrites any other card with the same key.
      card
      A card. Use one of the ui.*_card() to create cards.
      Returns

      A reference to the added card.

      drop

      def drop(self)

      Delete this page from the remote site. Same as del site[url].

      Subclasses

      Ref

      class Ref(page: PageBase, key: str)

      Represents a local reference to an element on a Page. Any changes made to this local reference are tracked and sent to the remote Q server when the page is saved.

      ServiceError

      class ServiceError(*args, **kwargs)

      Common base class for all non-exit exceptions.

      Ancestors

      • builtins.Exception
      • builtins.BaseException

      Site

      class Site

      Represents a reference to the remote Q site. A Site instance is used to obtain references to the site's pages.

      Methods

      download

      def download(self, url: str, path: str) ‑> str

      Download a file from the site.

      Args
      url
      The URL of the file.
      path
      The local directory or file path to download to. If a directory is provided, the original name of the file is retained.
      Returns

      The path to the downloaded file.

      load

      def load(self, url) ‑> dict

      Retrieve data at the given URL, typically the serialized form of a page.

      Args
      url
      The URL to read.
      Returns

      The serialized page.

      unload

      def unload(self, url: str)

      Delete an uploaded file from the site.

      Args
      url
      The URL of the file to delete.

      upload

      def upload(self, files: List[str]) ‑> List[str]

      Upload local files to the site.

      Args
      files
      A list of file paths of the files to be uploaded..
      Returns

      A list of remote URLs for the uploaded files, in order.

      Edit this page
      +

      Module h2o_wave.core

      Functions

      clone_expando

      def clone_expando(source: Expando, exclude_keys: Union[list, tuple, NoneType] = None, include_keys: Union[list, tuple, NoneType] = None) ‑> Expando

      Clone an expando instance. Creates a shallow clone.

      Args
      source
      The expando to clone.
      exclude_keys
      Keys to exclude while cloning.
      include_keys
      Keys to include while cloning.
      Returns

      The expando clone.

      configure

      def configure(internal_address: Union[str, NoneType] = None, external_address: Union[str, NoneType] = None, hub_address: Union[str, NoneType] = None, hub_access_key_id: Union[str, NoneType] = None, hub_access_key_secret: Union[str, NoneType] = None)

      Configure networking addresses/credentials before use.

      Args
      internal_address
      The local host:port to listen on.
      external_address
      The remote host:port of this server.
      hub_address
      The host:port of the Q server.
      hub_access_key_id
      The access key ID to use while connecting to the Q server.
      hub_access_key_secret
      The access key secret to use while connecting to the Q server.

      copy_expando

      def copy_expando(source: Expando, target: Expando, exclude_keys: Union[list, tuple, NoneType] = None, include_keys: Union[list, tuple, NoneType] = None) ‑> Expando

      Copy all entries from the source expando instance to the target expando instance.

      Args
      source
      The expando to copy from.
      target
      The expando to copy to.
      exclude_keys
      Keys to exclude while copying.
      include_keys
      Keys to include while copying.
      Returns

      The target expando.

      data

      def data(fields: Union[str, tuple, list], size: int = 0, rows: Union[dict, list, NoneType] = None, columns: Union[dict, list, NoneType] = None, pack=False) ‑> Union[Data, str]

      Create a Data instance for associating data with cards.

      data()(fields, size) creates a placeholder for data and allocates memory on the Q server.

      data()(fields, size, rows) creates a placeholder and initializes it with the provided rows.

      If pack() is True, the size parameter is ignored, and the function returns a packed string representing the data.

      Args
      fields
      The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names.
      size
      The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers.
      rows
      The rows in this data.
      columns
      The columns in this data.
      pack
      True to return a packed string representing the data instead of a Data placeholder.
      Returns

      Either a Data placeholder or a packed string representing the data.

      expando_to_dict

      def expando_to_dict(e: Expando) ‑> dict

      Extract an expando's underlying dictionary. Any modifications to the dictionary also affect the original expando.

      Args
      e
      The expando instance.
      Returns

      The expando's dictionary.

      marshal

      def marshal(d: Any) ‑> str

      Marshal to JSON.

      Args
      d
      Any object or value.
      Returns

      A string containing the JSON-serialized form.

      pack

      def pack(data: Any) ‑> str

      Pack (compress) the provided value.

      Args
      data
      Any object or value.

      The object or value compressed into a string.

      unmarshal

      def unmarshal(s: str) ‑> Any

      Unmarshal a JSON string.

      Args
      s
      A string containing JSON-serialized data.
      Returns

      The deserialized object or value.

      Classes

      AsyncPage

      class AsyncPage(site: AsyncSite, url: str)

      Represents a reference to a remote Q page. Similar to Page except that this class exposes async methods.

      Args
      site
      The parent site.
      url
      The URL of this page.

      Methods

      load

      async def load(self) ‑> dict

      Retrieve the serialized form of this page from the remote site.

      Returns

      The serialized form of this page

      poll

      async def poll(self) ‑> Q

      EXPERIMENTAL. DO NOT USE.

      pull

      async def pull(self) ‑> Q

      EXPERIMENTAL. DO NOT USE.

      push

      async def push(self)

      DEPRECATED: Use AsyncPage.save() instead.

      save

      async def save(self)

      Save the page. Sends all local changes made to this page to the remote site.

      Ancestors

      Inherited members

      AsyncSite

      class AsyncSite(ws: websockets.server.WebSocketServerProtocol)

      Represents a reference to the remote Q site. Similar to Site except that this class exposes async methods.

      Methods

      download

      async def download(self, url: str, path: str) ‑> str

      Download a file from the site.

      Args
      url
      The URL of the file.
      path
      The local directory or file path to download to. If a directory is provided, the original name of the file is retained.
      Returns

      The path to the downloaded file.

      load

      async def load(self, url) ‑> dict

      Retrieve data at the given URL, typically the serialized form of a page.

      Args
      url
      The URL to read.
      Returns

      The serialized page.

      unload

      async def unload(self, url: str)

      Delete an uploaded file from the site.

      Args
      url
      The URL of the file to delete.

      upload

      async def upload(self, files: List[str]) ‑> List[str]

      Upload local files to the site.

      Args
      files
      A list of file paths of the files to be uploaded..
      Returns

      A list of remote URLs for the uploaded files, in order.

      Data

      class Data(fields: Union[str, tuple, list], size: int = 0, data: Union[dict, list, NoneType] = None)

      Represents a data placeholder. A data placeholder is used to allocate memory on the Q server to store data.

      Args
      fields
      The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names.
      size
      The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers.
      data
      Initial data. Must be either a key-row dict for variable-length buffers OR a row list for fixed-size and circular buffers.

      Methods

      dump

      def dump(self)

      Expando

      class Expando(args: Union[Dict, NoneType] = None)

      Represents an object whose members (attributes) can be dynamically added and removed at run time.

      Args
      args
      An optional dict of attribute-value pairs to initialize the expando instance with.

      Page

      class Page(site: Site, url: str)

      Represents a reference to a remote Q page.

      Args
      site
      The parent site.
      url
      The URL of this page.

      Methods

      load

      def load(self) ‑> dict

      Retrieve the serialized form of this page from the remote site.

      Returns

      The serialized form of this page

      save

      def save(self)

      Save the page. Sends all local changes made to this page to the remote site.

      sync

      def sync(self)

      DEPRECATED: Use Page.save() instead.

      Ancestors

      Inherited members

      PageBase

      class PageBase(url: str)

      Represents a remote page.

      Args
      url
      The URL of the remote page.

      Methods

      add

      def add(self, key: str, card: Any) ‑> Ref

      Add a card to this page.

      Args
      key
      The card's key. Must uniquely identify the card on the page. Overwrites any other card with the same key.
      card
      A card. Use one of the ui.*_card() to create cards.
      Returns

      A reference to the added card.

      drop

      def drop(self)

      Delete this page from the remote site. Same as del site[url].

      Subclasses

      Ref

      class Ref(page: PageBase, key: str)

      Represents a local reference to an element on a Page. Any changes made to this local reference are tracked and sent to the remote Q server when the page is saved.

      ServiceError

      class ServiceError(*args, **kwargs)

      Common base class for all non-exit exceptions.

      Ancestors

      • builtins.Exception
      • builtins.BaseException

      Site

      class Site

      Represents a reference to the remote Q site. A Site instance is used to obtain references to the site's pages.

      Methods

      download

      def download(self, url: str, path: str) ‑> str

      Download a file from the site.

      Args
      url
      The URL of the file.
      path
      The local directory or file path to download to. If a directory is provided, the original name of the file is retained.
      Returns

      The path to the downloaded file.

      load

      def load(self, url) ‑> dict

      Retrieve data at the given URL, typically the serialized form of a page.

      Args
      url
      The URL to read.
      Returns

      The serialized page.

      unload

      def unload(self, url: str)

      Delete an uploaded file from the site.

      Args
      url
      The URL of the file to delete.

      upload

      def upload(self, files: List[str]) ‑> List[str]

      Upload local files to the site.

      Args
      files
      A list of file paths of the files to be uploaded..
      Returns

      A list of remote URLs for the uploaded files, in order.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/db/index.html b/docs/docs/api/db/index.html index 8f10f156db..f738b2d443 100644 --- a/docs/docs/api/db/index.html +++ b/docs/docs/api/db/index.html @@ -4,30 +4,30 @@ -Module h2o_wave.db | H2O Wave +Module h2o_wave.db | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Module h2o_wave.db

      Classes

      TeleDB

      class TeleDB(address: str, key_id: str, key_secret: str)

      Represents a TeleDB database client.

      Create a new client instance.

      Args
      address
      database address
      key_id
      access key id
      key_secret
      access key secret

      TeleDBError

      class TeleDBError(*args, **kwargs)

      Represents a remote exception thrown by the TeleDB database server.

      Ancestors

      • builtins.Exception
      • builtins.BaseException
      Edit this page
      +

      Module h2o_wave.db

      Classes

      TeleDB

      class TeleDB(address: str, key_id: str, key_secret: str)

      Represents a TeleDB database client.

      Create a new client instance.

      Args
      address
      database address
      key_id
      access key id
      key_secret
      access key secret

      TeleDBError

      class TeleDBError(*args, **kwargs)

      Represents a remote exception thrown by the TeleDB database server.

      Ancestors

      • builtins.Exception
      • builtins.BaseException
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/graphics/index.html b/docs/docs/api/graphics/index.html index 7bea56566f..927c91a4d2 100644 --- a/docs/docs/api/graphics/index.html +++ b/docs/docs/api/graphics/index.html @@ -4,30 +4,30 @@ -Module h2o_wave.graphics | H2O Wave +Module h2o_wave.graphics | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Module h2o_wave.graphics

      Functions

      arc

      def arc(r1: float, r2: float, a1: float, a2: float, **kwargs) ‑> Expando

      Draw circular or annular sector, as in a pie or donut chart, centered at (0, 0).

      Args
      r1
      inner radius.
      r2
      outer radius.
      a1
      start angle, in degrees.
      a2
      end angle, in degrees.
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      circle

      def circle(**kwargs) ‑> Expando

      Draw a circle. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      draw

      def draw(element: Ref, **kwargs) ‑> Ref

      Schedule a redraw of the specified graphical element using the provided attributes.

      Args
      element
      A reference to a graphical element.
      kwargs
      Attributes to use while performing a redraw.
      Returns

      The element reference, without change.

      ellipse

      def ellipse(**kwargs) ‑> Expando

      Draw an ellipse. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      image

      def image(**kwargs) ‑> Expando

      Draw an image. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      line

      def line(**kwargs) ‑> Expando

      Draw a line. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      p

      def p() ‑> Path

      Create a new Path.

      Returns

      A new Path.

      path

      def path(**kwargs) ‑> Expando

      Draw a path. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      polygon

      def polygon(**kwargs) ‑> Expando

      Draw a polygon. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      polyline

      def polyline(**kwargs) ‑> Expando

      Draw a polyline. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      rect

      def rect(**kwargs) ‑> Expando

      Draw a rectangle. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      reset

      def reset(element: Ref) ‑> Ref

      Schedule a redraw of the specified graphical element using its original attributes. Calling this function clears any changes performed using the draw() function.

      Args
      element
      A reference to a graphical element.
      Returns

      The element reference, without change.

      scene

      def scene(**kwargs) ‑> Data

      Create a scene. A scene holds graphic elements whose attributes need to be changed dynamically (causing a re-render). The return value must be assigned to the scene() property of a GraphicsCard.

      Args
      kwargs
      Graphical elements to render as part of the scene.
      Returns

      A Data instance.

      spline

      def spline(x: Union[List[Union[float, NoneType]], NoneType] = None, y: Union[List[Union[float, NoneType]], NoneType] = None, x0: Union[List[Union[float, NoneType]], NoneType] = None, y0: Union[List[Union[float, NoneType]], NoneType] = None, curve: Union[str, NoneType] = None, radial: Union[bool, NoneType] = None, **kwargs) ‑> Expando

      Draw a spline.

      If x, y are specified, draws a regular spline.

      If x, y, y0 are specified, draws a horizontal area spline. Sets baseline to zero if y0 is an empty list.

      If x, x0, y are specified, draws a vertical area spline. Sets baseline to zero if x0 is an empty list

      Missing information is rendered as gaps in the spline.

      Args
      x
      x-coordinates.
      y
      y-coordinates.
      x0
      base x-coordinates.
      y0
      base y-coordinates.
      curve
      Interpolation. One of basis, basis-closed, basis-open, cardinal, cardinal-closed, cardinal-open, smooth, smooth-closed, smooth-open, linear, linear-closed, monotone-x, monotone-y, natural, step, step-after, step-before. Defaults to linear.
      radial
      Whether (x, y) should be treated as (angle,radius) or (x0, x, y0, y) should be treated as (start-angle, end-angle, inner-radius, outer-radius).
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      stage

      def stage(**kwargs) ‑> str

      Create a stage. A stage holds static graphics elements that are rendered as part of the background (behind the scene). The return value must be assigned to the stage() property of a GraphicsCard.

      Args
      kwargs
      Graphical elements to render as part of the stage.
      Returns

      Packed data.

      text

      def text(text: str, **kwargs) ‑> Expando

      Draw text. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

      Args
      text
      The text content.
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      turtle

      def turtle(x=0.0, y=0.0, degrees=0.0) ‑> Turtle

      Create a new Turtle.

      Args
      x
      initial position x
      y
      initial position y
      degrees
      initial angle in degrees
      Returns

      A new Turtle.

      type_of

      def type_of(element: Expando) ‑> Union[str, NoneType]

      Get the type of the graphical element.

      Args
      element
      A graphical element.
      Returns

      A string indicating the type of the element, e.g. 'circle', 'line', etc.

      Classes

      Path

      class Path

      A convenience class for drawing SVG paths.

      Methods

      A

      def A(self, rx: float, ry: float, x_axis_rotation: float, large_arc: bool, sweep: bool, x: float, y: float) ‑> Path

      Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x_axis_rotation, which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large_arc and sweep_flagcontribute to the automatic calculations and help determine how the arc is drawn. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

      Args
      rx
      x-radius
      ry
      y-radius
      x_axis_rotation
      Rotation in degrees.
      large_arc
      Determines if the arc should be greater than or less than 180 degrees.
      sweep
      Determines if the arc should begin moving at positive angles or negative ones.
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      C

      def C(self, x1: float, y1: float, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      H

      def H(self, x: float) ‑> Path

      Draws a horizontal line from the current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      Returns

      The current Path instance.

      L

      def L(self, x: float, y: float) ‑> Path

      Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      M

      def M(self, x: float, y: float) ‑> Path

      Start a new sub-path at the given (x,y) coordinates. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      Q

      def Q(self, x1: float, y1: float, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      S

      def S(self, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      T

      def T(self, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      V

      def V(self, y: float) ‑> Path

      Draws a vertical line from the current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      y
      y-coordinate
      Returns

      The current Path instance.

      Z

      def Z(self) ‑> Path

      Close the current subpath by connecting it back to the current subpath's initial point.

      See https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand

      Returns

      The current Path instance.

      a

      def a(self, rx: float, ry: float, x_axis_rotation: float, large_arc: bool, sweep: bool, x: float, y: float) ‑> Path

      Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x_axis_rotation, which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large_arc and sweep_flagcontribute to the automatic calculations and help determine how the arc is drawn. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

      Args
      rx
      x-radius
      ry
      y-radius
      x_axis_rotation
      Rotation in degrees.
      large_arc
      Determines if the arc should be greater than or less than 180 degrees.
      sweep
      Determines if the arc should begin moving at positive angles or negative ones.
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      c

      def c(self, x1: float, y1: float, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      d

      def d(self) ‑> str

      Serialize this path's commands into SVG path data.

      Returns

      The d attribute for a SVG path.

      h

      def h(self, x: float) ‑> Path

      Draws a horizontal line from the current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      Returns

      The current Path instance.

      l

      def l(self, x: float, y: float) ‑> Path

      Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      m

      def m(self, x: float, y: float) ‑> Path

      Start a new sub-path at the given (x,y) coordinates. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      path

      def path(self, **kwargs) ‑> Expando

      A SVG path element representing the commands in this Path instance. Same as calling h2o_wave.graphics.path(d=path.d())

      Args
      kwargs
      Additional attributes for the SVG path element.
      Returns

      A SVG path element.

      q

      def q(self, x1: float, y1: float, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      s

      def s(self, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      t

      def t(self, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      v

      def v(self, y: float) ‑> Path

      Draws a vertical line from the current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      y
      y-coordinate
      Returns

      The current Path instance.

      z

      def z(self) ‑> Path

      Close the current subpath by connecting it back to the current subpath's initial point.

      See https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand

      Returns

      The current Path instance.

      Turtle

      class Turtle(x=0.0, y=0.0, degrees=0.0)

      A Logo-like Turtle implementation for generating SVG paths. This is not a complete Turtle implementation. Contains a useful subset relevant to generating paths without using trigonometry or mental gymnastics.

      Create a Turtle.

      Args
      x
      initial position x
      y
      initial position y
      degrees
      initial angle in degrees

      Methods

      a

      def a(self, degrees: float = 0) ‑> Turtle

      Set the turtle's orientation.

      Args
      degrees
      angle in degrees
      Returns

      The current turtle instance.

      b

      def b(self, distance: float) ‑> Turtle

      Move backward.

      Args
      distance
      Distance to move by.
      Returns

      The current turtle instance.

      d

      def d(self) ‑> str

      Serialize this turtle's movements into SVG path data.

      Returns

      The d attribute for a SVG path.

      f

      def f(self, distance: float) ‑> Turtle

      Move forward.

      Args
      distance
      Distance to move by.
      Returns

      The current turtle instance.

      l

      def l(self, degrees: float) ‑> Turtle

      Turn left.

      Args
      degrees
      Angle in degrees.
      Returns

      The current turtle instance.

      p

      def p(self, x: float = 0.0, y: float = 0.0) ‑> Turtle

      Set the turtle's position.

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current turtle instance.

      path

      def path(self, **kwargs) ‑> Expando

      Create a SVG path element that represents this turtle's movements.

      Args
      kwargs
      Additional attributes for the SVG path element.
      Returns

      A SVG path element.

      pd

      def pd(self) ‑> Turtle

      Pen down.

      Returns

      The current turtle instance.

      pu

      def pu(self, close: bool) ‑> Turtle

      Pen up.

      Args
      close
      Whether to close the current subpath.
      Returns

      The current turtle instance.

      r

      def r(self, degrees: float) ‑> Turtle

      Turn right.

      Args
      degrees
      Angle in degrees.
      Returns

      The current turtle instance.

      Edit this page
      +

      Module h2o_wave.graphics

      Functions

      arc

      def arc(r1: float, r2: float, a1: float, a2: float, **kwargs) ‑> Expando

      Draw circular or annular sector, as in a pie or donut chart, centered at (0, 0).

      Args
      r1
      inner radius.
      r2
      outer radius.
      a1
      start angle, in degrees.
      a2
      end angle, in degrees.
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      circle

      def circle(**kwargs) ‑> Expando

      Draw a circle. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      draw

      def draw(element: Ref, **kwargs) ‑> Ref

      Schedule a redraw of the specified graphical element using the provided attributes.

      Args
      element
      A reference to a graphical element.
      kwargs
      Attributes to use while performing a redraw.
      Returns

      The element reference, without change.

      ellipse

      def ellipse(**kwargs) ‑> Expando

      Draw an ellipse. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      image

      def image(**kwargs) ‑> Expando

      Draw an image. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      line

      def line(**kwargs) ‑> Expando

      Draw a line. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      p

      def p() ‑> Path

      Create a new Path.

      Returns

      A new Path.

      path

      def path(**kwargs) ‑> Expando

      Draw a path. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      polygon

      def polygon(**kwargs) ‑> Expando

      Draw a polygon. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      polyline

      def polyline(**kwargs) ‑> Expando

      Draw a polyline. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      rect

      def rect(**kwargs) ‑> Expando

      Draw a rectangle. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      reset

      def reset(element: Ref) ‑> Ref

      Schedule a redraw of the specified graphical element using its original attributes. Calling this function clears any changes performed using the draw() function.

      Args
      element
      A reference to a graphical element.
      Returns

      The element reference, without change.

      scene

      def scene(**kwargs) ‑> Data

      Create a scene. A scene holds graphic elements whose attributes need to be changed dynamically (causing a re-render). The return value must be assigned to the scene() property of a GraphicsCard.

      Args
      kwargs
      Graphical elements to render as part of the scene.
      Returns

      A Data instance.

      spline

      def spline(x: Union[List[Union[float, NoneType]], NoneType] = None, y: Union[List[Union[float, NoneType]], NoneType] = None, x0: Union[List[Union[float, NoneType]], NoneType] = None, y0: Union[List[Union[float, NoneType]], NoneType] = None, curve: Union[str, NoneType] = None, radial: Union[bool, NoneType] = None, **kwargs) ‑> Expando

      Draw a spline.

      If x, y are specified, draws a regular spline.

      If x, y, y0 are specified, draws a horizontal area spline. Sets baseline to zero if y0 is an empty list.

      If x, x0, y are specified, draws a vertical area spline. Sets baseline to zero if x0 is an empty list

      Missing information is rendered as gaps in the spline.

      Args
      x
      x-coordinates.
      y
      y-coordinates.
      x0
      base x-coordinates.
      y0
      base y-coordinates.
      curve
      Interpolation. One of basis, basis-closed, basis-open, cardinal, cardinal-closed, cardinal-open, smooth, smooth-closed, smooth-open, linear, linear-closed, monotone-x, monotone-y, natural, step, step-after, step-before. Defaults to linear.
      radial
      Whether (x, y) should be treated as (angle,radius) or (x0, x, y0, y) should be treated as (start-angle, end-angle, inner-radius, outer-radius).
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      stage

      def stage(**kwargs) ‑> str

      Create a stage. A stage holds static graphics elements that are rendered as part of the background (behind the scene). The return value must be assigned to the stage() property of a GraphicsCard.

      Args
      kwargs
      Graphical elements to render as part of the stage.
      Returns

      Packed data.

      text

      def text(text: str, **kwargs) ‑> Expando

      Draw text. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

      Args
      text
      The text content.
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      turtle

      def turtle(x=0.0, y=0.0, degrees=0.0) ‑> Turtle

      Create a new Turtle.

      Args
      x
      initial position x
      y
      initial position y
      degrees
      initial angle in degrees
      Returns

      A new Turtle.

      type_of

      def type_of(element: Expando) ‑> Union[str, NoneType]

      Get the type of the graphical element.

      Args
      element
      A graphical element.
      Returns

      A string indicating the type of the element, e.g. 'circle', 'line', etc.

      Classes

      Path

      class Path

      A convenience class for drawing SVG paths.

      Methods

      A

      def A(self, rx: float, ry: float, x_axis_rotation: float, large_arc: bool, sweep: bool, x: float, y: float) ‑> Path

      Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x_axis_rotation, which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large_arc and sweep_flagcontribute to the automatic calculations and help determine how the arc is drawn. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

      Args
      rx
      x-radius
      ry
      y-radius
      x_axis_rotation
      Rotation in degrees.
      large_arc
      Determines if the arc should be greater than or less than 180 degrees.
      sweep
      Determines if the arc should begin moving at positive angles or negative ones.
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      C

      def C(self, x1: float, y1: float, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      H

      def H(self, x: float) ‑> Path

      Draws a horizontal line from the current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      Returns

      The current Path instance.

      L

      def L(self, x: float, y: float) ‑> Path

      Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      M

      def M(self, x: float, y: float) ‑> Path

      Start a new sub-path at the given (x,y) coordinates. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      Q

      def Q(self, x1: float, y1: float, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      S

      def S(self, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      T

      def T(self, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      V

      def V(self, y: float) ‑> Path

      Draws a vertical line from the current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      y
      y-coordinate
      Returns

      The current Path instance.

      Z

      def Z(self) ‑> Path

      Close the current subpath by connecting it back to the current subpath's initial point.

      See https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand

      Returns

      The current Path instance.

      a

      def a(self, rx: float, ry: float, x_axis_rotation: float, large_arc: bool, sweep: bool, x: float, y: float) ‑> Path

      Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x_axis_rotation, which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large_arc and sweep_flagcontribute to the automatic calculations and help determine how the arc is drawn. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

      Args
      rx
      x-radius
      ry
      y-radius
      x_axis_rotation
      Rotation in degrees.
      large_arc
      Determines if the arc should be greater than or less than 180 degrees.
      sweep
      Determines if the arc should begin moving at positive angles or negative ones.
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      c

      def c(self, x1: float, y1: float, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      d

      def d(self) ‑> str

      Serialize this path's commands into SVG path data.

      Returns

      The d attribute for a SVG path.

      h

      def h(self, x: float) ‑> Path

      Draws a horizontal line from the current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      Returns

      The current Path instance.

      l

      def l(self, x: float, y: float) ‑> Path

      Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      m

      def m(self, x: float, y: float) ‑> Path

      Start a new sub-path at the given (x,y) coordinates. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      path

      def path(self, **kwargs) ‑> Expando

      A SVG path element representing the commands in this Path instance. Same as calling h2o_wave.graphics.path(d=path.d())

      Args
      kwargs
      Additional attributes for the SVG path element.
      Returns

      A SVG path element.

      q

      def q(self, x1: float, y1: float, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      s

      def s(self, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      t

      def t(self, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      v

      def v(self, y: float) ‑> Path

      Draws a vertical line from the current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      y
      y-coordinate
      Returns

      The current Path instance.

      z

      def z(self) ‑> Path

      Close the current subpath by connecting it back to the current subpath's initial point.

      See https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand

      Returns

      The current Path instance.

      Turtle

      class Turtle(x=0.0, y=0.0, degrees=0.0)

      A Logo-like Turtle implementation for generating SVG paths. This is not a complete Turtle implementation. Contains a useful subset relevant to generating paths without using trigonometry or mental gymnastics.

      Create a Turtle.

      Args
      x
      initial position x
      y
      initial position y
      degrees
      initial angle in degrees

      Methods

      a

      def a(self, degrees: float = 0) ‑> Turtle

      Set the turtle's orientation.

      Args
      degrees
      angle in degrees
      Returns

      The current turtle instance.

      b

      def b(self, distance: float) ‑> Turtle

      Move backward.

      Args
      distance
      Distance to move by.
      Returns

      The current turtle instance.

      d

      def d(self) ‑> str

      Serialize this turtle's movements into SVG path data.

      Returns

      The d attribute for a SVG path.

      f

      def f(self, distance: float) ‑> Turtle

      Move forward.

      Args
      distance
      Distance to move by.
      Returns

      The current turtle instance.

      l

      def l(self, degrees: float) ‑> Turtle

      Turn left.

      Args
      degrees
      Angle in degrees.
      Returns

      The current turtle instance.

      p

      def p(self, x: float = 0.0, y: float = 0.0) ‑> Turtle

      Set the turtle's position.

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current turtle instance.

      path

      def path(self, **kwargs) ‑> Expando

      Create a SVG path element that represents this turtle's movements.

      Args
      kwargs
      Additional attributes for the SVG path element.
      Returns

      A SVG path element.

      pd

      def pd(self) ‑> Turtle

      Pen down.

      Returns

      The current turtle instance.

      pu

      def pu(self, close: bool) ‑> Turtle

      Pen up.

      Args
      close
      Whether to close the current subpath.
      Returns

      The current turtle instance.

      r

      def r(self, degrees: float) ‑> Turtle

      Turn right.

      Args
      degrees
      Angle in degrees.
      Returns

      The current turtle instance.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/index/index.html b/docs/docs/api/index/index.html index 2be39b4051..f2ead9ff91 100644 --- a/docs/docs/api/index/index.html +++ b/docs/docs/api/index/index.html @@ -4,30 +4,30 @@ -Package h2o_wave | H2O Wave +Package h2o_wave | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Package h2o_wave

      Python package h2o_wave provides the Python driver for H2O Wave.

      H2O Wave is a lightweight software stack for programming interactive web applications entirely in Python (no HTML/Javascript/CSS) required.

      It is designed to make it fast, fun and easy to build low-latency, realtime, collaborative, web-based applications. It ships batteries-included with a suite of form and data visualization components for rapidly prototyping analytical and decision-support applications.

      Wave's components work in conjunction with the Q relay server that facilitates realtime state synchronization between Python and web browsers.

      Sub-modules

      h2o_wave.autoreload
      h2o_wave.core
      h2o_wave.db
      h2o_wave.graphics
      h2o_wave.server
      h2o_wave.test
      h2o_wave.types
      h2o_wave.ui
      Edit this page
      +

      Package h2o_wave

      Python package h2o_wave provides the Python driver for H2O Wave.

      H2O Wave is a lightweight software stack for programming interactive web applications entirely in Python (no HTML/Javascript/CSS) required.

      It is designed to make it fast, fun and easy to build low-latency, realtime, collaborative, web-based applications. It ships batteries-included with a suite of form and data visualization components for rapidly prototyping analytical and decision-support applications.

      Wave's components work in conjunction with the Q relay server that facilitates realtime state synchronization between Python and web browsers.

      Sub-modules

      h2o_wave.autoreload
      h2o_wave.core
      h2o_wave.db
      h2o_wave.graphics
      h2o_wave.server
      h2o_wave.test
      h2o_wave.types
      h2o_wave.ui
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/server/index.html b/docs/docs/api/server/index.html index 67fdd43239..854a4b1a0c 100644 --- a/docs/docs/api/server/index.html +++ b/docs/docs/api/server/index.html @@ -4,30 +4,30 @@ -Module h2o_wave.server | H2O Wave +Module h2o_wave.server | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Module h2o_wave.server

      Functions

      listen

      def listen(route: str, handle: Callable[[Query], Awaitable[Any]], mode='unicast')

      Launch an application server.

      Args
      route
      The route to listen to. e.g. '/foo' or '/foo/bar/baz'.
      handle
      The handler function.
      mode
      The server mode. One of 'unicast' (default),'multicast' or 'broadcast'.

      Classes

      Query

      class Query(site: AsyncSite, mode: str, username: str, client_id: str, route: str, app_state: Expando, user_state: Expando, client_state: Expando, args: Expando)

      Represents the query context. The query context is passed to the listen() handler function whenever a query arrives from the browser (page load, user interaction events, etc.). The query context contains useful information about the query, including argumentsargs (equivalent to URL query strings) and app-level, user-level and client-level state.

      Instance variables

      var app

      A Expando instance to hold application-specific state.

      var args

      A Expando instance containing the active request.

      var client

      An Expando instance to hold client-specific state.

      var mode

      The server mode. One of 'unicast' (default),'multicast' or 'broadcast'.

      var page

      A reference to the current page.

      var route

      The route served by the server.

      var site

      A reference to the current site.

      var user

      A Expando instance to hold user-specific state.

      var username

      The username of the user who initiated the active request.

      Methods

      sleep

      async def sleep(self, delay)

      Q

      class Q(site: AsyncSite, mode: str, username: str, client_id: str, route: str, app_state: Expando, user_state: Expando, client_state: Expando, args: Expando)

      Represents the query context. The query context is passed to the listen() handler function whenever a query arrives from the browser (page load, user interaction events, etc.). The query context contains useful information about the query, including argumentsargs (equivalent to URL query strings) and app-level, user-level and client-level state.

      Instance variables

      var app

      A Expando instance to hold application-specific state.

      var args

      A Expando instance containing the active request.

      var client

      An Expando instance to hold client-specific state.

      var mode

      The server mode. One of 'unicast' (default),'multicast' or 'broadcast'.

      var page

      A reference to the current page.

      var route

      The route served by the server.

      var site

      A reference to the current site.

      var user

      A Expando instance to hold user-specific state.

      var username

      The username of the user who initiated the active request.

      Methods

      sleep

      async def sleep(self, delay)
      Edit this page
      +

      Module h2o_wave.server

      Functions

      listen

      def listen(route: str, handle: Callable[[Query], Awaitable[Any]], mode='unicast')

      Launch an application server.

      Args
      route
      The route to listen to. e.g. '/foo' or '/foo/bar/baz'.
      handle
      The handler function.
      mode
      The server mode. One of 'unicast' (default),'multicast' or 'broadcast'.

      Classes

      Auth

      class Auth(username: str, subject: str)

      Represents authentication information for a given query context. Carries valid information only if single sign on is enabled.

      Instance variables

      var subject

      A unique identifier for the user.

      var username

      The username of the user.

      Query

      class Query(site: AsyncSite, mode: str, username: str, client_id: str, route: str, app_state: Expando, user_state: Expando, client_state: Expando, auth: Auth, args: Expando)

      Represents the query context. The query context is passed to the listen() handler function whenever a query arrives from the browser (page load, user interaction events, etc.). The query context contains useful information about the query, including argumentsargs (equivalent to URL query strings) and app-level, user-level and client-level state.

      Instance variables

      var app

      A Expando instance to hold application-specific state.

      var args

      A Expando instance containing the active request.

      var auth

      The username and subject ID of the authenticated user.

      var client

      An Expando instance to hold client-specific state.

      var mode

      The server mode. One of 'unicast' (default),'multicast' or 'broadcast'.

      var page

      A reference to the current page.

      var route

      The route served by the server.

      var site

      A reference to the current site.

      var user

      A Expando instance to hold user-specific state.

      var username

      The username of the user who initiated the active request.

      Methods

      sleep

      async def sleep(self, delay)

      Q

      class Q(site: AsyncSite, mode: str, username: str, client_id: str, route: str, app_state: Expando, user_state: Expando, client_state: Expando, auth: Auth, args: Expando)

      Represents the query context. The query context is passed to the listen() handler function whenever a query arrives from the browser (page load, user interaction events, etc.). The query context contains useful information about the query, including argumentsargs (equivalent to URL query strings) and app-level, user-level and client-level state.

      Instance variables

      var app

      A Expando instance to hold application-specific state.

      var args

      A Expando instance containing the active request.

      var auth

      The username and subject ID of the authenticated user.

      var client

      An Expando instance to hold client-specific state.

      var mode

      The server mode. One of 'unicast' (default),'multicast' or 'broadcast'.

      var page

      A reference to the current page.

      var route

      The route served by the server.

      var site

      A reference to the current site.

      var user

      A Expando instance to hold user-specific state.

      var username

      The username of the user who initiated the active request.

      Methods

      sleep

      async def sleep(self, delay)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/test/index.html b/docs/docs/api/test/index.html index e298228a21..07dc769a5a 100644 --- a/docs/docs/api/test/index.html +++ b/docs/docs/api/test/index.html @@ -4,30 +4,30 @@ -Module h2o_wave.test | H2O Wave +Module h2o_wave.test | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Module h2o_wave.test

      Functions

      cypress

      def cypress(description: str)

      Classes

      Cypress

      class Cypress

      Represents a Cypress test translator.

      Methods

      run

      def run(self, f)

      Includes all steps from the given test into the current test.

      Args
      f
      A Python function containing Cypress test steps.
      Edit this page
      +

      Module h2o_wave.test

      Functions

      cypress

      def cypress(description: str)

      Classes

      Cypress

      class Cypress

      Represents a Cypress test translator.

      Methods

      run

      def run(self, f)

      Includes all steps from the given test into the current test.

      Args
      f
      A Python function containing Cypress test steps.
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/types/index.html b/docs/docs/api/types/index.html index 0ba6e44550..786c719152 100644 --- a/docs/docs/api/types/index.html +++ b/docs/docs/api/types/index.html @@ -4,30 +4,30 @@ -Module h2o_wave.types | H2O Wave +Module h2o_wave.types | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Module h2o_wave.types

      Classes

      Breadcrumb

      class Breadcrumb(name: str, label: str)

      Create a breadcrumb for a h2o_q.types.BreadcrumbsCard().

      Static methods

      load

      def load(_Breadcrumb__d: Dict) ‑> Breadcrumb

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var label

      The label to display.

      var name

      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      BreadcrumbsCard

      class BreadcrumbsCard(box: str, items: List[Breadcrumb], commands: Union[List[Command], NoneType] = None)

      Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

      Static methods

      load

      def load(_BreadcrumbsCard__d: Dict) ‑> BreadcrumbsCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      A list of h2o_q.types.Breadcrumb instances to display. See h2o_q.ui.breadcrumb()

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Button

      class Button(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, value: Union[str, NoneType] = None, primary: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a button.

      Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

      When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements.

      Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.

      While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.

      Static methods

      load

      def load(_Button__d: Dict) ‑> Button

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var caption

      The caption displayed below the label. Setting a caption renders a compound button.

      var disabled

      True if the button should be disabled.

      var label

      The text displayed on the button.

      var link

      True if the button should be rendered as link text and not a standard button.

      var name

      An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.

      var primary

      True if the button should be rendered as the primary button in the set.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Buttons

      class Buttons(items: List[ForwardRef('Component')], justify: Union[str, NoneType] = None)

      Create a set of buttons to be layed out horizontally.

      Static methods

      load

      def load(_Buttons__d: Dict) ‑> Buttons

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The button in this set.

      var justify

      Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Checkbox

      class Checkbox(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, indeterminate: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a checkbox.

      A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component.

      A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected.

      For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action.

      Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Static methods

      load

      def load(_Checkbox__d: Dict) ‑> Checkbox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the checkbox is disabled.

      var indeterminate

      True if the selection is indeterminate (neither selected nor unselected).

      var label

      Text to be displayed alongside the checkbox.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the checkbox value changes.

      var value

      True if selected, False if unselected.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Checklist

      class Checklist(name: str, label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Static methods

      load

      def load(_Checklist__d: Dict) ‑> Checklist

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var label

      Text to be displayed above the component.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the checklist value changes.

      var values

      The names of the selected choices.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Choice

      class Choice(name: str, label: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None)

      Create a choice for a checklist, choice group or dropdown.

      Static methods

      load

      def load(_Choice__d: Dict) ‑> Choice

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the checkbox is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ChoiceGroup

      class ChoiceGroup(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group.

      Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead.

      If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don't agree."

      Static methods

      load

      def load(_ChoiceGroup__d: Dict) ‑> ChoiceGroup

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var required

      True if this field is required.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the selection changes.

      var value

      The name of the selected choice.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ColorPicker

      class ColorPicker(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a color picker.

      A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.

      Static methods

      load

      def load(_ColorPicker__d: Dict) ‑> ColorPicker

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      A list of colors (CSS-compatible strings) to limit color choices to.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The selected color (CSS-compatible string)

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Combobox

      class Combobox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, error: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a combobox.

      A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI.

      When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.

      Static methods

      load

      def load(_Combobox__d: Dict) ‑> Combobox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var disabled

      True if this field is disabled.

      var error

      Text to be displayed as an error below the text box.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The name of the selected choice.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Command

      class Command(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, items: Union[List[ForwardRef('Command')], NoneType] = None, data: Union[str, NoneType] = None)

      Create a command.

      Commands are typically displayed as context menu items or toolbar button.

      Static methods

      load

      def load(_Command__d: Dict) ‑> Command

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var caption

      The caption for this command (typically a tooltip).

      var data

      Data associated with this command, if any.

      var icon

      The icon to be displayed for this command.

      var items

      Sub-commands, if any

      var label

      The text displayed for this command.

      var name

      An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Component

      class Component(text: Union[Text, NoneType] = None, text_xl: Union[TextXl, NoneType] = None, text_l: Union[TextL, NoneType] = None, text_m: Union[TextM, NoneType] = None, text_s: Union[TextS, NoneType] = None, text_xs: Union[TextXs, NoneType] = None, label: Union[Label, NoneType] = None, separator: Union[Separator, NoneType] = None, progress: Union[Progress, NoneType] = None, message_bar: Union[MessageBar, NoneType] = None, textbox: Union[Textbox, NoneType] = None, checkbox: Union[Checkbox, NoneType] = None, toggle: Union[Toggle, NoneType] = None, choice_group: Union[ChoiceGroup, NoneType] = None, checklist: Union[Checklist, NoneType] = None, dropdown: Union[Dropdown, NoneType] = None, combobox: Union[Combobox, NoneType] = None, slider: Union[Slider, NoneType] = None, spinbox: Union[Spinbox, NoneType] = None, date_picker: Union[DatePicker, NoneType] = None, color_picker: Union[ColorPicker, NoneType] = None, button: Union[Button, NoneType] = None, buttons: Union[Buttons, NoneType] = None, file_upload: Union[FileUpload, NoneType] = None, table: Union[Table, NoneType] = None, link: Union[Link, NoneType] = None, tabs: Union[Tabs, NoneType] = None, expander: Union[Expander, NoneType] = None, frame: Union[Frame, NoneType] = None, markup: Union[Markup, NoneType] = None, template: Union[Template, NoneType] = None, picker: Union[Picker, NoneType] = None, range_slider: Union[RangeSlider, NoneType] = None, stepper: Union[Stepper, NoneType] = None, visualization: Union[Visualization, NoneType] = None, vega_visualization: Union[VegaVisualization, NoneType] = None)

      Create a component.

      Static methods

      load

      def load(_Component__d: Dict) ‑> Component

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var button

      Button.

      var buttons

      Button set.

      var checkbox

      Checkbox.

      var checklist

      Checklist.

      var choice_group

      Choice group.

      var color_picker

      Color picker.

      var combobox

      Combobox.

      var date_picker

      Date picker.

      var dropdown

      Dropdown.

      var expander

      Expander.

      var file_upload

      File upload.

      var frame

      Frame.

      var label

      Label.

      var link

      Link.

      var markup

      Markup

      var message_bar

      Message bar.

      var picker

      Picker.

      var progress

      Progress bar.

      var range_slider

      Range Slider.

      var separator

      Separator.

      var slider

      Slider.

      var spinbox

      Spinbox.

      var stepper

      Stepper.

      var table

      Table.

      var tabs

      Tabs.

      var template

      Template

      var text

      Text block.

      var text_l

      Large sized text block.

      var text_m

      Medium sized text block.

      var text_s

      Small sized text block.

      var text_xl

      Extra-large sized text block.

      var text_xs

      Extra-small sized text block.

      var textbox

      Textbox.

      var toggle

      Toggle.

      var vega_visualization

      Vega-lite Visualization.

      var visualization

      Visualization.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      DatePicker

      class DatePicker(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a date picker.

      A date picker allows a user to pick a date value.

      Static methods

      load

      def load(_DatePicker__d: Dict) ‑> DatePicker

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The date value in YYYY-MM-DD format.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Dropdown

      class Dropdown(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a dropdown.

      A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible.

      To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.

      Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.

      Static methods

      load

      def load(_Dropdown__d: Dict) ‑> Dropdown

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field.

      var required

      True if this is a required field.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the dropdown value changes.

      var value

      The name of the selected choice.

      var values

      The names of the selected choices. If this parameter is set, multiple selections will be allowed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Expander

      class Expander(name: str, label: Union[str, NoneType] = None, expanded: Union[bool, NoneType] = None, items: Union[List[ForwardRef('Component')], NoneType] = None)

      Creates a new expander.

      Expanders can be used to show or hide a group of related components.

      Static methods

      load

      def load(_Expander__d: Dict) ‑> Expander

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var expanded

      True if expanded, False if collapsed.

      var items

      List of components to be hideable by the expander.

      var label

      The text displayed on the expander.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FileUpload

      class FileUpload(name: str, label: Union[str, NoneType] = None, multiple: Union[bool, NoneType] = None, file_extensions: Union[List[str], NoneType] = None, max_file_size: Union[float, NoneType] = None, max_size: Union[float, NoneType] = None, height: Union[str, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.

      Static methods

      load

      def load(_FileUpload__d: Dict) ‑> FileUpload

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var file_extensions

      List of allowed file extensions, e.g. pdf, docx, etc.

      var height

      The height of the file upload, e.g. '400px', '50%', etc.

      var label

      Text to be displayed alongside the component.

      var max_file_size

      Maximum allowed size (Mb) per file. Defaults to no limit.

      var max_size

      Maximum allowed size (Mb) for all files combined. Defaults to no limit.

      var multiple

      True if the component should allow multiple files to be uploaded.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FlexCard

      class FlexCard(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], direction: Union[str, NoneType] = None, justify: Union[str, NoneType] = None, align: Union[str, NoneType] = None, wrap: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.

      Static methods

      load

      def load(_FlexCard__d: Dict) ‑> FlexCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var align

      Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var direction

      Layout direction. One of 'horizontal', 'vertical'.

      var item_props

      The child card properties.

      var item_view

      The child card type.

      var justify

      Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'.

      var wrap

      Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FormCard

      class FormCard(box: str, items: Union[List[Component], str], commands: Union[List[Command], NoneType] = None)

      Create a form.

      Static methods

      load

      def load(_FormCard__d: Dict) ‑> FormCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      The components in this form.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Frame

      class Frame(path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None)

      Create a new inline frame (an iframe).

      Static methods

      load

      def load(_Frame__d: Dict) ‑> Frame

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The HTML content of the page. A string containing <html>...</html>.

      var height

      The height of the frame, e.g. 200px, 50%, etc. Defaults to 150px.

      var path

      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html

      var width

      The width of the frame, e.g. 200px, 50%, etc. Defaults to 100%.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FrameCard

      class FrameCard(box: str, title: str, path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Render a card containing a HTML page inside an inline frame (an iframe).

      Either a path or content can be provided as arguments.

      Static methods

      load

      def load(_FrameCard__d: Dict) ‑> FrameCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The HTML content of the page. A string containing <html>...</html>

      var path

      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      GraphicsCard

      class GraphicsCard(box: str, view_box: str, stage: Union[List[dict], str, NoneType] = None, scene: Union[Data, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card for displaying vector graphics.

      Static methods

      load

      def load(_GraphicsCard__d: Dict) ‑> GraphicsCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var height

      The displayed height of the rectangular viewport. (Not the height of its coordinate system.)

      var scene

      Foreground layer for rendering dynamic SVG elements.

      var stage

      Background layer for rendering static SVG elements. Must be packed to conserve memory.

      var view_box

      The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

      var width

      The displayed width of the rectangular viewport. (Not the width of its coordinate system.)

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      GridCard

      class GridCard(box: str, title: str, cells: Union[Data, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE.

      Static methods

      load

      def load(_GridCard__d: Dict) ‑> GridCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var cells

      EXPERIMENTAL. DO NOT USE.

      var commands

      Contextual menu commands for this component.

      var data

      EXPERIMENTAL. DO NOT USE.

      var title

      EXPERIMENTAL. DO NOT USE.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      HeaderCard

      class HeaderCard(box: str, title: str, subtitle: str, icon: Union[str, NoneType] = None, icon_color: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Render a card containing a HTML page inside an inline frame (iframe).

      Either a path or content can be provided as arguments.

      Static methods

      load

      def load(_HeaderCard__d: Dict) ‑> HeaderCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var icon

      The icon type, displayed to the left.

      var icon_color

      The icon's color.

      var subtitle

      The subtitle, displayed below the title.

      var title

      The title.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      IconTableCellType

      class IconTableCellType(color: Union[str, NoneType] = None)

      Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.

      Static methods

      load

      def load(_IconTableCellType__d: Dict) ‑> IconTableCellType

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var color

      Icon color.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ImageCard

      class ImageCard(box: str, title: str, type: str, image: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card that displays a base64-encoded image.

      Static methods

      load

      def load(_ImageCard__d: Dict) ‑> ImageCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var image

      Image data, base64-encoded.

      var title

      The card's title.

      var type

      The image MIME subtype. One of apng, bmp, gif, x-icon, jpeg, png, webp.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Label

      class Label(label: str, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a label.

      Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.

      Static methods

      load

      def load(_Label__d: Dict) ‑> Label

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the label should be disabled.

      var label

      The text displayed on the label.

      var required

      True if the field is required.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      LargeBarStatCard

      class LargeBarStatCard(box: str, title: str, caption: str, value: str, aux_value: str, value_caption: str, aux_value_caption: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

      Static methods

      load

      def load(_LargeBarStatCard__d: Dict) ‑> LargeBarStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value, typically a target value.

      var aux_value_caption

      The caption displayed below the auxiliary value.

      var box

      A string indicating how to place this component on the page.

      var caption

      The card's caption.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress bar.

      var progress

      The value of the progress bar, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      var value_caption

      The caption displayed below the primary value.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      LargeStatCard

      class LargeStatCard(box: str, title: str, value: str, aux_value: str, caption: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a stat card displaying a primary value, an auxiliary value and a caption.

      Static methods

      load

      def load(_LargeStatCard__d: Dict) ‑> LargeStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var caption

      The caption displayed below the primary value.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Link

      class Link(label: Union[str, NoneType] = None, path: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, download: Union[bool, NoneType] = None, button: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a hyperlink.

      Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a / and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.

      Static methods

      load

      def load(_Link__d: Dict) ‑> Link

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var button

      True if the link should be rendered as a button.

      var disabled

      True if the link should be disabled.

      var download

      True if the link should be used for file download.

      var label

      The text to be displayed. If blank, the path is used as the label.

      var path

      The path or URL to link to.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ListCard

      class ListCard(box: str, title: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).

      Static methods

      load

      def load(_ListCard__d: Dict) ‑> ListCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var item_props

      The child card properties.

      var item_view

      The child card type.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ListItem1Card

      class ListItem1Card(box: str, title: str, caption: str, value: str, aux_value: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE.

      Static methods

      load

      def load(_ListItem1Card__d: Dict) ‑> ListItem1Card

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      EXPERIMENTAL. DO NOT USE.

      var box

      A string indicating how to place this component on the page.

      var caption

      EXPERIMENTAL. DO NOT USE.

      var commands

      Contextual menu commands for this component.

      var data

      EXPERIMENTAL. DO NOT USE.

      var title

      EXPERIMENTAL. DO NOT USE.

      var value

      EXPERIMENTAL. DO NOT USE.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Mark

      class Mark(coord: Union[str, NoneType] = None, type: Union[str, NoneType] = None, x: Union[str, float, int, NoneType] = None, x0: Union[str, float, int, NoneType] = None, x1: Union[str, float, int, NoneType] = None, x2: Union[str, float, int, NoneType] = None, x_min: Union[float, NoneType] = None, x_max: Union[float, NoneType] = None, x_nice: Union[bool, NoneType] = None, x_scale: Union[str, NoneType] = None, x_title: Union[str, NoneType] = None, y: Union[str, float, int, NoneType] = None, y0: Union[str, float, int, NoneType] = None, y1: Union[str, float, int, NoneType] = None, y2: Union[str, float, int, NoneType] = None, y_min: Union[float, NoneType] = None, y_max: Union[float, NoneType] = None, y_nice: Union[bool, NoneType] = None, y_scale: Union[str, NoneType] = None, y_title: Union[str, NoneType] = None, color: Union[str, NoneType] = None, color_range: Union[str, NoneType] = None, color_domain: Union[List[str], NoneType] = None, shape: Union[str, NoneType] = None, shape_range: Union[str, NoneType] = None, size: Union[str, float, int, NoneType] = None, size_range: Union[str, NoneType] = None, stack: Union[str, NoneType] = None, dodge: Union[str, NoneType] = None, curve: Union[str, NoneType] = None, fill_color: Union[str, NoneType] = None, fill_opacity: Union[float, NoneType] = None, stroke_color: Union[str, NoneType] = None, stroke_opacity: Union[float, NoneType] = None, stroke_size: Union[float, NoneType] = None, stroke_dash: Union[str, NoneType] = None, label: Union[str, NoneType] = None, label_offset: Union[float, NoneType] = None, label_offset_x: Union[float, NoneType] = None, label_offset_y: Union[float, NoneType] = None, label_rotation: Union[str, NoneType] = None, label_position: Union[str, NoneType] = None, label_overlap: Union[str, NoneType] = None, label_fill_color: Union[str, NoneType] = None, label_fill_opacity: Union[float, NoneType] = None, label_stroke_color: Union[str, NoneType] = None, label_stroke_opacity: Union[float, NoneType] = None, label_stroke_size: Union[float, NoneType] = None, label_font_size: Union[float, NoneType] = None, label_font_weight: Union[str, NoneType] = None, label_line_height: Union[float, NoneType] = None, label_align: Union[str, NoneType] = None, ref_stroke_color: Union[str, NoneType] = None, ref_stroke_opacity: Union[float, NoneType] = None, ref_stroke_size: Union[float, NoneType] = None, ref_stroke_dash: Union[str, NoneType] = None)

      Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.

      Static methods

      load

      def load(_Mark__d: Dict) ‑> Mark

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var color

      Mark color field or value.

      var color_domain

      The unique values in the data (labels or categories or classes) to map colors to, e.g. ['high', 'medium', 'low']. If this is not provided, the unique values are automatically inferred from the color attribute.

      var color_range

      Mark color range for multi-series plots. A string containing space-separated colors, e.g. '#fee8c8 #fdbb84 #e34a33'

      var coord

      Coordinate system. rect is synonymous to cartesian. theta is transposed polar. One of 'rect', 'cartesian', 'polar', 'theta', 'helix'.

      var curve

      Curve type for line and area mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'.

      var dodge

      Field to dodge marks by, or 'auto' to infer.

      var fill_color

      Mark fill color.

      var fill_opacity

      Mark fill opacity.

      var label

      Label field or value.

      var label_align

      Label text alignment. One of 'left', 'right', 'center', 'start', 'end'.

      var label_fill_color

      Label fill color.

      var label_fill_opacity

      Label fill opacity.

      var label_font_size

      Label font size.

      var label_font_weight

      Label font weight.

      var label_line_height

      Label line height.

      var label_offset

      Distance between label and mark.

      var label_offset_x

      Horizontal distance between label and mark.

      var label_offset_y

      Vertical distance between label and mark.

      var label_overlap

      Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'.

      var label_position

      Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'.

      var label_rotation

      Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.

      var label_stroke_color

      Label stroke color.

      var label_stroke_opacity

      Label stroke opacity.

      var label_stroke_size

      Label stroke size (line width or pen thickness).

      var ref_stroke_color

      Reference line stroke color.

      var ref_stroke_dash

      Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].

      var ref_stroke_opacity

      Reference line stroke opacity.

      var ref_stroke_size

      Reference line stroke size (line width or pen thickness).

      var shape

      Mark shape field or value for point mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.

      var shape_range

      Mark shape range for multi-series plots using point mark types. A string containing space-separated shapes, e.g. 'circle square diamond'

      var size

      Mark size field or value.

      var size_range

      Mark size range. A string containing space-separated integers, e.g. '4 30'

      var stack

      Field to stack marks by, or 'auto' to infer.

      var stroke_color

      Mark stroke color.

      var stroke_dash

      Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].

      var stroke_opacity

      Mark stroke opacity.

      var stroke_size

      Mark stroke size.

      var type

      Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'.

      var x

      X field or value.

      var x0

      X base field or value.

      var x1

      X bin lower bound field or value. For histograms.

      var x2

      X bin upper bound field or value. For histograms.

      var x_max

      X axis scale maximum.

      var x_min

      X axis scale minimum.

      var x_nice

      Whether to nice X axis scale ticks.

      var x_scale

      X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.

      var x_title

      X axis title.

      var y

      Y field or value.

      var y0

      Y base field or value.

      var y1

      Y bin lower bound field or value. For histograms.

      var y2

      Y bin upper bound field or value. For histograms.

      var y_max

      Y axis scale maximum.

      var y_min

      Y axis scale minimum.

      var y_nice

      Whether to nice Y axis scale ticks.

      var y_scale

      Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.

      var y_title

      Y axis title.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MarkdownCard

      class MarkdownCard(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card that renders Markdown content.

      Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.

      Static methods

      load

      def load(_MarkdownCard__d: Dict) ‑> MarkdownCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/

      var data

      Additional data for the card.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Markup

      class Markup(content: str)

      Render HTML content.

      Static methods

      load

      def load(_Markup__d: Dict) ‑> Markup

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The HTML content.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MarkupCard

      class MarkupCard(box: str, title: str, content: str, commands: Union[List[Command], NoneType] = None)

      Render HTML content.

      Static methods

      load

      def load(_MarkupCard__d: Dict) ‑> MarkupCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The HTML content.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MessageBar

      class MessageBar(type: Union[str, NoneType] = None, text: Union[str, NoneType] = None)

      Create a message bar.

      A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.

      Static methods

      load

      def load(_MessageBar__d: Dict) ‑> MessageBar

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var text

      The text displayed on the message bar.

      var type

      The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MetaCard

      class MetaCard(box: str, title: Union[str, NoneType] = None, refresh: Union[int, NoneType] = None, notification: Union[str, NoneType] = None, redirect: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Represents page-global state.

      This card is invisible. It is used to control attributes of the active page.

      Static methods

      load

      def load(_MetaCard__d: Dict) ‑> MetaCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var notification

      Display a desktop notification to the user.

      var redirect

      Redirect the page to a new URL.

      var refresh

      Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).

      var title

      The title of the page.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      NavCard

      class NavCard(box: str, items: List[NavGroup], commands: Union[List[Command], NoneType] = None)

      Create a card containing a navigation pane.

      Static methods

      load

      def load(_NavCard__d: Dict) ‑> NavCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      The navigation groups contained in this pane.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      NavGroup

      class NavGroup(label: str, items: List[NavItem])

      Create a group of navigation items.

      Static methods

      load

      def load(_NavGroup__d: Dict) ‑> NavGroup

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The navigation items contained in this group.

      var label

      The label to display for this group.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      NavItem

      class NavItem(name: str, label: str)

      Create a navigation item.

      Static methods

      load

      def load(_NavItem__d: Dict) ‑> NavItem

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var label

      The label to display.

      var name

      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Picker

      class Picker(name: str, choices: List[Choice], label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, max_choices: Union[int, NoneType] = None, disabled: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.

      Static methods

      load

      def load(_Picker__d: Dict) ‑> Picker

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var disabled

      Controls whether the picker should be disabled or not.

      var label

      Text to be displayed above the component.

      var max_choices

      Maximum number of selectable choices. Defaults to no limit.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var values

      The names of the selected choices.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      PixelArtCard

      class PixelArtCard(box: str, title: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None)

      Create a card displaying a collaborative Pixel art tool, just for kicks.

      Static methods

      load

      def load(_PixelArtCard__d: Dict) ‑> PixelArtCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      The data for this card.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Plot

      class Plot(marks: List[Mark])

      Create a plot. A plot is composed of one or more graphical mark layers.

      Static methods

      load

      def load(_Plot__d: Dict) ‑> Plot

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var marks

      The graphical mark layers contained in this plot.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      PlotCard

      class PlotCard(box: str, title: str, data: Union[dict, str], plot: Plot, commands: Union[List[Command], NoneType] = None)

      Create a card displaying a plot.

      Static methods

      load

      def load(_PlotCard__d: Dict) ‑> PlotCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot

      The plot to be displayed in this card.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Progress

      class Progress(label: str, caption: Union[str, NoneType] = None, value: Union[float, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a progress bar.

      Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing.

      Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]

      Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.

      Static methods

      load

      def load(_Progress__d: Dict) ‑> Progress

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var caption

      The text displayed below the bar.

      var label

      The text displayed above the bar.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ProgressTableCellType

      class ProgressTableCellType(color: Union[str, NoneType] = None)

      Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.

      Static methods

      load

      def load(_ProgressTableCellType__d: Dict) ‑> ProgressTableCellType

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var color

      Color of the progress arc.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      RangeSlider

      class RangeSlider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, min_value: Union[float, NoneType] = None, max_value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a range slider.

      A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.

      Static methods

      load

      def load(_RangeSlider__d: Dict) ‑> RangeSlider

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var max

      The maximum value of the slider. Defaults to 100.

      var max_value

      The upper bound of the selected range.

      var min

      The minimum value of the slider. Defaults to 0.

      var min_value

      The lower bound of the selected range.

      var name

      An identifying name for this component.

      var step

      The difference between two adjacent values of the slider.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the slider value changes.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      RepeatCard

      class RepeatCard(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards.

      Static methods

      load

      def load(_RepeatCard__d: Dict) ‑> RepeatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var item_props

      The child card properties.

      var item_view

      EXPERIMENTAL. DO NOT USE.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Separator

      class Separator(label: Union[str, NoneType] = None)

      Create a separator.

      A separator visually separates content into groups.

      Static methods

      load

      def load(_Separator__d: Dict) ‑> Separator

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var label

      The text displayed on the separator.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Slider

      class Slider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a slider.

      A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value.

      A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium — not about setting the value to two or five.

      The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.

      Static methods

      load

      def load(_Slider__d: Dict) ‑> Slider

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var max

      The maximum value of the slider.

      var min

      The minimum value of the slider.

      var name

      An identifying name for this component.

      var step

      The difference between two adjacent values of the slider.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the slider value changes.

      var value

      The current value of the slider.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      SmallSeriesStatCard

      class SmallSeriesStatCard(box: str, title: str, value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a small stat card displaying a primary value and a series plot.

      Static methods

      load

      def load(_SmallSeriesStatCard__d: Dict) ‑> SmallSeriesStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_category

      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

      var plot_color

      The plot's color.

      var plot_curve

      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.

      var plot_data

      The plot's data.

      var plot_type

      The type of plot. Defaults to area. One of 'area', 'interval'.

      var plot_value

      The data field to use for y-axis values.

      var plot_zero_value

      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      SmallStatCard

      class SmallStatCard(box: str, title: str, value: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a stat card displaying a single value.

      Static methods

      load

      def load(_SmallStatCard__d: Dict) ‑> SmallStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Spinbox

      class Spinbox(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a spinbox.

      A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.

      Static methods

      load

      def load(_Spinbox__d: Dict) ‑> Spinbox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var max

      The maximum value of the spinbox.

      var min

      The minimum value of the spinbox.

      var name

      An identifying name for this component.

      var step

      The difference between two adjacent values of the spinbox.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The current value of the spinbox.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Step

      class Step(label: str, icon: Union[str, NoneType] = None, done: Union[bool, NoneType] = None)

      Create a step for a stepper.

      Static methods

      load

      def load(_Step__d: Dict) ‑> Step

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var done

      Indicates whether this step has already been completed.

      var icon

      Icon to be displayed.

      var label

      Text displayed below icon.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Stepper

      class Stepper(name: str, items: List[Step], tooltip: Union[str, NoneType] = None)

      Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.

      Static methods

      load

      def load(_Stepper__d: Dict) ‑> Stepper

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The sequence of steps to be displayed.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Tab

      class Tab(name: str, label: Union[str, NoneType] = None, icon: Union[str, NoneType] = None)

      Create a tab.

      Static methods

      load

      def load(_Tab__d: Dict) ‑> Tab

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var icon

      The icon displayed on the tab.

      var label

      The text displayed on the tab.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TabCard

      class TabCard(box: str, items: List[Tab], value: Union[str, NoneType] = None, link: Union[bool, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card containing tabs for navigation.

      Static methods

      load

      def load(_TabCard__d: Dict) ‑> TabCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      Items to render.

      var link

      True if tabs should be rendered as links and not a standard tab.

      var value

      The name of the tab to select.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Table

      class Table(name: str, columns: List[TableColumn], rows: List[TableRow], multiple: Union[bool, NoneType] = None, groupable: Union[bool, NoneType] = None, downloadable: Union[bool, NoneType] = None, resettable: Union[bool, NoneType] = None, height: Union[str, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create an interactive table.

      This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table.

      If multiple is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and q.args.table_name is set to [row_name], where table_name is the name of the table, and row_name is the name of the row that was clicked on.

      If multiple is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,q.args.table_name is set to [row1_name, row2_name, …] where table_name is the name of the table, and row1_name, row2_name are the name of the rows that were selected. Note that if multiple is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.

      Static methods

      load

      def load(_Table__d: Dict) ‑> Table

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var columns

      The columns in this table.

      var downloadable

      Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.

      var groupable

      True to allow group by feature.

      var height

      The height of the table, e.g. '400px', '50%', etc.

      var multiple

      True to allow multiple rows to be selected.

      var name

      An identifying name for this component.

      var resettable

      Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.

      var rows

      The rows in this table.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TableCellType

      class TableCellType(progress: Union[ProgressTableCellType, NoneType] = None, icon: Union[IconTableCellType, NoneType] = None)

      Defines cell content to be rendered instead of a simple text.

      Static methods

      load

      def load(_TableCellType__d: Dict) ‑> TableCellType

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var icon

      No documentation available.

      var progress

      No documentation available.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TableColumn

      class TableColumn(name: str, label: str, min_width: Union[str, NoneType] = None, max_width: Union[str, NoneType] = None, sortable: Union[bool, NoneType] = None, searchable: Union[bool, NoneType] = None, filterable: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, cell_type: Union[TableCellType, NoneType] = None)

      Create a table column.

      Static methods

      load

      def load(_TableColumn__d: Dict) ‑> TableColumn

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var cell_type

      Defines how to render each cell in this column. Defaults to plain text.

      var filterable

      Indicates whether the contents of this column are displayed as filters in a dropdown.

      var label

      The text displayed on the column header.

      var link

      Indicates whether each cell in this column should be displayed as a clickable link.

      var max_width

      The maximum width of this column, e.g. '100px'. Only px units are supported at this time.

      var min_width

      The minimum width of this column, e.g. '50px'. Only px units are supported at this time.

      var name

      An identifying name for this column.

      var searchable

      Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.

      var sortable

      Indicates whether the column is sortable.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TableRow

      class TableRow(name: str, cells: List[str])

      Create a table row.

      Static methods

      load

      def load(_TableRow__d: Dict) ‑> TableRow

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var cells

      The cells in this row (displayed left to right).

      var name

      An identifying name for this row.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Tabs

      class Tabs(name: str, value: Union[str, NoneType] = None, items: Union[List[Tab], NoneType] = None)

      Create a tab bar.

      Static methods

      load

      def load(_Tabs__d: Dict) ‑> Tabs

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The tabs in this tab bar.

      var name

      An identifying name for this component.

      var value

      The name of the tab to select.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TallGaugeStatCard

      class TallGaugeStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

      Static methods

      load

      def load(_TallGaugeStatCard__d: Dict) ‑> TallGaugeStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress gauge.

      var progress

      The value of the progress gauge, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TallSeriesStatCard

      class TallSeriesStatCard(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      Static methods

      load

      def load(_TallSeriesStatCard__d: Dict) ‑> TallSeriesStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed below the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_category

      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

      var plot_color

      The plot's color.

      var plot_curve

      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.

      var plot_data

      The plot's data.

      var plot_type

      The type of plot. Defaults to area. One of 'area', 'interval'.

      var plot_value

      The data field to use for y-axis values.

      var plot_zero_value

      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Template

      class Template(content: str, data: Union[dict, str, NoneType] = None)

      Render dynamic content using a HTML template.

      Static methods

      load

      def load(_Template__d: Dict) ‑> Template

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The Handlebars template. https://handlebarsjs.com/guide/

      var data

      Data for the Handlebars template

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TemplateCard

      class TemplateCard(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Render dynamic content using a HTML template.

      Static methods

      load

      def load(_TemplateCard__d: Dict) ‑> TemplateCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The Handlebars template. https://handlebarsjs.com/guide/

      var data

      Data for the Handlebars template

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Text

      class Text(content: str, size: Union[str, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create text content.

      Static methods

      load

      def load(_Text__d: Dict) ‑> Text

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var size

      The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'.

      var tooltip

      Tooltip message.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextL

      class TextL(content: str, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create large sized text content.

      Static methods

      load

      def load(_TextL__d: Dict) ‑> TextL

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var commands

      Contextual menu commands for this component.

      var content

      The text content.

      var tooltip

      Tooltip message.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextM

      class TextM(content: str, tooltip: Union[str, NoneType] = None)

      Create medium sized text content.

      Static methods

      load

      def load(_TextM__d: Dict) ‑> TextM

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var tooltip

      Tooltip message.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextS

      class TextS(content: str, tooltip: Union[str, NoneType] = None)

      Create small sized text content.

      Static methods

      load

      def load(_TextS__d: Dict) ‑> TextS

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var tooltip

      Tooltip message.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextXl

      class TextXl(content: str, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create extra-large sized text content.

      Static methods

      load

      def load(_TextXl__d: Dict) ‑> TextXl

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var commands

      Contextual menu commands for this component.

      var content

      The text content.

      var tooltip

      Tooltip message.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextXs

      class TextXs(content: str, tooltip: Union[str, NoneType] = None)

      Create extra-small sized text content.

      Static methods

      load

      def load(_TextXs__d: Dict) ‑> TextXs

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var tooltip

      Tooltip message.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Textbox

      class Textbox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, mask: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, prefix: Union[str, NoneType] = None, suffix: Union[str, NoneType] = None, error: Union[str, NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, readonly: Union[bool, NoneType] = None, multiline: Union[bool, NoneType] = None, password: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a text box.

      The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.

      Static methods

      load

      def load(_Textbox__d: Dict) ‑> Textbox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the text box is disabled.

      var error

      Text to be displayed as an error below the text box.

      var icon

      Icon displayed in the far right end of the text field.

      var label

      The text displayed above the field.

      var mask

      The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].

      var multiline

      True if the text box should allow multi-line text entry.

      var name

      An identifying name for this component.

      var password

      True if the text box should hide text content.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.

      var prefix

      Text to be displayed before the text box contents.

      var readonly

      True if the text box is a read-only field.

      var required

      True if the text box is a required field.

      var suffix

      Text to be displayed after the text box contents.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the text value changes.

      var value

      Text to be displayed inside the text box.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Toggle

      class Toggle(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action.

      Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.

      Static methods

      load

      def load(_Toggle__d: Dict) ‑> Toggle

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the checkbox is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the toggle value changes.

      var value

      True if selected, False if unselected.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ToolbarCard

      class ToolbarCard(box: str, items: List[Command], secondary_items: Union[List[Command], NoneType] = None, overflow_items: Union[List[Command], NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card containing a toolbar.

      Static methods

      load

      def load(_ToolbarCard__d: Dict) ‑> ToolbarCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      Items to render.

      var overflow_items

      Items to render in an overflow menu.

      var secondary_items

      Items to render on the right side (or left, in RTL).

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      VegaCard

      class VegaCard(box: str, title: str, specification: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card containing a Vega-lite plot.

      Static methods

      load

      def load(_VegaCard__d: Dict) ‑> VegaCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for the plot, if any.

      var specification

      The Vega-lite specification.

      var title

      The title of this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      VegaVisualization

      class VegaVisualization(specification: str, data: Union[dict, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None)

      Create a Vega-lite plot for display inside a form.

      Static methods

      load

      def load(_VegaVisualization__d: Dict) ‑> VegaVisualization

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var data

      Data for the plot, if any.

      var height

      The height of the visualization. Defaults to 300px.

      var specification

      The Vega-lite specification.

      var width

      The width of the visualization. Defaults to 100%.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Visualization

      class Visualization(plot: Plot, data: Union[dict, str], width: Union[str, NoneType] = None, height: Union[str, NoneType] = None)

      Create a visualization for display inside a form.

      Static methods

      load

      def load(_Visualization__d: Dict) ‑> Visualization

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var data

      Data for this visualization.

      var height

      The height of the visualization. Defaults to 300px.

      var plot

      The plot to be rendered in this visualization.

      var width

      The width of the visualization. Defaults to 100%.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      WideBarStatCard

      class WideBarStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

      Static methods

      load

      def load(_WideBarStatCard__d: Dict) ‑> WideBarStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress bar.

      var progress

      The value of the progress bar, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      WideGaugeStatCard

      class WideGaugeStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

      Static methods

      load

      def load(_WideGaugeStatCard__d: Dict) ‑> WideGaugeStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress gauge.

      var progress

      The value of the progress gauge, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      WideSeriesStatCard

      class WideSeriesStatCard(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      Static methods

      load

      def load(_WideSeriesStatCard__d: Dict) ‑> WideSeriesStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed below the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_category

      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

      var plot_color

      The plot's color.

      var plot_curve

      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.

      var plot_data

      The plot's data.

      var plot_type

      The type of plot. Defaults to area. One of 'area', 'interval'.

      var plot_value

      The data field to use for y-axis values.

      var plot_zero_value

      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Edit this page
      +

      Module h2o_wave.types

      Classes

      Breadcrumb

      class Breadcrumb(name: str, label: str)

      Create a breadcrumb for a BreadcrumbsCard.

      Static methods

      load

      def load(_Breadcrumb__d: Dict) ‑> Breadcrumb

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var label

      The label to display.

      var name

      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      BreadcrumbsCard

      class BreadcrumbsCard(box: str, items: List[Breadcrumb], commands: Union[List[Command], NoneType] = None)

      Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

      Static methods

      load

      def load(_BreadcrumbsCard__d: Dict) ‑> BreadcrumbsCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      A list of Breadcrumb instances to display. See breadcrumb()

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Button

      class Button(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, value: Union[str, NoneType] = None, primary: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a button.

      Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

      When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements.

      Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.

      While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.

      Static methods

      load

      def load(_Button__d: Dict) ‑> Button

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var caption

      The caption displayed below the label. Setting a caption renders a compound button.

      var disabled

      True if the button should be disabled.

      var label

      The text displayed on the button.

      var link

      True if the button should be rendered as link text and not a standard button.

      var name

      An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.

      var primary

      True if the button should be rendered as the primary button in the set.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Buttons

      class Buttons(items: List[ForwardRef('Component')], justify: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a set of buttons to be layed out horizontally.

      Static methods

      load

      def load(_Buttons__d: Dict) ‑> Buttons

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The button in this set.

      var justify

      Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'.

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Checkbox

      class Checkbox(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, indeterminate: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a checkbox.

      A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component.

      A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected.

      For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action.

      Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Static methods

      load

      def load(_Checkbox__d: Dict) ‑> Checkbox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the checkbox is disabled.

      var indeterminate

      True if the selection is indeterminate (neither selected nor unselected).

      var label

      Text to be displayed alongside the checkbox.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the checkbox value changes.

      var value

      True if selected, False if unselected.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Checklist

      class Checklist(name: str, label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Static methods

      load

      def load(_Checklist__d: Dict) ‑> Checklist

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var label

      Text to be displayed above the component.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the checklist value changes.

      var values

      The names of the selected choices.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Choice

      class Choice(name: str, label: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None)

      Create a choice for a checklist, choice group or dropdown.

      Static methods

      load

      def load(_Choice__d: Dict) ‑> Choice

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the checkbox is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ChoiceGroup

      class ChoiceGroup(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group.

      Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead.

      If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don't agree."

      Static methods

      load

      def load(_ChoiceGroup__d: Dict) ‑> ChoiceGroup

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var required

      True if this field is required.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the selection changes.

      var value

      The name of the selected choice.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ColorPicker

      class ColorPicker(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a color picker.

      A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.

      Static methods

      load

      def load(_ColorPicker__d: Dict) ‑> ColorPicker

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      A list of colors (CSS-compatible strings) to limit color choices to.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The selected color (CSS-compatible string)

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Combobox

      class Combobox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, error: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a combobox.

      A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI.

      When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.

      Static methods

      load

      def load(_Combobox__d: Dict) ‑> Combobox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var disabled

      True if this field is disabled.

      var error

      Text to be displayed as an error below the text box.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The name of the selected choice.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Command

      class Command(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, items: Union[List[ForwardRef('Command')], NoneType] = None, data: Union[str, NoneType] = None)

      Create a command.

      Commands are typically displayed as context menu items or toolbar button.

      Static methods

      load

      def load(_Command__d: Dict) ‑> Command

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var caption

      The caption for this command (typically a tooltip).

      var data

      Data associated with this command, if any.

      var icon

      The icon to be displayed for this command.

      var items

      Sub-commands, if any

      var label

      The text displayed for this command.

      var name

      An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Component

      class Component(text: Union[Text, NoneType] = None, text_xl: Union[TextXl, NoneType] = None, text_l: Union[TextL, NoneType] = None, text_m: Union[TextM, NoneType] = None, text_s: Union[TextS, NoneType] = None, text_xs: Union[TextXs, NoneType] = None, label: Union[Label, NoneType] = None, separator: Union[Separator, NoneType] = None, progress: Union[Progress, NoneType] = None, message_bar: Union[MessageBar, NoneType] = None, textbox: Union[Textbox, NoneType] = None, checkbox: Union[Checkbox, NoneType] = None, toggle: Union[Toggle, NoneType] = None, choice_group: Union[ChoiceGroup, NoneType] = None, checklist: Union[Checklist, NoneType] = None, dropdown: Union[Dropdown, NoneType] = None, combobox: Union[Combobox, NoneType] = None, slider: Union[Slider, NoneType] = None, spinbox: Union[Spinbox, NoneType] = None, date_picker: Union[DatePicker, NoneType] = None, color_picker: Union[ColorPicker, NoneType] = None, button: Union[Button, NoneType] = None, buttons: Union[Buttons, NoneType] = None, file_upload: Union[FileUpload, NoneType] = None, table: Union[Table, NoneType] = None, link: Union[Link, NoneType] = None, tabs: Union[Tabs, NoneType] = None, expander: Union[Expander, NoneType] = None, frame: Union[Frame, NoneType] = None, markup: Union[Markup, NoneType] = None, template: Union[Template, NoneType] = None, picker: Union[Picker, NoneType] = None, range_slider: Union[RangeSlider, NoneType] = None, stepper: Union[Stepper, NoneType] = None, visualization: Union[Visualization, NoneType] = None, vega_visualization: Union[VegaVisualization, NoneType] = None)

      Create a component.

      Static methods

      load

      def load(_Component__d: Dict) ‑> Component

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var button

      Button.

      var buttons

      Button set.

      var checkbox

      Checkbox.

      var checklist

      Checklist.

      var choice_group

      Choice group.

      var color_picker

      Color picker.

      var combobox

      Combobox.

      var date_picker

      Date picker.

      var dropdown

      Dropdown.

      var expander

      Expander.

      var file_upload

      File upload.

      var frame

      Frame.

      var label

      Label.

      var link

      Link.

      var markup

      Markup

      var message_bar

      Message bar.

      var picker

      Picker.

      var progress

      Progress bar.

      var range_slider

      Range Slider.

      var separator

      Separator.

      var slider

      Slider.

      var spinbox

      Spinbox.

      var stepper

      Stepper.

      var table

      Table.

      var tabs

      Tabs.

      var template

      Template

      var text

      Text block.

      var text_l

      Large sized text block.

      var text_m

      Medium sized text block.

      var text_s

      Small sized text block.

      var text_xl

      Extra-large sized text block.

      var text_xs

      Extra-small sized text block.

      var textbox

      Textbox.

      var toggle

      Toggle.

      var vega_visualization

      Vega-lite Visualization.

      var visualization

      Visualization.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      DatePicker

      class DatePicker(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a date picker.

      A date picker allows a user to pick a date value.

      Static methods

      load

      def load(_DatePicker__d: Dict) ‑> DatePicker

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the datepicker value changes.

      var value

      The date value in YYYY-MM-DD format.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Dropdown

      class Dropdown(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a dropdown.

      A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible.

      To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.

      Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.

      Static methods

      load

      def load(_Dropdown__d: Dict) ‑> Dropdown

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field.

      var required

      True if this is a required field.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the dropdown value changes.

      var value

      The name of the selected choice.

      var values

      The names of the selected choices. If this parameter is set, multiple selections will be allowed.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Expander

      class Expander(name: str, label: Union[str, NoneType] = None, expanded: Union[bool, NoneType] = None, items: Union[List[ForwardRef('Component')], NoneType] = None, visible: Union[bool, NoneType] = None)

      Creates a new expander.

      Expanders can be used to show or hide a group of related components.

      Static methods

      load

      def load(_Expander__d: Dict) ‑> Expander

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var expanded

      True if expanded, False if collapsed.

      var items

      List of components to be hideable by the expander.

      var label

      The text displayed on the expander.

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FileUpload

      class FileUpload(name: str, label: Union[str, NoneType] = None, multiple: Union[bool, NoneType] = None, file_extensions: Union[List[str], NoneType] = None, max_file_size: Union[float, NoneType] = None, max_size: Union[float, NoneType] = None, height: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.

      Static methods

      load

      def load(_FileUpload__d: Dict) ‑> FileUpload

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var file_extensions

      List of allowed file extensions, e.g. pdf, docx, etc.

      var height

      The height of the file upload, e.g. '400px', '50%', etc.

      var label

      Text to be displayed alongside the component.

      var max_file_size

      Maximum allowed size (Mb) per file. Defaults to no limit.

      var max_size

      Maximum allowed size (Mb) for all files combined. Defaults to no limit.

      var multiple

      True if the component should allow multiple files to be uploaded.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FlexCard

      class FlexCard(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], direction: Union[str, NoneType] = None, justify: Union[str, NoneType] = None, align: Union[str, NoneType] = None, wrap: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.

      Static methods

      load

      def load(_FlexCard__d: Dict) ‑> FlexCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var align

      Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var direction

      Layout direction. One of 'horizontal', 'vertical'.

      var item_props

      The child card properties.

      var item_view

      The child card type.

      var justify

      Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'.

      var wrap

      Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FormCard

      class FormCard(box: str, items: Union[List[Component], str], commands: Union[List[Command], NoneType] = None)

      Create a form.

      Static methods

      load

      def load(_FormCard__d: Dict) ‑> FormCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      The components in this form.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Frame

      class Frame(path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a new inline frame (an iframe).

      Static methods

      load

      def load(_Frame__d: Dict) ‑> Frame

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The HTML content of the page. A string containing <html>...</html>.

      var height

      The height of the frame, e.g. 200px, 50%, etc. Defaults to 150px.

      var name

      An identifying name for this component.

      var path

      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html

      var visible

      True if the component should be visible. Defaults to true.

      var width

      The width of the frame, e.g. 200px, 50%, etc. Defaults to 100%.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FrameCard

      class FrameCard(box: str, title: str, path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Render a card containing a HTML page inside an inline frame (an iframe).

      Either a path or content can be provided as arguments.

      Static methods

      load

      def load(_FrameCard__d: Dict) ‑> FrameCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The HTML content of the page. A string containing <html>...</html>

      var path

      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      GraphicsCard

      class GraphicsCard(box: str, view_box: str, stage: Union[List[dict], str, NoneType] = None, scene: Union[Data, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card for displaying vector graphics.

      Static methods

      load

      def load(_GraphicsCard__d: Dict) ‑> GraphicsCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var height

      The displayed height of the rectangular viewport. (Not the height of its coordinate system.)

      var scene

      Foreground layer for rendering dynamic SVG elements.

      var stage

      Background layer for rendering static SVG elements. Must be packed to conserve memory.

      var view_box

      The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

      var width

      The displayed width of the rectangular viewport. (Not the width of its coordinate system.)

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      GridCard

      class GridCard(box: str, title: str, cells: Union[Data, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE.

      Static methods

      load

      def load(_GridCard__d: Dict) ‑> GridCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var cells

      EXPERIMENTAL. DO NOT USE.

      var commands

      Contextual menu commands for this component.

      var data

      EXPERIMENTAL. DO NOT USE.

      var title

      EXPERIMENTAL. DO NOT USE.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      HeaderCard

      class HeaderCard(box: str, title: str, subtitle: str, icon: Union[str, NoneType] = None, icon_color: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Render a card containing a HTML page inside an inline frame (iframe).

      Either a path or content can be provided as arguments.

      Static methods

      load

      def load(_HeaderCard__d: Dict) ‑> HeaderCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var icon

      The icon type, displayed to the left.

      var icon_color

      The icon's color.

      var subtitle

      The subtitle, displayed below the title.

      var title

      The title.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      IconTableCellType

      class IconTableCellType(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.

      Static methods

      load

      def load(_IconTableCellType__d: Dict) ‑> IconTableCellType

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var color

      Icon color.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ImageCard

      class ImageCard(box: str, title: str, type: str, image: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card that displays a base64-encoded image.

      Static methods

      load

      def load(_ImageCard__d: Dict) ‑> ImageCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var image

      Image data, base64-encoded.

      var title

      The card's title.

      var type

      The image MIME subtype. One of apng, bmp, gif, x-icon, jpeg, png, webp.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Label

      class Label(label: str, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a label.

      Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.

      Static methods

      load

      def load(_Label__d: Dict) ‑> Label

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the label should be disabled.

      var label

      The text displayed on the label.

      var name

      An identifying name for this component.

      var required

      True if the field is required.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      LargeBarStatCard

      class LargeBarStatCard(box: str, title: str, caption: str, value: str, aux_value: str, value_caption: str, aux_value_caption: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

      Static methods

      load

      def load(_LargeBarStatCard__d: Dict) ‑> LargeBarStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value, typically a target value.

      var aux_value_caption

      The caption displayed below the auxiliary value.

      var box

      A string indicating how to place this component on the page.

      var caption

      The card's caption.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress bar.

      var progress

      The value of the progress bar, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      var value_caption

      The caption displayed below the primary value.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      LargeStatCard

      class LargeStatCard(box: str, title: str, value: str, aux_value: str, caption: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a stat card displaying a primary value, an auxiliary value and a caption.

      Static methods

      load

      def load(_LargeStatCard__d: Dict) ‑> LargeStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var caption

      The caption displayed below the primary value.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Link

      class Link(label: Union[str, NoneType] = None, path: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, download: Union[bool, NoneType] = None, button: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a hyperlink.

      Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a / and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.

      Static methods

      load

      def load(_Link__d: Dict) ‑> Link

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var button

      True if the link should be rendered as a button.

      var disabled

      True if the link should be disabled.

      var download

      True if the link should be used for file download.

      var label

      The text to be displayed. If blank, the path is used as the label.

      var name

      An identifying name for this component.

      var path

      The path or URL to link to.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ListCard

      class ListCard(box: str, title: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).

      Static methods

      load

      def load(_ListCard__d: Dict) ‑> ListCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var item_props

      The child card properties.

      var item_view

      The child card type.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ListItem1Card

      class ListItem1Card(box: str, title: str, caption: str, value: str, aux_value: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE.

      Static methods

      load

      def load(_ListItem1Card__d: Dict) ‑> ListItem1Card

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      EXPERIMENTAL. DO NOT USE.

      var box

      A string indicating how to place this component on the page.

      var caption

      EXPERIMENTAL. DO NOT USE.

      var commands

      Contextual menu commands for this component.

      var data

      EXPERIMENTAL. DO NOT USE.

      var title

      EXPERIMENTAL. DO NOT USE.

      var value

      EXPERIMENTAL. DO NOT USE.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Mark

      class Mark(coord: Union[str, NoneType] = None, type: Union[str, NoneType] = None, x: Union[str, float, int, NoneType] = None, x0: Union[str, float, int, NoneType] = None, x1: Union[str, float, int, NoneType] = None, x2: Union[str, float, int, NoneType] = None, x_min: Union[float, NoneType] = None, x_max: Union[float, NoneType] = None, x_nice: Union[bool, NoneType] = None, x_scale: Union[str, NoneType] = None, x_title: Union[str, NoneType] = None, y: Union[str, float, int, NoneType] = None, y0: Union[str, float, int, NoneType] = None, y1: Union[str, float, int, NoneType] = None, y2: Union[str, float, int, NoneType] = None, y_min: Union[float, NoneType] = None, y_max: Union[float, NoneType] = None, y_nice: Union[bool, NoneType] = None, y_scale: Union[str, NoneType] = None, y_title: Union[str, NoneType] = None, color: Union[str, NoneType] = None, color_range: Union[str, NoneType] = None, color_domain: Union[List[str], NoneType] = None, shape: Union[str, NoneType] = None, shape_range: Union[str, NoneType] = None, size: Union[str, float, int, NoneType] = None, size_range: Union[str, NoneType] = None, stack: Union[str, NoneType] = None, dodge: Union[str, NoneType] = None, curve: Union[str, NoneType] = None, fill_color: Union[str, NoneType] = None, fill_opacity: Union[float, NoneType] = None, stroke_color: Union[str, NoneType] = None, stroke_opacity: Union[float, NoneType] = None, stroke_size: Union[float, NoneType] = None, stroke_dash: Union[str, NoneType] = None, label: Union[str, NoneType] = None, label_offset: Union[float, NoneType] = None, label_offset_x: Union[float, NoneType] = None, label_offset_y: Union[float, NoneType] = None, label_rotation: Union[str, NoneType] = None, label_position: Union[str, NoneType] = None, label_overlap: Union[str, NoneType] = None, label_fill_color: Union[str, NoneType] = None, label_fill_opacity: Union[float, NoneType] = None, label_stroke_color: Union[str, NoneType] = None, label_stroke_opacity: Union[float, NoneType] = None, label_stroke_size: Union[float, NoneType] = None, label_font_size: Union[float, NoneType] = None, label_font_weight: Union[str, NoneType] = None, label_line_height: Union[float, NoneType] = None, label_align: Union[str, NoneType] = None, ref_stroke_color: Union[str, NoneType] = None, ref_stroke_opacity: Union[float, NoneType] = None, ref_stroke_size: Union[float, NoneType] = None, ref_stroke_dash: Union[str, NoneType] = None)

      Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.

      Static methods

      load

      def load(_Mark__d: Dict) ‑> Mark

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var color

      Mark color field or value.

      var color_domain

      The unique values in the data (labels or categories or classes) to map colors to, e.g. ['high', 'medium', 'low']. If this is not provided, the unique values are automatically inferred from the color attribute.

      var color_range

      Mark color range for multi-series plots. A string containing space-separated colors, e.g. '#fee8c8 #fdbb84 #e34a33'

      var coord

      Coordinate system. rect is synonymous to cartesian. theta is transposed polar. One of 'rect', 'cartesian', 'polar', 'theta', 'helix'.

      var curve

      Curve type for line and area mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'.

      var dodge

      Field to dodge marks by, or 'auto' to infer.

      var fill_color

      Mark fill color.

      var fill_opacity

      Mark fill opacity.

      var label

      Label field or value.

      var label_align

      Label text alignment. One of 'left', 'right', 'center', 'start', 'end'.

      var label_fill_color

      Label fill color.

      var label_fill_opacity

      Label fill opacity.

      var label_font_size

      Label font size.

      var label_font_weight

      Label font weight.

      var label_line_height

      Label line height.

      var label_offset

      Distance between label and mark.

      var label_offset_x

      Horizontal distance between label and mark.

      var label_offset_y

      Vertical distance between label and mark.

      var label_overlap

      Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'.

      var label_position

      Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'.

      var label_rotation

      Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.

      var label_stroke_color

      Label stroke color.

      var label_stroke_opacity

      Label stroke opacity.

      var label_stroke_size

      Label stroke size (line width or pen thickness).

      var ref_stroke_color

      Reference line stroke color.

      var ref_stroke_dash

      Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].

      var ref_stroke_opacity

      Reference line stroke opacity.

      var ref_stroke_size

      Reference line stroke size (line width or pen thickness).

      var shape

      Mark shape field or value for point mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.

      var shape_range

      Mark shape range for multi-series plots using point mark types. A string containing space-separated shapes, e.g. 'circle square diamond'

      var size

      Mark size field or value.

      var size_range

      Mark size range. A string containing space-separated integers, e.g. '4 30'

      var stack

      Field to stack marks by, or 'auto' to infer.

      var stroke_color

      Mark stroke color.

      var stroke_dash

      Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].

      var stroke_opacity

      Mark stroke opacity.

      var stroke_size

      Mark stroke size.

      var type

      Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'.

      var x

      X field or value.

      var x0

      X base field or value.

      var x1

      X bin lower bound field or value. For histograms.

      var x2

      X bin upper bound field or value. For histograms.

      var x_max

      X axis scale maximum.

      var x_min

      X axis scale minimum.

      var x_nice

      Whether to nice X axis scale ticks.

      var x_scale

      X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.

      var x_title

      X axis title.

      var y

      Y field or value.

      var y0

      Y base field or value.

      var y1

      Y bin lower bound field or value. For histograms.

      var y2

      Y bin upper bound field or value. For histograms.

      var y_max

      Y axis scale maximum.

      var y_min

      Y axis scale minimum.

      var y_nice

      Whether to nice Y axis scale ticks.

      var y_scale

      Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.

      var y_title

      Y axis title.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MarkdownCard

      class MarkdownCard(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card that renders Markdown content.

      Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.

      Static methods

      load

      def load(_MarkdownCard__d: Dict) ‑> MarkdownCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/

      var data

      Additional data for the card.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Markup

      class Markup(content: str, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Render HTML content.

      Static methods

      load

      def load(_Markup__d: Dict) ‑> Markup

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The HTML content.

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MarkupCard

      class MarkupCard(box: str, title: str, content: str, commands: Union[List[Command], NoneType] = None)

      Render HTML content.

      Static methods

      load

      def load(_MarkupCard__d: Dict) ‑> MarkupCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The HTML content.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MessageBar

      class MessageBar(type: Union[str, NoneType] = None, text: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a message bar.

      A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.

      Static methods

      load

      def load(_MessageBar__d: Dict) ‑> MessageBar

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var name

      An identifying name for this component.

      var text

      The text displayed on the message bar.

      var type

      The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MetaCard

      class MetaCard(box: str, title: Union[str, NoneType] = None, refresh: Union[int, NoneType] = None, notification: Union[str, NoneType] = None, redirect: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Represents page-global state.

      This card is invisible. It is used to control attributes of the active page.

      Static methods

      load

      def load(_MetaCard__d: Dict) ‑> MetaCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var notification

      Display a desktop notification to the user.

      var redirect

      Redirect the page to a new URL.

      var refresh

      Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).

      var title

      The title of the page.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      NavCard

      class NavCard(box: str, items: List[NavGroup], commands: Union[List[Command], NoneType] = None)

      Create a card containing a navigation pane.

      Static methods

      load

      def load(_NavCard__d: Dict) ‑> NavCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      The navigation groups contained in this pane.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      NavGroup

      class NavGroup(label: str, items: List[NavItem])

      Create a group of navigation items.

      Static methods

      load

      def load(_NavGroup__d: Dict) ‑> NavGroup

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The navigation items contained in this group.

      var label

      The label to display for this group.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      NavItem

      class NavItem(name: str, label: str)

      Create a navigation item.

      Static methods

      load

      def load(_NavItem__d: Dict) ‑> NavItem

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var label

      The label to display.

      var name

      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Picker

      class Picker(name: str, choices: List[Choice], label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, max_choices: Union[int, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.

      Static methods

      load

      def load(_Picker__d: Dict) ‑> Picker

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var disabled

      Controls whether the picker should be disabled or not.

      var label

      Text to be displayed above the component.

      var max_choices

      Maximum number of selectable choices. Defaults to no limit.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var values

      The names of the selected choices.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      PixelArtCard

      class PixelArtCard(box: str, title: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None)

      Create a card displaying a collaborative Pixel art tool, just for kicks.

      Static methods

      load

      def load(_PixelArtCard__d: Dict) ‑> PixelArtCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      The data for this card.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Plot

      class Plot(marks: List[Mark])

      Create a plot. A plot is composed of one or more graphical mark layers.

      Static methods

      load

      def load(_Plot__d: Dict) ‑> Plot

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var marks

      The graphical mark layers contained in this plot.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      PlotCard

      class PlotCard(box: str, title: str, data: Union[dict, str], plot: Plot, commands: Union[List[Command], NoneType] = None)

      Create a card displaying a plot.

      Static methods

      load

      def load(_PlotCard__d: Dict) ‑> PlotCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot

      The plot to be displayed in this card.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Progress

      class Progress(label: str, caption: Union[str, NoneType] = None, value: Union[float, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a progress bar.

      Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing.

      Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]

      Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.

      Static methods

      load

      def load(_Progress__d: Dict) ‑> Progress

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var caption

      The text displayed below the bar.

      var label

      The text displayed above the bar.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ProgressTableCellType

      class ProgressTableCellType(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.

      Static methods

      load

      def load(_ProgressTableCellType__d: Dict) ‑> ProgressTableCellType

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var color

      Color of the progress arc.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      RangeSlider

      class RangeSlider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, min_value: Union[float, NoneType] = None, max_value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a range slider.

      A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.

      Static methods

      load

      def load(_RangeSlider__d: Dict) ‑> RangeSlider

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var max

      The maximum value of the slider. Defaults to 100.

      var max_value

      The upper bound of the selected range.

      var min

      The minimum value of the slider. Defaults to 0.

      var min_value

      The lower bound of the selected range.

      var name

      An identifying name for this component.

      var step

      The difference between two adjacent values of the slider.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the slider value changes.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      RepeatCard

      class RepeatCard(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards.

      Static methods

      load

      def load(_RepeatCard__d: Dict) ‑> RepeatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var item_props

      The child card properties.

      var item_view

      EXPERIMENTAL. DO NOT USE.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Separator

      class Separator(label: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a separator.

      A separator visually separates content into groups.

      Static methods

      load

      def load(_Separator__d: Dict) ‑> Separator

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var label

      The text displayed on the separator.

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Slider

      class Slider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a slider.

      A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value.

      A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium — not about setting the value to two or five.

      The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.

      Static methods

      load

      def load(_Slider__d: Dict) ‑> Slider

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var max

      The maximum value of the slider.

      var min

      The minimum value of the slider.

      var name

      An identifying name for this component.

      var step

      The difference between two adjacent values of the slider.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the slider value changes.

      var value

      The current value of the slider.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      SmallSeriesStatCard

      class SmallSeriesStatCard(box: str, title: str, value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a small stat card displaying a primary value and a series plot.

      Static methods

      load

      def load(_SmallSeriesStatCard__d: Dict) ‑> SmallSeriesStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_category

      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

      var plot_color

      The plot's color.

      var plot_curve

      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.

      var plot_data

      The plot's data.

      var plot_type

      The type of plot. Defaults to area. One of 'area', 'interval'.

      var plot_value

      The data field to use for y-axis values.

      var plot_zero_value

      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      SmallStatCard

      class SmallStatCard(box: str, title: str, value: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a stat card displaying a single value.

      Static methods

      load

      def load(_SmallStatCard__d: Dict) ‑> SmallStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Spinbox

      class Spinbox(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a spinbox.

      A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.

      Static methods

      load

      def load(_Spinbox__d: Dict) ‑> Spinbox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var max

      The maximum value of the spinbox.

      var min

      The minimum value of the spinbox.

      var name

      An identifying name for this component.

      var step

      The difference between two adjacent values of the spinbox.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The current value of the spinbox.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Step

      class Step(label: str, icon: Union[str, NoneType] = None, done: Union[bool, NoneType] = None)

      Create a step for a stepper.

      Static methods

      load

      def load(_Step__d: Dict) ‑> Step

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var done

      Indicates whether this step has already been completed.

      var icon

      Icon to be displayed.

      var label

      Text displayed below icon.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Stepper

      class Stepper(name: str, items: List[Step], visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.

      Static methods

      load

      def load(_Stepper__d: Dict) ‑> Stepper

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The sequence of steps to be displayed.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Tab

      class Tab(name: str, label: Union[str, NoneType] = None, icon: Union[str, NoneType] = None)

      Create a tab.

      Static methods

      load

      def load(_Tab__d: Dict) ‑> Tab

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var icon

      The icon displayed on the tab.

      var label

      The text displayed on the tab.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TabCard

      class TabCard(box: str, items: List[Tab], value: Union[str, NoneType] = None, link: Union[bool, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card containing tabs for navigation.

      Static methods

      load

      def load(_TabCard__d: Dict) ‑> TabCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      Items to render.

      var link

      True if tabs should be rendered as links and not a standard tab.

      var value

      The name of the tab to select.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Table

      class Table(name: str, columns: List[TableColumn], rows: List[TableRow], multiple: Union[bool, NoneType] = None, groupable: Union[bool, NoneType] = None, downloadable: Union[bool, NoneType] = None, resettable: Union[bool, NoneType] = None, height: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create an interactive table.

      This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table.

      If multiple is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and q.args.table_name is set to [row_name], where table_name is the name of the table, and row_name is the name of the row that was clicked on.

      If multiple is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,q.args.table_name is set to [row1_name, row2_name, …] where table_name is the name of the table, and row1_name, row2_name are the name of the rows that were selected. Note that if multiple is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.

      Static methods

      load

      def load(_Table__d: Dict) ‑> Table

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var columns

      The columns in this table.

      var downloadable

      Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.

      var groupable

      True to allow group by feature.

      var height

      The height of the table, e.g. '400px', '50%', etc.

      var multiple

      True to allow multiple rows to be selected.

      var name

      An identifying name for this component.

      var resettable

      Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.

      var rows

      The rows in this table.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var values

      The names of the selected rows. If this parameter is set, multiple selections will be allowed (multiple is assumed to be True).

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TableCellType

      class TableCellType(progress: Union[ProgressTableCellType, NoneType] = None, icon: Union[IconTableCellType, NoneType] = None)

      Defines cell content to be rendered instead of a simple text.

      Static methods

      load

      def load(_TableCellType__d: Dict) ‑> TableCellType

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var icon

      No documentation available.

      var progress

      No documentation available.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TableColumn

      class TableColumn(name: str, label: str, min_width: Union[str, NoneType] = None, max_width: Union[str, NoneType] = None, sortable: Union[bool, NoneType] = None, searchable: Union[bool, NoneType] = None, filterable: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, cell_type: Union[TableCellType, NoneType] = None)

      Create a table column.

      Static methods

      load

      def load(_TableColumn__d: Dict) ‑> TableColumn

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var cell_type

      Defines how to render each cell in this column. Defaults to plain text.

      var filterable

      Indicates whether the contents of this column are displayed as filters in a dropdown.

      var label

      The text displayed on the column header.

      var link

      Indicates whether each cell in this column should be displayed as a clickable link.

      var max_width

      The maximum width of this column, e.g. '100px'. Only px units are supported at this time.

      var min_width

      The minimum width of this column, e.g. '50px'. Only px units are supported at this time.

      var name

      An identifying name for this column.

      var searchable

      Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.

      var sortable

      Indicates whether the column is sortable.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TableRow

      class TableRow(name: str, cells: List[str])

      Create a table row.

      Static methods

      load

      def load(_TableRow__d: Dict) ‑> TableRow

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var cells

      The cells in this row (displayed left to right).

      var name

      An identifying name for this row.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Tabs

      class Tabs(name: str, value: Union[str, NoneType] = None, items: Union[List[Tab], NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a tab bar.

      Static methods

      load

      def load(_Tabs__d: Dict) ‑> Tabs

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The tabs in this tab bar.

      var name

      An identifying name for this component.

      var value

      The name of the tab to select.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TallGaugeStatCard

      class TallGaugeStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

      Static methods

      load

      def load(_TallGaugeStatCard__d: Dict) ‑> TallGaugeStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress gauge.

      var progress

      The value of the progress gauge, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TallSeriesStatCard

      class TallSeriesStatCard(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      Static methods

      load

      def load(_TallSeriesStatCard__d: Dict) ‑> TallSeriesStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed below the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_category

      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

      var plot_color

      The plot's color.

      var plot_curve

      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.

      var plot_data

      The plot's data.

      var plot_type

      The type of plot. Defaults to area. One of 'area', 'interval'.

      var plot_value

      The data field to use for y-axis values.

      var plot_zero_value

      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Template

      class Template(content: str, data: Union[dict, str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Render dynamic content using an HTML template.

      Static methods

      load

      def load(_Template__d: Dict) ‑> Template

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The Handlebars template. https://handlebarsjs.com/guide/

      var data

      Data for the Handlebars template

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TemplateCard

      class TemplateCard(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Render dynamic content using an HTML template.

      Static methods

      load

      def load(_TemplateCard__d: Dict) ‑> TemplateCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The Handlebars template. https://handlebarsjs.com/guide/

      var data

      Data for the Handlebars template.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Text

      class Text(content: str, size: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create text content.

      Static methods

      load

      def load(_Text__d: Dict) ‑> Text

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var name

      An identifying name for this component.

      var size

      The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextL

      class TextL(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None, name: Union[str, NoneType] = None)

      Create large sized text content.

      Static methods

      load

      def load(_TextL__d: Dict) ‑> TextL

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var commands

      Contextual menu commands for this component.

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextM

      class TextM(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create medium sized text content.

      Static methods

      load

      def load(_TextM__d: Dict) ‑> TextM

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextS

      class TextS(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create small sized text content.

      Static methods

      load

      def load(_TextS__d: Dict) ‑> TextS

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextXl

      class TextXl(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None, name: Union[str, NoneType] = None)

      Create extra-large sized text content.

      Static methods

      load

      def load(_TextXl__d: Dict) ‑> TextXl

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var commands

      Contextual menu commands for this component.

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextXs

      class TextXs(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create extra-small sized text content.

      Static methods

      load

      def load(_TextXs__d: Dict) ‑> TextXs

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Textbox

      class Textbox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, mask: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, prefix: Union[str, NoneType] = None, suffix: Union[str, NoneType] = None, error: Union[str, NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, readonly: Union[bool, NoneType] = None, multiline: Union[bool, NoneType] = None, password: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a text box.

      The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.

      Static methods

      load

      def load(_Textbox__d: Dict) ‑> Textbox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the text box is disabled.

      var error

      Text to be displayed as an error below the text box.

      var icon

      Icon displayed in the far right end of the text field.

      var label

      The text displayed above the field.

      var mask

      The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].

      var multiline

      True if the text box should allow multi-line text entry.

      var name

      An identifying name for this component.

      var password

      True if the text box should hide text content.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.

      var prefix

      Text to be displayed before the text box contents.

      var readonly

      True if the text box is a read-only field.

      var required

      True if the text box is a required field.

      var suffix

      Text to be displayed after the text box contents.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the text value changes.

      var value

      Text to be displayed inside the text box.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Toggle

      class Toggle(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action.

      Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.

      Static methods

      load

      def load(_Toggle__d: Dict) ‑> Toggle

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the checkbox is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the toggle value changes.

      var value

      True if selected, False if unselected.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ToolbarCard

      class ToolbarCard(box: str, items: List[Command], secondary_items: Union[List[Command], NoneType] = None, overflow_items: Union[List[Command], NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card containing a toolbar.

      Static methods

      load

      def load(_ToolbarCard__d: Dict) ‑> ToolbarCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      Items to render.

      var overflow_items

      Items to render in an overflow menu.

      var secondary_items

      Items to render on the right side (or left, in RTL).

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      VegaCard

      class VegaCard(box: str, title: str, specification: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card containing a Vega-lite plot.

      Static methods

      load

      def load(_VegaCard__d: Dict) ‑> VegaCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for the plot, if any.

      var specification

      The Vega-lite specification.

      var title

      The title of this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      VegaVisualization

      class VegaVisualization(specification: str, data: Union[dict, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a Vega-lite plot for display inside a form.

      Static methods

      load

      def load(_VegaVisualization__d: Dict) ‑> VegaVisualization

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var data

      Data for the plot, if any.

      var height

      The height of the visualization. Defaults to 300px.

      var name

      An identifying name for this component.

      var specification

      The Vega-lite specification.

      var visible

      True if the component should be visible. Defaults to true.

      var width

      The width of the visualization. Defaults to 100%.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Visualization

      class Visualization(plot: Plot, data: Union[dict, str], width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a visualization for display inside a form.

      Static methods

      load

      def load(_Visualization__d: Dict) ‑> Visualization

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var data

      Data for this visualization.

      var height

      The hight of the visualization. Defaults to 300px.

      var name

      An identifying name for this component.

      var plot

      The plot to be rendered in this visualization.

      var visible

      True if the component should be visible. Defaults to true.

      var width

      The width of the visualization. Defaults to 100%.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      WideBarStatCard

      class WideBarStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

      Static methods

      load

      def load(_WideBarStatCard__d: Dict) ‑> WideBarStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress bar.

      var progress

      The value of the progress bar, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      WideGaugeStatCard

      class WideGaugeStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

      Static methods

      load

      def load(_WideGaugeStatCard__d: Dict) ‑> WideGaugeStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress gauge.

      var progress

      The value of the progress gauge, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      WideSeriesStatCard

      class WideSeriesStatCard(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      Static methods

      load

      def load(_WideSeriesStatCard__d: Dict) ‑> WideSeriesStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed below the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_category

      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

      var plot_color

      The plot's color.

      var plot_curve

      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.

      var plot_data

      The plot's data.

      var plot_type

      The type of plot. Defaults to area. One of 'area', 'interval'.

      var plot_value

      The data field to use for y-axis values.

      var plot_zero_value

      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/ui/index.html b/docs/docs/api/ui/index.html index 32124f0578..13ef7ef20b 100644 --- a/docs/docs/api/ui/index.html +++ b/docs/docs/api/ui/index.html @@ -4,30 +4,30 @@ -Module h2o_wave.ui | H2O Wave +Module h2o_wave.ui | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Module h2o_wave.ui

      Functions

      breadcrumb

      def breadcrumb(name: str, label: str) ‑> Breadcrumb

      Create a breadcrumb for a h2o_q.types.BreadcrumbsCard().

      Args
      name
      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.
      label
      The label to display.
      Returns

      A Breadcrumb instance.

      breadcrumbs_card

      def breadcrumbs_card(box: str, items: List[Breadcrumb], commands: Union[List[Command], NoneType] = None) ‑> BreadcrumbsCard

      Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

      Args
      box
      A string indicating how to place this component on the page.
      items
      A list of h2o_q.types.Breadcrumb instances to display. See h2o_q.ui.breadcrumb()
      commands
      Contextual menu commands for this component.
      Returns

      A BreadcrumbsCard instance.

      button

      def button(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, value: Union[str, NoneType] = None, primary: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a button.

      Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

      When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements.

      Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.

      While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.

      Args
      name
      An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.
      label
      The text displayed on the button.
      caption
      The caption displayed below the label. Setting a caption renders a compound button.
      value
      A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.
      primary
      True if the button should be rendered as the primary button in the set.
      disabled
      True if the button should be disabled.
      link
      True if the button should be rendered as link text and not a standard button.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Button instance.

      buttons

      def buttons(items: List[Component], justify: Union[str, NoneType] = None) ‑> Component

      Create a set of buttons to be layed out horizontally.

      Args
      items
      The button in this set.
      justify
      Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'.
      Returns

      A Buttons instance.

      checkbox

      def checkbox(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, indeterminate: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a checkbox.

      A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component.

      A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected.

      For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action.

      Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the checkbox.
      value
      True if selected, False if unselected.
      indeterminate
      True if the selection is indeterminate (neither selected nor unselected).
      disabled
      True if the checkbox is disabled.
      trigger
      True if the form should be submitted when the checkbox value changes.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Checkbox instance.

      checklist

      def checklist(name: str, label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed above the component.
      values
      The names of the selected choices.
      choices
      The choices to be presented.
      trigger
      True if the form should be submitted when the checklist value changes.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Checklist instance.

      choice

      def choice(name: str, label: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None) ‑> Choice

      Create a choice for a checklist, choice group or dropdown.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      disabled
      True if the checkbox is disabled.
      Returns

      A Choice instance.

      choice_group

      def choice_group(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group.

      Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead.

      If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don't agree."

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      value
      The name of the selected choice.
      choices
      The choices to be presented.
      required
      True if this field is required.
      trigger
      True if the form should be submitted when the selection changes.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A ChoiceGroup instance.

      color_picker

      def color_picker(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a color picker.

      A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      value
      The selected color (CSS-compatible string)
      choices
      A list of colors (CSS-compatible strings) to limit color choices to.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A ColorPicker instance.

      combobox

      def combobox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, error: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a combobox.

      A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI.

      When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field.
      value
      The name of the selected choice.
      choices
      The choices to be presented.
      error
      Text to be displayed as an error below the text box.
      disabled
      True if this field is disabled.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Combobox instance.

      command

      def command(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, items: Union[List[Command], NoneType] = None, data: Union[str, NoneType] = None) ‑> Command

      Create a command.

      Commands are typically displayed as context menu items or toolbar button.

      Args
      name
      An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed.
      label
      The text displayed for this command.
      caption
      The caption for this command (typically a tooltip).
      icon
      The icon to be displayed for this command.
      items
      Sub-commands, if any
      data
      Data associated with this command, if any.
      Returns

      A Command instance.

      component

      def component(text: Union[Text, NoneType] = None, text_xl: Union[TextXl, NoneType] = None, text_l: Union[TextL, NoneType] = None, text_m: Union[TextM, NoneType] = None, text_s: Union[TextS, NoneType] = None, text_xs: Union[TextXs, NoneType] = None, label: Union[Label, NoneType] = None, separator: Union[Separator, NoneType] = None, progress: Union[Progress, NoneType] = None, message_bar: Union[MessageBar, NoneType] = None, textbox: Union[Textbox, NoneType] = None, checkbox: Union[Checkbox, NoneType] = None, toggle: Union[Toggle, NoneType] = None, choice_group: Union[ChoiceGroup, NoneType] = None, checklist: Union[Checklist, NoneType] = None, dropdown: Union[Dropdown, NoneType] = None, combobox: Union[Combobox, NoneType] = None, slider: Union[Slider, NoneType] = None, spinbox: Union[Spinbox, NoneType] = None, date_picker: Union[DatePicker, NoneType] = None, color_picker: Union[ColorPicker, NoneType] = None, button: Union[Button, NoneType] = None, buttons: Union[Buttons, NoneType] = None, file_upload: Union[FileUpload, NoneType] = None, table: Union[Table, NoneType] = None, link: Union[Link, NoneType] = None, tabs: Union[Tabs, NoneType] = None, expander: Union[Expander, NoneType] = None, frame: Union[Frame, NoneType] = None, markup: Union[Markup, NoneType] = None, template: Union[Template, NoneType] = None, picker: Union[Picker, NoneType] = None, range_slider: Union[RangeSlider, NoneType] = None, stepper: Union[Stepper, NoneType] = None, visualization: Union[Visualization, NoneType] = None, vega_visualization: Union[VegaVisualization, NoneType] = None) ‑> Component

      Create a component.

      Args
      text
      Text block.
      text_xl
      Extra-large sized text block.
      text_l
      Large sized text block.
      text_m
      Medium sized text block.
      text_s
      Small sized text block.
      text_xs
      Extra-small sized text block.
      label
      Label.
      separator
      Separator.
      progress
      Progress bar.
      message_bar
      Message bar.
      textbox
      Textbox.
      checkbox
      Checkbox.
      toggle
      Toggle.
      choice_group
      Choice group.
      checklist
      Checklist.
      dropdown
      Dropdown.
      combobox
      Combobox.
      slider
      Slider.
      spinbox
      Spinbox.
      date_picker
      Date picker.
      color_picker
      Color picker.
      button
      Button.
      buttons
      Button set.
      file_upload
      File upload.
      table
      Table.
      link
      Link.
      tabs
      Tabs.
      expander
      Expander.
      frame
      Frame.
      markup
      Markup
      template
      Template
      picker
      Picker.
      range_slider
      Range Slider.
      stepper
      Stepper.
      visualization
      Visualization.
      vega_visualization
      Vega-lite Visualization.
      Returns

      A Component instance.

      date_picker

      def date_picker(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a date picker.

      A date picker allows a user to pick a date value.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field.
      value
      The date value in YYYY-MM-DD format.
      disabled
      True if this field is disabled.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A DatePicker instance.

      dropdown

      def dropdown(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a dropdown.

      A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible.

      To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.

      Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field.
      value
      The name of the selected choice.
      values
      The names of the selected choices. If this parameter is set, multiple selections will be allowed.
      choices
      The choices to be presented.
      required
      True if this is a required field.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the dropdown value changes.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Dropdown instance.

      expander

      def expander(name: str, label: Union[str, NoneType] = None, expanded: Union[bool, NoneType] = None, items: Union[List[Component], NoneType] = None) ‑> Component

      Creates a new expander.

      Expanders can be used to show or hide a group of related components.

      Args
      name
      An identifying name for this component.
      label
      The text displayed on the expander.
      expanded
      True if expanded, False if collapsed.
      items
      List of components to be hideable by the expander.
      Returns

      A Expander instance.

      file_upload

      def file_upload(name: str, label: Union[str, NoneType] = None, multiple: Union[bool, NoneType] = None, file_extensions: Union[List[str], NoneType] = None, max_file_size: Union[float, NoneType] = None, max_size: Union[float, NoneType] = None, height: Union[str, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      multiple
      True if the component should allow multiple files to be uploaded.
      file_extensions
      List of allowed file extensions, e.g. pdf, docx, etc.
      max_file_size
      Maximum allowed size (Mb) per file. Defaults to no limit.
      max_size
      Maximum allowed size (Mb) for all files combined. Defaults to no limit.
      height
      The height of the file upload, e.g. '400px', '50%', etc.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A FileUpload instance.

      flex_card

      def flex_card(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], direction: Union[str, NoneType] = None, justify: Union[str, NoneType] = None, align: Union[str, NoneType] = None, wrap: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> FlexCard

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.

      Args
      box
      A string indicating how to place this component on the page.
      item_view
      The child card type.
      item_props
      The child card properties.
      data
      Data for this card.
      direction
      Layout direction. One of 'horizontal', 'vertical'.
      justify
      Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'.
      align
      Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'.
      wrap
      Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'.
      commands
      Contextual menu commands for this component.
      Returns

      A FlexCard instance.

      form_card

      def form_card(box: str, items: Union[List[Component], str], commands: Union[List[Command], NoneType] = None) ‑> FormCard

      Create a form.

      Args
      box
      A string indicating how to place this component on the page.
      items
      The components in this form.
      commands
      Contextual menu commands for this component.
      Returns

      A FormCard instance.

      frame

      def frame(path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None) ‑> Component

      Create a new inline frame (an iframe).

      Args
      path
      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html
      content
      The HTML content of the page. A string containing <html>...</html>.
      width
      The width of the frame, e.g. 200px, 50%, etc. Defaults to 100%.
      height
      The height of the frame, e.g. 200px, 50%, etc. Defaults to 150px.
      Returns

      A Frame instance.

      frame_card

      def frame_card(box: str, title: str, path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> FrameCard

      Render a card containing a HTML page inside an inline frame (an iframe).

      Either a path or content can be provided as arguments.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      path
      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html
      content
      The HTML content of the page. A string containing <html>...</html>
      commands
      Contextual menu commands for this component.
      Returns

      A FrameCard instance.

      graphics_card

      def graphics_card(box: str, view_box: str, stage: Union[List[dict], str, NoneType] = None, scene: Union[Data, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> GraphicsCard

      Create a card for displaying vector graphics.

      Args
      box
      A string indicating how to place this component on the page.
      view_box
      The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
      stage
      Background layer for rendering static SVG elements. Must be packed to conserve memory.
      scene
      Foreground layer for rendering dynamic SVG elements.
      width
      The displayed width of the rectangular viewport. (Not the width of its coordinate system.)
      height
      The displayed height of the rectangular viewport. (Not the height of its coordinate system.)
      commands
      Contextual menu commands for this component.
      Returns

      A GraphicsCard instance.

      grid_card

      def grid_card(box: str, title: str, cells: Union[Data, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None) ‑> GridCard

      EXPERIMENTAL. DO NOT USE.

      Args
      box
      A string indicating how to place this component on the page.
      title
      EXPERIMENTAL. DO NOT USE.
      cells
      EXPERIMENTAL. DO NOT USE.
      data
      EXPERIMENTAL. DO NOT USE.
      commands
      Contextual menu commands for this component.
      Returns

      A GridCard instance.

      header_card

      def header_card(box: str, title: str, subtitle: str, icon: Union[str, NoneType] = None, icon_color: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> HeaderCard

      Render a card containing a HTML page inside an inline frame (iframe).

      Either a path or content can be provided as arguments.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title.
      subtitle
      The subtitle, displayed below the title.
      icon
      The icon type, displayed to the left.
      icon_color
      The icon's color.
      commands
      Contextual menu commands for this component.
      Returns

      A HeaderCard instance.

      icon_table_cell_type

      def icon_table_cell_type(color: Union[str, NoneType] = None) ‑> TableCellType

      Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.

      Args
      color
      Icon color.
      Returns

      A IconTableCellType instance.

      image_card

      def image_card(box: str, title: str, type: str, image: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> ImageCard

      Create a card that displays a base64-encoded image.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      type
      The image MIME subtype. One of apng, bmp, gif, x-icon, jpeg, png, webp.
      image
      Image data, base64-encoded.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A ImageCard instance.

      label

      def label(label: str, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a label.

      Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.

      Args
      label
      The text displayed on the label.
      required
      True if the field is required.
      disabled
      True if the label should be disabled.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Label instance.

      large_bar_stat_card

      def large_bar_stat_card(box: str, title: str, caption: str, value: str, aux_value: str, value_caption: str, aux_value_caption: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> LargeBarStatCard

      Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      caption
      The card's caption.
      value
      The primary value displayed.
      aux_value
      The auxiliary value, typically a target value.
      value_caption
      The caption displayed below the primary value.
      aux_value_caption
      The caption displayed below the auxiliary value.
      progress
      The value of the progress bar, between 0 and 1.
      plot_color
      The color of the progress bar.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A LargeBarStatCard instance.

      large_stat_card

      def large_stat_card(box: str, title: str, value: str, aux_value: str, caption: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> LargeStatCard

      Create a stat card displaying a primary value, an auxiliary value and a caption.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      caption
      The caption displayed below the primary value.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A LargeStatCard instance.

      link

      def link(label: Union[str, NoneType] = None, path: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, download: Union[bool, NoneType] = None, button: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a hyperlink.

      Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a / and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.

      Args
      label
      The text to be displayed. If blank, the path is used as the label.
      path
      The path or URL to link to.
      disabled
      True if the link should be disabled.
      download
      True if the link should be used for file download.
      button
      True if the link should be rendered as a button.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Link instance.

      list_card

      def list_card(box: str, title: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None) ‑> ListCard

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      item_view
      The child card type.
      item_props
      The child card properties.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A ListCard instance.

      list_item1_card

      def list_item1_card(box: str, title: str, caption: str, value: str, aux_value: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None) ‑> ListItem1Card

      EXPERIMENTAL. DO NOT USE.

      Args
      box
      A string indicating how to place this component on the page.
      title
      EXPERIMENTAL. DO NOT USE.
      caption
      EXPERIMENTAL. DO NOT USE.
      value
      EXPERIMENTAL. DO NOT USE.
      aux_value
      EXPERIMENTAL. DO NOT USE.
      data
      EXPERIMENTAL. DO NOT USE.
      commands
      Contextual menu commands for this component.
      Returns

      A ListItem1Card instance.

      mark

      def mark(coord: Union[str, NoneType] = None, type: Union[str, NoneType] = None, x: Union[str, float, int, NoneType] = None, x0: Union[str, float, int, NoneType] = None, x1: Union[str, float, int, NoneType] = None, x2: Union[str, float, int, NoneType] = None, x_min: Union[float, NoneType] = None, x_max: Union[float, NoneType] = None, x_nice: Union[bool, NoneType] = None, x_scale: Union[str, NoneType] = None, x_title: Union[str, NoneType] = None, y: Union[str, float, int, NoneType] = None, y0: Union[str, float, int, NoneType] = None, y1: Union[str, float, int, NoneType] = None, y2: Union[str, float, int, NoneType] = None, y_min: Union[float, NoneType] = None, y_max: Union[float, NoneType] = None, y_nice: Union[bool, NoneType] = None, y_scale: Union[str, NoneType] = None, y_title: Union[str, NoneType] = None, color: Union[str, NoneType] = None, color_range: Union[str, NoneType] = None, color_domain: Union[List[str], NoneType] = None, shape: Union[str, NoneType] = None, shape_range: Union[str, NoneType] = None, size: Union[str, float, int, NoneType] = None, size_range: Union[str, NoneType] = None, stack: Union[str, NoneType] = None, dodge: Union[str, NoneType] = None, curve: Union[str, NoneType] = None, fill_color: Union[str, NoneType] = None, fill_opacity: Union[float, NoneType] = None, stroke_color: Union[str, NoneType] = None, stroke_opacity: Union[float, NoneType] = None, stroke_size: Union[float, NoneType] = None, stroke_dash: Union[str, NoneType] = None, label: Union[str, NoneType] = None, label_offset: Union[float, NoneType] = None, label_offset_x: Union[float, NoneType] = None, label_offset_y: Union[float, NoneType] = None, label_rotation: Union[str, NoneType] = None, label_position: Union[str, NoneType] = None, label_overlap: Union[str, NoneType] = None, label_fill_color: Union[str, NoneType] = None, label_fill_opacity: Union[float, NoneType] = None, label_stroke_color: Union[str, NoneType] = None, label_stroke_opacity: Union[float, NoneType] = None, label_stroke_size: Union[float, NoneType] = None, label_font_size: Union[float, NoneType] = None, label_font_weight: Union[str, NoneType] = None, label_line_height: Union[float, NoneType] = None, label_align: Union[str, NoneType] = None, ref_stroke_color: Union[str, NoneType] = None, ref_stroke_opacity: Union[float, NoneType] = None, ref_stroke_size: Union[float, NoneType] = None, ref_stroke_dash: Union[str, NoneType] = None) ‑> Mark

      Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.

      Args
      coord
      Coordinate system. rect is synonymous to cartesian. theta is transposed polar. One of 'rect', 'cartesian', 'polar', 'theta', 'helix'.
      type
      Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'.
      x
      X field or value.
      x0
      X base field or value.
      x1
      X bin lower bound field or value. For histograms.
      x2
      X bin upper bound field or value. For histograms.
      x_min
      X axis scale minimum.
      x_max
      X axis scale maximum.
      x_nice
      Whether to nice X axis scale ticks.
      x_scale
      X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.
      x_title
      X axis title.
      y
      Y field or value.
      y0
      Y base field or value.
      y1
      Y bin lower bound field or value. For histograms.
      y2
      Y bin upper bound field or value. For histograms.
      y_min
      Y axis scale minimum.
      y_max
      Y axis scale maximum.
      y_nice
      Whether to nice Y axis scale ticks.
      y_scale
      Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.
      y_title
      Y axis title.
      color
      Mark color field or value.
      color_range
      Mark color range for multi-series plots. A string containing space-separated colors, e.g. '#fee8c8 #fdbb84 #e34a33'
      color_domain
      The unique values in the data (labels or categories or classes) to map colors to, e.g. ['high', 'medium', 'low']. If this is not provided, the unique values are automatically inferred from the color attribute.
      shape
      Mark shape field or value for point mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.
      shape_range
      Mark shape range for multi-series plots using point mark types. A string containing space-separated shapes, e.g. 'circle square diamond'
      size
      Mark size field or value.
      size_range
      Mark size range. A string containing space-separated integers, e.g. '4 30'
      stack
      Field to stack marks by, or 'auto' to infer.
      dodge
      Field to dodge marks by, or 'auto' to infer.
      curve
      Curve type for line and area mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'.
      fill_color
      Mark fill color.
      fill_opacity
      Mark fill opacity.
      stroke_color
      Mark stroke color.
      stroke_opacity
      Mark stroke opacity.
      stroke_size
      Mark stroke size.
      stroke_dash
      Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].
      label
      Label field or value.
      label_offset
      Distance between label and mark.
      label_offset_x
      Horizontal distance between label and mark.
      label_offset_y
      Vertical distance between label and mark.
      label_rotation
      Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.
      label_position
      Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'.
      label_overlap
      Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'.
      label_fill_color
      Label fill color.
      label_fill_opacity
      Label fill opacity.
      label_stroke_color
      Label stroke color.
      label_stroke_opacity
      Label stroke opacity.
      label_stroke_size
      Label stroke size (line width or pen thickness).
      label_font_size
      Label font size.
      label_font_weight
      Label font weight.
      label_line_height
      Label line height.
      label_align
      Label text alignment. One of 'left', 'right', 'center', 'start', 'end'.
      ref_stroke_color
      Reference line stroke color.
      ref_stroke_opacity
      Reference line stroke opacity.
      ref_stroke_size
      Reference line stroke size (line width or pen thickness).
      ref_stroke_dash
      Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].
      Returns

      A Mark instance.

      markdown_card

      def markdown_card(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> MarkdownCard

      Create a card that renders Markdown content.

      Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      content
      The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/
      data
      Additional data for the card.
      commands
      Contextual menu commands for this component.
      Returns

      A MarkdownCard instance.

      markup

      def markup(content: str) ‑> Component

      Render HTML content.

      Args
      content
      The HTML content.
      Returns

      A Markup instance.

      markup_card

      def markup_card(box: str, title: str, content: str, commands: Union[List[Command], NoneType] = None) ‑> MarkupCard

      Render HTML content.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      content
      The HTML content.
      commands
      Contextual menu commands for this component.
      Returns

      A MarkupCard instance.

      message_bar

      def message_bar(type: Union[str, NoneType] = None, text: Union[str, NoneType] = None) ‑> Component

      Create a message bar.

      A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.

      Args
      type
      The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'.
      text
      The text displayed on the message bar.
      Returns

      A MessageBar instance.

      meta_card

      def meta_card(box: str, title: Union[str, NoneType] = None, refresh: Union[int, NoneType] = None, notification: Union[str, NoneType] = None, redirect: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> MetaCard

      Represents page-global state.

      This card is invisible. It is used to control attributes of the active page.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title of the page.
      refresh
      Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).
      notification
      Display a desktop notification to the user.
      redirect
      Redirect the page to a new URL.
      commands
      Contextual menu commands for this component.
      Returns

      A MetaCard instance.

      nav_card

      def nav_card(box: str, items: List[NavGroup], commands: Union[List[Command], NoneType] = None) ‑> NavCard

      Create a card containing a navigation pane.

      Args
      box
      A string indicating how to place this component on the page.
      items
      The navigation groups contained in this pane.
      commands
      Contextual menu commands for this component.
      Returns

      A NavCard instance.

      nav_group

      def nav_group(label: str, items: List[NavItem]) ‑> NavGroup

      Create a group of navigation items.

      Args
      label
      The label to display for this group.
      items
      The navigation items contained in this group.
      Returns

      A NavGroup instance.

      nav_item

      def nav_item(name: str, label: str) ‑> NavItem

      Create a navigation item.

      Args
      name
      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.
      label
      The label to display.
      Returns

      A NavItem instance.

      picker

      def picker(name: str, choices: List[Choice], label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, max_choices: Union[int, NoneType] = None, disabled: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.

      Args
      name
      An identifying name for this component.
      choices
      The choices to be presented.
      label
      Text to be displayed above the component.
      values
      The names of the selected choices.
      max_choices
      Maximum number of selectable choices. Defaults to no limit.
      disabled
      Controls whether the picker should be disabled or not.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Picker instance.

      pixel_art_card

      def pixel_art_card(box: str, title: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None) ‑> PixelArtCard

      Create a card displaying a collaborative Pixel art tool, just for kicks.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      data
      The data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A PixelArtCard instance.

      plot

      def plot(marks: List[Mark]) ‑> Plot

      Create a plot. A plot is composed of one or more graphical mark layers.

      Args
      marks
      The graphical mark layers contained in this plot.
      Returns

      A Plot instance.

      plot_card

      def plot_card(box: str, title: str, data: Union[dict, str], plot: Plot, commands: Union[List[Command], NoneType] = None) ‑> PlotCard

      Create a card displaying a plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      data
      Data for this card.
      plot
      The plot to be displayed in this card.
      commands
      Contextual menu commands for this component.
      Returns

      A PlotCard instance.

      progress

      def progress(label: str, caption: Union[str, NoneType] = None, value: Union[float, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a progress bar.

      Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing.

      Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]

      Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.

      Args
      label
      The text displayed above the bar.
      caption
      The text displayed below the bar.
      value
      The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Progress instance.

      progress_table_cell_type

      def progress_table_cell_type(color: Union[str, NoneType] = None) ‑> TableCellType

      Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.

      Args
      color
      Color of the progress arc.
      Returns

      A ProgressTableCellType instance.

      range_slider

      def range_slider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, min_value: Union[float, NoneType] = None, max_value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a range slider.

      A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      min
      The minimum value of the slider. Defaults to 0.
      max
      The maximum value of the slider. Defaults to 100.
      step
      The difference between two adjacent values of the slider.
      min_value
      The lower bound of the selected range.
      max_value
      The upper bound of the selected range.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the slider value changes.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A RangeSlider instance.

      repeat_card

      def repeat_card(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None) ‑> RepeatCard

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards.

      Args
      box
      A string indicating how to place this component on the page.
      item_view
      EXPERIMENTAL. DO NOT USE.
      item_props
      The child card properties.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A RepeatCard instance.

      separator

      def separator(label: Union[str, NoneType] = None) ‑> Component

      Create a separator.

      A separator visually separates content into groups.

      Args
      label
      The text displayed on the separator.
      Returns

      A Separator instance.

      slider

      def slider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a slider.

      A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value.

      A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium — not about setting the value to two or five.

      The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      min
      The minimum value of the slider.
      max
      The maximum value of the slider.
      step
      The difference between two adjacent values of the slider.
      value
      The current value of the slider.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the slider value changes.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Slider instance.

      small_series_stat_card

      def small_series_stat_card(box: str, title: str, value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> SmallSeriesStatCard

      Create a small stat card displaying a primary value and a series plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      plot_data
      The plot's data.
      plot_value
      The data field to use for y-axis values.
      plot_zero_value
      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.
      plot_category
      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.
      plot_type
      The type of plot. Defaults to area. One of 'area', 'interval'.
      plot_curve
      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.
      plot_color
      The plot's color.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A SmallSeriesStatCard instance.

      small_stat_card

      def small_stat_card(box: str, title: str, value: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> SmallStatCard

      Create a stat card displaying a single value.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A SmallStatCard instance.

      spinbox

      def spinbox(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a spinbox.

      A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      min
      The minimum value of the spinbox.
      max
      The maximum value of the spinbox.
      step
      The difference between two adjacent values of the spinbox.
      value
      The current value of the spinbox.
      disabled
      True if this field is disabled.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Spinbox instance.

      step

      def step(label: str, icon: Union[str, NoneType] = None, done: Union[bool, NoneType] = None) ‑> Step

      Create a step for a stepper.

      Args
      label
      Text displayed below icon.
      icon
      Icon to be displayed.
      done
      Indicates whether this step has already been completed.
      Returns

      A Step instance.

      stepper

      def stepper(name: str, items: List[Step], tooltip: Union[str, NoneType] = None) ‑> Component

      Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.

      Args
      name
      An identifying name for this component.
      items
      The sequence of steps to be displayed.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Stepper instance.

      tab

      def tab(name: str, label: Union[str, NoneType] = None, icon: Union[str, NoneType] = None) ‑> Tab

      Create a tab.

      Args
      name
      An identifying name for this component.
      label
      The text displayed on the tab.
      icon
      The icon displayed on the tab.
      Returns

      A Tab instance.

      tab_card

      def tab_card(box: str, items: List[Tab], value: Union[str, NoneType] = None, link: Union[bool, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TabCard

      Create a card containing tabs for navigation.

      Args
      box
      A string indicating how to place this component on the page.
      items
      Items to render.
      value
      The name of the tab to select.
      link
      True if tabs should be rendered as links and not a standard tab.
      commands
      Contextual menu commands for this component.
      Returns

      A TabCard instance.

      table

      def table(name: str, columns: List[TableColumn], rows: List[TableRow], multiple: Union[bool, NoneType] = None, groupable: Union[bool, NoneType] = None, downloadable: Union[bool, NoneType] = None, resettable: Union[bool, NoneType] = None, height: Union[str, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create an interactive table.

      This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table.

      If multiple is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and q.args.table_name is set to [row_name], where table_name is the name of the table, and row_name is the name of the row that was clicked on.

      If multiple is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,q.args.table_name is set to [row1_name, row2_name, …] where table_name is the name of the table, and row1_name, row2_name are the name of the rows that were selected. Note that if multiple is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.

      Args
      name
      An identifying name for this component.
      columns
      The columns in this table.
      rows
      The rows in this table.
      multiple
      True to allow multiple rows to be selected.
      groupable
      True to allow group by feature.
      downloadable
      Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.
      resettable
      Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.
      height
      The height of the table, e.g. '400px', '50%', etc.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Table instance.

      table_cell_type

      def table_cell_type(progress: Union[ProgressTableCellType, NoneType] = None, icon: Union[IconTableCellType, NoneType] = None) ‑> TableCellType

      Defines cell content to be rendered instead of a simple text.

      Args
      progress
      No documentation available.
      icon
      No documentation available.
      Returns

      A TableCellType instance.

      table_column

      def table_column(name: str, label: str, min_width: Union[str, NoneType] = None, max_width: Union[str, NoneType] = None, sortable: Union[bool, NoneType] = None, searchable: Union[bool, NoneType] = None, filterable: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, cell_type: Union[TableCellType, NoneType] = None) ‑> TableColumn

      Create a table column.

      Args
      name
      An identifying name for this column.
      label
      The text displayed on the column header.
      min_width
      The minimum width of this column, e.g. '50px'. Only px units are supported at this time.
      max_width
      The maximum width of this column, e.g. '100px'. Only px units are supported at this time.
      sortable
      Indicates whether the column is sortable.
      searchable
      Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.
      filterable
      Indicates whether the contents of this column are displayed as filters in a dropdown.
      link
      Indicates whether each cell in this column should be displayed as a clickable link.
      cell_type
      Defines how to render each cell in this column. Defaults to plain text.
      Returns

      A TableColumn instance.

      table_row

      def table_row(name: str, cells: List[str]) ‑> TableRow

      Create a table row.

      Args
      name
      An identifying name for this row.
      cells
      The cells in this row (displayed left to right).
      Returns

      A TableRow instance.

      tabs

      def tabs(name: str, value: Union[str, NoneType] = None, items: Union[List[Tab], NoneType] = None) ‑> Component

      Create a tab bar.

      Args
      name
      An identifying name for this component.
      value
      The name of the tab to select.
      items
      The tabs in this tab bar.
      Returns

      A Tabs instance.

      tall_gauge_stat_card

      def tall_gauge_stat_card(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TallGaugeStatCard

      Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      progress
      The value of the progress gauge, between 0 and 1.
      plot_color
      The color of the progress gauge.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A TallGaugeStatCard instance.

      tall_series_stat_card

      def tall_series_stat_card(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TallSeriesStatCard

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed below the primary value.
      plot_data
      The plot's data.
      plot_value
      The data field to use for y-axis values.
      plot_zero_value
      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.
      plot_category
      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.
      plot_type
      The type of plot. Defaults to area. One of 'area', 'interval'.
      plot_curve
      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.
      plot_color
      The plot's color.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A TallSeriesStatCard instance.

      template

      def template(content: str, data: Union[dict, str, NoneType] = None) ‑> Component

      Render dynamic content using a HTML template.

      Args
      content
      The Handlebars template. https://handlebarsjs.com/guide/
      data
      Data for the Handlebars template
      Returns

      A Template instance.

      template_card

      def template_card(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TemplateCard

      Render dynamic content using a HTML template.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      content
      The Handlebars template. https://handlebarsjs.com/guide/
      data
      Data for the Handlebars template
      commands
      Contextual menu commands for this component.
      Returns

      A TemplateCard instance.

      text

      def text(content: str, size: Union[str, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create text content.

      Args
      content
      The text content.
      size
      The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'.
      tooltip
      Tooltip message.
      Returns

      A Text instance.

      text_l

      def text_l(content: str, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> Component

      Create large sized text content.

      Args
      content
      The text content.
      tooltip
      Tooltip message.
      commands
      Contextual menu commands for this component.
      Returns

      A TextL instance.

      text_m

      def text_m(content: str, tooltip: Union[str, NoneType] = None) ‑> Component

      Create medium sized text content.

      Args
      content
      The text content.
      tooltip
      Tooltip message.
      Returns

      A TextM instance.

      text_s

      def text_s(content: str, tooltip: Union[str, NoneType] = None) ‑> Component

      Create small sized text content.

      Args
      content
      The text content.
      tooltip
      Tooltip message.
      Returns

      A TextS instance.

      text_xl

      def text_xl(content: str, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> Component

      Create extra-large sized text content.

      Args
      content
      The text content.
      tooltip
      Tooltip message.
      commands
      Contextual menu commands for this component.
      Returns

      A TextXl instance.

      text_xs

      def text_xs(content: str, tooltip: Union[str, NoneType] = None) ‑> Component

      Create extra-small sized text content.

      Args
      content
      The text content.
      tooltip
      Tooltip message.
      Returns

      A TextXs instance.

      textbox

      def textbox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, mask: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, prefix: Union[str, NoneType] = None, suffix: Union[str, NoneType] = None, error: Union[str, NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, readonly: Union[bool, NoneType] = None, multiline: Union[bool, NoneType] = None, password: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a text box.

      The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.

      Args
      name
      An identifying name for this component.
      label
      The text displayed above the field.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.
      value
      Text to be displayed inside the text box.
      mask
      The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].
      icon
      Icon displayed in the far right end of the text field.
      prefix
      Text to be displayed before the text box contents.
      suffix
      Text to be displayed after the text box contents.
      error
      Text to be displayed as an error below the text box.
      required
      True if the text box is a required field.
      disabled
      True if the text box is disabled.
      readonly
      True if the text box is a read-only field.
      multiline
      True if the text box should allow multi-line text entry.
      password
      True if the text box should hide text content.
      trigger
      True if the form should be submitted when the text value changes.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Textbox instance.

      toggle

      def toggle(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action.

      Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      value
      True if selected, False if unselected.
      disabled
      True if the checkbox is disabled.
      trigger
      True if the form should be submitted when the toggle value changes.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Toggle instance.

      toolbar_card

      def toolbar_card(box: str, items: List[Command], secondary_items: Union[List[Command], NoneType] = None, overflow_items: Union[List[Command], NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> ToolbarCard

      Create a card containing a toolbar.

      Args
      box
      A string indicating how to place this component on the page.
      items
      Items to render.
      secondary_items
      Items to render on the right side (or left, in RTL).
      overflow_items
      Items to render in an overflow menu.
      commands
      Contextual menu commands for this component.
      Returns

      A ToolbarCard instance.

      vega_card

      def vega_card(box: str, title: str, specification: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> VegaCard

      Create a card containing a Vega-lite plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title of this card.
      specification
      The Vega-lite specification.
      data
      Data for the plot, if any.
      commands
      Contextual menu commands for this component.
      Returns

      A VegaCard instance.

      vega_visualization

      def vega_visualization(specification: str, data: Union[dict, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None) ‑> Component

      Create a Vega-lite plot for display inside a form.

      Args
      specification
      The Vega-lite specification.
      data
      Data for the plot, if any.
      width
      The width of the visualization. Defaults to 100%.
      height
      The height of the visualization. Defaults to 300px.
      Returns

      A VegaVisualization instance.

      visualization

      def visualization(plot: Plot, data: Union[dict, str], width: Union[str, NoneType] = None, height: Union[str, NoneType] = None) ‑> Component

      Create a visualization for display inside a form.

      Args
      plot
      The plot to be rendered in this visualization.
      data
      Data for this visualization.
      width
      The width of the visualization. Defaults to 100%.
      height
      The height of the visualization. Defaults to 300px.
      Returns

      A Visualization instance.

      wide_bar_stat_card

      def wide_bar_stat_card(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> WideBarStatCard

      Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      progress
      The value of the progress bar, between 0 and 1.
      plot_color
      The color of the progress bar.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A WideBarStatCard instance.

      wide_gauge_stat_card

      def wide_gauge_stat_card(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> WideGaugeStatCard

      Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      progress
      The value of the progress gauge, between 0 and 1.
      plot_color
      The color of the progress gauge.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A WideGaugeStatCard instance.

      wide_series_stat_card

      def wide_series_stat_card(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> WideSeriesStatCard

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed below the primary value.
      plot_data
      The plot's data.
      plot_value
      The data field to use for y-axis values.
      plot_zero_value
      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.
      plot_category
      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.
      plot_type
      The type of plot. Defaults to area. One of 'area', 'interval'.
      plot_curve
      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.
      plot_color
      The plot's color.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A WideSeriesStatCard instance.

      Edit this page
      +

      Module h2o_wave.ui

      Functions

      breadcrumb

      def breadcrumb(name: str, label: str) ‑> Breadcrumb

      Create a breadcrumb for a BreadcrumbsCard.

      Args
      name
      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.
      label
      The label to display.
      Returns

      A Breadcrumb instance.

      breadcrumbs_card

      def breadcrumbs_card(box: str, items: List[Breadcrumb], commands: Union[List[Command], NoneType] = None) ‑> BreadcrumbsCard

      Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

      Args
      box
      A string indicating how to place this component on the page.
      items
      A list of Breadcrumb instances to display. See breadcrumb()
      commands
      Contextual menu commands for this component.
      Returns

      A BreadcrumbsCard instance.

      button

      def button(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, value: Union[str, NoneType] = None, primary: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a button.

      Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

      When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements.

      Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.

      While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.

      Args
      name
      An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.
      label
      The text displayed on the button.
      caption
      The caption displayed below the label. Setting a caption renders a compound button.
      value
      A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.
      primary
      True if the button should be rendered as the primary button in the set.
      disabled
      True if the button should be disabled.
      link
      True if the button should be rendered as link text and not a standard button.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Button instance.

      buttons

      def buttons(items: List[Component], justify: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a set of buttons to be layed out horizontally.

      Args
      items
      The button in this set.
      justify
      Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Buttons instance.

      checkbox

      def checkbox(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, indeterminate: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a checkbox.

      A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component.

      A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected.

      For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action.

      Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the checkbox.
      value
      True if selected, False if unselected.
      indeterminate
      True if the selection is indeterminate (neither selected nor unselected).
      disabled
      True if the checkbox is disabled.
      trigger
      True if the form should be submitted when the checkbox value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Checkbox instance.

      checklist

      def checklist(name: str, label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed above the component.
      values
      The names of the selected choices.
      choices
      The choices to be presented.
      trigger
      True if the form should be submitted when the checklist value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Checklist instance.

      choice

      def choice(name: str, label: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None) ‑> Choice

      Create a choice for a checklist, choice group or dropdown.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      disabled
      True if the checkbox is disabled.
      Returns

      A Choice instance.

      choice_group

      def choice_group(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group.

      Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead.

      If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don't agree."

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      value
      The name of the selected choice.
      choices
      The choices to be presented.
      required
      True if this field is required.
      trigger
      True if the form should be submitted when the selection changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A ChoiceGroup instance.

      color_picker

      def color_picker(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a color picker.

      A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      value
      The selected color (CSS-compatible string)
      choices
      A list of colors (CSS-compatible strings) to limit color choices to.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A ColorPicker instance.

      combobox

      def combobox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, error: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a combobox.

      A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI.

      When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field.
      value
      The name of the selected choice.
      choices
      The choices to be presented.
      error
      Text to be displayed as an error below the text box.
      disabled
      True if this field is disabled.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Combobox instance.

      command

      def command(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, items: Union[List[Command], NoneType] = None, data: Union[str, NoneType] = None) ‑> Command

      Create a command.

      Commands are typically displayed as context menu items or toolbar button.

      Args
      name
      An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed.
      label
      The text displayed for this command.
      caption
      The caption for this command (typically a tooltip).
      icon
      The icon to be displayed for this command.
      items
      Sub-commands, if any
      data
      Data associated with this command, if any.
      Returns

      A Command instance.

      component

      def component(text: Union[Text, NoneType] = None, text_xl: Union[TextXl, NoneType] = None, text_l: Union[TextL, NoneType] = None, text_m: Union[TextM, NoneType] = None, text_s: Union[TextS, NoneType] = None, text_xs: Union[TextXs, NoneType] = None, label: Union[Label, NoneType] = None, separator: Union[Separator, NoneType] = None, progress: Union[Progress, NoneType] = None, message_bar: Union[MessageBar, NoneType] = None, textbox: Union[Textbox, NoneType] = None, checkbox: Union[Checkbox, NoneType] = None, toggle: Union[Toggle, NoneType] = None, choice_group: Union[ChoiceGroup, NoneType] = None, checklist: Union[Checklist, NoneType] = None, dropdown: Union[Dropdown, NoneType] = None, combobox: Union[Combobox, NoneType] = None, slider: Union[Slider, NoneType] = None, spinbox: Union[Spinbox, NoneType] = None, date_picker: Union[DatePicker, NoneType] = None, color_picker: Union[ColorPicker, NoneType] = None, button: Union[Button, NoneType] = None, buttons: Union[Buttons, NoneType] = None, file_upload: Union[FileUpload, NoneType] = None, table: Union[Table, NoneType] = None, link: Union[Link, NoneType] = None, tabs: Union[Tabs, NoneType] = None, expander: Union[Expander, NoneType] = None, frame: Union[Frame, NoneType] = None, markup: Union[Markup, NoneType] = None, template: Union[Template, NoneType] = None, picker: Union[Picker, NoneType] = None, range_slider: Union[RangeSlider, NoneType] = None, stepper: Union[Stepper, NoneType] = None, visualization: Union[Visualization, NoneType] = None, vega_visualization: Union[VegaVisualization, NoneType] = None) ‑> Component

      Create a component.

      Args
      text
      Text block.
      text_xl
      Extra-large sized text block.
      text_l
      Large sized text block.
      text_m
      Medium sized text block.
      text_s
      Small sized text block.
      text_xs
      Extra-small sized text block.
      label
      Label.
      separator
      Separator.
      progress
      Progress bar.
      message_bar
      Message bar.
      textbox
      Textbox.
      checkbox
      Checkbox.
      toggle
      Toggle.
      choice_group
      Choice group.
      checklist
      Checklist.
      dropdown
      Dropdown.
      combobox
      Combobox.
      slider
      Slider.
      spinbox
      Spinbox.
      date_picker
      Date picker.
      color_picker
      Color picker.
      button
      Button.
      buttons
      Button set.
      file_upload
      File upload.
      table
      Table.
      link
      Link.
      tabs
      Tabs.
      expander
      Expander.
      frame
      Frame.
      markup
      Markup
      template
      Template
      picker
      Picker.
      range_slider
      Range Slider.
      stepper
      Stepper.
      visualization
      Visualization.
      vega_visualization
      Vega-lite Visualization.
      Returns

      A Component instance.

      date_picker

      def date_picker(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a date picker.

      A date picker allows a user to pick a date value.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field.
      value
      The date value in YYYY-MM-DD format.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the datepicker value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A DatePicker instance.

      dropdown

      def dropdown(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a dropdown.

      A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible.

      To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.

      Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field.
      value
      The name of the selected choice.
      values
      The names of the selected choices. If this parameter is set, multiple selections will be allowed.
      choices
      The choices to be presented.
      required
      True if this is a required field.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the dropdown value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Dropdown instance.

      expander

      def expander(name: str, label: Union[str, NoneType] = None, expanded: Union[bool, NoneType] = None, items: Union[List[Component], NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Creates a new expander.

      Expanders can be used to show or hide a group of related components.

      Args
      name
      An identifying name for this component.
      label
      The text displayed on the expander.
      expanded
      True if expanded, False if collapsed.
      items
      List of components to be hideable by the expander.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Expander instance.

      file_upload

      def file_upload(name: str, label: Union[str, NoneType] = None, multiple: Union[bool, NoneType] = None, file_extensions: Union[List[str], NoneType] = None, max_file_size: Union[float, NoneType] = None, max_size: Union[float, NoneType] = None, height: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      multiple
      True if the component should allow multiple files to be uploaded.
      file_extensions
      List of allowed file extensions, e.g. pdf, docx, etc.
      max_file_size
      Maximum allowed size (Mb) per file. Defaults to no limit.
      max_size
      Maximum allowed size (Mb) for all files combined. Defaults to no limit.
      height
      The height of the file upload, e.g. '400px', '50%', etc.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A FileUpload instance.

      flex_card

      def flex_card(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], direction: Union[str, NoneType] = None, justify: Union[str, NoneType] = None, align: Union[str, NoneType] = None, wrap: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> FlexCard

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.

      Args
      box
      A string indicating how to place this component on the page.
      item_view
      The child card type.
      item_props
      The child card properties.
      data
      Data for this card.
      direction
      Layout direction. One of 'horizontal', 'vertical'.
      justify
      Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'.
      align
      Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'.
      wrap
      Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'.
      commands
      Contextual menu commands for this component.
      Returns

      A FlexCard instance.

      form_card

      def form_card(box: str, items: Union[List[Component], str], commands: Union[List[Command], NoneType] = None) ‑> FormCard

      Create a form.

      Args
      box
      A string indicating how to place this component on the page.
      items
      The components in this form.
      commands
      Contextual menu commands for this component.
      Returns

      A FormCard instance.

      frame

      def frame(path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a new inline frame (an iframe).

      Args
      path
      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html
      content
      The HTML content of the page. A string containing <html>...</html>.
      width
      The width of the frame, e.g. 200px, 50%, etc. Defaults to 100%.
      height
      The height of the frame, e.g. 200px, 50%, etc. Defaults to 150px.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Frame instance.

      frame_card

      def frame_card(box: str, title: str, path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> FrameCard

      Render a card containing a HTML page inside an inline frame (an iframe).

      Either a path or content can be provided as arguments.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      path
      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html
      content
      The HTML content of the page. A string containing <html>...</html>
      commands
      Contextual menu commands for this component.
      Returns

      A FrameCard instance.

      graphics_card

      def graphics_card(box: str, view_box: str, stage: Union[List[dict], str, NoneType] = None, scene: Union[Data, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> GraphicsCard

      Create a card for displaying vector graphics.

      Args
      box
      A string indicating how to place this component on the page.
      view_box
      The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
      stage
      Background layer for rendering static SVG elements. Must be packed to conserve memory.
      scene
      Foreground layer for rendering dynamic SVG elements.
      width
      The displayed width of the rectangular viewport. (Not the width of its coordinate system.)
      height
      The displayed height of the rectangular viewport. (Not the height of its coordinate system.)
      commands
      Contextual menu commands for this component.
      Returns

      A GraphicsCard instance.

      grid_card

      def grid_card(box: str, title: str, cells: Union[Data, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None) ‑> GridCard

      EXPERIMENTAL. DO NOT USE.

      Args
      box
      A string indicating how to place this component on the page.
      title
      EXPERIMENTAL. DO NOT USE.
      cells
      EXPERIMENTAL. DO NOT USE.
      data
      EXPERIMENTAL. DO NOT USE.
      commands
      Contextual menu commands for this component.
      Returns

      A GridCard instance.

      header_card

      def header_card(box: str, title: str, subtitle: str, icon: Union[str, NoneType] = None, icon_color: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> HeaderCard

      Render a card containing a HTML page inside an inline frame (iframe).

      Either a path or content can be provided as arguments.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title.
      subtitle
      The subtitle, displayed below the title.
      icon
      The icon type, displayed to the left.
      icon_color
      The icon's color.
      commands
      Contextual menu commands for this component.
      Returns

      A HeaderCard instance.

      icon_table_cell_type

      def icon_table_cell_type(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> TableCellType

      Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.

      Args
      color
      Icon color.
      name
      An identifying name for this component.
      Returns

      A IconTableCellType instance.

      image_card

      def image_card(box: str, title: str, type: str, image: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> ImageCard

      Create a card that displays a base64-encoded image.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      type
      The image MIME subtype. One of apng, bmp, gif, x-icon, jpeg, png, webp.
      image
      Image data, base64-encoded.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A ImageCard instance.

      label

      def label(label: str, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create a label.

      Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.

      Args
      label
      The text displayed on the label.
      required
      True if the field is required.
      disabled
      True if the label should be disabled.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      name
      An identifying name for this component.
      Returns

      A Label instance.

      large_bar_stat_card

      def large_bar_stat_card(box: str, title: str, caption: str, value: str, aux_value: str, value_caption: str, aux_value_caption: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> LargeBarStatCard

      Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      caption
      The card's caption.
      value
      The primary value displayed.
      aux_value
      The auxiliary value, typically a target value.
      value_caption
      The caption displayed below the primary value.
      aux_value_caption
      The caption displayed below the auxiliary value.
      progress
      The value of the progress bar, between 0 and 1.
      plot_color
      The color of the progress bar.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A LargeBarStatCard instance.

      large_stat_card

      def large_stat_card(box: str, title: str, value: str, aux_value: str, caption: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> LargeStatCard

      Create a stat card displaying a primary value, an auxiliary value and a caption.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      caption
      The caption displayed below the primary value.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A LargeStatCard instance.

      link

      def link(label: Union[str, NoneType] = None, path: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, download: Union[bool, NoneType] = None, button: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create a hyperlink.

      Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a / and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.

      Args
      label
      The text to be displayed. If blank, the path is used as the label.
      path
      The path or URL to link to.
      disabled
      True if the link should be disabled.
      download
      True if the link should be used for file download.
      button
      True if the link should be rendered as a button.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      name
      An identifying name for this component.
      Returns

      A Link instance.

      list_card

      def list_card(box: str, title: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None) ‑> ListCard

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      item_view
      The child card type.
      item_props
      The child card properties.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A ListCard instance.

      list_item1_card

      def list_item1_card(box: str, title: str, caption: str, value: str, aux_value: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None) ‑> ListItem1Card

      EXPERIMENTAL. DO NOT USE.

      Args
      box
      A string indicating how to place this component on the page.
      title
      EXPERIMENTAL. DO NOT USE.
      caption
      EXPERIMENTAL. DO NOT USE.
      value
      EXPERIMENTAL. DO NOT USE.
      aux_value
      EXPERIMENTAL. DO NOT USE.
      data
      EXPERIMENTAL. DO NOT USE.
      commands
      Contextual menu commands for this component.
      Returns

      A ListItem1Card instance.

      mark

      def mark(coord: Union[str, NoneType] = None, type: Union[str, NoneType] = None, x: Union[str, float, int, NoneType] = None, x0: Union[str, float, int, NoneType] = None, x1: Union[str, float, int, NoneType] = None, x2: Union[str, float, int, NoneType] = None, x_min: Union[float, NoneType] = None, x_max: Union[float, NoneType] = None, x_nice: Union[bool, NoneType] = None, x_scale: Union[str, NoneType] = None, x_title: Union[str, NoneType] = None, y: Union[str, float, int, NoneType] = None, y0: Union[str, float, int, NoneType] = None, y1: Union[str, float, int, NoneType] = None, y2: Union[str, float, int, NoneType] = None, y_min: Union[float, NoneType] = None, y_max: Union[float, NoneType] = None, y_nice: Union[bool, NoneType] = None, y_scale: Union[str, NoneType] = None, y_title: Union[str, NoneType] = None, color: Union[str, NoneType] = None, color_range: Union[str, NoneType] = None, color_domain: Union[List[str], NoneType] = None, shape: Union[str, NoneType] = None, shape_range: Union[str, NoneType] = None, size: Union[str, float, int, NoneType] = None, size_range: Union[str, NoneType] = None, stack: Union[str, NoneType] = None, dodge: Union[str, NoneType] = None, curve: Union[str, NoneType] = None, fill_color: Union[str, NoneType] = None, fill_opacity: Union[float, NoneType] = None, stroke_color: Union[str, NoneType] = None, stroke_opacity: Union[float, NoneType] = None, stroke_size: Union[float, NoneType] = None, stroke_dash: Union[str, NoneType] = None, label: Union[str, NoneType] = None, label_offset: Union[float, NoneType] = None, label_offset_x: Union[float, NoneType] = None, label_offset_y: Union[float, NoneType] = None, label_rotation: Union[str, NoneType] = None, label_position: Union[str, NoneType] = None, label_overlap: Union[str, NoneType] = None, label_fill_color: Union[str, NoneType] = None, label_fill_opacity: Union[float, NoneType] = None, label_stroke_color: Union[str, NoneType] = None, label_stroke_opacity: Union[float, NoneType] = None, label_stroke_size: Union[float, NoneType] = None, label_font_size: Union[float, NoneType] = None, label_font_weight: Union[str, NoneType] = None, label_line_height: Union[float, NoneType] = None, label_align: Union[str, NoneType] = None, ref_stroke_color: Union[str, NoneType] = None, ref_stroke_opacity: Union[float, NoneType] = None, ref_stroke_size: Union[float, NoneType] = None, ref_stroke_dash: Union[str, NoneType] = None) ‑> Mark

      Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.

      Args
      coord
      Coordinate system. rect is synonymous to cartesian. theta is transposed polar. One of 'rect', 'cartesian', 'polar', 'theta', 'helix'.
      type
      Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'.
      x
      X field or value.
      x0
      X base field or value.
      x1
      X bin lower bound field or value. For histograms.
      x2
      X bin upper bound field or value. For histograms.
      x_min
      X axis scale minimum.
      x_max
      X axis scale maximum.
      x_nice
      Whether to nice X axis scale ticks.
      x_scale
      X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.
      x_title
      X axis title.
      y
      Y field or value.
      y0
      Y base field or value.
      y1
      Y bin lower bound field or value. For histograms.
      y2
      Y bin upper bound field or value. For histograms.
      y_min
      Y axis scale minimum.
      y_max
      Y axis scale maximum.
      y_nice
      Whether to nice Y axis scale ticks.
      y_scale
      Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.
      y_title
      Y axis title.
      color
      Mark color field or value.
      color_range
      Mark color range for multi-series plots. A string containing space-separated colors, e.g. '#fee8c8 #fdbb84 #e34a33'
      color_domain
      The unique values in the data (labels or categories or classes) to map colors to, e.g. ['high', 'medium', 'low']. If this is not provided, the unique values are automatically inferred from the color attribute.
      shape
      Mark shape field or value for point mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.
      shape_range
      Mark shape range for multi-series plots using point mark types. A string containing space-separated shapes, e.g. 'circle square diamond'
      size
      Mark size field or value.
      size_range
      Mark size range. A string containing space-separated integers, e.g. '4 30'
      stack
      Field to stack marks by, or 'auto' to infer.
      dodge
      Field to dodge marks by, or 'auto' to infer.
      curve
      Curve type for line and area mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'.
      fill_color
      Mark fill color.
      fill_opacity
      Mark fill opacity.
      stroke_color
      Mark stroke color.
      stroke_opacity
      Mark stroke opacity.
      stroke_size
      Mark stroke size.
      stroke_dash
      Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].
      label
      Label field or value.
      label_offset
      Distance between label and mark.
      label_offset_x
      Horizontal distance between label and mark.
      label_offset_y
      Vertical distance between label and mark.
      label_rotation
      Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.
      label_position
      Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'.
      label_overlap
      Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'.
      label_fill_color
      Label fill color.
      label_fill_opacity
      Label fill opacity.
      label_stroke_color
      Label stroke color.
      label_stroke_opacity
      Label stroke opacity.
      label_stroke_size
      Label stroke size (line width or pen thickness).
      label_font_size
      Label font size.
      label_font_weight
      Label font weight.
      label_line_height
      Label line height.
      label_align
      Label text alignment. One of 'left', 'right', 'center', 'start', 'end'.
      ref_stroke_color
      Reference line stroke color.
      ref_stroke_opacity
      Reference line stroke opacity.
      ref_stroke_size
      Reference line stroke size (line width or pen thickness).
      ref_stroke_dash
      Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].
      Returns

      A Mark instance.

      markdown_card

      def markdown_card(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> MarkdownCard

      Create a card that renders Markdown content.

      Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      content
      The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/
      data
      Additional data for the card.
      commands
      Contextual menu commands for this component.
      Returns

      A MarkdownCard instance.

      markup

      def markup(content: str, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Render HTML content.

      Args
      content
      The HTML content.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Markup instance.

      markup_card

      def markup_card(box: str, title: str, content: str, commands: Union[List[Command], NoneType] = None) ‑> MarkupCard

      Render HTML content.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      content
      The HTML content.
      commands
      Contextual menu commands for this component.
      Returns

      A MarkupCard instance.

      message_bar

      def message_bar(type: Union[str, NoneType] = None, text: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a message bar.

      A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.

      Args
      type
      The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'.
      text
      The text displayed on the message bar.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A MessageBar instance.

      meta_card

      def meta_card(box: str, title: Union[str, NoneType] = None, refresh: Union[int, NoneType] = None, notification: Union[str, NoneType] = None, redirect: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> MetaCard

      Represents page-global state.

      This card is invisible. It is used to control attributes of the active page.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title of the page.
      refresh
      Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).
      notification
      Display a desktop notification to the user.
      redirect
      Redirect the page to a new URL.
      commands
      Contextual menu commands for this component.
      Returns

      A MetaCard instance.

      nav_card

      def nav_card(box: str, items: List[NavGroup], commands: Union[List[Command], NoneType] = None) ‑> NavCard

      Create a card containing a navigation pane.

      Args
      box
      A string indicating how to place this component on the page.
      items
      The navigation groups contained in this pane.
      commands
      Contextual menu commands for this component.
      Returns

      A NavCard instance.

      nav_group

      def nav_group(label: str, items: List[NavItem]) ‑> NavGroup

      Create a group of navigation items.

      Args
      label
      The label to display for this group.
      items
      The navigation items contained in this group.
      Returns

      A NavGroup instance.

      nav_item

      def nav_item(name: str, label: str) ‑> NavItem

      Create a navigation item.

      Args
      name
      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.
      label
      The label to display.
      Returns

      A NavItem instance.

      picker

      def picker(name: str, choices: List[Choice], label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, max_choices: Union[int, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.

      Args
      name
      An identifying name for this component.
      choices
      The choices to be presented.
      label
      Text to be displayed above the component.
      values
      The names of the selected choices.
      max_choices
      Maximum number of selectable choices. Defaults to no limit.
      disabled
      Controls whether the picker should be disabled or not.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Picker instance.

      pixel_art_card

      def pixel_art_card(box: str, title: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None) ‑> PixelArtCard

      Create a card displaying a collaborative Pixel art tool, just for kicks.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      data
      The data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A PixelArtCard instance.

      plot

      def plot(marks: List[Mark]) ‑> Plot

      Create a plot. A plot is composed of one or more graphical mark layers.

      Args
      marks
      The graphical mark layers contained in this plot.
      Returns

      A Plot instance.

      plot_card

      def plot_card(box: str, title: str, data: Union[dict, str], plot: Plot, commands: Union[List[Command], NoneType] = None) ‑> PlotCard

      Create a card displaying a plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      data
      Data for this card.
      plot
      The plot to be displayed in this card.
      commands
      Contextual menu commands for this component.
      Returns

      A PlotCard instance.

      progress

      def progress(label: str, caption: Union[str, NoneType] = None, value: Union[float, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create a progress bar.

      Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing.

      Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]

      Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.

      Args
      label
      The text displayed above the bar.
      caption
      The text displayed below the bar.
      value
      The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      name
      An identifying name for this component.
      Returns

      A Progress instance.

      progress_table_cell_type

      def progress_table_cell_type(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> TableCellType

      Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.

      Args
      color
      Color of the progress arc.
      name
      An identifying name for this component.
      Returns

      A ProgressTableCellType instance.

      range_slider

      def range_slider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, min_value: Union[float, NoneType] = None, max_value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a range slider.

      A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      min
      The minimum value of the slider. Defaults to 0.
      max
      The maximum value of the slider. Defaults to 100.
      step
      The difference between two adjacent values of the slider.
      min_value
      The lower bound of the selected range.
      max_value
      The upper bound of the selected range.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the slider value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A RangeSlider instance.

      repeat_card

      def repeat_card(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None) ‑> RepeatCard

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards.

      Args
      box
      A string indicating how to place this component on the page.
      item_view
      EXPERIMENTAL. DO NOT USE.
      item_props
      The child card properties.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A RepeatCard instance.

      separator

      def separator(label: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a separator.

      A separator visually separates content into groups.

      Args
      label
      The text displayed on the separator.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Separator instance.

      slider

      def slider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a slider.

      A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value.

      A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium — not about setting the value to two or five.

      The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      min
      The minimum value of the slider.
      max
      The maximum value of the slider.
      step
      The difference between two adjacent values of the slider.
      value
      The current value of the slider.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the slider value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Slider instance.

      small_series_stat_card

      def small_series_stat_card(box: str, title: str, value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> SmallSeriesStatCard

      Create a small stat card displaying a primary value and a series plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      plot_data
      The plot's data.
      plot_value
      The data field to use for y-axis values.
      plot_zero_value
      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.
      plot_category
      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.
      plot_type
      The type of plot. Defaults to area. One of 'area', 'interval'.
      plot_curve
      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.
      plot_color
      The plot's color.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A SmallSeriesStatCard instance.

      small_stat_card

      def small_stat_card(box: str, title: str, value: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> SmallStatCard

      Create a stat card displaying a single value.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A SmallStatCard instance.

      spinbox

      def spinbox(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a spinbox.

      A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      min
      The minimum value of the spinbox.
      max
      The maximum value of the spinbox.
      step
      The difference between two adjacent values of the spinbox.
      value
      The current value of the spinbox.
      disabled
      True if this field is disabled.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Spinbox instance.

      step

      def step(label: str, icon: Union[str, NoneType] = None, done: Union[bool, NoneType] = None) ‑> Step

      Create a step for a stepper.

      Args
      label
      Text displayed below icon.
      icon
      Icon to be displayed.
      done
      Indicates whether this step has already been completed.
      Returns

      A Step instance.

      stepper

      def stepper(name: str, items: List[Step], visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.

      Args
      name
      An identifying name for this component.
      items
      The sequence of steps to be displayed.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Stepper instance.

      tab

      def tab(name: str, label: Union[str, NoneType] = None, icon: Union[str, NoneType] = None) ‑> Tab

      Create a tab.

      Args
      name
      An identifying name for this component.
      label
      The text displayed on the tab.
      icon
      The icon displayed on the tab.
      Returns

      A Tab instance.

      tab_card

      def tab_card(box: str, items: List[Tab], value: Union[str, NoneType] = None, link: Union[bool, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TabCard

      Create a card containing tabs for navigation.

      Args
      box
      A string indicating how to place this component on the page.
      items
      Items to render.
      value
      The name of the tab to select.
      link
      True if tabs should be rendered as links and not a standard tab.
      commands
      Contextual menu commands for this component.
      Returns

      A TabCard instance.

      table

      def table(name: str, columns: List[TableColumn], rows: List[TableRow], multiple: Union[bool, NoneType] = None, groupable: Union[bool, NoneType] = None, downloadable: Union[bool, NoneType] = None, resettable: Union[bool, NoneType] = None, height: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create an interactive table.

      This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table.

      If multiple is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and q.args.table_name is set to [row_name], where table_name is the name of the table, and row_name is the name of the row that was clicked on.

      If multiple is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,q.args.table_name is set to [row1_name, row2_name, …] where table_name is the name of the table, and row1_name, row2_name are the name of the rows that were selected. Note that if multiple is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.

      Args
      name
      An identifying name for this component.
      columns
      The columns in this table.
      rows
      The rows in this table.
      multiple
      True to allow multiple rows to be selected.
      groupable
      True to allow group by feature.
      downloadable
      Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.
      resettable
      Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.
      height
      The height of the table, e.g. '400px', '50%', etc.
      values
      The names of the selected rows. If this parameter is set, multiple selections will be allowed (multiple is assumed to be True).
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Table instance.

      table_cell_type

      def table_cell_type(progress: Union[ProgressTableCellType, NoneType] = None, icon: Union[IconTableCellType, NoneType] = None) ‑> TableCellType

      Defines cell content to be rendered instead of a simple text.

      Args
      progress
      No documentation available.
      icon
      No documentation available.
      Returns

      A TableCellType instance.

      table_column

      def table_column(name: str, label: str, min_width: Union[str, NoneType] = None, max_width: Union[str, NoneType] = None, sortable: Union[bool, NoneType] = None, searchable: Union[bool, NoneType] = None, filterable: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, cell_type: Union[TableCellType, NoneType] = None) ‑> TableColumn

      Create a table column.

      Args
      name
      An identifying name for this column.
      label
      The text displayed on the column header.
      min_width
      The minimum width of this column, e.g. '50px'. Only px units are supported at this time.
      max_width
      The maximum width of this column, e.g. '100px'. Only px units are supported at this time.
      sortable
      Indicates whether the column is sortable.
      searchable
      Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.
      filterable
      Indicates whether the contents of this column are displayed as filters in a dropdown.
      link
      Indicates whether each cell in this column should be displayed as a clickable link.
      cell_type
      Defines how to render each cell in this column. Defaults to plain text.
      Returns

      A TableColumn instance.

      table_row

      def table_row(name: str, cells: List[str]) ‑> TableRow

      Create a table row.

      Args
      name
      An identifying name for this row.
      cells
      The cells in this row (displayed left to right).
      Returns

      A TableRow instance.

      tabs

      def tabs(name: str, value: Union[str, NoneType] = None, items: Union[List[Tab], NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a tab bar.

      Args
      name
      An identifying name for this component.
      value
      The name of the tab to select.
      items
      The tabs in this tab bar.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Tabs instance.

      tall_gauge_stat_card

      def tall_gauge_stat_card(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TallGaugeStatCard

      Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      progress
      The value of the progress gauge, between 0 and 1.
      plot_color
      The color of the progress gauge.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A TallGaugeStatCard instance.

      tall_series_stat_card

      def tall_series_stat_card(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TallSeriesStatCard

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed below the primary value.
      plot_data
      The plot's data.
      plot_value
      The data field to use for y-axis values.
      plot_zero_value
      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.
      plot_category
      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.
      plot_type
      The type of plot. Defaults to area. One of 'area', 'interval'.
      plot_curve
      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.
      plot_color
      The plot's color.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A TallSeriesStatCard instance.

      template

      def template(content: str, data: Union[dict, str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Render dynamic content using an HTML template.

      Args
      content
      The Handlebars template. https://handlebarsjs.com/guide/
      data
      Data for the Handlebars template
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Template instance.

      template_card

      def template_card(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TemplateCard

      Render dynamic content using an HTML template.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      content
      The Handlebars template. https://handlebarsjs.com/guide/
      data
      Data for the Handlebars template.
      commands
      Contextual menu commands for this component.
      Returns

      A TemplateCard instance.

      text

      def text(content: str, size: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create text content.

      Args
      content
      The text content.
      size
      The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      name
      An identifying name for this component.
      Returns

      A Text instance.

      text_l

      def text_l(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create large sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      commands
      Contextual menu commands for this component.
      name
      An identifying name for this component.
      Returns

      A TextL instance.

      text_m

      def text_m(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create medium sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      name
      An identifying name for this component.
      Returns

      A TextM instance.

      text_s

      def text_s(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create small sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      name
      An identifying name for this component.
      Returns

      A TextS instance.

      text_xl

      def text_xl(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create extra-large sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      commands
      Contextual menu commands for this component.
      name
      An identifying name for this component.
      Returns

      A TextXl instance.

      text_xs

      def text_xs(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create extra-small sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      name
      An identifying name for this component.
      Returns

      A TextXs instance.

      textbox

      def textbox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, mask: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, prefix: Union[str, NoneType] = None, suffix: Union[str, NoneType] = None, error: Union[str, NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, readonly: Union[bool, NoneType] = None, multiline: Union[bool, NoneType] = None, password: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a text box.

      The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.

      Args
      name
      An identifying name for this component.
      label
      The text displayed above the field.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.
      value
      Text to be displayed inside the text box.
      mask
      The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].
      icon
      Icon displayed in the far right end of the text field.
      prefix
      Text to be displayed before the text box contents.
      suffix
      Text to be displayed after the text box contents.
      error
      Text to be displayed as an error below the text box.
      required
      True if the text box is a required field.
      disabled
      True if the text box is disabled.
      readonly
      True if the text box is a read-only field.
      multiline
      True if the text box should allow multi-line text entry.
      password
      True if the text box should hide text content.
      trigger
      True if the form should be submitted when the text value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Textbox instance.

      toggle

      def toggle(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action.

      Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      value
      True if selected, False if unselected.
      disabled
      True if the checkbox is disabled.
      trigger
      True if the form should be submitted when the toggle value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Toggle instance.

      toolbar_card

      def toolbar_card(box: str, items: List[Command], secondary_items: Union[List[Command], NoneType] = None, overflow_items: Union[List[Command], NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> ToolbarCard

      Create a card containing a toolbar.

      Args
      box
      A string indicating how to place this component on the page.
      items
      Items to render.
      secondary_items
      Items to render on the right side (or left, in RTL).
      overflow_items
      Items to render in an overflow menu.
      commands
      Contextual menu commands for this component.
      Returns

      A ToolbarCard instance.

      vega_card

      def vega_card(box: str, title: str, specification: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> VegaCard

      Create a card containing a Vega-lite plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title of this card.
      specification
      The Vega-lite specification.
      data
      Data for the plot, if any.
      commands
      Contextual menu commands for this component.
      Returns

      A VegaCard instance.

      vega_visualization

      def vega_visualization(specification: str, data: Union[dict, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a Vega-lite plot for display inside a form.

      Args
      specification
      The Vega-lite specification.
      data
      Data for the plot, if any.
      width
      The width of the visualization. Defaults to 100%.
      height
      The height of the visualization. Defaults to 300px.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A VegaVisualization instance.

      visualization

      def visualization(plot: Plot, data: Union[dict, str], width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a visualization for display inside a form.

      Args
      plot
      The plot to be rendered in this visualization.
      data
      Data for this visualization.
      width
      The width of the visualization. Defaults to 100%.
      height
      The hight of the visualization. Defaults to 300px.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Visualization instance.

      wide_bar_stat_card

      def wide_bar_stat_card(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> WideBarStatCard

      Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      progress
      The value of the progress bar, between 0 and 1.
      plot_color
      The color of the progress bar.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A WideBarStatCard instance.

      wide_gauge_stat_card

      def wide_gauge_stat_card(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> WideGaugeStatCard

      Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      progress
      The value of the progress gauge, between 0 and 1.
      plot_color
      The color of the progress gauge.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A WideGaugeStatCard instance.

      wide_series_stat_card

      def wide_series_stat_card(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> WideSeriesStatCard

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed below the primary value.
      plot_data
      The plot's data.
      plot_value
      The data field to use for y-axis values.
      plot_zero_value
      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.
      plot_category
      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.
      plot_type
      The type of plot. Defaults to area. One of 'area', 'interval'.
      plot_curve
      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.
      plot_color
      The plot's color.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A WideSeriesStatCard instance.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/apps/index.html b/docs/docs/apps/index.html index e0624347cb..7ef2ffbab5 100644 --- a/docs/docs/apps/index.html +++ b/docs/docs/apps/index.html @@ -4,32 +4,32 @@ -Wave Apps | H2O Wave +Wave Apps | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Wave Apps

      A Wave app is the primary mechanism to publish interactive web content in Wave.

      A Wave app can publish content and handle user interactions, unlike a Wave script, which can publish content but not handle user interactions.

      Here is the skeleton of a Wave app:

      from h2o_wave import Q, listen, ui
      +

      Wave Apps

      A Wave app is the primary mechanism to publish interactive web content in Wave.

      A Wave app can publish content and handle user interactions, unlike a Wave script, which can publish content but not handle user interactions.

      Here is the skeleton of a Wave app:

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      # Modify the page
      q.page['qux'] = ui.some_card()
      # Save the page
      await q.page.save()
      -
      # Start listening to events
      listen('/foo', serve)

      Listen and serve

      listen() has two required arguments:

      • The route your app is interested in (in the above case /foo).
      • The handler function to call when an event is received (in the above case, serve).

      listen() is a blocking call: it starts an event loop listening for user interaction events, and announces itself to the Wave server. The Wave server then starts routing any user actions happening at /foo to your app.

      The serve() function is called every time the user performs some action at the route /foo (access the page, reload it, click a button, access a menu, enter text, and so on).

      The details about what action was performed, and who performed the action, are available in the argument passed to serve(), the query context q (of type Q).

      Runtime context

      The query context q carries the following attributes:

      • route: The route at which the action was performed (in this case, /foo).
      • page: A reference to the current page (in this case, the page hosted at /foo).
      • site: A reference to the page's parent site, from which you can grab references to other pages.
      • args: The event arguments, a dictionary-like object containing information about the user action.
      • app, user, client: Dictionary-like objects holding server-side state, at the app-level, the user-level and the client-level, respectively. Here, 'client' refers to the browser tab.
      • username: The username of the user who performed the action.
      • mode: The app's realtime mode, one of unicast, multicast, or broadcast.
      Edit this page
      +
      # Start listening to events
      listen('/foo', serve)

      Listen and serve

      listen() has two required arguments:

      • The route your app is interested in (in the above case /foo).
      • The handler function to call when an event is received (in the above case, serve).

      listen() is a blocking call: it starts an event loop listening for user interaction events, and announces itself to the Wave server. The Wave server then starts routing any user actions happening at /foo to your app.

      The serve() function is called every time the user performs some action at the route /foo (access the page, reload it, click a button, access a menu, enter text, and so on).

      The details about what action was performed, and who performed the action, are available in the argument passed to serve(), the query context q (of type Q).

      Runtime context

      The query context q carries the following attributes:

      • route: The route at which the action was performed (in this case, /foo).
      • page: A reference to the current page (in this case, the page hosted at /foo).
      • site: A reference to the page's parent site, from which you can grab references to other pages.
      • args: The event arguments, a dictionary-like object containing information about the user action.
      • app, user, client: Dictionary-like objects holding server-side state, at the app-level, the user-level and the client-level, respectively. Here, 'client' refers to the browser tab.
      • username: The username of the user who performed the action.
      • mode: The app's realtime mode, one of unicast, multicast, or broadcast.
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/architecture/index.html b/docs/docs/architecture/index.html index 4bec2af96a..3f958a5ede 100644 --- a/docs/docs/architecture/index.html +++ b/docs/docs/architecture/index.html @@ -4,30 +4,30 @@ -Architecture | H2O Wave +Architecture | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Architecture

      H2O Wave is a software stack for building beautiful, low-latency, realtime, browser-based applications and dashboards entirely in Python without using HTML, Javascript or CSS.

      It excels at capturing data, visualizations, and graphics from multiple sources, and broadcasting them live over the web.

      The stack is engineered from the ground-up for low-latency, realtime information display, and is usable on its own (not only a programming framework, but a programmable content server).

      Overview

      The Wave runtime operates over three tiers:

      • A content server. The Wave server, a ~10MB static binary executable that runs anywhere1.
      • A language driver. The h2o-wave PyPI package used by Wave scripts and apps.
      • A browser-based client. The user interface and components.
      +---------+ +---------+
      | Browser +---------+ +------>+ app1.py |
      +---------+ | | +---------+
      v |
      +---------+ +-+------+-+ +---------+
      | Browser +------>+ Server +---->+ app2.py |
      +---------+ +-+------+-+ +---------+
      ^ |
      +---------+ | | +---------+
      | Browser +---------+ +------>+ app3.py |
      +---------+ +---------+

      The Wave server has three main functions:

      • Store site content
      • Transmit content changes to browsers.
      • Transmit browser events to apps.

      In other words, the Wave server is comparable to a in-memory realtime database, a HTTP web server and a proxy server, all rolled into one, with browsers (clients) downstream, and Wave apps (or scripts) upstream.

      The language driver (the h2o-wave PyPI package) provides the ability to manage content on the Wave server. It's similar in function to a database driver, but unlike typical database drivers (which use SQL as a protocol), the Wave driver provides an API closely integrated with the Python language that feels natural and idiomatic in practice.

      The browser-based client's job is to render content on the user interface, and transmit user actions in the form of events back to the Wave server.

      How does it work?

      The Wave server stores all content in a page cache called a site. A site is a collection of pages. Each page has an address, called its route. A page is composed of cards. A card holds content, and any tabular data associated with the content, called data buffers.

      When a browser is pointed to a route, it pulls a copy of the page, creates a replica locally, and renders the content on the user interface.

      The language driver (the h2o-wave PyPI package) maintains an illusion that server-side content is available locally. Local updates to pages and cards are transmitted in the form of operations to the server. The server applies those updates to the master copy of the content. If any browser is currently displaying that content, the server forwards updates to the browser, causing the browser to update its replica and re-render its user interface.

      Python
      +------------+
      | app.py |
      | + |
      | | |
      | v |
      | +---+----+ |
      +-+ Driver +-+
      +---+----+
      |
      |Operations
      |
      v
      +-----+------+
      | Server |
      | |
      | +------+ |
      | | Page | |
      | +------+ |
      | |
      +-----+------+
      |
      |Replication
      |
      +-------------+
      | +---------+ |
      | | Replica | |
      | +---------+ |
      | |
      | UI |
      +-------------+
      Browser

      The language driver can be used by two kinds of Python programs: Wave apps and Wave scripts.

      • Wave apps are interactive programs that can update content and respond to user actions.
      • Wave scripts are simpler, non-interactive (batch) programs: they can update content, but not respond to user actions.

      Wave apps sport a websocket server under the hood. When a Wave app is launched, it announces its existence to the Wave server, and the Wave server establishes a relay with the Wave app. When a browser tries to connect to an app, the Wave server acts as a hub, relaying information back and forth between the browser and the app.

      How is it different?

      The Wave server retains content. This is an important concept to understand, and the primary reason why Wave is different from a typical web framework. A Wave script can update content and exit, and the Wave server will happily continue serving that content. In other words, no Python process needs to be around if a new user arrives after you script has exited.

      Different parts of the same page can be updated by different scripts running on different devices. Also, all content is live (or reactive) all the time: browsers always display up-to-date content without the need to reload.

      1 Linux, Windows, Darwin, BSD, Solaris, Android on amd64, arm, 386, ppc, mips; almost everywhere.

      Edit this page
      +

      Architecture

      H2O Wave is a software stack for building beautiful, low-latency, realtime, browser-based applications and dashboards entirely in Python without using HTML, Javascript or CSS.

      It excels at capturing data, visualizations, and graphics from multiple sources, and broadcasting them live over the web.

      The stack is engineered from the ground-up for low-latency, realtime information display, and is usable on its own (not only a programming framework, but a programmable content server).

      Overview

      The Wave runtime operates over three tiers:

      • A content server. The Wave server, a ~10MB static binary executable that runs anywhere1.
      • A language driver. The h2o-wave PyPI package used by Wave scripts and apps.
      • A browser-based client. The user interface and components.
      +---------+ +---------+
      | Browser +---------+ +------>+ app1.py |
      +---------+ | | +---------+
      v |
      +---------+ +-+------+-+ +---------+
      | Browser +------>+ Server +---->+ app2.py |
      +---------+ +-+------+-+ +---------+
      ^ |
      +---------+ | | +---------+
      | Browser +---------+ +------>+ app3.py |
      +---------+ +---------+

      The Wave server has three main functions:

      • Store site content
      • Transmit content changes to browsers.
      • Transmit browser events to apps.

      In other words, the Wave server is comparable to a in-memory realtime database, a HTTP web server and a proxy server, all rolled into one, with browsers (clients) downstream, and Wave apps (or scripts) upstream.

      The language driver (the h2o-wave PyPI package) provides the ability to manage content on the Wave server. It's similar in function to a database driver, but unlike typical database drivers (which use SQL as a protocol), the Wave driver provides an API closely integrated with the Python language that feels natural and idiomatic in practice.

      The browser-based client's job is to render content on the user interface, and transmit user actions in the form of events back to the Wave server.

      How does it work?

      The Wave server stores all content in a page cache called a site. A site is a collection of pages. Each page has an address, called its route. A page is composed of cards. A card holds content, and any tabular data associated with the content, called data buffers.

      When a browser is pointed to a route, it pulls a copy of the page, creates a replica locally, and renders the content on the user interface.

      The language driver (the h2o-wave PyPI package) maintains an illusion that server-side content is available locally. Local updates to pages and cards are transmitted in the form of operations to the server. The server applies those updates to the master copy of the content. If any browser is currently displaying that content, the server forwards updates to the browser, causing the browser to update its replica and re-render its user interface.

      Python
      +------------+
      | app.py |
      | + |
      | | |
      | v |
      | +---+----+ |
      +-+ Driver +-+
      +---+----+
      |
      |Operations
      |
      v
      +-----+------+
      | Server |
      | |
      | +------+ |
      | | Page | |
      | +------+ |
      | |
      +-----+------+
      |
      |Replication
      |
      +-------------+
      | +---------+ |
      | | Replica | |
      | +---------+ |
      | |
      | UI |
      +-------------+
      Browser

      The language driver can be used by two kinds of Python programs: Wave apps and Wave scripts.

      • Wave apps are interactive programs that can update content and respond to user actions.
      • Wave scripts are simpler, non-interactive (batch) programs: they can update content, but not respond to user actions.

      Wave apps sport a websocket server under the hood. When a Wave app is launched, it announces its existence to the Wave server, and the Wave server establishes a relay with the Wave app. When a browser tries to connect to an app, the Wave server acts as a hub, relaying information back and forth between the browser and the app.

      How is it different?

      The Wave server retains content. This is an important concept to understand, and the primary reason why Wave is different from a typical web framework. A Wave script can update content and exit, and the Wave server will happily continue serving that content. In other words, no Python process needs to be around if a new user arrives after you script has exited.

      Different parts of the same page can be updated by different scripts running on different devices. Also, all content is live (or reactive) all the time: browsers always display up-to-date content without the need to reload.

      1 Linux, Windows, Darwin, BSD, Solaris, Android on amd64, arm, 386, ppc, mips; almost everywhere.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/arguments/index.html b/docs/docs/arguments/index.html index 922385d592..fbb6b9613d 100644 --- a/docs/docs/arguments/index.html +++ b/docs/docs/arguments/index.html @@ -4,32 +4,32 @@ -Event Arguments | H2O Wave +Event Arguments | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Event Arguments

      When a user interacts with components on a page - like typing in text, making choices, clicking buttons, and so on - that information is available to your app in the form of event arguments.

      The event arguments can be read from q.args, a read-only dictionary-like object passed to your listen() handler:

      from h2o_wave import Q, listen
      +

      Event Arguments

      When a user interacts with components on a page - like typing in text, making choices, clicking buttons, and so on - that information is available to your app in the form of event arguments.

      The event arguments can be read from q.args, a read-only dictionary-like object passed to your listen() handler:

      from h2o_wave import Q, listen
      async def serve(q: Q):
      print(q.args.foo)
      print(q.args.bar)
      print(q.args.qux)
      -
      listen('/foo', serve)
      tip

      q.args is an Expando instance, which means it behaves both like a dictionary and an object: q.args['foo'] is the same as q.args.foo. q.args.foo is easier to read.

      Interpreting arguments

      The table below summarizes how to interpret inputs from various components.

      ComponentIf the component is named foo, the value of q.args.foo is...
      ui.button()value if provided, else True.
      ui.checkbox()True if checked, False if unchecked, None if indeterminate.
      ui.checklist()A list of names of all the selected choices (a list of strings).
      ui.choice_group()The name of the selected choice (a string).
      ui.color_picker()The selected color (a string).
      ui.combobox()Either the name of the selected choice or the value typed in (a string).
      ui.command()data if provided, else True.
      ui.date_picker()The selected date in YYYY-MM-DD format (a string).
      ui.dropdown()If multi-valued, a list of names of all the selected choices (a list of strings), otherwise the name of the selected choice (a string).
      ui.expander()True if expanded, else False.
      ui.file_upload()A list of paths to the uploaded files (a list of strings).
      ui.nav_item()True if clicked.
      ui.picker()A list of names of all the selected choices (a list of strings).
      ui.range_slider()[min, max] (a list of two numbers).
      ui.slider()The selected value (a number).
      ui.spinbox()The selected value (a number).
      ui.table()A list of names of all the selected rows (a list of strings).
      ui.tabs()The name of the active tab (a string).
      ui.textbox()The value typed in (a string).
      ui.toggle()True if checked, False if unchecked.
      Edit this page
      +
      listen('/foo', serve)
      tip

      q.args is an Expando instance, which means it behaves both like a dictionary and an object: q.args['foo'] is the same as q.args.foo. q.args.foo is easier to read.

      Interpreting arguments

      The table below summarizes how to interpret inputs from various components.

      ComponentIf the component is named foo, the value of q.args.foo is...
      ui.button()value if provided, else True.
      ui.checkbox()True if checked, False if unchecked, None if indeterminate.
      ui.checklist()A list of names of all the selected choices (a list of strings).
      ui.choice_group()The name of the selected choice (a string).
      ui.color_picker()The selected color (a string).
      ui.combobox()Either the name of the selected choice or the value typed in (a string).
      ui.command()data if provided, else True.
      ui.date_picker()The selected date in YYYY-MM-DD format (a string).
      ui.dropdown()If multi-valued, a list of names of all the selected choices (a list of strings), otherwise the name of the selected choice (a string).
      ui.expander()True if expanded, else False.
      ui.file_upload()A list of paths to the uploaded files (a list of strings).
      ui.nav_item()True if clicked.
      ui.picker()A list of names of all the selected choices (a list of strings).
      ui.range_slider()[min, max] (a list of two numbers).
      ui.slider()The selected value (a number).
      ui.spinbox()The selected value (a number).
      ui.table()A list of names of all the selected rows (a list of strings).
      ui.tabs()The name of the active tab (a string).
      ui.textbox()The value typed in (a string).
      ui.toggle()True if checked, False if unchecked.
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/backup/index.html b/docs/docs/backup/index.html index 6d3cafec5d..fc58f06f29 100644 --- a/docs/docs/backup/index.html +++ b/docs/docs/backup/index.html @@ -4,30 +4,30 @@ -Backup and Recovery | H2O Wave +Backup and Recovery | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Backup and Recovery

      caution

      This feature is experimental. Do not rely on this in production!

      The Wave server logs all content changes to stderr. The changes are written in a format that can be read back in. This means that you can replay the log from beginning to end to recover the server's state (content, pages, everything). The log is, literally, a change log.

      To capture the log, redirect stderr to a file when you launch the server:

      ./wave 2> backup.log

      To recover state, feed the log file back in the next time you launch the server:

      ./wave -init backup.log

      To recover state and continue capturing the log, use:

      ./wave -init backup.log 2> other.log

      If you end up with a big log file, you can compact it like this:

      ./wave -compact big.log 2> small.log
      Edit this page
      +

      Backup and Recovery

      caution

      This feature is experimental. Do not rely on this in production!

      The Wave server logs all content changes to stderr. The changes are written in a format that can be read back in. This means that you can replay the log from beginning to end to recover the server's state (content, pages, everything). The log is, literally, a change log.

      To capture the log, redirect stderr to a file when you launch the server:

      ./wave 2> backup.log

      To recover state, feed the log file back in the next time you launch the server:

      ./wave -init backup.log

      To recover state and continue capturing the log, use:

      ./wave -init backup.log 2> other.log

      If you end up with a big log file, you can compact it like this:

      ./wave -compact big.log 2> small.log
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/browser-testing/index.html b/docs/docs/browser-testing/index.html index 179acc1ff9..71d8b769f3 100644 --- a/docs/docs/browser-testing/index.html +++ b/docs/docs/browser-testing/index.html @@ -4,32 +4,32 @@ -Browser Testing | H2O Wave +Browser Testing | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Browser Testing

      Wave supports authoring functional tests in Python for the Cypress test framework. This feature lets you automate browser-based point-and-click tests for your app.

      Installation

      Step 1: Install Node.js

      Install a recent version of Node.js.

      Step 2: Set up Cypress

      Using your terminal, go to your Wave installation's test directory and install Cypress

      $ cd path/to/wave
      $ cd test
      $ npm install

      Writing a test

      See the Wizard example to understand how to author tests for your interactive app. Specifically, note how the @cypress attribute is used. Refer to the Cypress API to learn how to author assertions.

      from h2o_wave import cypress
      +

      Browser Testing

      Wave supports authoring functional tests in Python for the Cypress test framework. This feature lets you automate browser-based point-and-click tests for your app.

      Installation

      Step 1: Install Node.js

      Install a recent version of Node.js.

      Step 2: Set up Cypress

      Using your terminal, go to your Wave installation's test directory and install Cypress

      $ cd path/to/wave
      $ cd test
      $ npm install

      Writing a test

      See the Wizard example to understand how to author tests for your interactive app. Specifically, note how the @cypress attribute is used. Refer to the Cypress API to learn how to author assertions.

      from h2o_wave import cypress
      @cypress('Walk through the wizard')
      def test_wizard(cy):
      cy.visit('/demo')
      cy.locate('step1').click()
      cy.locate('text').should('contain.text', 'What is your name?')
      cy.locate('nickname').clear().type('Fred')
      cy.locate('step2').click()
      cy.locate('text').should('contain.text', 'Hi Fred! How do you feel right now?')
      cy.locate('feeling').clear().type('quirky')
      cy.locate('step3').click()
      cy.locate('text').should('contain.text', 'What a coincidence, Fred! I feel quirky too!')
      -

      Running your test

      Step 1: Start the Cypress test runner

      $ cd path/to/wave
      $ cd test
      $ ./node_modules/.bin/cypress open

      Step 2: Start the Wave server as usual

      $ ./wave

      Step 3: Translate your Python tests to Javascript

      To translate your Python tests to Javascript, execute the Python module or file containing your tests like this:

      $ CYPRESS_INTEGRATION_TEST_DIR=path/to/wave/test/cypress/integration ./venv/bin/python examples/wizard.py

      The CYPRESS_INTEGRATION_TEST_DIR environment variable indicates where the Wave SDK should write translated files to. This must be set to the cypress/integration directory.

      Alternatively, you can set the CYPRESS_INTEGRATION_TEST_DIR environment variable in your shell (or IDE) to simplify running your test file:

      $ export CYPRESS_INTEGRATION_TEST_DIR=path/to/wave/test/cypress/integration
      $ ./venv/bin/python examples/wizard.py

      Step 4: Run your tests

      At this point, you should find all your tests displayed in the Cypress UI. Simply click on a test to run it. Happy testing!

      Edit this page
      +
      tip

      To escape Cypress function names that overlap with Python's reserved keywords, prefix the name with an underscore _. For example, use cy._as() instead of cy.as().

      Running your test

      Step 1: Start the Cypress test runner

      $ cd path/to/wave
      $ cd test
      $ ./node_modules/.bin/cypress open

      Step 2: Start the Wave server as usual

      $ ./wave

      Step 3: Translate your Python tests to Javascript

      To translate your Python tests to Javascript, execute the Python module or file containing your tests like this:

      $ CYPRESS_INTEGRATION_TEST_DIR=path/to/wave/test/cypress/integration ./venv/bin/python examples/wizard.py

      The CYPRESS_INTEGRATION_TEST_DIR environment variable indicates where the Wave SDK should write translated files to. This must be set to the cypress/integration directory.

      Alternatively, you can set the CYPRESS_INTEGRATION_TEST_DIR environment variable in your shell (or IDE) to simplify running your test file:

      $ export CYPRESS_INTEGRATION_TEST_DIR=path/to/wave/test/cypress/integration
      $ ./venv/bin/python examples/wizard.py

      Step 4: Run your tests

      At this point, you should find all your tests displayed in the Cypress UI. Simply click on a test to run it. Happy testing!

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/buffers/index.html b/docs/docs/buffers/index.html index 95499bd6ac..c2a6aa1911 100644 --- a/docs/docs/buffers/index.html +++ b/docs/docs/buffers/index.html @@ -4,21 +4,21 @@ -Data Buffers | H2O Wave +Data Buffers | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Data Buffers

      Data buffers are in-memory data structures designed to hold a card's tabular data.

      Data buffers make it convenient to separate data (what is displayed) from presentation (how it is displayed). You can declare a card once, and update its underlying data buffer multiple times. A card can hold zero or more data buffers.

      Cards and buffers

      Data buffers are tabular data structures containing columns and rows. Different cards utilize data buffers in different ways. For example, the plot in the ui.small_series_stat_card() uses a data buffer called plot_data to hold time series data.

      CPU Usage

      card = ui.small_series_stat_card(
      box=f'1 1 1 1',
      title='CPU',
      value='10%',
      plot_data=data('time usage', -15),
      plot_category='time',
      plot_value='usage',
      ))

      In the above snippet, data('time usage', -15) defines a placeholder for a table with two columns (time and usage) and 15 rows (we'll get to why the 15 is negative shortly), and the card's plot_category and plot_value point to the two columns time and usage, respectively.

      Appending rows (tuples or records) to the data buffer make the card plot those rows.

      while True:
      card.plot_data[-1] = [get_time(), get_usage()]
      time.sleep(1)

      The while loop above does something like this:

      card.plot_data[-1] = ['2020-10-05T02:10:20Z', 42.5]
      card.plot_data[-1] = ['2020-10-05T02:10:21Z', 43.1]
      card.plot_data[-1] = ['2020-10-05T02:10:22Z', 39.2]
      card.plot_data[-1] = ['2020-10-05T02:10:23Z', 38.7]

      Types of buffers

      There are three types of data buffers:

      • Array buffers hold tabular data with a fixed number of rows, and allow random access to rows using 0-based integers as keys.
      • Cyclic buffers also hold tabular data with a fixed number of rows, but do not allow random access to rows. They can only be appended to. Rows are first-in first-out (FIFO), and adding rows beyond its capacity overwrites the oldest rows.
      • Map buffers (or dictionary buffers) hold tabular data with a variable number of rows, and allow random access to rows using string keys.
      caution

      Map buffers are convenient to use, but use more memory on the server compared to array buffers and cyclic buffers, so use them sparingly.

      The data function

      Use the data() function to declare a data buffer. The Wave server uses this declaration to allocate memory for the data buffer.

      data() takes multiple arguments:

      • fields: The names of columns, in order; a space-separated string or a list or a tuple ('foo bar' or ['foo', 'bar'] or ('foo', 'bar').
      • size: The number of rows to allocate.
        • A positive row count creates an array buffer.
        • A negative row count creates a cyclic buffer.
        • A zero row count (or None) creates a map buffer.
      • rows: A dict or list of rows to initialize the data buffer with. Each row can be a list or tuple.
        • For array or cyclic buffers, pass a list of rows.
        • For map buffers, pass a dict with strings as keys and rows as values.

      Buffers in practice

      Declare a 5-row buffer with columns donut and price.

      # Array buffer
      b = data(fields='donut price', size=5)
      +

      Data Buffers

      Data buffers are in-memory data structures designed to hold a card's tabular data.

      Data buffers make it convenient to separate data (what is displayed) from presentation (how it is displayed). You can declare a card once, and update its underlying data buffer multiple times. A card can hold zero or more data buffers.

      Cards and buffers

      Data buffers are tabular data structures containing columns and rows. Different cards utilize data buffers in different ways. For example, the plot in the ui.small_series_stat_card() uses a data buffer called plot_data to hold time series data.

      CPU Usage

      card = ui.small_series_stat_card(
      box=f'1 1 1 1',
      title='CPU',
      value='10%',
      plot_data=data('time usage', -15),
      plot_category='time',
      plot_value='usage',
      ))

      In the above snippet, data('time usage', -15) defines a placeholder for a table with two columns (time and usage) and 15 rows (we'll get to why the 15 is negative shortly), and the card's plot_category and plot_value point to the two columns time and usage, respectively.

      Appending rows (tuples or records) to the data buffer make the card plot those rows.

      while True:
      card.plot_data[-1] = [get_time(), get_usage()]
      time.sleep(1)

      The while loop above does something like this:

      card.plot_data[-1] = ['2020-10-05T02:10:20Z', 42.5]
      card.plot_data[-1] = ['2020-10-05T02:10:21Z', 43.1]
      card.plot_data[-1] = ['2020-10-05T02:10:22Z', 39.2]
      card.plot_data[-1] = ['2020-10-05T02:10:23Z', 38.7]

      Types of buffers

      There are three types of data buffers:

      • Array buffers hold tabular data with a fixed number of rows, and allow random access to rows using 0-based integers as keys.
      • Cyclic buffers also hold tabular data with a fixed number of rows, but do not allow random access to rows. They can only be appended to. Rows are first-in first-out (FIFO), and adding rows beyond its capacity overwrites the oldest rows.
      • Map buffers (or dictionary buffers) hold tabular data with a variable number of rows, and allow random access to rows using string keys.
      caution

      Map buffers are convenient to use, but use more memory on the server compared to array buffers and cyclic buffers, so use them sparingly.

      The data function

      Use the data() function to declare a data buffer. The Wave server uses this declaration to allocate memory for the data buffer.

      data() takes multiple arguments:

      • fields: The names of columns, in order; a space-separated string or a list or a tuple ('foo bar' or ['foo', 'bar'] or ('foo', 'bar').
      • size: The number of rows to allocate.
        • A positive row count creates an array buffer.
        • A negative row count creates a cyclic buffer.
        • A zero row count (or None) creates a map buffer.
      • rows: A dict or list of rows to initialize the data buffer with. Each row can be a list or tuple.
        • For array or cyclic buffers, pass a list of rows.
        • For map buffers, pass a dict with strings as keys and rows as values.

      Buffers in practice

      Declare a 5-row buffer with columns donut and price.

      # Array buffer
      b = data(fields='donut price', size=5)
      # Cyclic buffer
      b = data(fields='donut price', size=-5)
      # Map buffer
      b = data(fields='donut price')

      Declare and initialize a 5-row buffer with columns donut and price.

      # Array buffer
      b = data(fields='donut price', size=5, rows=[
      ['cream', 3.99],
      ['custard', 2.99],
      ['cinnamon', 2.49],
      ['sprinkles', 2.49],
      ['sugar', 1.99],
      ])
      # Cyclic buffer
      b = data(fields='donut price', size=-5, rows=[
      ['cream', 3.99],
      ['custard', 2.99],
      ['cinnamon', 2.49],
      ['sprinkles', 2.49],
      ['sugar', 1.99],
      ])
      @@ -26,16 +26,16 @@
      # Cyclic buffer
      b[-1] = ['fruit', 2.99] # replaces ['sugar', 1.99]
      # Map buffer (the following two forms are equivalent)
      b['cin'] = ['cinnamon', 2.99]
      b.cin = ['cinnamon', 2.99]

      Modify a buffer value:

      # Array buffer (the following two forms are equivalent)
      b[2]['price'] = 2.99
      b[2].price = 2.99
      # Cyclic buffer (the following two forms are equivalent)
      b[-1]['price'] = 2.99 # last donut on menu now costs 2.99
      b[-1].price = 2.99
      -
      # Map buffer (the following three forms are equivalent)
      b['cin']['price'] = 2.99
      b['cin'].price = 2.99
      b.cin.price = 2.99
      Edit this page
      +
      # Map buffer (the following three forms are equivalent)
      b['cin']['price'] = 2.99
      b['cin'].price = 2.99
      b.cin.price = 2.99
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/cards/index.html b/docs/docs/cards/index.html index b1272104b8..4d7e557eed 100644 --- a/docs/docs/cards/index.html +++ b/docs/docs/cards/index.html @@ -4,30 +4,30 @@ -Cards | H2O Wave +Cards | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Cards

      A card represents a block of content on a Page. This section lists the different kinds of cards available to you. Each of the cards below serve a different purpose.

      info

      To learn how to add, update or remove cards from a page, see Pages.

      Inputs

      Forms

      The form card is the most versatile and commonly used card in Wave apps.

      Use a form card to display input components like textboxes, dropdowns, date-pickers, and so on. The form card displays its components one below the other, stacked vertically. You can lay out several form cards on a page to build out intricate user interfaces.

      See ui.form_card().

      Content

      Use content cards to display formatted text, images or HTML.

      tip

      You can also display each of the following types of content using a form card. Use a content card if you want to display only that specific type of content. Use a form card if you want to display content intermingled with other types of content and input components.

      Markdown

      Use a markdown card to display content authored in markdown.

      See ui.markdown_card().

      Template

      Use a template card to display content authored using Handlebars templates.

      See ui.template_card().

      Markup (HTML)

      Use a markup card to display raw HTML content.

      See ui.markup_card().

      Inline Frame

      Use a frame card to display embed external HTML content your page.

      See ui.frame_card().

      Image

      Use an image card to display an image on your page, either by specifying the image's path or by providing base64-encoded image data.

      See ui.image_card().

      Control

      Use control cards to provide links or commands to allow users to navigate between different sections, or surface top-level actions applicable across your user interface.

      Header

      Use a header card to display your app's title and icon.

      See ui.header_card().

      Breadcrumbs

      Use a breadcrumbs card to display breadcrumbs, a navigational aid that indicates the current page's location withing a hierarchy, and help the user understand where they are in relation to the hierarchy.

      See ui.breadcrumbs_card().

      Navigation Pane

      Use a navigation pane to provide links to the main content areas of your app.

      See ui.nav_card().

      Tabs

      Use tabs to allow navigation between two or more views of content.

      See ui.tab_card().

      Toolbar

      Use a toolbar to display top-level commands that operate on the content of your app.

      See ui.toolbar_card().

      Graphics

      Use these cards to display plots (or charts or graphs), or draw custom graphics.

      Plot

      Use a plot card to display visualizations defined using Wave's native plot() API, based on the Grammar of Graphics.

      See ui.plot_card().

      Vega-lite

      Use this card to display visualizations defined using Vega-Lite.

      See ui.vega_card().

      Graphics

      Use a graphics card to render vector graphics and turtle graphics backed by data buffers.

      See ui.graphics_card().

      Stats

      Use stats cards for a quick and easy way to display live values and graphics (or sparklines). These cards are backed by data buffers, and provide an efficient mechanism to display values that change rapidly over time.

      CardUse
      ui.small_series_stat_card()Small stat card; displays a primary value and a series plot.
      ui.small_stat_card()Stat card; displays a single value.
      ui.large_bar_stat_card()Large captioned card; displays a primary value, an auxiliary value and a progress bar, with captions for each value.
      ui.large_stat_card()Stat card; displays a primary value, an auxiliary value and a caption.
      ui.tall_gauge_stat_card()Tall stat card; displays a primary value, an auxiliary value and a progress gauge.
      ui.tall_series_stat_card()Tall stat card; displays a primary value, an auxiliary value and a series plot.
      ui.wide_bar_stat_card()Wide stat card; displays a primary value, an auxiliary value and a progress bar.
      ui.wide_gauge_stat_card()Wide stat card; displays a primary value, an auxiliary value and a progress gauge.
      ui.wide_series_stat_card()Wide stat card; displays a primary value, an auxiliary value and a series plot.

      Meta

      The meta card is an invisible card, primarily used to control the behavior of the page it's placed on, like displaying a desktop notification, redirecting to a different page, or turning off realtime updates.

      See ui.meta_card().

      Edit this page
      +

      Cards

      A card represents a block of content on a Page. This section lists the different kinds of cards available to you. Each of the cards below serve a different purpose.

      info

      To learn how to add, update or remove cards from a page, see Pages.

      Inputs

      Forms

      The form card is the most versatile and commonly used card in Wave apps.

      Use a form card to display input components like textboxes, dropdowns, date-pickers, and so on. The form card displays its components one below the other, stacked vertically. You can lay out several form cards on a page to build out intricate user interfaces.

      See ui.form_card().

      Content

      Use content cards to display formatted text, images or HTML.

      tip

      You can also display each of the following types of content using a form card. Use a content card if you want to display only that specific type of content. Use a form card if you want to display content intermingled with other types of content and input components.

      Markdown

      Use a markdown card to display content authored in markdown.

      See ui.markdown_card().

      Template

      Use a template card to display content authored using Handlebars templates.

      See ui.template_card().

      Markup (HTML)

      Use a markup card to display raw HTML content.

      See ui.markup_card().

      Inline Frame

      Use a frame card to display embed external HTML content your page.

      See ui.frame_card().

      Image

      Use an image card to display an image on your page, either by specifying the image's path or by providing base64-encoded image data.

      See ui.image_card().

      Control

      Use control cards to provide links or commands to allow users to navigate between different sections, or surface top-level actions applicable across your user interface.

      Header

      Use a header card to display your app's title and icon.

      See ui.header_card().

      Breadcrumbs

      Use a breadcrumbs card to display breadcrumbs, a navigational aid that indicates the current page's location withing a hierarchy, and help the user understand where they are in relation to the hierarchy.

      See ui.breadcrumbs_card().

      Navigation Pane

      Use a navigation pane to provide links to the main content areas of your app.

      See ui.nav_card().

      Tabs

      Use tabs to allow navigation between two or more views of content.

      See ui.tab_card().

      Toolbar

      Use a toolbar to display top-level commands that operate on the content of your app.

      See ui.toolbar_card().

      Graphics

      Use these cards to display plots (or charts or graphs), or draw custom graphics.

      Plot

      Use a plot card to display visualizations defined using Wave's native plot() API, based on the Grammar of Graphics.

      See ui.plot_card().

      Vega-lite

      Use this card to display visualizations defined using Vega-Lite.

      See ui.vega_card().

      Graphics

      Use a graphics card to render vector graphics and turtle graphics backed by data buffers.

      See ui.graphics_card().

      Stats

      Use stats cards for a quick and easy way to display live values and graphics (or sparklines). These cards are backed by data buffers, and provide an efficient mechanism to display values that change rapidly over time.

      CardUse
      ui.small_series_stat_card()Small stat card; displays a primary value and a series plot.
      ui.small_stat_card()Stat card; displays a single value.
      ui.large_bar_stat_card()Large captioned card; displays a primary value, an auxiliary value and a progress bar, with captions for each value.
      ui.large_stat_card()Stat card; displays a primary value, an auxiliary value and a caption.
      ui.tall_gauge_stat_card()Tall stat card; displays a primary value, an auxiliary value and a progress gauge.
      ui.tall_series_stat_card()Tall stat card; displays a primary value, an auxiliary value and a series plot.
      ui.wide_bar_stat_card()Wide stat card; displays a primary value, an auxiliary value and a progress bar.
      ui.wide_gauge_stat_card()Wide stat card; displays a primary value, an auxiliary value and a progress gauge.
      ui.wide_series_stat_card()Wide stat card; displays a primary value, an auxiliary value and a series plot.

      Meta

      The meta card is an invisible card, primarily used to control the behavior of the page it's placed on, like displaying a desktop notification, redirecting to a different page, or turning off realtime updates.

      See ui.meta_card().

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/change-log/index.html b/docs/docs/change-log/index.html index 04e07ec42a..ce7f35efa5 100644 --- a/docs/docs/change-log/index.html +++ b/docs/docs/change-log/index.html @@ -4,30 +4,30 @@ -Change Log | H2O Wave +Change Log | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Change Log

      Versioning

      H2O Wave and its Python driver follow Semantic Versioning. Major releases ship every six months (~February and ~August), while minor and patch releases may ship as often as every week. Minor and patch releases should never contain breaking changes.

      When referencing the h2o-wave package from your requirements.txt or setup.py, you should always use a version constraint such as >=4.2, <5 (any version 4.2 or greater, but less than 5), since major releases of H2O Wave do include breaking changes.

      Support Policy

      For LTS releases, bug fixes are provided for 2 years and security fixes are provided for 3 years. These releases provide the longest window of support and maintenance. For general releases, bug fixes are provided for 6 months and security fixes are provided for 1 year.

      v0.7.0

      Oct 15, 2020 - Download

      • Added
        • Hash navigation using context menus.
        • Allow handling location hash when an open app page is reloaded.
        • Allow pre-selecting a tab in a tab_card.
        • Allow setting a height on the file upload component.
        • Allow justifying buttons left/center/right/spread.
        • Add data-test attribute to all cards for browser testing.
        • New documentation website, gallery, guides and tutorials.
      • Changed
        • Fit table height to content height whenever possible.
        • Improve spacing between form components.
        • data-test attribute is set based on the names of cards.
      • Fixed
        • Quote CSV data properly while downloading a table component's data.
        • Don't auto-hide axis labels in plots when data is missing.
        • Display labels instead of names when a pickers initial values are set.
        • Handle numeric column sorting in the table component.
        • Handle icon column sorting in the table component.

      v0.6.0

      Sep 23, 2020 - Download

      • Added
        • Apps when launched now automatically use an available free port instead of 55556.
        • Client-side redirects to URLs and hashes using meta_card.redirect.
        • Context menus inside forms: ui.text_xl() and ui.text_l() now support optional context menus.
        • Plots now support specifying data values for predictable color encoding and legends.
        • ui.markup component for rendering HTML inline in forms.
        • ui.template component for rendering templated HTML inline in forms.
        • The height of tables can now be controlled using the height attribute.
        • Both sorting and group-by now work on the same table column if specified.
        • Lots of examples on how to use ui.table sorting, grouping, search, download, etc.
        • Ability to specify which column in a ui.table is the primary column, or disable altogether.
      • Changed
        • ui.text() now unconditionally allows embedded HTML tags.
        • App host now defaults to 127.0.0.1 instead of localhost.
        • Footer display in ui.table is now inferred from usage and displayed automatically.
        • The min_width and max_width attributes for table columns are now strings (consistency).
      • Fixed
        • Background color rendering bug when page overflows after loading.
        • Render tooltip properly on toolbar command buttons.
        • ui.table() rendering bug: remove stray 0.
        • Python error stack trace, if any, is displayed on top of all other cards on page.

      v0.5.0

      Sep 18, 2020 - Download

      • Added
        • Example for controlling cards with tabs.
        • Cypress test runner for CI.
        • Search, sort, filter, group-by, export and custom cell types for table component.
      • Changed
        • Remove semantic validation for stepper component.
      • Fixed
        • Value synchronization bug in textbox component.

      v0.4.0

      Sep 16, 2020 - Download

      • Added
        • Trigger attribute to checklist component.
      • Changed
        • Allow same min and max values for the range slider component.
        • App tests are now automatically and directly translated to Cypress tests when loaded.
      • Fixed
        • Allow removing selected options from the picker component.
        • Render axis title properly when specified.
        • Raise informative error message if attempting to use Numpy objects in components.
      • Removed
        • Cypress test bridge removed from server.
        • run_tests API.

      v0.3.1

      Sep 8, 2020 - Download

      • Fixed
        • Multiselect dropdown checkboxes do not respond when clicked.

      v0.3.0

      Sep 8, 2020 - Download

      • Added
        • Native plots inside form cards - ui.visualization().
        • Vega plots inside form cards - ui.vega_visualization().

      v0.2.0

      Sep 4, 2020 - Download

      • Added
        • Picker component.
        • Breadcrumbs component.
        • Range slider component.
        • Stepper component.
        • Allow backend to handle changes to textboxes as you type.
        • Select / deselect all controls for multivalued dropdown component.
        • Examples for using plotly plots.
        • Example for updating vega plots.
        • OS-specific installations instructions.
        • Cypress test framework support.
      • Fixed
        • Add .exe extension o Windows executable.
        • Percentage formatting in Safari.

      v0.1.4

      Aug 10, 2020 - Download

      • Fixed
        • Frame heights are not respected with total height of frames exceeds containing card size

      v0.1.3

      Aug 10, 2020 - Download

      • Fixed
        • h2o_wave.ui.link() now has a download attribute to work around a Firefox bug.
        • Race condition in the interactive tour that caused some examples to not preview properly.

      v0.1.2

      Aug 7, 2020 - Download

      • Added
        • API for h2o_wave.core.Expando copy, clone and item/attribute deletion.
        • Migration guide.
        • Example for setting browser window title.
        • API and example for Header card: h2o_wave.ui.header_card().
        • Export h2o_wave.core.Ref from h2o_wave.
        • API and examples for inline frames inside form cards: h2o_wave.ui.frame().
      • Changed
        • Renamed env var prefix for settings to H2O_Q_.
      • Fixed
        • Plot X/Y axis transpose bug.

      v0.1.1

      Jul 27, 2020 - Download

      • Added
        • Options for file type and size to file upload component.
        • API for displaying desktop notifications.
        • Buttons can now submit specific values instead of only True/False.
        • Examples for layout and card sizing.
        • Image card for displaying base64-encoded images.
        • Example for image card.
        • Vector graphics API.
        • Turtle graphics based path generator.
        • Examples for graphics card.
      • Fixed
        • Re-rendering performance improvements.

      v0.1.0

      Jul 13, 2020 - Download

      • Added
        • Example for displaying iframe content > 2MB.
        • Example for plotting using matplotlib.
        • Example for plotting using Altair.
        • Example for plotting using Vega.
        • Example for plotting using Bokeh.
        • Example for plotting using custom D3.js Javascript.
        • Example for live dashboard with stats cards.
        • Example for master-detail user interfaces using ui.table().
        • Example for authoring multi-step wizard user interfaces.
        • Unload API: q.unload() to delete uploaded files.

      v0.0.7

      Jul 12, 2020 - Download

      • Added
        • Download API: q.download().
        • Vega-lite support: ui.vega_card().
        • Context menu support to all cards.
        • refresh attribute on meta_card allows static pages to stop receiving live updates.
        • Passing -debug when starting server displays site stats at /_d/site.
        • Drag and drop support for file upload component.
        • Template expression support for markdown cards.
        • All APIs and examples documented.
        • All 110 examples now ship with the Sphinx documentation.
        • Documentation now ships with release download.
      • Changed
        • API consistency: ui.vis() renamed to ui.plot().
        • All stats cards now have descriptive names.
        • API consistency: ui.mark.mark renamed to ui.mark.type.
        • API consistency: page.sync() and page.push() renamed to page.save().
      • Removed
        • ui.dashboard_card() and ui.notebook_card().

      v0.0.6

      Jul 6, 2020 - Download

      • Added
        • Log network traffic when logging is set to debug mode.
        • Capture and display unhandled exceptions on the UI.
        • Routing using location hash.
        • Toolbar component.
        • Tabs component.
        • Nav component.
        • Upload API: q.upload().
      • Changed
        • q.session renamed to q.user

      v0.0.5

      Jun 29, 2020 - Download

      • Added
        • Add configure() API to configure environment before launching.

      v0.0.4

      Jun 26, 2020 - Download

      • Added
        • Multi-user and multi-client support: launch apps in multicast or unicast modes in addition to broadcast mode.
        • Client-specific data can now be stored and accessed via q.client, similar to q.session and q.app.
        • Simpler page referencing: import site can be used instead of site = Site().
      • Changed
        • Apps now lauch in unicast mode by default instead of broadcast mode.

      v0.0.3

      Jun 19, 2020 - Download

      • Added
        • Make Expando data structure available for apps.

      v0.0.2

      Jun 17, 2020 - Download

      • Initial version
      • v0.0.1
      • Package stub
      Edit this page
      +

      Change Log

      Versioning

      H2O Wave and its Python driver follow Semantic Versioning. Major releases ship every six months (~February and ~August), while minor and patch releases may ship as often as every week. Minor and patch releases should never contain breaking changes.

      When referencing the h2o-wave package from your requirements.txt or setup.py, you should always use a version constraint such as >=4.2, <5 (any version 4.2 or greater, but less than 5), since major releases of H2O Wave do include breaking changes.

      Support Policy

      For LTS releases, bug fixes are provided for 2 years and security fixes are provided for 3 years. These releases provide the longest window of support and maintenance. For general releases, bug fixes are provided for 6 months and security fixes are provided for 1 year.

      v0.8.0

      Oct 20, 2020 - Download

      • Added
        • Escape Cypress test functions using leading underscore _ if they overlap with Python reserved keywords.
        • Add data-test attribute to all form components for browser testing.
        • Add trigger property to the date picker component.
        • Allow pre-selecting rows in the table component.
        • Add visible property to all components to show/hide them on demand.
        • Add support for OpenID Connect (OIDC).
        • Add documentation on security.
      • Fixed
        • Default HTML page title set to Wave.
        • Make % heights work properly for frames inside forms.

      v0.7.0

      Oct 15, 2020 - Download

      • Added
        • Hash navigation using context menus.
        • Allow handling location hash when an open app page is reloaded.
        • Allow pre-selecting a tab in a tab_card.
        • Allow setting a height on the file upload component.
        • Allow justifying buttons left/center/right/spread.
        • Add data-test attribute to all cards for browser testing.
        • New documentation website, gallery, guides and tutorials.
      • Changed
        • Fit table height to content height whenever possible.
        • Improve spacing between form components.
        • data-test attribute is set based on the names of cards.
      • Fixed
        • Quote CSV data properly while downloading a table component's data.
        • Don't auto-hide axis labels in plots when data is missing.
        • Display labels instead of names when a pickers initial values are set.
        • Handle numeric column sorting in the table component.
        • Handle icon column sorting in the table component.

      v0.6.0

      Sep 23, 2020 - Download

      • Added
        • Apps when launched now automatically use an available free port instead of 55556.
        • Client-side redirects to URLs and hashes using meta_card.redirect.
        • Context menus inside forms: ui.text_xl() and ui.text_l() now support optional context menus.
        • Plots now support specifying data values for predictable color encoding and legends.
        • ui.markup component for rendering HTML inline in forms.
        • ui.template component for rendering templated HTML inline in forms.
        • The height of tables can now be controlled using the height attribute.
        • Both sorting and group-by now work on the same table column if specified.
        • Lots of examples on how to use ui.table sorting, grouping, search, download, etc.
        • Ability to specify which column in a ui.table is the primary column, or disable altogether.
      • Changed
        • ui.text() now unconditionally allows embedded HTML tags.
        • App host now defaults to 127.0.0.1 instead of localhost.
        • Footer display in ui.table is now inferred from usage and displayed automatically.
        • The min_width and max_width attributes for table columns are now strings (consistency).
      • Fixed
        • Background color rendering bug when page overflows after loading.
        • Render tooltip properly on toolbar command buttons.
        • ui.table() rendering bug: remove stray 0.
        • Python error stack trace, if any, is displayed on top of all other cards on page.

      v0.5.0

      Sep 18, 2020 - Download

      • Added
        • Example for controlling cards with tabs.
        • Cypress test runner for CI.
        • Search, sort, filter, group-by, export and custom cell types for table component.
      • Changed
        • Remove semantic validation for stepper component.
      • Fixed
        • Value synchronization bug in textbox component.

      v0.4.0

      Sep 16, 2020 - Download

      • Added
        • Trigger attribute to checklist component.
      • Changed
        • Allow same min and max values for the range slider component.
        • App tests are now automatically and directly translated to Cypress tests when loaded.
      • Fixed
        • Allow removing selected options from the picker component.
        • Render axis title properly when specified.
        • Raise informative error message if attempting to use Numpy objects in components.
      • Removed
        • Cypress test bridge removed from server.
        • run_tests API.

      v0.3.1

      Sep 8, 2020 - Download

      • Fixed
        • Multiselect dropdown checkboxes do not respond when clicked.

      v0.3.0

      Sep 8, 2020 - Download

      • Added
        • Native plots inside form cards - ui.visualization().
        • Vega plots inside form cards - ui.vega_visualization().

      v0.2.0

      Sep 4, 2020 - Download

      • Added
        • Picker component.
        • Breadcrumbs component.
        • Range slider component.
        • Stepper component.
        • Allow backend to handle changes to textboxes as you type.
        • Select / deselect all controls for multivalued dropdown component.
        • Examples for using plotly plots.
        • Example for updating vega plots.
        • OS-specific installations instructions.
        • Cypress test framework support.
      • Fixed
        • Add .exe extension o Windows executable.
        • Percentage formatting in Safari.

      v0.1.4

      Aug 10, 2020 - Download

      • Fixed
        • Frame heights are not respected with total height of frames exceeds containing card size

      v0.1.3

      Aug 10, 2020 - Download

      • Fixed
        • h2o_wave.ui.link() now has a download attribute to work around a Firefox bug.
        • Race condition in the interactive tour that caused some examples to not preview properly.

      v0.1.2

      Aug 7, 2020 - Download

      • Added
        • API for h2o_wave.core.Expando copy, clone and item/attribute deletion.
        • Migration guide.
        • Example for setting browser window title.
        • API and example for Header card: h2o_wave.ui.header_card().
        • Export h2o_wave.core.Ref from h2o_wave.
        • API and examples for inline frames inside form cards: h2o_wave.ui.frame().
      • Changed
        • Renamed env var prefix for settings to H2O_Q_.
      • Fixed
        • Plot X/Y axis transpose bug.

      v0.1.1

      Jul 27, 2020 - Download

      • Added
        • Options for file type and size to file upload component.
        • API for displaying desktop notifications.
        • Buttons can now submit specific values instead of only True/False.
        • Examples for layout and card sizing.
        • Image card for displaying base64-encoded images.
        • Example for image card.
        • Vector graphics API.
        • Turtle graphics based path generator.
        • Examples for graphics card.
      • Fixed
        • Re-rendering performance improvements.

      v0.1.0

      Jul 13, 2020 - Download

      • Added
        • Example for displaying iframe content > 2MB.
        • Example for plotting using matplotlib.
        • Example for plotting using Altair.
        • Example for plotting using Vega.
        • Example for plotting using Bokeh.
        • Example for plotting using custom D3.js Javascript.
        • Example for live dashboard with stats cards.
        • Example for master-detail user interfaces using ui.table().
        • Example for authoring multi-step wizard user interfaces.
        • Unload API: q.unload() to delete uploaded files.

      v0.0.7

      Jul 12, 2020 - Download

      • Added
        • Download API: q.download().
        • Vega-lite support: ui.vega_card().
        • Context menu support to all cards.
        • refresh attribute on meta_card allows static pages to stop receiving live updates.
        • Passing -debug when starting server displays site stats at /_d/site.
        • Drag and drop support for file upload component.
        • Template expression support for markdown cards.
        • All APIs and examples documented.
        • All 110 examples now ship with the Sphinx documentation.
        • Documentation now ships with release download.
      • Changed
        • API consistency: ui.vis() renamed to ui.plot().
        • All stats cards now have descriptive names.
        • API consistency: ui.mark.mark renamed to ui.mark.type.
        • API consistency: page.sync() and page.push() renamed to page.save().
      • Removed
        • ui.dashboard_card() and ui.notebook_card().

      v0.0.6

      Jul 6, 2020 - Download

      • Added
        • Log network traffic when logging is set to debug mode.
        • Capture and display unhandled exceptions on the UI.
        • Routing using location hash.
        • Toolbar component.
        • Tabs component.
        • Nav component.
        • Upload API: q.upload().
      • Changed
        • q.session renamed to q.user

      v0.0.5

      Jun 29, 2020 - Download

      • Added
        • Add configure() API to configure environment before launching.

      v0.0.4

      Jun 26, 2020 - Download

      • Added
        • Multi-user and multi-client support: launch apps in multicast or unicast modes in addition to broadcast mode.
        • Client-specific data can now be stored and accessed via q.client, similar to q.session and q.app.
        • Simpler page referencing: import site can be used instead of site = Site().
      • Changed
        • Apps now lauch in unicast mode by default instead of broadcast mode.

      v0.0.3

      Jun 19, 2020 - Download

      • Added
        • Make Expando data structure available for apps.

      v0.0.2

      Jun 17, 2020 - Download

      • Initial version
      • v0.0.1
      • Package stub
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/components/index.html b/docs/docs/components/index.html index 3076b44f56..c34dc18168 100644 --- a/docs/docs/components/index.html +++ b/docs/docs/components/index.html @@ -4,31 +4,31 @@ -Components | H2O Wave +Components | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Components

      Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a form card.

      info

      Several of the components below allow users to input information or interact with them in some way. To know what the user did, see event arguments.

      Content

      Text

      Use text() or one of its variants to display text content. Markdown works, too. text_xl() and text_l() support context menus.

      See ui.text() ui.text_l() ui.text_m() ui.text_s() ui.text_xl() ui.text_xs()

      Label

      Use a label to give a name or title to other components.

      See ui.label()

      Link

      Use link() to display a hyperlink.

      See ui.link()

      Template

      Use template() to render dynamic content using HTML.

      See ui.template()

      HTML

      Use markup() to display raw HTML.

      See ui.markup()

      Inline frame

      Use frame() to embed external HTML content using an inline frame.

      See ui.frame()

      Table

      Use a table to display tabular data. A table also functions as an input element, and can report row(s) selection, useful for building master-detail views.

      See ui.table()

      Inputs

      Checkbox

      Use a checkbox to allow switching between two mutually exclusive options (checked/unchecked or on/off).

      See ui.checkbox()

      Checklist

      Use a checklist to display a list of checkboxes.

      See ui.checklist()

      Choice Group

      Use a choice group (also called radio buttons) to allow switching between more than two mutually exclusive options.

      See ui.choice_group()

      Color Picker

      Use a color picker to allow pick colors or swatches.

      See ui.color_picker()

      Combo Box

      Use a combo box to allow picking from a list of choices, or typing in custom values.

      See ui.combobox()

      Date Picker

      Use a date picker to allow picking a date.

      See ui.date_picker()

      Dropdown

      Use a dropdown to allow picking from a list of choices.

      See ui.dropdown()

      File Upload

      Use a file upload component to allow uploading files.

      See ui.file_upload()

      Picker

      Use a picker component to allow picking multiple tags or labels from a list.

      See ui.picker()

      Range Slider

      Use a range slider to allow selecting a range of values within another range.

      See ui.range_slider()

      Slider

      Use a slider to allow selecting a value from a range of values.

      See ui.slider()

      Spin Box

      Use a spin box to allow incrementally adjusting a value in small steps.

      See ui.spinbox()

      Table

      Use a table to display tabular data, or allow selecting one or more rows.

      See ui.table()

      Textbox

      Use a textbox to allow typing in text.

      See ui.textbox()

      Toggle

      Use a toggle to allow switching between two mutually exclusive options (checked/unchecked or on/off), while producing an immediate result. -See ui.toggle()

      Commands

      Command

      Use a command to define menu items for cards and components that support menus and context-menus.

      See ui.command()

      Button

      Use button() to display a clickable button.

      See ui.button()

      Button Set

      Use buttons() to display two or more buttons side by side.

      See ui.buttons()

      Tabs

      Use tabs() to display a set of tabs.

      See ui.tabs()

      Engagement

      Message Bar

      Use a message bar to display information, warning and error notifications.

      See ui.message_bar()

      Progress Bar

      Use a progress bar to display progress information for tasks or operations.

      See ui.progress()

      Stepper

      Use a stepper to display a sequence of steps in a process, and how many have been completed.

      See ui.stepper()

      Graphics

      Visualization

      Use visualization() to display visualizations defined using Q's native plot() API, based on the Grammar of Graphics.

      See ui.visualization()

      Vega-lite Visualization

      Use vega_visualization() to display visualization defined using Vega-Lite.

      See ui.vega_visualization()

      Utilities

      Expander

      Use an expander to show or hider a group of related components.

      See ui.expander()

      Separator

      Use a separator to visually separate components in to groups.

      See ui.separator()

      Edit this page
      +

      Components

      Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a form card.

      info

      Several of the components below allow users to input information or interact with them in some way. To know what the user did, see event arguments.

      Content

      Text

      Use text() or one of its variants to display text content. Markdown works, too. text_xl() and text_l() support context menus.

      See ui.text() ui.text_l() ui.text_m() ui.text_s() ui.text_xl() ui.text_xs()

      Label

      Use a label to give a name or title to other components.

      See ui.label()

      Link

      Use link() to display a hyperlink.

      See ui.link()

      Template

      Use template() to render dynamic content using HTML.

      See ui.template()

      HTML

      Use markup() to display raw HTML.

      See ui.markup()

      Inline frame

      Use frame() to embed external HTML content using an inline frame.

      See ui.frame()

      Table

      Use a table to display tabular data. A table also functions as an input element, and can report row(s) selection, useful for building master-detail views.

      See ui.table()

      Inputs

      Checkbox

      Use a checkbox to allow switching between two mutually exclusive options (checked/unchecked or on/off).

      See ui.checkbox()

      Checklist

      Use a checklist to display a list of checkboxes.

      See ui.checklist()

      Choice Group

      Use a choice group (also called radio buttons) to allow switching between more than two mutually exclusive options.

      See ui.choice_group()

      Color Picker

      Use a color picker to allow pick colors or swatches.

      See ui.color_picker()

      Combo Box

      Use a combo box to allow picking from a list of choices, or typing in custom values.

      See ui.combobox()

      Date Picker

      Use a date picker to allow picking a date.

      See ui.date_picker()

      Dropdown

      Use a dropdown to allow picking from a list of choices.

      See ui.dropdown()

      File Upload

      Use a file upload component to allow uploading files.

      See ui.file_upload()

      Picker

      Use a picker component to allow picking multiple tags or labels from a list.

      See ui.picker()

      Range Slider

      Use a range slider to allow selecting a range of values within another range.

      See ui.range_slider()

      Slider

      Use a slider to allow selecting a value from a range of values.

      See ui.slider()

      Spin Box

      Use a spin box to allow incrementally adjusting a value in small steps.

      See ui.spinbox()

      Table

      Use a table to display tabular data, or allow selecting one or more rows.

      See ui.table()

      Textbox

      Use a textbox to allow typing in text.

      See ui.textbox()

      Toggle

      Use a toggle to allow switching between two mutually exclusive options (checked/unchecked or on/off), while producing an immediate result. +See ui.toggle()

      Commands

      Command

      Use a command to define menu items for cards and components that support menus and context-menus.

      See ui.command()

      Button

      Use button() to display a clickable button.

      See ui.button()

      Button Set

      Use buttons() to display two or more buttons side by side.

      See ui.buttons()

      Tabs

      Use tabs() to display a set of tabs.

      See ui.tabs()

      Engagement

      Message Bar

      Use a message bar to display information, warning and error notifications.

      See ui.message_bar()

      Progress Bar

      Use a progress bar to display progress information for tasks or operations.

      See ui.progress()

      Stepper

      Use a stepper to display a sequence of steps in a process, and how many have been completed.

      See ui.stepper()

      Graphics

      Visualization

      Use visualization() to display visualizations defined using Q's native plot() API, based on the Grammar of Graphics.

      See ui.visualization()

      Vega-lite Visualization

      Use vega_visualization() to display visualization defined using Vega-Lite.

      See ui.vega_visualization()

      Utilities

      Expander

      Use an expander to show or hider a group of related components.

      See ui.expander()

      Separator

      Use a separator to visually separate components in to groups.

      See ui.separator()

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/configuration/index.html b/docs/docs/configuration/index.html index 97b3103abd..bf5915b4bc 100644 --- a/docs/docs/configuration/index.html +++ b/docs/docs/configuration/index.html @@ -4,30 +4,30 @@ -Configuration | H2O Wave +Configuration | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Configuration

      Configuring the server

      Command line options

      Execute wave -help to see all available command line options:

      $ ./wave -help
      Usage of ./wave:
      -access-key-id string
      default access key ID (default "access_key_id")
      -access-key-secret string
      default access key secret (default "access_key_secret")
      -compact string
      compact AOF log
      -data-dir string
      directory to store site data (default "./data")
      -debug
      enable debug mode (profiling, inspection, etc.)
      -init string
      initialize site content from AOF log
      -listen string
      listen on this address (default ":55555")
      -tls-cert-file string
      path to certificate file (TLS only)
      -tls-key-file string
      path to private key file (TLS only)
      -version
      print version and exit
      -web-dir string
      directory to serve web assets from (default "./www")

      Configuring your app

      Your Wave application has a websocket server under the hood, called an app server. For convenience, when you run your app during development, the app server automatically picks an available port, and assumes that your Wave server is running at http://127.0.0.1:55555/ (localhost, port 55555). For production deployments, you'll want to configure which port your app listens to, how it can access the Wave server, and how the Wave server can access your app.

      You can use the following environment variables to configure your app's server's behavior:

      H2O_WAVE_INTERNAL_ADDRESS

      The local host/port on which the app server should listen. Defaults to ws://127.0.0.1:0 (automatically picks an available port). For example, if you want your app to listen on a specific port, execute your app as follows (replace 66666 with a port number of your choice):

      $ H2O_WAVE_INTERNAL_ADDRESS=ws://127.0.0.1:66666 ./venv/bin/python my_app.py

      H2O_WAVE_EXTERNAL_ADDRESS

      The public host/port of the app server. Defaults to ws://127.0.0.1:0. Set this variable if you are running your Wave server and your app on different machine or containers.

      H2O_WAVE_ADDRESS

      The public host/port of the Wave server. Set this variable if you are running the Wave server on a remote machine or container.

      H2O_WAVE_ACCESS_KEY_ID

      The API access key ID to use for communicating with the Wave server.

      H2O_WAVE_ACCESS_KEY_SECRET

      The API access key secret to use for communicating with the Wave server.

      Edit this page
      +

      Configuration

      Configuring the server

      Command line options

      Execute wave -help to see all available command line options:

      $ ./wave -help
      Usage of ./wave:
      -access-key-id string
      default access key ID (default "access_key_id")
      -access-key-secret string
      default access key secret (default "access_key_secret")
      -compact string
      compact AOF log
      -data-dir string
      directory to store site data (default "./data")
      -debug
      enable debug mode (profiling, inspection, etc.)
      -init string
      initialize site content from AOF log
      -listen string
      listen on this address (default ":55555")
      -oidc-client-id string
      OIDC client ID
      -oidc-client-secret string
      OIDC client secret
      -oidc-end-session-url string
      OIDC end session URL
      -oidc-provider-url string
      OIDC provider URL
      -oidc-redirect-url string
      OIDC redirect URL
      -tls-cert-file string
      path to certificate file (TLS only)
      -tls-key-file string
      path to private key file (TLS only)
      -version
      print version and exit
      -web-dir string
      directory to serve web assets from (default "./www")

      Configuring your app

      Your Wave application has a websocket server under the hood, called an app server. For convenience, when you run your app during development, the app server automatically picks an available port, and assumes that your Wave server is running at http://127.0.0.1:55555/ (localhost, port 55555). For production deployments, you'll want to configure which port your app listens to, how it can access the Wave server, and how the Wave server can access your app.

      You can use the following environment variables to configure your app's server's behavior:

      H2O_WAVE_INTERNAL_ADDRESS

      The local host/port on which the app server should listen. Defaults to ws://127.0.0.1:0 (automatically picks an available port). For example, if you want your app to listen on a specific port, execute your app as follows (replace 66666 with a port number of your choice):

      $ H2O_WAVE_INTERNAL_ADDRESS=ws://127.0.0.1:66666 ./venv/bin/python my_app.py

      H2O_WAVE_EXTERNAL_ADDRESS

      The public host/port of the app server. Defaults to ws://127.0.0.1:0. Set this variable if you are running your Wave server and your app on different machine or containers.

      H2O_WAVE_ADDRESS

      The public host/port of the Wave server. Set this variable if you are running the Wave server on a remote machine or container.

      H2O_WAVE_ACCESS_KEY_ID

      The API access key ID to use for communicating with the Wave server.

      H2O_WAVE_ACCESS_KEY_SECRET

      The API access key secret to use for communicating with the Wave server.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/contributing/index.html b/docs/docs/contributing/index.html index b77af4704d..851e57f7ad 100644 --- a/docs/docs/contributing/index.html +++ b/docs/docs/contributing/index.html @@ -4,30 +4,30 @@ -Contributing | H2O Wave +Contributing | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Contributing

      We appreciate all contributions. If you are planning to contribute back bug-fixes, please do so without any further discussion.

      If you plan to contribute new features, please first open an issue and discuss the feature with us. Sending a PR without discussion might end up resulting in a rejected PR because we might be taking the software in a different direction than you might be aware of.

      (Based on the PyTorch Contribution Guide.)

      About open source development

      If this is your first time contributing to an open source project, some aspects of the development process may seem unusual to you.

      • There is no way to "claim" issues. People often want to "claim" an issue when they decide to work on it, to ensure that there isn’t wasted work when someone else ends up working on it. This doesn’t really work too well in open source, since someone may decide to work on something, and end up not having time to do it. Feel free to give information in an advisory fashion, but at the end of the day, we will take running code and rough consensus.

      • There is a high bar for new functionality that is added. Unlike in a corporate environment, where the person who wrote code implicitly "owns" it and can be expected to take care of it in the beginning of its lifetime, once a pull request is merged into an open source project, it immediately becomes the collective responsibility of all maintainers on the project. When we merge code, we are saying that we, the maintainers, are able to review subsequent changes and make a bugfix to the code. This naturally leads to a higher standard of contribution.

      Proposing new features

      New feature ideas are best discussed on a specific issue. Please include as much information as you can, any accompanying data, and your proposed solution. The H2O Wave team and community frequently reviews new issues and comments where they think they can help. If you feel confident in your solution, go ahead and implement it.

      Reporting issues

      If you’ve identified an issue, first search through the list of existing issues on the repo. If you are unable to find a similar issue, then create a new one. Supply as much information you can to reproduce the problematic behavior. Also, include any additional insights like the behavior you expect.

      Implementing features

      If you want to fix a specific issue, it’s best to comment on the individual issue with your intent. However, we do not lock or assign issues except in cases where we have worked with the developer before. It’s best to strike up a conversation on the issue and discuss your proposed solution. The H2O Wave team can provide guidance that saves you time.

      Issues that are labeled first-new-issue, low, or medium priority provide the best entrance point are great places to start.

      Improving documentation and tutorials

      We aim to produce high quality documentation and tutorials. On rare occasions that content includes typos or bugs. If you find something you can fix, send us a pull request for consideration.

      Submitting pull requests

      You can view a list of all open issues here. Commenting on an issue is a great way to get the attention of the team. From here you can share your ideas and how you plan to resolve the issue.

      For more challenging issues, the team will provide feedback and direction for how to best solve the issue.

      If you’re not able to fix the issue itself, commenting and sharing whether you can reproduce the issue can be useful for helping the team identify problem areas.

      Improving code readability

      Improve code readability helps everyone. It is often better to submit a small number of pull requests that touch few files versus a large pull request that touches many files. Opening an issue related to your improvement is the best way to get started.

      Adding test cases

      Additional test coverage is appreciated. Help us make the codebase more robust.

      Security vulnerabilities

      If you discover a security vulnerability within H2O Wave, please send an email to Prithvi Prabhu at prithvi@h2o.ai. All security vulnerabilities will be promptly addressed.

      Code of Conduct

      This Code of Conduct provides community guidelines for a safe, respectful, productive, and collaborative place for any person who is willing to contribute to the H2O Wave community. It applies to all "collaborative space", which is defined as community communications channels (such as mailing lists, submitted patches, commit comments, etc.).

      • Participants will be tolerant of opposing views.
      • Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks.
      • When interpreting the words and actions of others, participants should always assume good intentions.
      • Behaviour which can be reasonably considered harassment will not be tolerated.

      (Based on the Ruby Code of Conduct.)

      Edit this page
      +

      Contributing

      We appreciate all contributions. If you are planning to contribute back bug-fixes, please do so without any further discussion.

      If you plan to contribute new features, please first open an issue and discuss the feature with us. Sending a PR without discussion might end up resulting in a rejected PR because we might be taking the software in a different direction than you might be aware of.

      (Based on the PyTorch Contribution Guide.)

      About open source development

      If this is your first time contributing to an open source project, some aspects of the development process may seem unusual to you.

      • There is no way to "claim" issues. People often want to "claim" an issue when they decide to work on it, to ensure that there isn’t wasted work when someone else ends up working on it. This doesn’t really work too well in open source, since someone may decide to work on something, and end up not having time to do it. Feel free to give information in an advisory fashion, but at the end of the day, we will take running code and rough consensus.

      • There is a high bar for new functionality that is added. Unlike in a corporate environment, where the person who wrote code implicitly "owns" it and can be expected to take care of it in the beginning of its lifetime, once a pull request is merged into an open source project, it immediately becomes the collective responsibility of all maintainers on the project. When we merge code, we are saying that we, the maintainers, are able to review subsequent changes and make a bugfix to the code. This naturally leads to a higher standard of contribution.

      Proposing new features

      New feature ideas are best discussed on a specific issue. Please include as much information as you can, any accompanying data, and your proposed solution. The H2O Wave team and community frequently reviews new issues and comments where they think they can help. If you feel confident in your solution, go ahead and implement it.

      Reporting issues

      If you’ve identified an issue, first search through the list of existing issues on the repo. If you are unable to find a similar issue, then create a new one. Supply as much information you can to reproduce the problematic behavior. Also, include any additional insights like the behavior you expect.

      Implementing features

      If you want to fix a specific issue, it’s best to comment on the individual issue with your intent. However, we do not lock or assign issues except in cases where we have worked with the developer before. It’s best to strike up a conversation on the issue and discuss your proposed solution. The H2O Wave team can provide guidance that saves you time.

      Issues that are labeled first-new-issue, low, or medium priority provide the best entrance point are great places to start.

      Improving documentation and tutorials

      We aim to produce high quality documentation and tutorials. On rare occasions that content includes typos or bugs. If you find something you can fix, send us a pull request for consideration.

      Submitting pull requests

      You can view a list of all open issues here. Commenting on an issue is a great way to get the attention of the team. From here you can share your ideas and how you plan to resolve the issue.

      For more challenging issues, the team will provide feedback and direction for how to best solve the issue.

      If you’re not able to fix the issue itself, commenting and sharing whether you can reproduce the issue can be useful for helping the team identify problem areas.

      Improving code readability

      Improve code readability helps everyone. It is often better to submit a small number of pull requests that touch few files versus a large pull request that touches many files. Opening an issue related to your improvement is the best way to get started.

      Adding test cases

      Additional test coverage is appreciated. Help us make the codebase more robust.

      Security vulnerabilities

      If you discover a security vulnerability within H2O Wave, please send an email to Prithvi Prabhu at prithvi@h2o.ai. All security vulnerabilities will be promptly addressed.

      Code of Conduct

      This Code of Conduct provides community guidelines for a safe, respectful, productive, and collaborative place for any person who is willing to contribute to the H2O Wave community. It applies to all "collaborative space", which is defined as community communications channels (such as mailing lists, submitted patches, commit comments, etc.).

      • Participants will be tolerant of opposing views.
      • Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks.
      • When interpreting the words and actions of others, participants should always assume good intentions.
      • Behaviour which can be reasonably considered harassment will not be tolerated.

      (Based on the Ruby Code of Conduct.)

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/development/index.html b/docs/docs/development/index.html index aca2a64475..3e7aa9ce2c 100644 --- a/docs/docs/development/index.html +++ b/docs/docs/development/index.html @@ -4,33 +4,33 @@ -Development | H2O Wave +Development | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Development

      Wave apps and scripts are plain Python programs. You can develop, debug and test them from the command-line, from the Python REPL, or from your favorite text editor.

      Both PyCharm Community Edition and Visual Studio Code are excellent for Python programming.

      tip

      At the time of writing, PyCharm's type-checking and error-detection is superior to Visual Studio Code's Python plugin.

      Getting started

      The simplest way to get started in either PyCharm or Visual Studio Code is the same:

      1. Create a working directory.
      2. Set up a Python virtual environment.
      3. Install the h2o-wave package.
      4. Open the directory in your IDE.
      mkdir $HOME/wave-apps
      cd $HOME/wave-apps
      python3 -m venv venv
      ./venv/bin/pip install h2o-wave

      Using PyCharm

      1. Launch PyCharm
      2. Click "File" -> "Open...", then choose $HOME/wave-apps.
      3. Right-click on wave-apps in the "Project" tree, then click "New" -> "Python File".
      4. Enter a file name, say, hello_world.py.
      5. Write some code (see sample below).
      6. Right-click anywhere inside the file and choose "Run hello_world" or "Debug hello_world".

      Using Visual Studio Code

      1. Launch Visual Studio Code
      2. Click "File" -> "Open...", then choose $HOME/wave-apps.
      3. Click "File" -> "New File"; save the file as, say, hello_world.py.
      4. You should now get a prompt asking if you want to install extensions for Python. Click "Install".
      5. Write some code (see sample below).
      6. Hit Ctrl+F5 to run, or F5 to debug.

      A hello world sample

      $HOME/wave-apps/hello_world.py
      from h2o_wave import site, ui
      +

      Development

      Wave apps and scripts are plain Python programs. You can develop, debug and test them from the command-line, from the Python REPL, or from your favorite text editor.

      Both PyCharm Community Edition and Visual Studio Code are excellent for Python programming.

      tip

      At the time of writing, PyCharm's type-checking and error-detection is superior to Visual Studio Code's Python plugin.

      Getting started

      The simplest way to get started in either PyCharm or Visual Studio Code is the same:

      1. Create a working directory.
      2. Set up a Python virtual environment.
      3. Install the h2o-wave package.
      4. Open the directory in your IDE.
      mkdir $HOME/wave-apps
      cd $HOME/wave-apps
      python3 -m venv venv
      ./venv/bin/pip install h2o-wave

      Using PyCharm

      1. Launch PyCharm
      2. Click "File" -> "Open...", then choose $HOME/wave-apps.
      3. Right-click on wave-apps in the "Project" tree, then click "New" -> "Python File".
      4. Enter a file name, say, hello_world.py.
      5. Write some code (see sample below).
      6. Right-click anywhere inside the file and choose "Run hello_world" or "Debug hello_world".

      Using Visual Studio Code

      1. Launch Visual Studio Code
      2. Click "File" -> "Open...", then choose $HOME/wave-apps.
      3. Click "File" -> "New File"; save the file as, say, hello_world.py.
      4. You should now get a prompt asking if you want to install extensions for Python. Click "Install".
      5. Write some code (see sample below).
      6. Hit Ctrl+F5 to run, or F5 to debug.

      A hello world sample

      $HOME/wave-apps/hello_world.py
      from h2o_wave import site, ui
      # Grab a reference to the page at route '/hello'
      page = site['/hello']
      # Add a markdown card to the page.
      page['quote'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World',
      content='"The Internet? Is that thing still around?" - *Homer Simpson*',
      )
      -
      # Finally, save the page.
      page.save()
      Edit this page
      +
      # Finally, save the page.
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/enterprise/basic-concepts/index.html b/docs/docs/enterprise/basic-concepts/index.html index d9a863cf16..2ee5106d9f 100644 --- a/docs/docs/enterprise/basic-concepts/index.html +++ b/docs/docs/enterprise/basic-concepts/index.html @@ -4,21 +4,21 @@ -Basic Concepts | H2O Wave +Basic Concepts | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Basic Concepts

      H2O AI Cloud, a.k.a. q8s, recognizes three actors:

      • App Developer: creates and publishes apps
      • App User: browses and runs apps
      • Admin: manages the platform

      over two resource types:

      • App: runnable Wave app package
      • App instance: running instane of an app

      App

      App is a runnable Wave app package with metadata, such as (grouped into categories):

      • Identity
        • a unique name and version identifier
      • Display/search
        • a title and description
        • icon and screenshots
        • search category and keywords
      • Authorization
        • owner (e.g., the person who imported it into H2O AI Cloud)
        • visibility (PRIVATE, ALL_USERS)
      • Runtime
        • RAM/disk requirements
        • other runtime settings (e.g., pointers to dependencies and secrets to be injected at startup time)

      Users can start/run multiple instances of each app (subject to authorization, see below).

      Apps are mostly immutable, meaning once uploaded, they cannot be changed (except for visibility). +

      Basic Concepts

      H2O AI Cloud, a.k.a. q8s, recognizes three actors:

      • App Developer: creates and publishes apps
      • App User: browses and runs apps
      • Admin: manages the platform

      over two resource types:

      • App: runnable Wave app package
      • App instance: running instane of an app

      App

      App is a runnable Wave app package with metadata, such as (grouped into categories):

      • Identity
        • a unique name and version identifier
      • Display/search
        • a title and description
        • icon and screenshots
        • search category and keywords
      • Authorization
        • owner (e.g., the person who imported it into H2O AI Cloud)
        • visibility (PRIVATE, ALL_USERS)
      • Runtime
        • RAM/disk requirements
        • other runtime settings (e.g., pointers to dependencies and secrets to be injected at startup time)

      Users can start/run multiple instances of each app (subject to authorization, see below).

      Apps are mostly immutable, meaning once uploaded, they cannot be changed (except for visibility). To "update" an app, one has to upload a new version.

      note

      Internally, H2O AI Cloud treats every app name/version combination as a separate entity. The UI then uses the app name to link several versions together; however each can have different title, description, owner, instances, etc.

      App Instance

      App instance is a running instance of an app wit the following metadata:

      • pointer to the corresponding app
      • owner (the person who started it)
      • visibility (PRIVATE, ALL_USERS, PUBLIC)

      H2O AI Cloud fully manages the app instance lifecycle on behalf of its users.

      Instances can be stateless or stateful (depending on the app configuration) @@ -27,16 +27,16 @@ It can optionally include other resources, such as PVCs, Configmaps, etc.

      Authorization

      App Access Authorization

      Access to apps is governed by the following rules:

      • PRIVATE apps are only visible to/runnable by the owner; these are typically created via q8s-cli bundle deploy
      • ALL_USERS apps are visible to/runnable by all signed-in users; they are also visible on the "Catalog" page; these are typically created via q8s-cli bundle import
      • App owner can manage (view, update, delete) her apps via q8s-cli app ... or via the "My Apps" page.

      Instance Access Authorization

      Access to app instances is governed by the following rules:

      • PRIVATE instances are only visible to the owner and the owner of the corresponding app (the app owner has only read access)
      • ALL_USERS instances are visible to all signed-in users
      • PUBLIC instances are visible to anyone on the Internet
      • Instance owner can manage (view, update, terminate) her instances via q8s-cli instance or via the "My instances" page.

      Note that app/instance visibility can be modified by the owner, e.g., using q8s-cli (app|instance) update <id> -v <visibility> -or via the "My Apps"/"My Instances" page.

      Admin access is exempt from all the authorization rules (i.e., admins have full access to all apps/instances).

      Edit this page
      +or via the "My Apps"/"My Instances" page.

      Admin access is exempt from all the authorization rules (i.e., admins have full access to all apps/instances).

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/enterprise/developer-guide/index.html b/docs/docs/enterprise/developer-guide/index.html index e6495c61fa..63dc853341 100644 --- a/docs/docs/enterprise/developer-guide/index.html +++ b/docs/docs/enterprise/developer-guide/index.html @@ -4,21 +4,21 @@ -Developer Guide | H2O Wave +Developer Guide | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Developer Guide

      App Bundle Structure

      Each q8s-compatible app has to be bundled as a zip archive (commonly used with suffix .qz) +

      Developer Guide

      App Bundle Structure

      Each q8s-compatible app has to be bundled as a zip archive (commonly used with suffix .qz) consisting of:

      • wave-app.toml - to q8s configuration file
      • static/ - static asset directory, including the app icon (a png file starting with icon) and screenshots (files starting with screenshot)
      • requirements.txt - pip-managed dependencies of the app (can contain references to .whl files included in the .qz using paths relative to the archive root)
      • app source code

      You can quickly create a .qz archive by running q8s-cli bundle in your app git repository @@ -62,16 +62,16 @@ nor is there an API for listing the available secrets. Secrets are currently managed by Admins. Contact your admins for the available secrets or for adding a new one.

      We are actively working on improving this.

      App Route

      While it is not a strict requirement, since each app in q8s is deployed with its own Qd, -it is advised that apps use / as its main route:

      if __name__ == '__main__':
      listen('/', main_page)
      Edit this page
      +it is advised that apps use / as its main route:

      if __name__ == '__main__':
      listen('/', main_page)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/enterprise/index.html b/docs/docs/enterprise/index.html index b6c48f4d44..aa16323802 100644 --- a/docs/docs/enterprise/index.html +++ b/docs/docs/enterprise/index.html @@ -4,30 +4,30 @@ -Introduction | H2O Wave +Introduction | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Introduction

      H2O AI Cloud is the best way to operationalize AI/ML applications built with H2O Wave.

      Rationale

      The end goal of data science projects is to produce analytical software applications to facilitate decision-support and automated decision making.

      The primary purpose of such applications is to help stakeholders make better decisions by giving them relevant information in an easily understandable format. Most of the heavy lifting is already taken care of by an app’s authors: what data to use, which algorithms to apply, what information to present, and how to present it.

      Developing and deploying such applications presents some unique problems:

      • Infrastructure. AI/ML modeling is storage and compute intensive. Incorporating machine learning into the software development process and integrating machine learning models into software applications is significantly more complicated compared to conventional software development.
      • Talent. Building applications requires a cross-disciplinary team with specialized skills - data scientists, data engineers, backend/frontend engineers and IT/operations - working in close collaboration with stakeholders.
      • Time to market. Application requirements are rarely set in stone. Market conditions, competitor offerings, and customer expectations change all the time. Software development teams no longer have months or years to develop and deploy applications. There is an intense need to prototype quickly, gather early feedback from stakeholders, and improve iteratively or fail fast.

      In other words, it requires extraordinary effort from a diverse team to wire up data, libraries, tooling and infrastructure before we can focus on what matters most: getting decision-support into the hands of stakeholders.

      What is H2O AI Cloud?

      H2O’s AI Cloud is a turnkey platform that streamlines this entire process: one platform and one API.

      • Turnkey Infrastructure. Provides all the building blocks and services necessary to develop and deploy analytical applications in one install. Combines data connectors, data storage, automatic machine learning, model operations and rapid web application development into a single, scalable, vendor-neutral platform with a coherent, end-to-end API.
      • Empowers Python programmers. The Wave SDK makes it easy for data scientists and data engineers to develop beautiful, polished, low-latency, real-time analytical web applications using pure Python and publish them directly to end-users. No Javascript/HTML/CSS required.
      • Faster time to market. Makes it easy to train models and immediately use them in interactive web applications for rapid prototyping and sharing with end-users. Dramatically simplifies and speeds up the iterative develop-deploy-feedback cycle.
      Edit this page
      +

      Introduction

      H2O AI Cloud is the best way to operationalize AI/ML applications built with H2O Wave.

      Rationale

      The end goal of data science projects is to produce analytical software applications to facilitate decision-support and automated decision making.

      The primary purpose of such applications is to help stakeholders make better decisions by giving them relevant information in an easily understandable format. Most of the heavy lifting is already taken care of by an app’s authors: what data to use, which algorithms to apply, what information to present, and how to present it.

      Developing and deploying such applications presents some unique problems:

      • Infrastructure. AI/ML modeling is storage and compute intensive. Incorporating machine learning into the software development process and integrating machine learning models into software applications is significantly more complicated compared to conventional software development.
      • Talent. Building applications requires a cross-disciplinary team with specialized skills - data scientists, data engineers, backend/frontend engineers and IT/operations - working in close collaboration with stakeholders.
      • Time to market. Application requirements are rarely set in stone. Market conditions, competitor offerings, and customer expectations change all the time. Software development teams no longer have months or years to develop and deploy applications. There is an intense need to prototype quickly, gather early feedback from stakeholders, and improve iteratively or fail fast.

      In other words, it requires extraordinary effort from a diverse team to wire up data, libraries, tooling and infrastructure before we can focus on what matters most: getting decision-support into the hands of stakeholders.

      What is H2O AI Cloud?

      H2O’s AI Cloud is a turnkey platform that streamlines this entire process: one platform and one API.

      • Turnkey Infrastructure. Provides all the building blocks and services necessary to develop and deploy analytical applications in one install. Combines data connectors, data storage, automatic machine learning, model operations and rapid web application development into a single, scalable, vendor-neutral platform with a coherent, end-to-end API.
      • Empowers Python programmers. The Wave SDK makes it easy for data scientists and data engineers to develop beautiful, polished, low-latency, real-time analytical web applications using pure Python and publish them directly to end-users. No Javascript/HTML/CSS required.
      • Faster time to market. Makes it easy to train models and immediately use them in interactive web applications for rapid prototyping and sharing with end-users. Dramatically simplifies and speeds up the iterative develop-deploy-feedback cycle.
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/breadcrumbs/index.html b/docs/docs/examples/breadcrumbs/index.html index 3a918de9d6..b1a7a415e7 100644 --- a/docs/docs/examples/breadcrumbs/index.html +++ b/docs/docs/examples/breadcrumbs/index.html @@ -4,21 +4,21 @@ -Breadcrumbs | H2O Wave +Breadcrumbs | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Breadcrumbs

      Breadcrumbs should be used as a navigational aid in your app or site. +

      Breadcrumbs

      Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. @@ -26,16 +26,16 @@ or navigation of an experience, above the primary content area.

      from h2o_wave import site, ui
      page = site['/demo']
      page['breadcrumbs'] = ui.breadcrumbs_card(
      box='1 1 4 -1',
      items=[
      ui.breadcrumb(name='#menu1', label='Menu 1'),
      ui.breadcrumb(name='#menu2', label='Menu 2'),
      ui.breadcrumb(name='#menu3', label='Menu 3'),
      ],
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/button/index.html b/docs/docs/examples/button/index.html index 56ad1e15ac..cb523abfe2 100644 --- a/docs/docs/examples/button/index.html +++ b/docs/docs/examples/button/index.html @@ -4,34 +4,34 @@ -Form / Button | H2O Wave +Form / Button | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Button

      Use buttons to enable a user to commit a change or complete steps in a task.

      from h2o_wave import Q, listen, ui
      +

      Form / Button

      Use buttons to enable a user to commit a change or complete steps in a task.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if 'basic_button' in q.args:
      q.page['example'].items = [
      ui.text(f'basic_button={q.args.basic_button}'),
      ui.text(f'primary_button={q.args.primary_button}'),
      ui.text(f'link_button={q.args.link_button}'),
      ui.text(f'basic_disabled_button={q.args.basic_disabled_button}'),
      ui.text(f'primary_disabled_button={q.args.primary_disabled_button}'),
      ui.text(f'link_disabled_button={q.args.link_disabled_button}'),
      ui.text(f'basic_compound_button={q.args.basic_compound_button}'),
      ui.text(f'primary_compound_button={q.args.primary_compound_button}'),
      ui.text(f'basic_compound_disabled_button={q.args.basic_compound_disabled_button}'),
      ui.text(f'primary_compound_disabled_button={q.args.primary_compound_disabled_button}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.button(name='basic_button', label='Basic'),
      ui.button(name='primary_button', label='Primary', primary=True),
      ui.button(name='link_button', label='Link', link=True),
      ui.button(name='basic_disabled_button', label='Basic (Disabled)', disabled=True),
      ui.button(name='primary_disabled_button', label='Primary (Disabled)', primary=True, disabled=True),
      ui.button(name='link_disabled_button', label='Link (Disabled)', link=True, disabled=True),
      ui.button(name='basic_compound_button', label='Basic', caption='Compound Button.'),
      ui.button(name='primary_compound_button', label='Primary', caption='Compound Button', primary=True),
      ui.button(name='basic_compound_disabled_button', label='Basic (Disabled)', caption='Compound Button',
      disabled=True),
      ui.button(name='primary_compound_disabled_button', label='Primary (Disabled)', caption='Compound Button',
      primary=True, disabled=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/buttons/index.html b/docs/docs/examples/buttons/index.html index cfb4460fab..84f61ffb7b 100644 --- a/docs/docs/examples/buttons/index.html +++ b/docs/docs/examples/buttons/index.html @@ -4,34 +4,34 @@ -Form / Buttons | H2O Wave +Form / Buttons | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Buttons

      Use the ui.buttons() function to group related buttons.

      from h2o_wave import Q, listen, ui
      +

      Form / Buttons

      Use the ui.buttons() function to group related buttons.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if 'standard_button' in q.args:
      q.page['example'].items = [
      ui.text(f'primary_button={q.args.primary_button}'),
      ui.text(f'standard_button={q.args.standard_button}'),
      ui.text(f'standard_disabled_button={q.args.standard_disabled_button}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.buttons([
      ui.button(name='primary_button', label='Primary', primary=True),
      ui.button(name='standard_button', label='Standard'),
      ui.button(name='standard_disabled_button', label='Standard', disabled=True),
      ]),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/card-menu/index.html b/docs/docs/examples/card-menu/index.html index baf6beebf5..de149582a4 100644 --- a/docs/docs/examples/card-menu/index.html +++ b/docs/docs/examples/card-menu/index.html @@ -4,21 +4,21 @@ -Context Menu | H2O Wave +Context Menu | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Context Menu

      Display a context menu on a card.

      import json
      from h2o_wave import Q, listen, ui, data
      +

      Context Menu

      Display a context menu on a card.

      import json
      from h2o_wave import Q, listen, ui, data
      # Vega lite spec for a bar plot, defaults to linear scale.
      spec_linear_scale = json.dumps(dict(
      mark='bar',
      encoding=dict(
      x=dict(field='a', type='ordinal'),
      y=dict(field='b', type='quantitative')
      )
      ))
      # Vega lite spec for a bar plot, log scaled.
      spec_log_scale = json.dumps(dict(
      mark='bar',
      encoding=dict(
      x=dict(field='a', type='ordinal'),
      y=dict(field='b', type='quantitative', scale=dict(type='log'))
      )
      ))
      # Data for our plot.
      plot_data = data(fields=["a", "b"], rows=[
      ["A", 28], ["B", 55], ["C", 43],
      ["D", 91], ["E", 81], ["F", 53],
      ["G", 19], ["H", 87], ["I", 52]
      ])
      @@ -27,16 +27,16 @@
      async def serve(q: Q):
      if q.client.plot_added: # Have we already added a plot?
      example = q.page['example']
      if q.args.to_log_scale:
      # Change to log scale
      example.title = 'Plot (Log Scale)',
      example.specification = spec_log_scale
      example.commands = [linear_scale_command]
      else:
      # Change to linear scale
      example.title = 'Plot (Linear Scale)',
      example.specification = spec_linear_scale
      example.commands = [log_scale_command]
      else: # Add a new plot
      q.page['example'] = ui.vega_card(
      box='1 1 2 4',
      title='Plot (Linear Scale)',
      specification=spec_linear_scale,
      data=plot_data,
      commands=[log_scale_command],
      )
      # Flag to indicate that we've added a plot
      q.client.plot_added = True
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/checkbox/index.html b/docs/docs/examples/checkbox/index.html index c9ced80a1a..1c026fc894 100644 --- a/docs/docs/examples/checkbox/index.html +++ b/docs/docs/examples/checkbox/index.html @@ -4,34 +4,34 @@ -Form / Checkbox | H2O Wave +Form / Checkbox | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Checkbox

      Use checkboxes to switch between two mutually exclusive options.

      from h2o_wave import Q, listen, ui
      +

      Form / Checkbox

      Use checkboxes to switch between two mutually exclusive options.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'checkbox_unchecked={q.args.checkbox_unchecked}'),
      ui.text(f'checkbox_checked={q.args.checkbox_checked}'),
      ui.text(f'checkbox_indeterminate={q.args.checkbox_indeterminate}'),
      ui.text(f'checkbox_unchecked_disabled={q.args.checkbox_unchecked_disabled}'),
      ui.text(f'checkbox_checked_disabled={q.args.checkbox_checked_disabled}'),
      ui.text(f'checkbox_indeterminate_disabled={q.args.checkbox_indeterminate_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.checkbox(name='checkbox_unchecked', label='Not checked'),
      ui.checkbox(name='checkbox_checked', label='Checked', value=True),
      ui.checkbox(name='checkbox_indeterminate', label='Indeterminate', indeterminate=True),
      ui.checkbox(name='checkbox_unchecked_disabled', label='Not checked (Disabled)', disabled=True),
      ui.checkbox(name='checkbox_checked_disabled', label='Checked (Disabled)', value=True, disabled=True),
      ui.checkbox(name='checkbox_indeterminate_disabled', label='Indeterminate (Disabled)', indeterminate=True,
      disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/checklist/index.html b/docs/docs/examples/checklist/index.html index 37cff56a67..b1d977f4fd 100644 --- a/docs/docs/examples/checklist/index.html +++ b/docs/docs/examples/checklist/index.html @@ -4,34 +4,34 @@ -Form / Checklist | H2O Wave +Form / Checklist | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Checklist

      Use a checklist to group a set of related checkboxes.

      from h2o_wave import Q, listen, ui
      +

      Form / Checklist

      Use a checklist to group a set of related checkboxes.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.checklist}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.checklist(name='checklist', label='Choices',
      choices=[ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']]),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/choice-group/index.html b/docs/docs/examples/choice-group/index.html index a576f64316..c971a19084 100644 --- a/docs/docs/examples/choice-group/index.html +++ b/docs/docs/examples/choice-group/index.html @@ -4,35 +4,35 @@ -Form / Choice Group | H2O Wave +Form / Choice Group | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Choice Group

      Use choice groups to let users select one option from two or more choices.

      from h2o_wave import Q, listen, ui
      +

      Form / Choice Group

      Use choice groups to let users select one option from two or more choices.

      from h2o_wave import Q, listen, ui
      choices = [
      ui.choice('A', 'Option A'),
      ui.choice('B', 'Option B'),
      ui.choice('C', 'Option C', disabled=True),
      ui.choice('D', 'Option D'),
      ]
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.choice_group}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.choice_group(name='choice_group', label='Pick one', value='B', required=True, choices=choices),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/color-picker/index.html b/docs/docs/examples/color-picker/index.html index 9f41325d46..03343491bd 100644 --- a/docs/docs/examples/color-picker/index.html +++ b/docs/docs/examples/color-picker/index.html @@ -4,34 +4,34 @@ -Form / Color Picker | H2O Wave +Form / Color Picker | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Color Picker

      Use a color picker to allow a user to select a color.

      from h2o_wave import Q, listen, ui
      +

      Form / Color Picker

      Use a color picker to allow a user to select a color.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'color={q.args.color}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.color_picker(name='color', label='Pick a color', value='#F25F5C'),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/combobox/index.html b/docs/docs/examples/combobox/index.html index 6a7c1a8d04..00319a4043 100644 --- a/docs/docs/examples/combobox/index.html +++ b/docs/docs/examples/combobox/index.html @@ -4,35 +4,35 @@ -Form / Combobox | H2O Wave +Form / Combobox | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Combobox

      Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing.

      from h2o_wave import Q, listen, ui
      +

      Form / Combobox

      Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing.

      from h2o_wave import Q, listen, ui
      combobox_choices = ['Cyan', 'Magenta', 'Yellow', 'Black']
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'combobox={q.args.combobox}'),
      ui.text(f'combobox_disabled={q.args.combobox_disabled}'),
      ui.text(f'combobox_error={q.args.combobox_error}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.combobox(name='combobox', label='Enter or choose a color', placeholder='Color...', value='Blue',
      choices=combobox_choices),
      ui.combobox(name='combobox_disabled', label='Enter or choose a color', placeholder='Color...', value='Blue',
      choices=combobox_choices, disabled=True),
      ui.combobox(name='combobox_error', label='Enter or choose a color', placeholder='Color...', value='Blue',
      choices=combobox_choices, error='This combobox has an error!'),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/counter-broadcast/index.html b/docs/docs/examples/counter-broadcast/index.html index ec09e9b9d3..d8039f78ac 100644 --- a/docs/docs/examples/counter-broadcast/index.html +++ b/docs/docs/examples/counter-broadcast/index.html @@ -4,21 +4,21 @@ -Mode / Broadcast | H2O Wave +Mode / Broadcast | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Mode / Broadcast

      Launch the server in broadcast mode to synchronize browser state across users. +

      Mode / Broadcast

      Launch the server in broadcast mode to synchronize browser state across users. Open /demo in multiple browsers and watch them synchronize in realtime.

      from h2o_wave import Q, listen, ui, pack
      async def serve(q: Q):
      count = q.app.count or 0
      if 'increment' in q.args:
      count += 1
      q.app.count = count
      @@ -26,16 +26,16 @@
      if count > 0:
      form = q.page['example']
      form.items = items
      else:
      q.page['example'] = ui.form_card(box='1 1 12 10', items=items)
      await q.page.save()
      -
      listen('/demo', serve, mode='broadcast')
      Edit this page
      +
      listen('/demo', serve, mode='broadcast')
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/counter-global/index.html b/docs/docs/examples/counter-global/index.html index 2743ec9a0c..06b64d4dda 100644 --- a/docs/docs/examples/counter-global/index.html +++ b/docs/docs/examples/counter-global/index.html @@ -4,21 +4,21 @@ -Mode / Broadcast / Global | H2O Wave +Mode / Broadcast / Global | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Mode / Broadcast / Global

      Launch the server in broadcast mode to synchronize browser state across users. Global variables can be used to manage state. +

      Mode / Broadcast / Global

      Launch the server in broadcast mode to synchronize browser state across users. Global variables can be used to manage state. Open /demo in multiple browsers and watch them synchronize in realtime.

      from h2o_wave import Q, listen, ui, pack
      count = 0
      @@ -27,16 +27,16 @@
      if count > 0:
      form = q.page['example']
      form.items = items
      else:
      q.page['example'] = ui.form_card(box='1 1 12 10', items=items)
      await q.page.save()
      -
      listen('/demo', serve, mode='broadcast')
      Edit this page
      +
      listen('/demo', serve, mode='broadcast')
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/counter-multicast/index.html b/docs/docs/examples/counter-multicast/index.html index 5f7f0e2fad..5214be67b6 100644 --- a/docs/docs/examples/counter-multicast/index.html +++ b/docs/docs/examples/counter-multicast/index.html @@ -4,21 +4,21 @@ -Mode / Multicast | H2O Wave +Mode / Multicast | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Mode / Multicast

      Launch the server in multicast mode to synchronize browser state across a user's clients. +

      Mode / Multicast

      Launch the server in multicast mode to synchronize browser state across a user's clients. Open /demo in multiple browsers and watch them synchronize in realtime.

      from h2o_wave import Q, listen, ui, pack
      async def serve(q: Q):
      count = q.user.count or 0
      if 'increment' in q.args:
      count += 1
      q.user.count = count
      @@ -26,16 +26,16 @@
      if count > 0:
      form = q.page['example']
      form.items = items
      else:
      q.page['example'] = ui.form_card(box='1 1 12 10', items=items)
      await q.page.save()
      -
      listen('/demo', serve, mode='multicast')
      Edit this page
      +
      listen('/demo', serve, mode='multicast')
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/counter-unicast/index.html b/docs/docs/examples/counter-unicast/index.html index b1263a2cef..67cc870a19 100644 --- a/docs/docs/examples/counter-unicast/index.html +++ b/docs/docs/examples/counter-unicast/index.html @@ -4,37 +4,37 @@ -Mode / Unicast | H2O Wave +Mode / Unicast | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Mode / Unicast

      Launch the server in unicast mode and use q.client to manage client-local state.

      from h2o_wave import Q, listen, ui, pack
      +

      Mode / Unicast

      Launch the server in unicast mode and use q.client to manage client-local state.

      from h2o_wave import Q, listen, ui, pack
      async def serve(q: Q):
      count = q.client.count or 0
      if 'increment' in q.args:
      count += 1
      q.client.count = count
      items = pack([ui.button(name='increment', label=f'Count={count}')])
      if count > 0:
      form = q.page['example']
      form.items = items
      else:
      q.page['example'] = ui.form_card(box='1 1 12 10', items=items)
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/dashboard/index.html b/docs/docs/examples/dashboard/index.html index a34be6e1fb..4cd49d2653 100644 --- a/docs/docs/examples/dashboard/index.html +++ b/docs/docs/examples/dashboard/index.html @@ -4,21 +4,21 @@ -Dashboard | H2O Wave +Dashboard | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Dashboard

      Make a dashboard using a multitude of cards and update them live.

      from faker import Faker
      import time
      from h2o_wave import site, data, ui
      from synth import FakePercent, FakeCategoricalSeries
      +

      Dashboard

      Make a dashboard using a multitude of cards and update them live.

      from faker import Faker
      import time
      from h2o_wave import site, data, ui
      from synth import FakePercent, FakeCategoricalSeries
      fake = Faker()
      light_theme_colors = '$red $pink $purple $violet $indigo $blue $azure $cyan $teal $mint $green $amber $orange $tangerine'.split()
      dark_theme_colors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()
      _color_index = -1
      colors = dark_theme_colors
      @@ -54,16 +54,16 @@
      for f, c in large_pbs:
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      -
      create_dashboard(update_freq=0.25)
      Edit this page
      +
      create_dashboard(update_freq=0.25)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/date-picker-trigger/index.html b/docs/docs/examples/date-picker-trigger/index.html new file mode 100644 index 0000000000..ebfa89181c --- /dev/null +++ b/docs/docs/examples/date-picker-trigger/index.html @@ -0,0 +1,37 @@ + + + + + + +Form / Date Picker / Trigger | H2O Wave + + + + + + + + + + + + +
      +

      Form / Date Picker / Trigger

      To handle live changes to a date picker, enable the trigger attribute.

      from h2o_wave import Q, listen, ui
      +
      +
      async def main(q: Q):
      if not q.client.initialized:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text(f'date_trigger={q.args.date_trigger}'),
      ui.date_picker(name='date_trigger', label='Pick a date', trigger=True),
      ])
      q.client.initialized = True
      else:
      q.page['example'].items[0].text.content = f'Selected date: {q.args.date_trigger}'
      q.page['example'].items[1].date_picker.value = q.args.date_trigger
      await q.page.save()
      +
      +
      if __name__ == '__main__':
      listen('/demo', main)
      Edit this page
      + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/date-picker/index.html b/docs/docs/examples/date-picker/index.html index 85883999ba..d8e14467bb 100644 --- a/docs/docs/examples/date-picker/index.html +++ b/docs/docs/examples/date-picker/index.html @@ -4,34 +4,34 @@ -Form / Date Picker | H2O Wave +Form / Date Picker | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Date Picker

      Use date pickers to allow users to pick dates.

      from h2o_wave import Q, listen, ui
      +

      Form / Date Picker

      Use date pickers to allow users to pick dates.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'date={q.args.date}'),
      ui.text(f'date_placeholder={q.args.date_placeholder}'),
      ui.text(f'date_disabled={q.args.date_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.date_picker(name='date', label='Standard date picker', value='2017-10-19'),
      ui.date_picker(name='date_placeholder', label='Date picker with placeholder', placeholder='Pick a date'),
      ui.date_picker(name='date_disabled', label='Disabled date picker', value='2017-10-19', disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/dropdown/index.html b/docs/docs/examples/dropdown/index.html index dd7217c962..651a5b1fa8 100644 --- a/docs/docs/examples/dropdown/index.html +++ b/docs/docs/examples/dropdown/index.html @@ -4,35 +4,35 @@ -Form / Dropdown | H2O Wave +Form / Dropdown | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Dropdown

      Use dropdowns to allow users to choose between available choices.

      from h2o_wave import Q, listen, ui
      +

      Form / Dropdown

      Use dropdowns to allow users to choose between available choices.

      from h2o_wave import Q, listen, ui
      choices = [
      ui.choice('A', 'Option A'),
      ui.choice('B', 'Option B'),
      ui.choice('C', 'Option C', disabled=True),
      ui.choice('D', 'Option D'),
      ]
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'dropdown={q.args.dropdown}'),
      ui.text(f'dropdown_multi={q.args.dropdown_multi}'),
      ui.text(f'dropdown_disabled={q.args.dropdown_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.dropdown(name='dropdown', label='Pick one', value='B', required=True, choices=choices),
      ui.dropdown(name='dropdown_multi', label='Pick multiple', values=['B', 'D'], required=True,
      choices=choices),
      ui.dropdown(name='dropdown_disabled', label='Pick one (Disabled)', value='B', choices=choices,
      disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/file-upload/index.html b/docs/docs/examples/file-upload/index.html index 869e4db446..6b7223efd3 100644 --- a/docs/docs/examples/file-upload/index.html +++ b/docs/docs/examples/file-upload/index.html @@ -4,33 +4,33 @@ -Form / File Upload | H2O Wave +Form / File Upload | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / File Upload

      Use a file upload component to allow users to upload files.

      from h2o_wave import site, ui
      +

      Form / File Upload

      Use a file upload component to allow users to upload files.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 4 10',
      items=[
      ui.file_upload(name='file_upload', label='Upload!', multiple=True,
      file_extensions=['csv', 'gz'], max_file_size=10, max_size=15)
      ]
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/form-frame-path/index.html b/docs/docs/examples/form-frame-path/index.html index 988457df94..49c6c35e4d 100644 --- a/docs/docs/examples/form-frame-path/index.html +++ b/docs/docs/examples/form-frame-path/index.html @@ -4,33 +4,33 @@ -Form / Frame / Path | H2O Wave +Form / Frame / Path | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Frame / Path

      Use a frame component in a form card to display external web pages.

      from h2o_wave import site, ui
      +

      Form / Frame / Path

      Use a frame component in a form card to display external web pages.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 6 5',
      items=[
      ui.frame(path='https://example.com', height='400px')
      ]
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/form-frame/index.html b/docs/docs/examples/form-frame/index.html index fcf3d961b0..250e7363f7 100644 --- a/docs/docs/examples/form-frame/index.html +++ b/docs/docs/examples/form-frame/index.html @@ -4,34 +4,34 @@ -Form / Frame | H2O Wave +Form / Frame | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Frame

      Use a frame component in a form card to display HTML content inline.

      from h2o_wave import site, ui
      +

      Form / Frame

      Use a frame component in a form card to display HTML content inline.

      from h2o_wave import site, ui
      html = '''
      <!DOCTYPE html>
      <html>
      <body>
      <h1>Hello World!</h1>
      </body>
      </html>
      '''
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 2 2',
      items=[
      ui.frame(content=html, height='100px')
      ]
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/form-markup/index.html b/docs/docs/examples/form-markup/index.html index f70ea18978..ae6fba7b2d 100644 --- a/docs/docs/examples/form-markup/index.html +++ b/docs/docs/examples/form-markup/index.html @@ -4,33 +4,33 @@ -Form / Markup | H2O Wave +Form / Markup | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Markup

      Use a markup component to display formatted content using HTML.

      from h2o_wave import site, ui
      +

      Form / Markup

      Use a markup component to display formatted content using HTML.

      from h2o_wave import site, ui
      page = site['/demo']
      menu = '''
      <ol>
      <li>Spam</li>
      <li>Ham</li>
      <li>Eggs</li>
      </ol>
      '''
      -
      page['example'] = ui.form_card(
      box='1 1 2 2',
      items=[
      ui.markup(content=menu)
      ]
      )
      page.save()
      Edit this page
      +
      page['example'] = ui.form_card(
      box='1 1 2 2',
      items=[
      ui.markup(content=menu)
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/form-menu/index.html b/docs/docs/examples/form-menu/index.html index b3da5a01d4..14e6796d0a 100644 --- a/docs/docs/examples/form-menu/index.html +++ b/docs/docs/examples/form-menu/index.html @@ -4,21 +4,21 @@ -Form / Menu | H2O Wave +Form / Menu | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Menu

      Display context menus inside forms.

      import json
      from h2o_wave import Q, listen, ui, data
      +

      Form / Menu

      Display context menus inside forms.

      import json
      from h2o_wave import Q, listen, ui, data
      # Vega lite spec for a bar plot, defaults to linear scale.
      spec_linear_scale = json.dumps(dict(
      mark='bar',
      encoding=dict(
      x=dict(field='a', type='ordinal'),
      y=dict(field='b', type='quantitative')
      )
      ))
      # Vega lite spec for a bar plot, log scaled.
      spec_log_scale = json.dumps(dict(
      mark='bar',
      encoding=dict(
      x=dict(field='a', type='ordinal'),
      y=dict(field='b', type='quantitative', scale=dict(type='log'))
      )
      ))
      # Data for our plot.
      plot_data = data(fields=["a", "b"], rows=[
      ["A", 28], ["B", 55], ["C", 43],
      ["D", 91], ["E", 81], ["F", 53],
      ["G", 19], ["H", 87], ["I", 52]
      ], pack=True)
      @@ -27,16 +27,16 @@
      async def serve(q: Q):
      if q.client.plot_added: # Have we already added a plot?
      example = q.page['example']
      if q.args.to_log_scale:
      # Change to log scale
      example.items[0].text_l.content = 'Plot (Log Scale)'
      example.items[0].text_l.commands = [linear_scale_command]
      example.items[1].vega_visualization.specification = spec_log_scale
      else:
      # Change to linear scale
      example.items[0].text_l.content = 'Plot (Linear Scale)'
      example.items[0].text_l.commands = [log_scale_command]
      example.items[1].vega_visualization.specification = spec_linear_scale
      else: # Add a new plot
      q.page['example'] = ui.form_card(
      box='1 1 2 8',
      items=[
      ui.text_l(content='Plot (Linear Scale)', commands=[log_scale_command]),
      ui.vega_visualization(specification=spec_linear_scale, data=plot_data, height='300px'),
      ],
      )
      # Flag to indicate that we've added a plot
      q.client.plot_added = True
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/form-template/index.html b/docs/docs/examples/form-template/index.html index 5f23b0e352..49f9b4405a 100644 --- a/docs/docs/examples/form-template/index.html +++ b/docs/docs/examples/form-template/index.html @@ -4,33 +4,33 @@ -Form / Template | H2O Wave +Form / Template | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Template

      Use a template component to render dynamic content using a HTML template.

      from h2o_wave import site, pack, ui
      +

      Form / Template

      Use a template component to render dynamic content using a HTML template.

      from h2o_wave import site, pack, ui
      page = site['/demo']
      page.drop()
      menu = '''
      <ol>
      {{#each dishes}}
      <li><strong>{{name}}</strong> costs {{price}}</li>
      {{/each}}
      </ol
      '''
      -
      c = page.add('template_example', ui.form_card(
      box=f'1 1 2 2',
      items=[
      ui.template(
      content=menu,
      data=pack(dict(dishes=[
      dict(name='Spam', price='$2.00'),
      dict(name='Ham', price='$3.45'),
      dict(name='Eggs', price='$1.75'),
      ]))
      )
      ]))
      page.save()
      Edit this page
      +
      c = page.add('template_example', ui.form_card(
      box=f'1 1 2 2',
      items=[
      ui.template(
      content=menu,
      data=pack(dict(dishes=[
      dict(name='Spam', price='$2.00'),
      dict(name='Ham', price='$3.45'),
      dict(name='Eggs', price='$1.75'),
      ]))
      )
      ]))
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/form/index.html b/docs/docs/examples/form/index.html index ba7fa30020..301c876e57 100644 --- a/docs/docs/examples/form/index.html +++ b/docs/docs/examples/form/index.html @@ -4,37 +4,37 @@ -Form | H2O Wave +Form | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form

      Use a form to collect data or show textual information.

      from synth import FakeCategoricalSeries
      from h2o_wave import Q, listen, ui, pack, data
      import random
      +

      Form

      Use a form to collect data or show textual information.

      from synth import FakeCategoricalSeries
      from h2o_wave import Q, listen, ui, pack, data
      import random
      html = '''
      <ol>
      <li>Spam</li>
      <li>Ham</li>
      <li>Eggs</li>
      </ol>
      '''
      menu = '''
      <ol>
      {{#each dishes}}
      <li><strong>{{name}}</strong> costs {{price}}</li>
      {{/each}}
      </ol
      '''
      spec = '''
      {
      "description": "A simple bar plot with embedded data.",
      "mark": "bar",
      "encoding": {
      "x": {"field": "a", "type": "ordinal"},
      "y": {"field": "b", "type": "quantitative"}
      }
      }
      '''
      f = FakeCategoricalSeries()
      n = 20
      # Generate random datum between 1 and 100
      def rnd(): return random.randint(1, 100)
      async def serve(q: Q):
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl(content='Extra-large text, for headings.'),
      ui.text_l(content='Large text, for sub-headings.'),
      ui.text_m(content='Body text, for paragraphs and other content.'),
      ui.text_s(content='Small text, for small print.'),
      ui.text_xs(content='Extra-small text, for really small print.'),
      ui.separator(label='A separator sections forms'),
      ui.progress(label='A progress bar'),
      ui.progress(label='A progress bar'),
      ui.message_bar(type='success', text='Message bar'),
      ui.textbox(name='textbox', label='Textbox'),
      ui.label(label='Checkboxes'),
      ui.checkbox(name='checkbox1', label='A checkbox'),
      ui.checkbox(name='checkbox1', label='Another checkbox'),
      ui.checkbox(name='checkbox1', label='Yet another checkbox'),
      ui.toggle(name='toggle', label='Toggle'),
      ui.choice_group(name='choice_group', label='Choice group', choices=[
      ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
      ]),
      ui.checklist(name='checklist', label='Checklist', choices=[
      ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
      ]),
      ui.dropdown(name='dropdown', label='Dropdown', choices=[
      ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
      ]),
      ui.dropdown(name='dropdown', label='Multi-valued Dropdown', values=[], choices=[
      ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
      ]),
      ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']),
      ui.slider(name='slider', label='Slider'),
      ui.range_slider(name='range_slider', label='Range slider', max=99),
      ui.spinbox(name='spinbox', label='Spinbox'),
      ui.date_picker(name='date_picker', label='Date picker'),
      ui.color_picker(name='color_picker', label='Color picker'),
      ui.buttons([
      ui.button(name='primary_button', label='Primary', primary=True),
      ui.button(name='standard_button', label='Standard'),
      ui.button(name='standard_disabled_button', label='Standard', disabled=True),
      ]),
      ui.file_upload(name='file_upload', label='File upload'),
      ui.table(name='table', columns=[
      ui.table_column(name='col1', label='Column 1'),
      ui.table_column(name='col2', label='Column 2'),
      ], rows=[
      ui.table_row(name='row1', cells=['Text A', 'Text B']),
      ui.table_row(name='row2', cells=['Text C', 'Text D']),
      ui.table_row(name='row3', cells=['Text E', 'Text F']),
      ]),
      ui.link(label='Link'),
      ui.tabs(name='tabs', items=[
      ui.tab(name='email', label='Mail', icon='Mail'),
      ui.tab(name='events', label='Events', icon='Calendar'),
      ui.tab(name='spam', label='Spam'),
      ]),
      ui.expander(name='expander', label='Expander'),
      ui.frame(path='https://example.com'),
      ui.markup(content=html),
      ui.template(
      content=menu,
      data=pack(dict(dishes=[
      dict(name='Spam', price='$2.00'),
      dict(name='Ham', price='$3.45'),
      dict(name='Eggs', price='$1.75'),
      ]))
      ),
      ui.picker(name='picker', label='Picker', choices=[
      ui.choice('choice1', label='Choice 1'),
      ui.choice('choice2', label='Choice 2'),
      ui.choice('choice3', label='Choice 3'),
      ]),
      ui.stepper(name='stepper', items=[
      ui.step(label='Step 1', icon='MailLowImportance'),
      ui.step(label='Step 2', icon='TaskManagerMirrored'),
      ui.step(label='Step 3', icon='Cafe'),
      ]),
      ui.visualization(
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
      data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
      ),
      ui.vega_visualization(
      specification=spec,
      data=data(fields=["a", "b"], rows=[
      ["A", rnd()], ["B", rnd()], ["C", rnd()],
      ["D", rnd()], ["E", rnd()], ["F", rnd()],
      ["G", rnd()], ["H", rnd()], ["I", rnd()]
      ], pack=True),
      ),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/frame-path/index.html b/docs/docs/examples/frame-path/index.html index 634a143ea8..101f6a6857 100644 --- a/docs/docs/examples/frame-path/index.html +++ b/docs/docs/examples/frame-path/index.html @@ -4,33 +4,33 @@ -Frame / Path | H2O Wave +Frame / Path | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Frame / Path

      Use a frame card to display external web pages.

      from h2o_wave import site, ui
      +

      Frame / Path

      Use a frame card to display external web pages.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.frame_card(
      box='1 1 6 5',
      title='Example',
      path='https://example.com',
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/frame/index.html b/docs/docs/examples/frame/index.html index 7a7609caf9..a528423025 100644 --- a/docs/docs/examples/frame/index.html +++ b/docs/docs/examples/frame/index.html @@ -4,34 +4,34 @@ -Frame | H2O Wave +Frame | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Frame

      Use a frame card to display HTML content.

      from h2o_wave import site, ui
      +

      Frame

      Use a frame card to display HTML content.

      from h2o_wave import site, ui
      html = '''
      <!DOCTYPE html>
      <html>
      <body>
      <h1>Hello World!</h1>
      </body>
      </html>
      '''
      page = site['/demo']
      page['example'] = ui.frame_card(
      box='1 1 2 2',
      title='Example',
      content=html,
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/glider-gun/index.html b/docs/docs/examples/glider-gun/index.html index ab16a9ca05..4dd187863c 100644 --- a/docs/docs/examples/glider-gun/index.html +++ b/docs/docs/examples/glider-gun/index.html @@ -4,21 +4,21 @@ -Graphics / Glider Gun | H2O Wave +Graphics / Glider Gun | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Graphics / Glider Gun

      Use the graphics API to play Conway's Game of Life - Gosper's Glider Gun +

      Graphics / Glider Gun

      Use the graphics API to play Conway's Game of Life - Gosper's Glider Gun https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life

      import time
      from copy import deepcopy
      from h2o_wave import site, ui, graphics as g
      def get_neighbors(row, col):
      neighbors = [
      (r, c) for r in range(row - 1, row + 2) for c in range(col - 1, col + 2)
      ]
      neighbors.remove((row, col))
      return neighbors
      @@ -50,16 +50,16 @@
      def make_glider_gun(r, c):
      return [
      (r, c + 24),
      (r + 1, c + 22),
      (r + 1, c + 24),
      (r + 2, c + 12),
      (r + 2, c + 13),
      (r + 2, c + 20),
      (r + 2, c + 21),
      (r + 2, c + 34),
      (r + 2, c + 35),
      (r + 3, c + 11),
      (r + 3, c + 15),
      (r + 3, c + 20),
      (r + 3, c + 21),
      (r + 3, c + 34),
      (r + 3, c + 35),
      (r + 4, c + 0),
      (r + 4, c + 1),
      (r + 4, c + 10),
      (r + 4, c + 16),
      (r + 4, c + 20),
      (r + 4, c + 21),
      (r + 5, c + 0),
      (r + 5, c + 1),
      (r + 5, c + 10),
      (r + 5, c + 14),
      (r + 5, c + 16),
      (r + 5, c + 17),
      (r + 5, c + 22),
      (r + 5, c + 24),
      (r + 6, c + 10),
      (r + 6, c + 16),
      (r + 6, c + 24),
      (r + 7, c + 11),
      (r + 7, c + 15),
      (r + 8, c + 12),
      (r + 8, c + 13),
      ]
      -
      render(make_glider_gun(2, 2))
      Edit this page
      +
      render(make_glider_gun(2, 2))
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/graphics-clock/index.html b/docs/docs/examples/graphics-clock/index.html index 29c2394035..d1c5d2ad0f 100644 --- a/docs/docs/examples/graphics-clock/index.html +++ b/docs/docs/examples/graphics-clock/index.html @@ -4,37 +4,37 @@ -Graphics / Clock | H2O Wave +Graphics / Clock | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Graphics / Clock

      Use the graphics API to make a clock. +

      Graphics / Clock

      Use the graphics API to make a clock. Source: https://codepen.io/dudleystorey/pen/HLBki

      import time
      import datetime
      from h2o_wave import site, ui, graphics as g
      page = site['/demo']
      page['example'] = ui.graphics_card(
      box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',
      stage=g.stage(
      face=g.circle(cx='50', cy='50', r='45', fill='#111', stroke_width='2px', stroke='#f55'),
      ),
      scene=g.scene(
      hour=g.rect(x='47.5', y='12.5', width='5', height='40', rx='2.5', fill='#333', stroke='#555'),
      min=g.rect(x='48.5', y='12.5', width='3', height='40', rx='2', fill='#333', stroke='#555'),
      sec=g.line(x1='50', y1='50', x2='50', y2='16', stroke='#f55', stroke_width='1px'),
      ),
      )
      page.save()
      def rotate(deg): return f'rotate({deg} 50 50)'
      -
      scene = page['example'].scene
      while True:
      time.sleep(1)
      now = datetime.datetime.now()
      g.draw(scene.hour, transform=rotate(30 * (now.hour % 12) + now.minute / 2))
      g.draw(scene.min, transform=rotate(6 * now.minute))
      g.draw(scene.sec, transform=rotate(6 * now.second))
      page.save()
      Edit this page
      +
      scene = page['example'].scene
      while True:
      time.sleep(1)
      now = datetime.datetime.now()
      g.draw(scene.hour, transform=rotate(30 * (now.hour % 12) + now.minute / 2))
      g.draw(scene.min, transform=rotate(6 * now.minute))
      g.draw(scene.sec, transform=rotate(6 * now.second))
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/graphics-hilbert/index.html b/docs/docs/examples/graphics-hilbert/index.html index 9401779fe3..475d6a57bf 100644 --- a/docs/docs/examples/graphics-hilbert/index.html +++ b/docs/docs/examples/graphics-hilbert/index.html @@ -4,21 +4,21 @@ -Graphics / Hilbert | H2O Wave +Graphics / Hilbert | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Graphics / Hilbert

      Use turtle graphics recursively to draw Hilbert curves.

      from h2o_wave import ui, listen, Q, graphics as g
      +

      Graphics / Hilbert

      Use turtle graphics recursively to draw Hilbert curves.

      from h2o_wave import ui, listen, Q, graphics as g
      def hilbert(t: g.Turtle, width: float, depth: int, reverse=False): # recursive
      angle = -90 if reverse else 90
      if depth == 0:
      t.f(width).r(angle).f(width).r(angle).f(width)
      return
      @@ -31,16 +31,16 @@
      if not q.client.initialized:
      q.page['curve'] = ui.graphics_card(
      box='1 1 4 6', view_box='0 0 300 300', width='100%', height='100%',
      scene=g.scene(
      hilbert_curve=g.path(d=hilbert_curve, fill='none', stroke='#333')
      ),
      )
      q.page['form'] = ui.form_card(
      box='1 7 4 1', items=[
      ui.slider(name='depth', label='Play with this Hilbert curve!', min=1, max=6, value=5, trigger=True),
      ],
      )
      q.client.initialized = True
      else:
      g.draw(q.page['curve'].scene.hilbert_curve, d=hilbert_curve)
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/graphics-path/index.html b/docs/docs/examples/graphics-path/index.html index 7bf4c85303..09f988fe80 100644 --- a/docs/docs/examples/graphics-path/index.html +++ b/docs/docs/examples/graphics-path/index.html @@ -4,33 +4,33 @@ -Graphics / Path | H2O Wave +Graphics / Path | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Graphics / Path

      Use the graphics API to draw a red square.

      from h2o_wave import site, ui, graphics as g
      +

      Graphics / Path

      Use the graphics API to draw a red square.

      from h2o_wave import site, ui, graphics as g
      # Use relative coords to draw a square, sort of like Python's turtle package.
      red_square = g.p().m(25, 25).h(50).v(50).h(-50).z().path(fill='red')
      page = site['/demo']
      page['example'] = ui.graphics_card(
      box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',
      scene=g.scene(foo=red_square),
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/graphics-primitives/index.html b/docs/docs/examples/graphics-primitives/index.html index fb36896619..cfdc592794 100644 --- a/docs/docs/examples/graphics-primitives/index.html +++ b/docs/docs/examples/graphics-primitives/index.html @@ -4,36 +4,36 @@ -Graphics / Primitives | H2O Wave +Graphics / Primitives | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Graphics / Primitives

      Use the graphics module to render and update shapes.

      from h2o_wave import site, ui, graphics as g
      +

      Graphics / Primitives

      Use the graphics module to render and update shapes.

      from h2o_wave import site, ui, graphics as g
      # Create some shapes
      arc = g.arc(r1=25, r2=50, a1=90, a2=180)
      circle = g.circle(cx=25, cy=25, r=25)
      ellipse = g.ellipse(cx=25, cy=25, rx=25, ry=20)
      image = g.image(width=50, height=50, href='https://www.python.org/static/community_logos/python-powered-h-140x182.png')
      line = g.line(x1=0, y1=0, x2=50, y2=50)
      path = g.path(d='M 0,0 L 50,50 L 50,0 L 0,50 z')
      path2 = g.path(d=g.p().M(0, 0).L(50, 50).L(50, 0).L(0, 50).z().d()) # same effect as above, but programmable.
      path3 = g.p().M(0, 0).L(50, 50).L(50, 0).L(0, 50).z().path() # same effect as above, but a tad more concise.
      polygon = g.polygon(points='0,0 50,50 50,0 0,50')
      polyline = g.polyline(points='0,0 50,50 50,0 0,50')
      rect = g.rect(x=0, y=0, width=50, height=50)
      rounded_rect = g.rect(x=0, y=0, width=50, height=50, rx=10)
      text = g.text(x=0, y=48, text='Z', font_size='4em')
      # Collect 'em all
      shapes = [arc, circle, ellipse, image, line, path, path2, path3, polygon, polyline, rect, rounded_rect, text]
      # Apply fill/stroke for each shape
      for shape in shapes:
      shape.fill = 'none' if g.type_of(shape) == 'polyline' else 'crimson'
      shape.stroke = 'darkred'
      shape.stroke_width = 5
      # Lay out shapes vertically
      y = 10
      for shape in shapes:
      shape.transform = f'translate(10,{y})'
      y += 60
      # Add shapes to the graphics card
      page = site['/demo']
      page['example'] = ui.graphics_card(
      box='1 1 1 10', view_box='0 0 70 800', width='100%', height='100%',
      stage=g.stage(
      arc=arc,
      circle=circle,
      ellipse=ellipse,
      image=image,
      line=line,
      path=path,
      path2=path2,
      path3=path3,
      polygon=polygon,
      polyline=polyline,
      rect=rect,
      rounded_rect=rounded_rect,
      text=text,
      ),
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/graphics-spline/index.html b/docs/docs/examples/graphics-spline/index.html index 80d682df11..e18dcfd2b1 100644 --- a/docs/docs/examples/graphics-spline/index.html +++ b/docs/docs/examples/graphics-spline/index.html @@ -4,35 +4,35 @@ -Graphics / Spline | H2O Wave +Graphics / Spline | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Graphics / Spline

      Use the graphics module to render splines.

      import random
      from h2o_wave import site, ui, graphics as g
      +

      Graphics / Spline

      Use the graphics module to render splines.

      import random
      from h2o_wave import site, ui, graphics as g
      x = [i * 20 for i in range(50)]
      y = [
      88, 100, 116, 128, 126, 128, 118, 108, 121, 120, 99, 113, 117, 103, 98, 90, 104, 98, 82, 102, 104, 89, 87, 69,
      88, 97, 91, 105, 98, 86, 90, 107, 97, 107, 108, 128, 144, 148, 126, 106, 89, 99, 78, 70, 69, 64, 45, 29, 27, 38
      ]
      y0 = [v - random.randint(5, min(y)) for v in y]
      line_style = dict(fill='none', stroke='crimson', stroke_width=4)
      area_style = dict(fill='crimson')
      splines = [
      # Lines
      g.spline(x=x, y=y, **line_style), # same as curve='linear'
      g.spline(x=x, y=y, curve='basis', **line_style),
      g.spline(x=x, y=y, curve='basis-closed', **line_style),
      g.spline(x=x, y=y, curve='basis-open', **line_style),
      g.spline(x=x, y=y, curve='cardinal', **line_style),
      g.spline(x=x, y=y, curve='cardinal-closed', **line_style),
      g.spline(x=x, y=y, curve='cardinal-open', **line_style),
      g.spline(x=x, y=y, curve='smooth', **line_style),
      g.spline(x=x, y=y, curve='smooth-closed', **line_style),
      g.spline(x=x, y=y, curve='smooth-open', **line_style),
      g.spline(x=x, y=y, curve='linear', **line_style),
      g.spline(x=x, y=y, curve='linear-closed', **line_style),
      g.spline(x=x, y=y, curve='monotone-x', **line_style),
      g.spline(x=x, y=y, curve='monotone-y', **line_style),
      g.spline(x=x, y=y, curve='natural', **line_style),
      g.spline(x=x, y=y, curve='step', **line_style),
      g.spline(x=x, y=y, curve='step-after', **line_style),
      g.spline(x=x, y=y, curve='step-before', **line_style),
      # Areas
      g.spline(x=x, y=y, y0=y0, **area_style), # same as curve='linear'
      g.spline(x=x, y=y, y0=y0, curve='basis', **area_style),
      g.spline(x=x, y=y, y0=[], curve='basis', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='basis-open', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='cardinal', **area_style),
      g.spline(x=x, y=y, y0=[], curve='cardinal', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='cardinal-open', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='smooth', **area_style),
      g.spline(x=x, y=y, y0=[], curve='smooth', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='smooth-open', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='linear', **area_style),
      g.spline(x=x, y=y, y0=[], curve='linear', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='monotone-x', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='monotone-y', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='natural', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='step', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='step-after', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='step-before', **area_style),
      ]
      page = site['/demo']
      row, col = 1, 1
      for spline in splines:
      page[f'spline_{col}_{row}'] = ui.graphics_card(
      box=f'{col} {row} 3 1', view_box='0 0 1000 150', width='100%', height='100%',
      stage=g.stage(
      text=g.text(text=spline.curve or '', y=40, font_size=40),
      spline=spline,
      ),
      )
      col += 3
      if col > 11:
      row, col = row + 1, 1
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/graphics-turtle/index.html b/docs/docs/examples/graphics-turtle/index.html index 9507a8d47b..10da5a9b09 100644 --- a/docs/docs/examples/graphics-turtle/index.html +++ b/docs/docs/examples/graphics-turtle/index.html @@ -4,34 +4,34 @@ -Graphics / Turtle | H2O Wave +Graphics / Turtle | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Graphics / Turtle

      Use turtle graphics to draw paths. +

      Graphics / Turtle

      Use turtle graphics to draw paths. Original example: https://docs.python.org/3/library/turtle.html

      from h2o_wave import site, ui, graphics as g
      t = g.turtle().f(100).r(90).pd()
      for _ in range(36):
      t.f(200).l(170)
      spirograph = t.pu(1).path(stroke='red', fill='yellow')
      page = site['/demo']
      page['example'] = ui.graphics_card(
      box='1 1 2 3', view_box='0 0 220 220', width='100%', height='100%',
      scene=g.scene(foo=spirograph),
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/hash-routing/index.html b/docs/docs/examples/hash-routing/index.html index 6ee9cc7fb8..5e60971c32 100644 --- a/docs/docs/examples/hash-routing/index.html +++ b/docs/docs/examples/hash-routing/index.html @@ -4,34 +4,34 @@ -Routing | H2O Wave +Routing | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Routing

      Use the browser's location hash for routing using URLs.

      The location hash can be accessed using q.args['#'].

      from h2o_wave import Q, listen, ui
      +

      Routing

      Use the browser's location hash for routing using URLs.

      The location hash can be accessed using q.args['#'].

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      hash = q.args['#']
      if hash:
      blurb = q.page['blurb']
      if hash == 'menu/spam':
      blurb.content = "Sorry, we're out of spam!"
      elif hash == 'menu/ham':
      blurb.content = "Sorry, we're out of ham!"
      elif hash == 'menu/eggs':
      blurb.content = "Sorry, we're out of eggs!"
      elif hash == 'about':
      blurb.content = 'Everything here is gluten-free!'
      else:
      q.page['nav'] = ui.markdown_card(
      box='1 1 4 1',
      title='Links!',
      content='[Spam](#menu/spam) | [Ham](#menu/ham) | [Eggs](#menu/eggs) | [About](#about)',
      )
      q.page['blurb'] = ui.markdown_card(
      box='1 2 4 2',
      title='Store',
      content='Welcome to our store!',
      )
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/header/index.html b/docs/docs/examples/header/index.html index a0fb4e66a3..970aeb0431 100644 --- a/docs/docs/examples/header/index.html +++ b/docs/docs/examples/header/index.html @@ -4,31 +4,31 @@ -Header | H2O Wave +Header | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Header

      Use a header card to display a page header.

      from h2o_wave import site, ui
      -
      page = site['/demo']
      page['header1'] = ui.header_card(
      box='1 1 3 1',
      title='The Amazing Gonkulator',
      subtitle='And now for something completely different!',
      )
      page['header2'] = ui.header_card(
      box='1 2 3 1',
      title='The Amazing Gonkulator',
      subtitle='And now for something completely different!',
      icon='Design',
      )
      page['header3'] = ui.header_card(
      box='1 3 3 1',
      title='The Amazing Gonkulator',
      subtitle='And now for something completely different!',
      icon='Cycling',
      icon_color='$violet',
      )
      page['header4'] = ui.header_card(
      box='1 4 3 1',
      title='The Amazing Gonkulator',
      subtitle='And now for something completely different!',
      icon='ExploreData',
      icon_color='$red',
      )
      page.save()
      Edit this page
      +

      Header

      Use a header card to display a page header.

      from h2o_wave import site, ui
      +
      page = site['/demo']
      page['header1'] = ui.header_card(
      box='1 1 3 1',
      title='The Amazing Gonkulator',
      subtitle='And now for something completely different!',
      )
      page['header2'] = ui.header_card(
      box='1 2 3 1',
      title='The Amazing Gonkulator',
      subtitle='And now for something completely different!',
      icon='Design',
      )
      page['header3'] = ui.header_card(
      box='1 3 3 1',
      title='The Amazing Gonkulator',
      subtitle='And now for something completely different!',
      icon='Cycling',
      icon_color='$violet',
      )
      page['header4'] = ui.header_card(
      box='1 4 3 1',
      title='The Amazing Gonkulator',
      subtitle='And now for something completely different!',
      icon='ExploreData',
      icon_color='$red',
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/hello-world/index.html b/docs/docs/examples/hello-world/index.html index 4cd35faaed..f59cbc9901 100644 --- a/docs/docs/examples/hello-world/index.html +++ b/docs/docs/examples/hello-world/index.html @@ -4,33 +4,33 @@ -Hello World! | H2O Wave +Hello World! | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Hello World!

      A simple example to get you started with Q.

      # Import `Site` and the `ui` module from the `h2o_wave` package
      from h2o_wave import site, ui
      +

      Hello World!

      A simple example to get you started with Q.

      # Import `Site` and the `ui` module from the `h2o_wave` package
      from h2o_wave import site, ui
      # Get the web page at route '/demo'.
      # If you're running this example on your local machine,
      # this page will refer to http://localhost:55555/demo.
      page = site['/demo']
      # Add a Markdown card named `hello` to the page.
      page['hello'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World!',
      content='And now for something completely different!',
      )
      -
      # Finally, sync the page to send our changes to the server.
      page.save()
      Edit this page
      +
      # Finally, sync the page to send our changes to the server.
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/image/index.html b/docs/docs/examples/image/index.html index 5c80841984..6e0ef768c1 100644 --- a/docs/docs/examples/image/index.html +++ b/docs/docs/examples/image/index.html @@ -4,34 +4,34 @@ -Image | H2O Wave +Image | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Image

      Use an image card to display a base64-encoded image.

      from h2o_wave import site, ui
      import io
      import base64
      import numpy as np
      import matplotlib.pyplot as plt
      +

      Image

      Use an image card to display a base64-encoded image.

      from h2o_wave import site, ui
      import io
      import base64
      import numpy as np
      import matplotlib.pyplot as plt
      np.random.seed(19680801)
      n = 25
      plt.figure(figsize=(3, 3))
      plt.scatter(
      np.random.rand(n), np.random.rand(n),
      s=(30 * np.random.rand(n)) ** 2,
      c=np.random.rand(n),
      alpha=0.5,
      )
      buf = io.BytesIO()
      plt.savefig(buf, format='png')
      buf.seek(0)
      image = base64.b64encode(buf.read()).decode('utf-8')
      -
      page = site['/demo']
      page['example'] = ui.image_card(
      box='1 1 3 5',
      title='An image',
      type='png',
      image=image,
      )
      page.save()
      Edit this page
      +
      page = site['/demo']
      page['example'] = ui.image_card(
      box='1 1 3 5',
      title='An image',
      type='png',
      image=image,
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/index.html b/docs/docs/examples/index.html index 85a6530b30..ba36fbe0e6 100644 --- a/docs/docs/examples/index.html +++ b/docs/docs/examples/index.html @@ -4,30 +4,30 @@ -Gallery | H2O Wave +Gallery | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Gallery

      Hello World!
      To-do List App
      Wizard
      Issue Tracker
      Dashboard
      Stat / Small
      Stat / Large
      Stat / Gauge / Wide
      Stat / Gauge / Tall
      Stat / Bar / Wide
      Stat / Bar / Large
      Stat / Series / Small / Area
      Stat / Series / Small / Interval
      Stat / Series / Wide / Area
      Stat / Series / Wide / Interval
      Stat / Series / Tall / Area
      Stat / Series / Tall / Interval
      Layout / Position
      Layout / Size
      Form
      Form / Text
      Form / Text / Sizes
      Form / Label
      Form / Link
      Form / Progress
      Form / Progress / Updating
      Form / Message Bar
      Form / Textbox
      Form / Textbox / Trigger
      Form / Button
      Form / Buttons
      Form / Checkbox
      Form / Checklist
      Form / Picker
      Form / Picker / Selection
      Form / Dropdown
      Form / Choice Group
      Form / Combobox
      Form / Toggle
      Form / Spinbox
      Form / Slider
      Form / Range Slider
      Form / Date Picker
      Form / Color Picker
      Form / Swatch Picker
      Form / Tabs
      Form / Separator
      Form / File Upload
      Form / Frame
      Form / Frame / Path
      Form / Menu
      Form / Template
      Form / Markup
      Stepper
      Table / Markdown
      Table
      Table / Sort
      Table / Search
      Table / Filter
      Table / Filter / Backend
      Table / Download
      Table / Group by
      Image
      Frame
      Frame / Path
      Template
      Template / Data
      Markdown
      Markdown / Data
      Markup
      Nav
      Toolbar
      Tab
      Tab / Links
      Tabs / Navigation
      Breadcrumbs
      Header
      Routing
      Routing / Toolbar
      Routing / Tabs
      Context Menu
      Plot / Point
      Plot / Point / Shapes
      Plot / Point / Sizes
      Plot / Point / Map
      Plot / Point / Groups
      Plot / Point / Annotation
      Plot / Point / Custom
      Plot / Interval
      Plot / Interval / Transpose
      Plot / Interval / Groups
      Plot / Interval / Groups / Transpose
      Plot / Interval / Labels
      Plot / Interval / Range
      Plot / Interval / Range / Transpose
      Plot / Interval / Stacked
      Plot / Interval / Stacked / Transpose
      Plot / Interval / Stacked / Grouped
      Plot / Interval / Stacked / Grouped / Transpose
      Plot / Interval / Polar
      Plot / Interval / Polar / Stacked
      Plot / Interval / Theta
      Plot / Interval / Helix
      Plot / Interval / Annotation
      Plot / Interval / Annotation / Transpose
      Plot / Line
      Plot / Line / Groups
      Plot / Line / Smooth
      Plot / Line / Step
      Plot / Line / Step / After
      Plot / Line / Step / Before
      Plot / Line / Labels
      Plot / Line / Labels/ Stroked
      Plot / Line / Labels / Occlusion
      Plot / Line / Annotation
      Plot / Path
      Plot / Path / Point
      Plot / Path / Smooth
      Plot / Area
      Plot / Area / Groups
      Plot / Area / Negative
      Plot / Area / Range
      Plot / Area / Smooth
      Plot / Area / Stacked
      Plot / Area + Line
      Plot / Area + Line / Smooth
      Plot / Area + Line / Groups
      Plot / Polygon
      Plot / Histogram
      Plot / Axis Titles
      Plot / Form
      Plot / Vega-lite
      Plot / Vega-lite / Update
      Plot / Vega-lite / Form
      Plot / Altair
      Plot / Bokeh
      Plot / Matplotlib
      Plot / Plotly
      Plot / D3.js
      Pixel Art
      Uploads
      Uploads / Async
      Uploads / UI
      Uploads / Download
      Meta / Title
      Meta / Notification
      Meta / Refresh
      Meta / Redirect
      Mode / Broadcast / Global
      Mode / Broadcast
      Mode / Multicast
      Mode / Unicast
      Graphics / Primitives
      Graphics / Spline
      Graphics / Clock
      Graphics / Path
      Graphics / Turtle
      Graphics / Hilbert
      Graphics / Glider Gun
      Edit this page
      +

      Gallery

      Hello World!
      To-do List App
      Wizard
      Issue Tracker
      Dashboard
      Stat / Small
      Stat / Large
      Stat / Gauge / Wide
      Stat / Gauge / Tall
      Stat / Bar / Wide
      Stat / Bar / Large
      Stat / Series / Small / Area
      Stat / Series / Small / Interval
      Stat / Series / Wide / Area
      Stat / Series / Wide / Interval
      Stat / Series / Tall / Area
      Stat / Series / Tall / Interval
      Layout / Position
      Layout / Size
      Form
      Form / Text
      Form / Text / Sizes
      Form / Label
      Form / Link
      Form / Progress
      Form / Progress / Updating
      Form / Message Bar
      Form / Textbox
      Form / Textbox / Trigger
      Form / Button
      Form / Buttons
      Form / Checkbox
      Form / Checklist
      Form / Picker
      Form / Picker / Selection
      Form / Dropdown
      Form / Choice Group
      Form / Combobox
      Form / Toggle
      Form / Spinbox
      Form / Slider
      Form / Range Slider
      Form / Date Picker
      Form / Date Picker / Trigger
      Form / Color Picker
      Form / Swatch Picker
      Form / Tabs
      Form / Separator
      Form / File Upload
      Form / Frame
      Form / Frame / Path
      Form / Menu
      Form / Template
      Form / Markup
      Stepper
      Table / Markdown
      Table
      Table / Sort
      Table / Search
      Table / Filter
      Table / Filter / Backend
      Table / Download
      Table / Group by
      Table / Preselection
      Image
      Frame
      Frame / Path
      Template
      Template / Data
      Markdown
      Markdown / Data
      Markup
      Nav
      Toolbar
      Tab
      Tab / Links
      Tabs / Navigation
      Breadcrumbs
      Header
      Routing
      Routing / Toolbar
      Routing / Tabs
      Context Menu
      Plot / Point
      Plot / Point / Shapes
      Plot / Point / Sizes
      Plot / Point / Map
      Plot / Point / Groups
      Plot / Point / Annotation
      Plot / Point / Custom
      Plot / Interval
      Plot / Interval / Transpose
      Plot / Interval / Groups
      Plot / Interval / Groups / Transpose
      Plot / Interval / Labels
      Plot / Interval / Range
      Plot / Interval / Range / Transpose
      Plot / Interval / Stacked
      Plot / Interval / Stacked / Transpose
      Plot / Interval / Stacked / Grouped
      Plot / Interval / Stacked / Grouped / Transpose
      Plot / Interval / Polar
      Plot / Interval / Polar / Stacked
      Plot / Interval / Theta
      Plot / Interval / Helix
      Plot / Interval / Annotation
      Plot / Interval / Annotation / Transpose
      Plot / Line
      Plot / Line / Groups
      Plot / Line / Smooth
      Plot / Line / Step
      Plot / Line / Step / After
      Plot / Line / Step / Before
      Plot / Line / Labels
      Plot / Line / Labels/ Stroked
      Plot / Line / Labels / Occlusion
      Plot / Line / Annotation
      Plot / Path
      Plot / Path / Point
      Plot / Path / Smooth
      Plot / Area
      Plot / Area / Groups
      Plot / Area / Negative
      Plot / Area / Range
      Plot / Area / Smooth
      Plot / Area / Stacked
      Plot / Area + Line
      Plot / Area + Line / Smooth
      Plot / Area + Line / Groups
      Plot / Polygon
      Plot / Histogram
      Plot / Axis Titles
      Plot / Form
      Plot / Vega-lite
      Plot / Vega-lite / Update
      Plot / Vega-lite / Form
      Plot / Altair
      Plot / Bokeh
      Plot / Matplotlib
      Plot / Plotly
      Plot / D3.js
      Pixel Art
      Uploads
      Uploads / Async
      Uploads / UI
      Uploads / Download
      Meta / Title
      Meta / Notification
      Meta / Refresh
      Meta / Redirect
      Mode / Broadcast / Global
      Mode / Broadcast
      Mode / Multicast
      Mode / Unicast
      Graphics / Primitives
      Graphics / Spline
      Graphics / Clock
      Graphics / Path
      Graphics / Turtle
      Graphics / Hilbert
      Graphics / Glider Gun
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/issue-tracker/index.html b/docs/docs/examples/issue-tracker/index.html index 51eabd8cf2..a4bb19d263 100644 --- a/docs/docs/examples/issue-tracker/index.html +++ b/docs/docs/examples/issue-tracker/index.html @@ -4,21 +4,21 @@ -Issue Tracker | H2O Wave +Issue Tracker | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Issue Tracker

      Implement a simple issue tracker using a table to create master-detail views.

      from h2o_wave import Q, listen, ui
      from faker import Faker
      +

      Issue Tracker

      Implement a simple issue tracker using a table to create master-detail views.

      from h2o_wave import Q, listen, ui
      from faker import Faker
      fake = Faker()
      _id = 0
      @@ -49,16 +49,16 @@
      async def serve(q: Q):
      if q.args.edit_multiple:
      await edit_multiple(q)
      elif q.args.reopen_issues:
      await reopen_issues(q)
      elif q.args.close_issues:
      await close_issues(q)
      elif q.args.reopen_issue:
      await reopen_issue(q)
      elif q.args.close_issue:
      await close_issue(q)
      elif q.args.issues: # An issue was clicked on
      await show_issue(q, q.args.issues[0])
      else:
      await show_issues(q)
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/label/index.html b/docs/docs/examples/label/index.html index 434977543b..404042bac5 100644 --- a/docs/docs/examples/label/index.html +++ b/docs/docs/examples/label/index.html @@ -4,32 +4,32 @@ -Form / Label | H2O Wave +Form / Label | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Label

      Use labels to give a name to a component or a group of components in a form.

      from h2o_wave import site, ui
      +

      Form / Label

      Use labels to give a name to a component or a group of components in a form.

      from h2o_wave import site, ui
      page = site['/demo']
      -
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.label(label='Standard Label'),
      ui.label(label='Required Label', required=True),
      ui.label(label='Disabled Label', disabled=True),
      ]
      )
      page.save()
      Edit this page
      +
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.label(label='Standard Label'),
      ui.label(label='Required Label', required=True),
      ui.label(label='Disabled Label', disabled=True),
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/layout-size/index.html b/docs/docs/examples/layout-size/index.html index 636d1618a8..5f355fe7d7 100644 --- a/docs/docs/examples/layout-size/index.html +++ b/docs/docs/examples/layout-size/index.html @@ -4,36 +4,36 @@ -Layout / Size | H2O Wave +Layout / Size | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Layout / Size

      How to adjust the size of cards on a page.

      from h2o_wave import site, ui
      +

      Layout / Size

      How to adjust the size of cards on a page.

      from h2o_wave import site, ui
      # Every page has a grid system in place.
      # The grid has 12 columns and 10 rows.
      # A column is 134 pixels wide.
      # A row is 76 pixels high.
      # The gap between rows and columns is set to 15 pixels.
      # Cards have a `box` attribute that specifies its column, row, width and height.
      # box = 'column row width height'
      # They indicate the 1-based column/row to position the top-left corner of the card.
      # In this example, we place multiple cards on a page to demonstrate their `box` values.
      page = site['/demo']
      boxes = [
      '1 1 1 1',
      '2 1 2 1',
      '4 1 3 1',
      '7 1 4 1',
      '11 1 2 2',
      '1 2 1 9',
      '2 2 1 4',
      '3 2 1 2',
      '2 6 1 5',
      '3 4 1 7',
      '4 2 7 9',
      '11 9 2 2',
      '11 3 2 6',
      ]
      for box in boxes:
      page[f'card_{box.replace(" ", "_")}'] = ui.markdown_card(box=box, title=box, content='')
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/layout/index.html b/docs/docs/examples/layout/index.html index b6f57e54ab..b743a621b1 100644 --- a/docs/docs/examples/layout/index.html +++ b/docs/docs/examples/layout/index.html @@ -4,36 +4,36 @@ -Layout / Position | H2O Wave +Layout / Position | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Layout / Position

      How to adjust the position of cards on a page.

      from h2o_wave import site, ui
      +

      Layout / Position

      How to adjust the position of cards on a page.

      from h2o_wave import site, ui
      # Every page has a grid system in place.
      # The grid has 12 columns and 10 rows.
      # A column is 134 pixels wide.
      # A row is 76 pixels high.
      # The gap between rows and columns is set to 15 pixels.
      # Cards have a `box` attribute that specifies its column, row, width and height.
      # box = 'column row width height'
      # They indicate the 1-based column/row to position the top-left corner of the card.
      # In this example, we place a 1x1 card in each column/row on a page
      # to demonstrate their column/row values.
      page = site['/demo']
      columns = 12
      rows = 10
      for column in range(1, columns + 1):
      for row in range(1, rows + 1):
      box = f'{column} {row} 1 1'
      page[f'card_{column}_{row}'] = ui.markdown_card(box=box, title=box, content='')
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/link/index.html b/docs/docs/examples/link/index.html index e8d1d88203..ad6ea45383 100644 --- a/docs/docs/examples/link/index.html +++ b/docs/docs/examples/link/index.html @@ -4,32 +4,32 @@ -Form / Link | H2O Wave +Form / Link | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Link

      Use links to allow navigation to internal and external URLs.

      from h2o_wave import site, ui
      +

      Form / Link

      Use links to allow navigation to internal and external URLs.

      from h2o_wave import site, ui
      page = site['/demo']
      -
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.link(label='Internal link', path='/starred'),
      ui.link(label='Internal link, disabled', path='/starred', disabled=True),
      ui.link(label='External link', path='https://h2o.ai'),
      ui.link(label='External link, disabled', path='https://h2o.ai', disabled=True),
      ]
      )
      page.save()
      Edit this page
      +
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.link(label='Internal link', path='/starred'),
      ui.link(label='Internal link, disabled', path='/starred', disabled=True),
      ui.link(label='External link', path='https://h2o.ai'),
      ui.link(label='External link, disabled', path='https://h2o.ai', disabled=True),
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/markdown-data/index.html b/docs/docs/examples/markdown-data/index.html index 9032c52ad8..cc1fa2f64e 100644 --- a/docs/docs/examples/markdown-data/index.html +++ b/docs/docs/examples/markdown-data/index.html @@ -4,36 +4,36 @@ -Markdown / Data | H2O Wave +Markdown / Data | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Markdown / Data

      Display dynamic formatted content using markdown.

      import time
      from h2o_wave import site, ui
      +

      Markdown / Data

      Display dynamic formatted content using markdown.

      import time
      from h2o_wave import site, ui
      page = site['/demo']
      beer_verse = '''
      {{before}} bottles of beer on the wall, {{before}} bottles of beer.
      Take one down, pass it around, {{after}} bottles of beer on the wall...
      '''
      beer_card = page.add('example', ui.markdown_card(
      box='1 1 4 2',
      title='99 Bottles of Beer',
      content='=' + beer_verse, # Make the verse a template expression by prefixing a '='.
      data=dict(before='99', after='98'),
      ))
      page.save()
      -
      for i in range(98, 2, -1):
      time.sleep(1)
      beer_card.data.before = str(i)
      beer_card.data.after = str(i - 1)
      page.save()
      Edit this page
      +
      for i in range(98, 2, -1):
      time.sleep(1)
      beer_card.data.before = str(i)
      beer_card.data.after = str(i - 1)
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/markdown/index.html b/docs/docs/examples/markdown/index.html index 1e0e23296d..cfbac5fc40 100644 --- a/docs/docs/examples/markdown/index.html +++ b/docs/docs/examples/markdown/index.html @@ -4,21 +4,21 @@ -Markdown | H2O Wave +Markdown | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Markdown

      Use a markdown card to display formatted content using markdown.

      from h2o_wave import site, ui
      +

      Markdown

      Use a markdown card to display formatted content using markdown.

      from h2o_wave import site, ui
      page = site['/demo']
      sample_markdown = '''=
      The **quick** _brown_ fox jumped over the lazy dog.
      Block quote:
      @@ -32,16 +32,16 @@
      Table:
      | Column 1 | Column 2 | Column 3 |
      | -------- | -------- | -------- |
      | Item 1 | Item 2 | Item 3 |
      | Item 1 | Item 2 | Item 3 |
      | Item 1 | Item 2 | Item 3 |
      '''
      -
      page['example'] = ui.markdown_card(
      box='1 1 3 -1',
      title='I was made using markdown!',
      content=sample_markdown,
      )
      page.save()
      Edit this page
      +
      page['example'] = ui.markdown_card(
      box='1 1 3 -1',
      title='I was made using markdown!',
      content=sample_markdown,
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/markup/index.html b/docs/docs/examples/markup/index.html index 75040a8ac8..bbdddd715f 100644 --- a/docs/docs/examples/markup/index.html +++ b/docs/docs/examples/markup/index.html @@ -4,33 +4,33 @@ -Markup | H2O Wave +Markup | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Markup

      Use a markup card to display formatted content using HTML.

      from h2o_wave import site, ui
      +

      Markup

      Use a markup card to display formatted content using HTML.

      from h2o_wave import site, ui
      page = site['/demo']
      menu = '''
      <ol>
      <li>Spam</li>
      <li>Ham</li>
      <li>Eggs</li>
      </ol>
      '''
      -
      page['example'] = ui.markup_card(
      box='1 1 2 2',
      title='Menu',
      content=menu,
      )
      page.save()
      Edit this page
      +
      page['example'] = ui.markup_card(
      box='1 1 2 2',
      title='Menu',
      content=menu,
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/message-bar/index.html b/docs/docs/examples/message-bar/index.html index b0944dd36c..2812a46f0e 100644 --- a/docs/docs/examples/message-bar/index.html +++ b/docs/docs/examples/message-bar/index.html @@ -4,32 +4,32 @@ -Form / Message Bar | H2O Wave +Form / Message Bar | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Message Bar

      Use message bars to indicate relevant status information.

      from h2o_wave import site, ui
      +

      Form / Message Bar

      Use message bars to indicate relevant status information.

      from h2o_wave import site, ui
      page = site['/demo']
      -
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.message_bar(type='blocked', text='This action is blocked.'),
      ui.message_bar(type='error', text='This is an error message'),
      ui.message_bar(type='warning', text='This is a warning message.'),
      ui.message_bar(type='info', text='This is an information message.'),
      ui.message_bar(type='success', text='This is an success message.'),
      ui.message_bar(type='danger', text='This is a danger message.'),
      ]
      )
      page.save()
      Edit this page
      +
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.message_bar(type='blocked', text='This action is blocked.'),
      ui.message_bar(type='error', text='This is an error message'),
      ui.message_bar(type='warning', text='This is a warning message.'),
      ui.message_bar(type='info', text='This is an information message.'),
      ui.message_bar(type='success', text='This is an success message.'),
      ui.message_bar(type='danger', text='This is a danger message.'),
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/meta-notification/index.html b/docs/docs/examples/meta-notification/index.html index a4bf81711e..4670317281 100644 --- a/docs/docs/examples/meta-notification/index.html +++ b/docs/docs/examples/meta-notification/index.html @@ -4,36 +4,36 @@ -Meta / Notification | H2O Wave +Meta / Notification | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Meta / Notification

      Display a desktop notification.

      import time
      +

      Meta / Notification

      Display a desktop notification.

      import time
      from h2o_wave import site, ui
      page = site['/demo']
      page['meta'] = ui.meta_card(box='')
      page['example'] = ui.markdown_card(
      box='1 1 2 2',
      title='Desktop Notifications',
      content='This page should display a desktop notification in a few seconds. Wait for it...',
      )
      page.save()
      time.sleep(5)
      page['meta'].notification = 'And now for something completely different!'
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/meta-redirect/index.html b/docs/docs/examples/meta-redirect/index.html index 9ad133410e..9b7e72617c 100644 --- a/docs/docs/examples/meta-redirect/index.html +++ b/docs/docs/examples/meta-redirect/index.html @@ -4,36 +4,36 @@ -Meta / Redirect | H2O Wave +Meta / Redirect | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Meta / Redirect

      Redirect the page to a new URL or hash.

      import time
      +

      Meta / Redirect

      Redirect the page to a new URL or hash.

      import time
      from h2o_wave import site, ui
      page = site['/demo']
      page['meta'] = ui.meta_card(box='')
      page['example'] = ui.markdown_card(
      box='1 1 2 2',
      title='Redirect a page',
      content='This page should redirect to Wikipedia in a few seconds. Wait for it...',
      )
      page.save()
      time.sleep(3)
      # Redirect to a hash.
      page['meta'].redirect = '#widgets'
      page.save()
      -
      time.sleep(3)
      # Redirect to a URL.
      page['meta'].redirect = 'https://www.wikipedia.org'
      page.save()
      Edit this page
      +
      time.sleep(3)
      # Redirect to a URL.
      page['meta'].redirect = 'https://www.wikipedia.org'
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/meta-refresh/index.html b/docs/docs/examples/meta-refresh/index.html index 89ba54ae1c..8a6e47ffc4 100644 --- a/docs/docs/examples/meta-refresh/index.html +++ b/docs/docs/examples/meta-refresh/index.html @@ -4,34 +4,34 @@ -Meta / Refresh | H2O Wave +Meta / Refresh | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Meta / Refresh

      Turn off live updates for static pages to conserve server resources.

      from h2o_wave import site, ui
      +

      Meta / Refresh

      Turn off live updates for static pages to conserve server resources.

      from h2o_wave import site, ui
      page = site['/demo']
      # Set refresh rate to zero ("no updates")
      page['meta'] = ui.meta_card(box='', refresh=0)
      page['example'] = ui.markdown_card(
      box='1 1 2 2',
      title='No updates for you',
      content='This page stops receiving updates once loaded.',
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/meta-title/index.html b/docs/docs/examples/meta-title/index.html index ea513e16a0..cca7a1b6f5 100644 --- a/docs/docs/examples/meta-title/index.html +++ b/docs/docs/examples/meta-title/index.html @@ -4,34 +4,34 @@ -Meta / Title | H2O Wave +Meta / Title | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Meta / Title

      Set the browser window title for a page

      from h2o_wave import site, ui
      +

      Meta / Title

      Set the browser window title for a page

      from h2o_wave import site, ui
      page = site['/demo']
      page['meta'] = ui.meta_card(box='', title='And now for something completely different!')
      page['example'] = ui.markdown_card(
      box='1 1 2 2',
      title='',
      content='<a href="/demo" target="_blank">Open this page in a new window</a> to view its title.',
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/nav/index.html b/docs/docs/examples/nav/index.html index 85f8c7402a..bdd44fce27 100644 --- a/docs/docs/examples/nav/index.html +++ b/docs/docs/examples/nav/index.html @@ -4,33 +4,33 @@ -Nav | H2O Wave +Nav | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Nav

      Use nav cards to display sidebar navigation.

      from h2o_wave import site, ui
      +

      Nav

      Use nav cards to display sidebar navigation.

      from h2o_wave import site, ui
      page = site['/demo']
      page['tabs'] = ui.nav_card(
      box='1 1 2 5',
      items=[
      ui.nav_group('Menu', items=[
      ui.nav_item(name='#menu/spam', label='Spam'),
      ui.nav_item(name='#menu/ham', label='Ham'),
      ui.nav_item(name='#menu/eggs', label='Eggs'),
      ]),
      ui.nav_group('Help', items=[
      ui.nav_item(name='#about', label='About'),
      ui.nav_item(name='#support', label='Support'),
      ])
      ],
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/picker-selection/index.html b/docs/docs/examples/picker-selection/index.html index 75845cefd5..08593509f2 100644 --- a/docs/docs/examples/picker-selection/index.html +++ b/docs/docs/examples/picker-selection/index.html @@ -4,34 +4,34 @@ -Form / Picker / Selection | H2O Wave +Form / Picker / Selection | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Picker / Selection

      Pre-select choices while displaying a picker.

      from h2o_wave import Q, listen, ui
      +

      Form / Picker / Selection

      Pre-select choices while displaying a picker.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.picker}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.picker(name='picker', label='Picker with initial values', choices=[
      ui.choice(name='spam', label='Spam'),
      ui.choice(name='eggs', label= 'Eggs'),
      ui.choice(name='ham', label= 'Ham'),
      ui.choice(name='cheese', label='Cheese'),
      ui.choice(name='beans', label='Beans'),
      ui.choice(name='toast', label='Toast'),
      ], values=['spam','eggs']),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/picker/index.html b/docs/docs/examples/picker/index.html index 90087d19d3..568c45f817 100644 --- a/docs/docs/examples/picker/index.html +++ b/docs/docs/examples/picker/index.html @@ -4,34 +4,34 @@ -Form / Picker | H2O Wave +Form / Picker | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Picker

      Use pickers to allow users to select one or more choices, such as tags or files, from a list.

      from h2o_wave import Q, listen, ui
      +

      Form / Picker

      Use pickers to allow users to select one or more choices, such as tags or files, from a list.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.picker}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.picker(name='picker', label='Place an order (try Spam, Eggs or Ham):', choices=[
      ui.choice(name='spam', label='Spam'),
      ui.choice(name='eggs', label='Eggs'),
      ui.choice(name='ham', label='Ham'),
      ui.choice(name='cheese', label='Cheese'),
      ui.choice(name='beans', label='Beans'),
      ui.choice(name='toast', label='Toast'),
      ]),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/pixel-art/index.html b/docs/docs/examples/pixel-art/index.html index 394730516d..087d619427 100644 --- a/docs/docs/examples/pixel-art/index.html +++ b/docs/docs/examples/pixel-art/index.html @@ -4,33 +4,33 @@ -Pixel Art | H2O Wave +Pixel Art | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Pixel Art

      A card that demonstrates collaborative editing in Q. +

      Pixel Art

      A card that demonstrates collaborative editing in Q. Open /demo in multiple browsers and watch them synchronize in realtime.

      from h2o_wave import site, data, ui
      page = site['/demo']
      page.drop()
      -
      page.add('example', ui.pixel_art_card(
      box='1 1 4 6',
      title='Art',
      data=data('color', 16 * 16),
      ))
      page.save()
      Edit this page
      +
      page.add('example', ui.pixel_art_card(
      box='1 1 4 6',
      title='Art',
      data=data('color', 16 * 16),
      ))
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-altair/index.html b/docs/docs/examples/plot-altair/index.html index e9b44f0073..3704dcf099 100644 --- a/docs/docs/examples/plot-altair/index.html +++ b/docs/docs/examples/plot-altair/index.html @@ -4,34 +4,34 @@ -Plot / Altair | H2O Wave +Plot / Altair | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Altair

      Use Altair to create plot specifications for the Vega card.

      import altair
      from vega_datasets import data
      from h2o_wave import site, ui
      +

      Plot / Altair

      Use Altair to create plot specifications for the Vega card.

      import altair
      from vega_datasets import data
      from h2o_wave import site, ui
      spec = altair.Chart(data.cars()).mark_circle(size=60).encode(
      x='Horsepower',
      y='Miles_per_Gallon',
      color='Origin',
      tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']
      ).interactive().to_json()
      page = site['/demo']
      page['example'] = ui.vega_card(
      box='1 1 4 5',
      title='Altair Example',
      specification=spec,
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-groups/index.html b/docs/docs/examples/plot-area-groups/index.html index a15867b552..120e6ec36b 100644 --- a/docs/docs/examples/plot-area-groups/index.html +++ b/docs/docs/examples/plot-area-groups/index.html @@ -4,34 +4,34 @@ -Plot / Area / Groups | H2O Wave +Plot / Area / Groups | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Area / Groups

      Make an area plot showing multiple categories.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area / Groups

      Make an area plot showing multiple categories.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeMultiTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area, groups',
      data=data('product date price', n * 5),
      plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-line-groups/index.html b/docs/docs/examples/plot-area-line-groups/index.html index f47c3fe65e..3397698aef 100644 --- a/docs/docs/examples/plot-area-line-groups/index.html +++ b/docs/docs/examples/plot-area-line-groups/index.html @@ -4,34 +4,34 @@ -Plot / Area + Line / Groups | H2O Wave +Plot / Area + Line / Groups | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Area + Line / Groups

      Make an combined area + line plot showing multiple categories.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area + Line / Groups

      Make an combined area + line plot showing multiple categories.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeMultiTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area + Line, groups',
      data=data('product date price', n * 5),
      plot=ui.plot([
      ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', y_min=0),
      ui.mark(type='line', x='=date', y='=price', color='=product')
      ])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-line-smooth/index.html b/docs/docs/examples/plot-area-line-smooth/index.html index e6fd1867b3..7a95631c25 100644 --- a/docs/docs/examples/plot-area-line-smooth/index.html +++ b/docs/docs/examples/plot-area-line-smooth/index.html @@ -4,33 +4,33 @@ -Plot / Area + Line / Smooth | H2O Wave +Plot / Area + Line / Smooth | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Area + Line / Smooth

      Make a combined area + line plot using a smooth curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area + Line / Smooth

      Make a combined area + line plot using a smooth curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area + Line, smooth',
      data=data('date price', n),
      plot=ui.plot([
      ui.mark(type='area', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0),
      ui.mark(type='line', x='=date', y='=price', curve='smooth')
      ])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-line/index.html b/docs/docs/examples/plot-area-line/index.html index 6d7558ebab..2c400983b7 100644 --- a/docs/docs/examples/plot-area-line/index.html +++ b/docs/docs/examples/plot-area-line/index.html @@ -4,33 +4,33 @@ -Plot / Area + Line | H2O Wave +Plot / Area + Line | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Area + Line

      Make an area plot with an additional line layer on top.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area + Line

      Make an area plot with an additional line layer on top.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area + Line',
      data=data('date price', n),
      plot=ui.plot([
      ui.mark(type='area', x_scale='time', x='=date', y='=price', y_min=0),
      ui.mark(type='line', x='=date', y='=price')
      ])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-negative/index.html b/docs/docs/examples/plot-area-negative/index.html index 4ed022dd96..16bf72795e 100644 --- a/docs/docs/examples/plot-area-negative/index.html +++ b/docs/docs/examples/plot-area-negative/index.html @@ -4,33 +4,33 @@ -Plot / Area / Negative | H2O Wave +Plot / Area / Negative | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Area / Negative

      Make an area plot showing positive and negative values.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area / Negative

      Make an area plot showing positive and negative values.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries(min=-50, max=50, start=0)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area, negative values',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price')])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-range/index.html b/docs/docs/examples/plot-area-range/index.html index b49468a3a1..14403a42d9 100644 --- a/docs/docs/examples/plot-area-range/index.html +++ b/docs/docs/examples/plot-area-range/index.html @@ -4,34 +4,34 @@ -Plot / Area / Range | H2O Wave +Plot / Area / Range | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Area / Range

      Make an area plot representing a range (band) of values.

      import random
      +

      Plot / Area / Range

      Make an area plot representing a range (band) of values.

      import random
      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area, range',
      data=data('date low high', n),
      plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y0='=low', y='=high')])
      ))
      v.data = [(t, x - random.randint(3, 8), x + random.randint(3, 8)) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-smooth/index.html b/docs/docs/examples/plot-area-smooth/index.html index 90320247a4..4b2d9f19cb 100644 --- a/docs/docs/examples/plot-area-smooth/index.html +++ b/docs/docs/examples/plot-area-smooth/index.html @@ -4,33 +4,33 @@ -Plot / Area / Smooth | H2O Wave +Plot / Area / Smooth | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Area / Smooth

      Make an area plot with a smooth curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area / Smooth

      Make an area plot with a smooth curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area, smooth',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-stacked/index.html b/docs/docs/examples/plot-area-stacked/index.html index 97f82c83ab..b653eee35c 100644 --- a/docs/docs/examples/plot-area-stacked/index.html +++ b/docs/docs/examples/plot-area-stacked/index.html @@ -4,34 +4,34 @@ -Plot / Area / Stacked | H2O Wave +Plot / Area / Stacked | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Area / Stacked

      Make a stacked area plot.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area / Stacked

      Make a stacked area plot.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeMultiTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area, stacked',
      data=data('product date price', n * 5),
      plot=ui.plot(
      [ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', stack='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area/index.html b/docs/docs/examples/plot-area/index.html index 7d5d1c6861..d5cf05b445 100644 --- a/docs/docs/examples/plot-area/index.html +++ b/docs/docs/examples/plot-area/index.html @@ -4,33 +4,33 @@ -Plot / Area | H2O Wave +Plot / Area | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Area

      Make an area plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area

      Make an area plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-axis-title/index.html b/docs/docs/examples/plot-axis-title/index.html index d63bf06595..98fdaef120 100644 --- a/docs/docs/examples/plot-axis-title/index.html +++ b/docs/docs/examples/plot-axis-title/index.html @@ -4,33 +4,33 @@ -Plot / Axis Titles | H2O Wave +Plot / Axis Titles | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Axis Titles

      Display custom axis titles on a plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Axis Titles

      Display custom axis titles on a plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line',
      data=data('date price', n),
      plot=ui.plot(
      [ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0, x_title='Date', y_title='Price')])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-bokeh/index.html b/docs/docs/examples/plot-bokeh/index.html index 2be4569f7f..365f2bd924 100644 --- a/docs/docs/examples/plot-bokeh/index.html +++ b/docs/docs/examples/plot-bokeh/index.html @@ -4,34 +4,34 @@ -Plot / Bokeh | H2O Wave +Plot / Bokeh | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Bokeh

      Use Bokeh to create plots.

      import numpy as np
      from bokeh.models import HoverTool
      from bokeh.plotting import figure
      from bokeh.resources import CDN
      from bokeh.embed import file_html
      +

      Plot / Bokeh

      Use Bokeh to create plots.

      import numpy as np
      from bokeh.models import HoverTool
      from bokeh.plotting import figure
      from bokeh.resources import CDN
      from bokeh.embed import file_html
      from h2o_wave import site, ui
      n = 500
      x = 2 + 2 * np.random.standard_normal(n)
      y = 2 + 2 * np.random.standard_normal(n)
      p = figure(
      match_aspect=True,
      tools="wheel_zoom,reset",
      background_fill_color='#440154'
      )
      p.grid.visible = False
      r, bins = p.hexbin(x, y, size=0.5, hover_color="pink", hover_alpha=0.8)
      p.circle(x, y, color="white", size=1)
      p.add_tools(HoverTool(
      tooltips=[("count", "@c"), ("(q,r)", "(@q, @r)")],
      mode="mouse",
      point_policy="follow_mouse",
      renderers=[r]
      ))
      # Export html for our frame card
      html = file_html(p, CDN, "plot")
      -
      page = site['/demo']
      page['example'] = ui.frame_card(
      box='1 1 5 8',
      title='Hexbin for 500 points',
      content=html,
      )
      page.save()
      Edit this page
      +
      page = site['/demo']
      page['example'] = ui.frame_card(
      box='1 1 5 8',
      title='Hexbin for 500 points',
      content=html,
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-d3/index.html b/docs/docs/examples/plot-d3/index.html index 322e9e51ba..2951f33b72 100644 --- a/docs/docs/examples/plot-d3/index.html +++ b/docs/docs/examples/plot-d3/index.html @@ -4,36 +4,36 @@ -Plot / D3.js | H2O Wave +Plot / D3.js | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / D3.js

      Create custom plots using D3.js.

      import json
      import os.path
      from h2o_wave import site, ui
      +

      Plot / D3.js

      Create custom plots using D3.js.

      import json
      import os.path
      from h2o_wave import site, ui
      # The example D3 Javascript file is located in the same directory as this example; get its path
      d3_js_script_filename = os.path.join(os.path.dirname(__file__), 'plot_d3.js')
      # Upload the script to the server. Typically, you'd do this only once, when your app is installed.
      d3_js_script_path, = site.upload([d3_js_script_filename])
      html_template = '''
      <!DOCTYPE html>
      <html>
      <head>
      <script src="https://d3js.org/d3.v5.min.js"></script>
      </head>
      <body style="margin:0; padding:0">
      <script src="{script_path}"></script>
      <script>render({data})</script>
      </body>
      </html>
      '''
      # This data is hard-coded here for simplicity.
      # During production use, this data would be the output of some compute routine.
      data = [
      [11975, 5871, 8916, 2868],
      [1951, 10048, 2060, 6171],
      [8010, 16145, 8090, 8045],
      [1013, 990, 940, 6907],
      ]
      # Plug JSON-serialized data into our html template
      html = html_template.format(script_path=d3_js_script_path, data=json.dumps(data))
      -
      page = site['/demo']
      page['example'] = ui.frame_card(
      box='1 1 5 8',
      title='D3 Chord Diagram',
      content=html,
      )
      page.save()
      Edit this page
      +
      page = site['/demo']
      page['example'] = ui.frame_card(
      box='1 1 5 8',
      title='D3 Chord Diagram',
      content=html,
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-form/index.html b/docs/docs/examples/plot-form/index.html index 69c87397c5..9c90b318d2 100644 --- a/docs/docs/examples/plot-form/index.html +++ b/docs/docs/examples/plot-form/index.html @@ -4,33 +4,33 @@ -Plot / Form | H2O Wave +Plot / Form | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Form

      Display a plot inside a form.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Form

      Display a plot inside a form.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.form_card(
      box='1 1 4 5',
      items=[
      ui.text_xl('Example 1'),
      ui.visualization(
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
      data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
      ),
      ui.text_xl('Example 2'),
      ui.visualization(
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
      data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
      ),
      ],
      ))
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-histogram/index.html b/docs/docs/examples/plot-histogram/index.html index 0456c24cec..5ba4694c8c 100644 --- a/docs/docs/examples/plot-histogram/index.html +++ b/docs/docs/examples/plot-histogram/index.html @@ -4,33 +4,33 @@ -Plot / Histogram | H2O Wave +Plot / Histogram | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Histogram

      Make a histogram.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Histogram

      Make a histogram.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Histogram',
      data=data('lo hi price', n),
      plot=ui.plot([ui.mark(type='interval', y='=price', x1='=lo', x2='=hi', y_min=0)])
      ))
      v.data = [(i * 10, i * 10 + 10, x) for i, (c, x, dx) in enumerate([f.next() for _ in range(n)])]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-annotation-transpose/index.html b/docs/docs/examples/plot-interval-annotation-transpose/index.html index e4d842107b..41431c1722 100644 --- a/docs/docs/examples/plot-interval-annotation-transpose/index.html +++ b/docs/docs/examples/plot-interval-annotation-transpose/index.html @@ -4,33 +4,33 @@ -Plot / Interval / Annotation / Transpose | H2O Wave +Plot / Interval / Annotation / Transpose | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Annotation / Transpose

      Add annotations to a bar plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Annotation / Transpose

      Add annotations to a bar plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Categorical-Numeric',
      data=data('product price', n),
      plot=ui.plot([
      ui.mark(type='interval', y='=product', x='=price', x_min=0, x_max=100),
      ui.mark(y='C10', x=80, label='point'),
      ui.mark(y='C13', label='vertical line'),
      ui.mark(x=40, label='horizontal line'),
      ui.mark(y='C6', y0='C3', label='vertical region'),
      ui.mark(x=70, x0=60, label='horizontal region')
      ])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-annotation/index.html b/docs/docs/examples/plot-interval-annotation/index.html index 0d444474cc..8e75a445df 100644 --- a/docs/docs/examples/plot-interval-annotation/index.html +++ b/docs/docs/examples/plot-interval-annotation/index.html @@ -4,33 +4,33 @@ -Plot / Interval / Annotation | H2O Wave +Plot / Interval / Annotation | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Annotation

      Add annotations to a column plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Annotation

      Add annotations to a column plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Categorical-Numeric',
      data=data('product price', n),
      plot=ui.plot([
      ui.mark(type='interval', x='=product', y='=price', y_min=0, y_max=100),
      ui.mark(x='C10', y=80, label='point'),
      ui.mark(x='C13', label='vertical line'),
      ui.mark(y=40, label='horizontal line'),
      ui.mark(x='C6', x0='C3', label='vertical region'),
      ui.mark(y=70, y0=60, label='horizontal region')
      ])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-groups-transpose/index.html b/docs/docs/examples/plot-interval-groups-transpose/index.html index 1dd8a320e0..d833245837 100644 --- a/docs/docs/examples/plot-interval-groups-transpose/index.html +++ b/docs/docs/examples/plot-interval-groups-transpose/index.html @@ -4,34 +4,34 @@ -Plot / Interval / Groups / Transpose | H2O Wave +Plot / Interval / Groups / Transpose | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Groups / Transpose

      Make a grouped bar plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Groups / Transpose

      Make a grouped bar plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      k = 3
      f = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, groups',
      data=data('country product price', n * k),
      plot=ui.plot([ui.mark(type='interval', x='=price', y='=product', color='=country', dodge='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-groups/index.html b/docs/docs/examples/plot-interval-groups/index.html index 99e3fdbba7..c4514d910f 100644 --- a/docs/docs/examples/plot-interval-groups/index.html +++ b/docs/docs/examples/plot-interval-groups/index.html @@ -4,34 +4,34 @@ -Plot / Interval / Groups | H2O Wave +Plot / Interval / Groups | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Groups

      Make a grouped column plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Groups

      Make a grouped column plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      k = 3
      f = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, groups',
      data=data('country product price', n * k),
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', color='=country', dodge='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-helix/index.html b/docs/docs/examples/plot-interval-helix/index.html index b90e530c8c..29c1ab54ea 100644 --- a/docs/docs/examples/plot-interval-helix/index.html +++ b/docs/docs/examples/plot-interval-helix/index.html @@ -4,33 +4,33 @@ -Plot / Interval / Helix | H2O Wave +Plot / Interval / Helix | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Helix

      Make a bar plot in helical coordinates.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Helix

      Make a bar plot in helical coordinates.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 200
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Interval, helix',
      data=data('product price', n),
      plot=ui.plot([ui.mark(coord='helix', type='interval', x='=product', y='=price', y_min=0)])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-labels/index.html b/docs/docs/examples/plot-interval-labels/index.html index bd6f7c119e..cd069e1bf0 100644 --- a/docs/docs/examples/plot-interval-labels/index.html +++ b/docs/docs/examples/plot-interval-labels/index.html @@ -4,33 +4,33 @@ -Plot / Interval / Labels | H2O Wave +Plot / Interval / Labels | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Labels

      Make a column plot with labels on each bar.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Labels

      Make a column plot with labels on each bar.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Label Customization',
      data=data('product price', n),
      plot=ui.plot([
      ui.mark(type='interval', x='=product',
      y='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}', y_min=0,
      color='#333333',
      label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      label_offset=0, label_position='middle', label_rotation='-90', label_fill_color='#fff',
      label_font_weight='bold')])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-polar-stacked/index.html b/docs/docs/examples/plot-interval-polar-stacked/index.html index 573100a0ce..05fd5bcf1e 100644 --- a/docs/docs/examples/plot-interval-polar-stacked/index.html +++ b/docs/docs/examples/plot-interval-polar-stacked/index.html @@ -4,34 +4,34 @@ -Plot / Interval / Polar / Stacked | H2O Wave +Plot / Interval / Polar / Stacked | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Polar / Stacked

      Make a stacked rose plot (a stacked bar plot in polar coordinates).

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Polar / Stacked

      Make a stacked rose plot (a stacked bar plot in polar coordinates).

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      k = 5
      f = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, polar, stacked',
      data=data('country product price', n * k),
      plot=ui.plot([
      ui.mark(coord='polar', type='interval', x='=product', y='=price', color='=country', stack='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-polar/index.html b/docs/docs/examples/plot-interval-polar/index.html index ced3f9768c..90a9dadb52 100644 --- a/docs/docs/examples/plot-interval-polar/index.html +++ b/docs/docs/examples/plot-interval-polar/index.html @@ -4,33 +4,33 @@ -Plot / Interval / Polar | H2O Wave +Plot / Interval / Polar | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Polar

      Make a rose plot (a bar plot in polar coordinates).

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Polar

      Make a rose plot (a bar plot in polar coordinates).

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 24
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Interval, polar',
      data=data('product price', n),
      plot=ui.plot([ui.mark(coord='polar', type='interval', x='=product', y='=price', y_min=0)])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-range-transpose/index.html b/docs/docs/examples/plot-interval-range-transpose/index.html index ac88b63b95..e79fb6600e 100644 --- a/docs/docs/examples/plot-interval-range-transpose/index.html +++ b/docs/docs/examples/plot-interval-range-transpose/index.html @@ -4,34 +4,34 @@ -Plot / Interval / Range / Transpose | H2O Wave +Plot / Interval / Range / Transpose | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Range / Transpose

      Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.

      import random
      +

      Plot / Interval / Range / Transpose

      Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.

      import random
      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Interval, range',
      data=data('product low high', n),
      plot=ui.plot([ui.mark(type='interval', x0='=low', x='=high', y='=product', )])
      ))
      v.data = [(c, x - random.randint(3, 10), x + random.randint(3, 10)) for c, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-range/index.html b/docs/docs/examples/plot-interval-range/index.html index 457beb5fc0..a8f254f06b 100644 --- a/docs/docs/examples/plot-interval-range/index.html +++ b/docs/docs/examples/plot-interval-range/index.html @@ -4,34 +4,34 @@ -Plot / Interval / Range | H2O Wave +Plot / Interval / Range | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Range

      Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.

      import random
      +

      Plot / Interval / Range

      Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.

      import random
      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Interval, range',
      data=data('product low high', n),
      plot=ui.plot([ui.mark(type='interval', x='=product', y0='=low', y='=high')])
      ))
      v.data = [(c, x - random.randint(3, 10), x + random.randint(3, 10)) for c, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-stacked-grouped-transpose/index.html b/docs/docs/examples/plot-interval-stacked-grouped-transpose/index.html index 403a55e220..d75ad01b41 100644 --- a/docs/docs/examples/plot-interval-stacked-grouped-transpose/index.html +++ b/docs/docs/examples/plot-interval-stacked-grouped-transpose/index.html @@ -4,34 +4,34 @@ -Plot / Interval / Stacked / Grouped / Transpose | H2O Wave +Plot / Interval / Stacked / Grouped / Transpose | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Stacked / Grouped / Transpose

      Make a bar plot with both stacked and grouped bars.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Stacked / Grouped / Transpose

      Make a bar plot with both stacked and grouped bars.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 5
      k = 5
      f1 = FakeMultiCategoricalSeries(groups=k)
      f2 = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, stacked and dodged',
      data=data('category country product price', n * k * 2),
      plot=ui.plot([
      ui.mark(type='interval', x='=price', y='=product', color='=country', stack='auto', dodge='=category', x_min=0)])
      ))
      data1 = [('A', g, t, x) for x in [f1.next() for _ in range(n)] for g, t, x, _ in x]
      data2 = [('B', g, t, x) for x in [f2.next() for _ in range(n)] for g, t, x, _ in x]
      v.data = data1 + data2
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-stacked-grouped/index.html b/docs/docs/examples/plot-interval-stacked-grouped/index.html index c7dce4a181..7714cdd41b 100644 --- a/docs/docs/examples/plot-interval-stacked-grouped/index.html +++ b/docs/docs/examples/plot-interval-stacked-grouped/index.html @@ -4,34 +4,34 @@ -Plot / Interval / Stacked / Grouped | H2O Wave +Plot / Interval / Stacked / Grouped | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Stacked / Grouped

      Make a column plot with both stacked and grouped bars.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Stacked / Grouped

      Make a column plot with both stacked and grouped bars.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 5
      k = 5
      f1 = FakeMultiCategoricalSeries(groups=k)
      f2 = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, stacked and dodged',
      data=data('category country product price', n * k * 2),
      plot=ui.plot([
      ui.mark(type='interval', x='=product', y='=price', color='=country', stack='auto', dodge='=category', y_min=0)])
      ))
      data1 = [('A', g, t, x) for x in [f1.next() for _ in range(n)] for g, t, x, _ in x]
      data2 = [('B', g, t, x) for x in [f2.next() for _ in range(n)] for g, t, x, _ in x]
      v.data = data1 + data2
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-stacked-transpose/index.html b/docs/docs/examples/plot-interval-stacked-transpose/index.html index 82e75f2d7a..f322f3fcb3 100644 --- a/docs/docs/examples/plot-interval-stacked-transpose/index.html +++ b/docs/docs/examples/plot-interval-stacked-transpose/index.html @@ -4,34 +4,34 @@ -Plot / Interval / Stacked / Transpose | H2O Wave +Plot / Interval / Stacked / Transpose | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Stacked / Transpose

      Make a stacked bar plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Stacked / Transpose

      Make a stacked bar plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      k = 5
      f = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, stacked',
      data=data('country product price', n * k),
      plot=ui.plot([ui.mark(type='interval', x='=price', y='=product', color='=country', stack='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-stacked/index.html b/docs/docs/examples/plot-interval-stacked/index.html index e6144cd5de..2dae09afa6 100644 --- a/docs/docs/examples/plot-interval-stacked/index.html +++ b/docs/docs/examples/plot-interval-stacked/index.html @@ -4,34 +4,34 @@ -Plot / Interval / Stacked | H2O Wave +Plot / Interval / Stacked | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Stacked

      Make a stacked column plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Stacked

      Make a stacked column plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      k = 5
      f = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, stacked',
      data=data('country product price', n * k),
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', color='=country', stack='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-theta/index.html b/docs/docs/examples/plot-interval-theta/index.html index 18b684795c..e7ba2a598a 100644 --- a/docs/docs/examples/plot-interval-theta/index.html +++ b/docs/docs/examples/plot-interval-theta/index.html @@ -4,33 +4,33 @@ -Plot / Interval / Theta | H2O Wave +Plot / Interval / Theta | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Theta

      Make a "racetrack" plot (a bar plot in polar coordinates, transposed).

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Theta

      Make a "racetrack" plot (a bar plot in polar coordinates, transposed).

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      k = 5
      f = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, theta, stacked',
      data=data('country product price', n * k),
      plot=ui.plot([
      ui.mark(coord='theta', type='interval', x='=product', y='=price', color='=country', stack='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-transpose/index.html b/docs/docs/examples/plot-interval-transpose/index.html index 809b20fd9d..0057b6b932 100644 --- a/docs/docs/examples/plot-interval-transpose/index.html +++ b/docs/docs/examples/plot-interval-transpose/index.html @@ -4,33 +4,33 @@ -Plot / Interval / Transpose | H2O Wave +Plot / Interval / Transpose | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval / Transpose

      Make a bar plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Transpose

      Make a bar plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Interval',
      data=data('product price', n),
      plot=ui.plot([ui.mark(type='interval', x='=price', y='=product', y_min=0)])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval/index.html b/docs/docs/examples/plot-interval/index.html index fcb73cbf3b..6c2b6ed7a7 100644 --- a/docs/docs/examples/plot-interval/index.html +++ b/docs/docs/examples/plot-interval/index.html @@ -4,33 +4,33 @@ -Plot / Interval | H2O Wave +Plot / Interval | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Interval

      Make a column plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval

      Make a column plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Interval',
      data=data('product price', n),
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line-annotation/index.html b/docs/docs/examples/plot-line-annotation/index.html index 5db118829f..c5265405fa 100644 --- a/docs/docs/examples/plot-line-annotation/index.html +++ b/docs/docs/examples/plot-line-annotation/index.html @@ -4,33 +4,33 @@ -Plot / Line / Annotation | H2O Wave +Plot / Line / Annotation | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Line / Annotation

      Add annotations to a line plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Annotation

      Add annotations to a line plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Time-Numeric',
      data=data('date price', n),
      plot=ui.plot([
      ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0, y_max=100),
      ui.mark(x=50, y=50, label='point'),
      ui.mark(x='2010-05-15T19:59:21.000000Z', label='vertical line'),
      ui.mark(y=40, label='horizontal line'),
      ui.mark(x='2010-05-24T19:59:21.000000Z', x0='2010-05-20T19:59:21.000000Z', label='vertical region'),
      ui.mark(y=70, y0=60, label='horizontal region'),
      ui.mark(x='2010-05-10T19:59:21.000000Z', x0='2010-05-05T19:59:21.000000Z', y=30, y0=20,
      label='rectangular region')
      ])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line-groups/index.html b/docs/docs/examples/plot-line-groups/index.html index 89d7286066..ccb5402d75 100644 --- a/docs/docs/examples/plot-line-groups/index.html +++ b/docs/docs/examples/plot-line-groups/index.html @@ -4,34 +4,34 @@ -Plot / Line / Groups | H2O Wave +Plot / Line / Groups | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Line / Groups

      Make a multi-series line plot.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Groups

      Make a multi-series line plot.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeMultiTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line, groups',
      data=data('product date price', n * 5),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', color='=product', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line-labels-no-overlap/index.html b/docs/docs/examples/plot-line-labels-no-overlap/index.html index b9fc4e8c2d..3f9d5161cc 100644 --- a/docs/docs/examples/plot-line-labels-no-overlap/index.html +++ b/docs/docs/examples/plot-line-labels-no-overlap/index.html @@ -4,33 +4,33 @@ -Plot / Line / Labels / Occlusion | H2O Wave +Plot / Line / Labels / Occlusion | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Line / Labels / Occlusion

      Make a line plot with non-overlapping labels.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Labels / Occlusion

      Make a line plot with non-overlapping labels.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Remove overlapping labels',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0,
      label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      label_overlap='hide')])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line-labels-stroked/index.html b/docs/docs/examples/plot-line-labels-stroked/index.html index 0d7424e99c..7ab7a84e44 100644 --- a/docs/docs/examples/plot-line-labels-stroked/index.html +++ b/docs/docs/examples/plot-line-labels-stroked/index.html @@ -4,33 +4,33 @@ -Plot / Line / Labels/ Stroked | H2O Wave +Plot / Line / Labels/ Stroked | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Line / Labels/ Stroked

      Customize label rendering: add a subtle outline to labels to improve readability.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Labels/ Stroked

      Customize label rendering: add a subtle outline to labels to improve readability.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Labels, less messy',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0,
      label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      label_fill_color='rgba(0,0,0,0.65)', label_stroke_color='#fff', label_stroke_size=2)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line-labels/index.html b/docs/docs/examples/plot-line-labels/index.html index 64fcb3bb0e..2d66542820 100644 --- a/docs/docs/examples/plot-line-labels/index.html +++ b/docs/docs/examples/plot-line-labels/index.html @@ -4,33 +4,33 @@ -Plot / Line / Labels | H2O Wave +Plot / Line / Labels | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Line / Labels

      Add labels to a line plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Labels

      Add labels to a line plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Labels',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0,
      label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}')])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line-smooth/index.html b/docs/docs/examples/plot-line-smooth/index.html index c5804c155e..bd4e0a18b9 100644 --- a/docs/docs/examples/plot-line-smooth/index.html +++ b/docs/docs/examples/plot-line-smooth/index.html @@ -4,33 +4,33 @@ -Plot / Line / Smooth | H2O Wave +Plot / Line / Smooth | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Line / Smooth

      Make a line plot using a smooth curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Smooth

      Make a line plot using a smooth curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line, smooth',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line/index.html b/docs/docs/examples/plot-line/index.html index d15d2f730a..08cb820295 100644 --- a/docs/docs/examples/plot-line/index.html +++ b/docs/docs/examples/plot-line/index.html @@ -4,33 +4,33 @@ -Plot / Line | H2O Wave +Plot / Line | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Line

      Make a line plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line

      Make a line plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-matplotlib/index.html b/docs/docs/examples/plot-matplotlib/index.html index fe1d4d7cab..dded6b8130 100644 --- a/docs/docs/examples/plot-matplotlib/index.html +++ b/docs/docs/examples/plot-matplotlib/index.html @@ -4,21 +4,21 @@ -Plot / Matplotlib | H2O Wave +Plot / Matplotlib | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Matplotlib

      Use matplotlib to create plots. Also demonstrates how to provide live control over plots.

      import uuid
      import os
      import numpy as np
      import matplotlib.pyplot as plt
      +

      Plot / Matplotlib

      Use matplotlib to create plots. Also demonstrates how to provide live control over plots.

      import uuid
      import os
      import numpy as np
      import matplotlib.pyplot as plt
      from h2o_wave import ui, listen, Q
      np.random.seed(19680801)
      @@ -33,16 +33,16 @@
      # Display our plot in our markdown card
      q.page['plot'].content = f'![plot]({image_path})'
      # Save page
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-path-point/index.html b/docs/docs/examples/plot-path-point/index.html index 672b4e7a55..27203b39c0 100644 --- a/docs/docs/examples/plot-path-point/index.html +++ b/docs/docs/examples/plot-path-point/index.html @@ -4,33 +4,33 @@ -Plot / Path / Point | H2O Wave +Plot / Path / Point | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Path / Point

      Make a path plot with an additional layer of points.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Path / Point

      Make a path plot with an additional layer of points.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Path + Point',
      data=data('profit sales', n),
      plot=ui.plot([
      ui.mark(type='path', x='=profit', y='=sales'),
      ui.mark(type='point', x='=profit', y='=sales'),
      ])
      ))
      v.data = [(x, y) for x, y in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-path-smooth/index.html b/docs/docs/examples/plot-path-smooth/index.html index 05659ed4fc..406c3c6e70 100644 --- a/docs/docs/examples/plot-path-smooth/index.html +++ b/docs/docs/examples/plot-path-smooth/index.html @@ -4,33 +4,33 @@ -Plot / Path / Smooth | H2O Wave +Plot / Path / Smooth | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Path / Smooth

      Make a path plot with a smooth curve.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Path / Smooth

      Make a path plot with a smooth curve.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Path, smooth',
      data=data('profit sales', n),
      plot=ui.plot([ui.mark(type='path', x='=profit', y='=sales', curve='smooth')])
      ))
      v.data = [(x, y) for x, y in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-path/index.html b/docs/docs/examples/plot-path/index.html index a21f82b478..bce29bc3d6 100644 --- a/docs/docs/examples/plot-path/index.html +++ b/docs/docs/examples/plot-path/index.html @@ -4,33 +4,33 @@ -Plot / Path | H2O Wave +Plot / Path | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Path

      Make a path plot.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Path

      Make a path plot.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Path',
      data=data('profit sales', n),
      plot=ui.plot([ui.mark(type='path', x='=profit', y='=sales')])
      ))
      v.data = [(x, y) for x, y in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-plotly/index.html b/docs/docs/examples/plot-plotly/index.html index 239c7ff6b6..07cad27287 100644 --- a/docs/docs/examples/plot-plotly/index.html +++ b/docs/docs/examples/plot-plotly/index.html @@ -4,21 +4,21 @@ -Plot / Plotly | H2O Wave +Plot / Plotly | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Plotly

      Use plotly to create plots. Also demonstrates how to provide live control over plots.

      import numpy as np
      from plotly import graph_objects as go
      from plotly import io as pio
      +

      Plot / Plotly

      Use plotly to create plots. Also demonstrates how to provide live control over plots.

      import numpy as np
      from plotly import graph_objects as go
      from plotly import io as pio
      from h2o_wave import ui, listen, Q
      np.random.seed(19680801)
      @@ -31,16 +31,16 @@
      q.page['plot'].content = html
      # Save page
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point-annotation/index.html b/docs/docs/examples/plot-point-annotation/index.html index cae7819f71..c0084a4564 100644 --- a/docs/docs/examples/plot-point-annotation/index.html +++ b/docs/docs/examples/plot-point-annotation/index.html @@ -4,33 +4,33 @@ -Plot / Point / Annotation | H2O Wave +Plot / Point / Annotation | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Point / Annotation

      Add annotations (points, lines and regions) to a plot.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Point / Annotation

      Add annotations (points, lines and regions) to a plot.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Numeric-Numeric',
      data=data('price performance', n),
      plot=ui.plot([
      ui.mark(type='point', x='=price', y='=performance', x_min=0, x_max=100, y_min=0, y_max=100), # the plot
      ui.mark(x=50, y=50, label='point'), # A single reference point
      ui.mark(x=40, label='vertical line'),
      ui.mark(y=40, label='horizontal line'),
      ui.mark(x=70, x0=60, label='vertical region'),
      ui.mark(y=70, y0=60, label='horizontal region'),
      ui.mark(x=30, x0=20, y=30, y0=20, label='rectangular region')
      ])
      ))
      v.data = [f.next() for _ in range(n)]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point-custom/index.html b/docs/docs/examples/plot-point-custom/index.html index 95ee79fc16..22104a1d37 100644 --- a/docs/docs/examples/plot-point-custom/index.html +++ b/docs/docs/examples/plot-point-custom/index.html @@ -4,34 +4,34 @@ -Plot / Point / Custom | H2O Wave +Plot / Point / Custom | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Point / Custom

      Customize a plot's fill/stroke color, size and opacity.

      import random
      +

      Plot / Point / Custom

      Customize a plot's fill/stroke color, size and opacity.

      import random
      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 40
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point, custom',
      data=data('price performance discount', n),
      plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', size='=discount', size_range='4 30',
      fill_color='#eb4559', stroke_color='#eb4559', stroke_size=1, fill_opacity=0.3,
      stroke_opacity=1)])
      ))
      v.data = [(x, y, random.randint(1, 10)) for x, y in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point-groups/index.html b/docs/docs/examples/plot-point-groups/index.html index d6e24cb939..6ad8c344f3 100644 --- a/docs/docs/examples/plot-point-groups/index.html +++ b/docs/docs/examples/plot-point-groups/index.html @@ -4,36 +4,36 @@ -Plot / Point / Groups | H2O Wave +Plot / Point / Groups | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Point / Groups

      Make a scatterplot with categories encoded as colors.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Point / Groups

      Make a scatterplot with categories encoded as colors.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      def create_fake_row(g, f, n):
      return [(g, x, y) for x, y in [f.next() for _ in range(n)]]
      n = 30
      f1, f2, f3 = FakeScatter(), FakeScatter(), FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point, groups',
      data=data('product price performance', n * 3),
      plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', color='=product', shape='circle')])
      ))
      v.data = create_fake_row('G1', f1, n) + create_fake_row('G2', f1, n) + create_fake_row('G3', f1, n)
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point-map/index.html b/docs/docs/examples/plot-point-map/index.html index b29b7dddbd..dc000b0b0b 100644 --- a/docs/docs/examples/plot-point-map/index.html +++ b/docs/docs/examples/plot-point-map/index.html @@ -4,33 +4,33 @@ -Plot / Point / Map | H2O Wave +Plot / Point / Map | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Point / Map

      Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.

      from synth import FakeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Point / Map

      Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.

      from synth import FakeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      k1, k2 = 20, 10
      f = FakeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Points, size-encoded',
      data=data('country product profit', k1 * k2),
      plot=ui.plot([ui.mark(type='point', x='=country', y='=product', size='=profit', shape='circle')])
      ))
      rows = []
      for i in range(k1):
      for j in range(k2):
      x, dx = f.next()
      rows.append((f'A{i + 1}', f'B{j + 1}', x))
      v.data = rows
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point-shapes/index.html b/docs/docs/examples/plot-point-shapes/index.html index 07ee823009..85fdb928d7 100644 --- a/docs/docs/examples/plot-point-shapes/index.html +++ b/docs/docs/examples/plot-point-shapes/index.html @@ -4,36 +4,36 @@ -Plot / Point / Shapes | H2O Wave +Plot / Point / Shapes | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Point / Shapes

      Make a scatterplot with categories encoded as mark shapes.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Point / Shapes

      Make a scatterplot with categories encoded as mark shapes.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      def create_fake_row(g, f, n):
      return [(g, x, y) for x, y in [f.next() for _ in range(n)]]
      n = 30
      f1, f2 = FakeScatter(), FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point, shapes',
      data=data('product price performance', n * 2),
      plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', shape='=product', shape_range='circle square')])
      ))
      v.data = create_fake_row('G1', f1, n) + create_fake_row('G2', f1, n)
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point-sizes/index.html b/docs/docs/examples/plot-point-sizes/index.html index 72d2c1fbc5..c891849e3e 100644 --- a/docs/docs/examples/plot-point-sizes/index.html +++ b/docs/docs/examples/plot-point-sizes/index.html @@ -4,34 +4,34 @@ -Plot / Point / Sizes | H2O Wave +Plot / Point / Sizes | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Point / Sizes

      Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").

      import random
      +

      Plot / Point / Sizes

      Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").

      import random
      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 40
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point, sized',
      data=data('price performance discount', n),
      plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', size='=discount')])
      ))
      v.data = [(x, y, random.randint(1, 10)) for x, y in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point/index.html b/docs/docs/examples/plot-point/index.html index 38d0712261..66dce5941f 100644 --- a/docs/docs/examples/plot-point/index.html +++ b/docs/docs/examples/plot-point/index.html @@ -4,33 +4,33 @@ -Plot / Point | H2O Wave +Plot / Point | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Point

      Make a scatterplot.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Point

      Make a scatterplot.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point',
      data=data('price performance', n),
      plot=ui.plot([
      ui.mark(type='point', x='=price', y='=performance')
      ])
      ))
      v.data = [f.next() for i in range(n)]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-polygon/index.html b/docs/docs/examples/plot-polygon/index.html index f79822f497..2120ab7ab5 100644 --- a/docs/docs/examples/plot-polygon/index.html +++ b/docs/docs/examples/plot-polygon/index.html @@ -4,33 +4,33 @@ -Plot / Polygon | H2O Wave +Plot / Polygon | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Polygon

      Make a heatmap.

      from synth import FakeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Polygon

      Make a heatmap.

      from synth import FakeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      k1, k2 = 20, 10
      f = FakeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Heatmap',
      data=data('country product profit', k1 * k2),
      plot=ui.plot([
      ui.mark(type='polygon', x='=country', y='=product', color='=profit',
      color_range='#fee8c8 #fdbb84 #e34a33')])
      ))
      rows = []
      for i in range(k1):
      for j in range(k2):
      x, dx = f.next()
      rows.append((f'A{i + 1}', f'B{j + 1}', x))
      v.data = rows
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-step-after/index.html b/docs/docs/examples/plot-step-after/index.html index e5f6fa7492..78e56c9fad 100644 --- a/docs/docs/examples/plot-step-after/index.html +++ b/docs/docs/examples/plot-step-after/index.html @@ -4,33 +4,33 @@ -Plot / Line / Step / After | H2O Wave +Plot / Line / Step / After | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Line / Step / After

      Make a line plot with a step-after curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Step / After

      Make a line plot with a step-after curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line, step-right',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step-after', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-step-before/index.html b/docs/docs/examples/plot-step-before/index.html index 96032f198a..54c965c025 100644 --- a/docs/docs/examples/plot-step-before/index.html +++ b/docs/docs/examples/plot-step-before/index.html @@ -4,33 +4,33 @@ -Plot / Line / Step / Before | H2O Wave +Plot / Line / Step / Before | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Line / Step / Before

      Make a line plot with a step-before curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Step / Before

      Make a line plot with a step-before curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line, step-left',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step-before', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-step/index.html b/docs/docs/examples/plot-step/index.html index 00871be93b..19b261fd43 100644 --- a/docs/docs/examples/plot-step/index.html +++ b/docs/docs/examples/plot-step/index.html @@ -4,34 +4,34 @@ -Plot / Line / Step | H2O Wave +Plot / Line / Step | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Line / Step

      Make a line plot with a step curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Step

      Make a line plot with a step curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line, step',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-vegalite-form/index.html b/docs/docs/examples/plot-vegalite-form/index.html index 2bd5dc31e7..34ef34a063 100644 --- a/docs/docs/examples/plot-vegalite-form/index.html +++ b/docs/docs/examples/plot-vegalite-form/index.html @@ -4,21 +4,21 @@ -Plot / Vega-lite / Form | H2O Wave +Plot / Vega-lite / Form | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Vega-lite / Form

      Display a Vega-lite plot inside a form card

      from h2o_wave import site, data, ui
      import random
      import time
      +

      Plot / Vega-lite / Form

      Display a Vega-lite plot inside a form card

      from h2o_wave import site, data, ui
      import random
      import time
      page = site['/demo']
      spec = '''
      {
      "description": "A simple bar plot with embedded data.",
      "mark": "bar",
      "encoding": {
      "x": {"field": "a", "type": "ordinal"},
      "y": {"field": "b", "type": "quantitative"}
      }
      }
      '''
      @@ -27,16 +27,16 @@
      # Generate random datum between 1 and 100
      def rnd(): return random.randint(1, 100)
      page['example'] = ui.form_card(
      box='1 1 2 -1',
      items=[
      ui.text_xl('Example 1'),
      ui.vega_visualization(
      specification=spec,
      data=data(fields=["a", "b"], rows=poll(), pack=True),
      ),
      ui.text_xl('Example 2'),
      ui.vega_visualization(
      specification=spec,
      data=data(fields=["a", "b"], rows=poll(), pack=True),
      ),
      ui.text_xl('Example 3'),
      ui.vega_visualization(
      specification=spec,
      data=data(fields=["a", "b"], rows=poll(), pack=True),
      ),
      ],
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-vegalite-update/index.html b/docs/docs/examples/plot-vegalite-update/index.html index afbffcce19..28cf91ee2f 100644 --- a/docs/docs/examples/plot-vegalite-update/index.html +++ b/docs/docs/examples/plot-vegalite-update/index.html @@ -4,21 +4,21 @@ -Plot / Vega-lite / Update | H2O Wave +Plot / Vega-lite / Update | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Vega-lite / Update

      Periodically update a Vega-lite plot.

      from h2o_wave import site, data, ui
      import random
      import time
      +

      Plot / Vega-lite / Update

      Periodically update a Vega-lite plot.

      from h2o_wave import site, data, ui
      import random
      import time
      page = site['/demo']
      spec = '''
      {
      "description": "A simple bar plot with embedded data.",
      "mark": "bar",
      "encoding": {
      "x": {"field": "a", "type": "ordinal"},
      "y": {"field": "b", "type": "quantitative"}
      }
      }
      '''
      @@ -28,16 +28,16 @@
      vis = page.add('external', ui.vega_card(
      box='1 1 2 4',
      title='Plot with external data',
      specification=spec,
      data=data(fields=["a", "b"], rows=poll()),
      ))
      page.save()
      -
      while True:
      time.sleep(1)
      # Update the plot's data rows
      vis.data = poll()
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      # Update the plot's data rows
      vis.data = poll()
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-vegalite/index.html b/docs/docs/examples/plot-vegalite/index.html index 0400323ad6..04981fa811 100644 --- a/docs/docs/examples/plot-vegalite/index.html +++ b/docs/docs/examples/plot-vegalite/index.html @@ -4,37 +4,37 @@ -Plot / Vega-lite | H2O Wave +Plot / Vega-lite | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plot / Vega-lite

      Make a plot using Vega-lite.

      from h2o_wave import site, data, ui
      +

      Plot / Vega-lite

      Make a plot using Vega-lite.

      from h2o_wave import site, data, ui
      page = site['/demo']
      spec1 = '''
      {
      "description": "A simple bar plot with embedded data.",
      "data": {
      "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
      ]
      },
      "mark": "bar",
      "encoding": {
      "x": {"field": "a", "type": "ordinal"},
      "y": {"field": "b", "type": "quantitative"}
      }
      }
      '''
      page.add('embedded', ui.vega_card(
      box='1 1 2 4',
      title='Plot with embedded data',
      specification=spec1,
      ))
      # The following produces the same plot as above, but separates the
      # Vega-lite spec from the data. This allows you to create a plot once
      # and update data multiple times.
      spec2 = '''
      {
      "description": "A simple bar plot with embedded data.",
      "mark": "bar",
      "encoding": {
      "x": {"field": "a", "type": "ordinal"},
      "y": {"field": "b", "type": "quantitative"}
      }
      }
      '''
      data2 = data(fields=["a", "b"], rows=[
      ["A", 28], ["B", 55], ["C", 43],
      ["D", 91], ["E", 81], ["F", 53],
      ["G", 19], ["H", 87], ["I", 52]
      ])
      page.add('external', ui.vega_card(
      box='1 5 2 4',
      title='Plot with external data',
      specification=spec2,
      data=data2,
      ))
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/progress-update/index.html b/docs/docs/examples/progress-update/index.html index 43da27da2a..5235aad55d 100644 --- a/docs/docs/examples/progress-update/index.html +++ b/docs/docs/examples/progress-update/index.html @@ -4,36 +4,36 @@ -Form / Progress / Updating | H2O Wave +Form / Progress / Updating | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Progress / Updating

      Update a progress bar's completion status periodically.

      import time
      +

      Form / Progress / Updating

      Update a progress bar's completion status periodically.

      import time
      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.progress(label='Basic Progress'),
      ]
      )
      page.save()
      for i in range(1, 11):
      time.sleep(1)
      page['example'].items = [
      ui.progress(label='Basic Progress', caption=f'{i * 10}% complete', value=i / 10),
      ]
      # This will work, too:
      # page['example'].items[0].progress.value = i/10
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/progress/index.html b/docs/docs/examples/progress/index.html index c8ee14d15c..7dc9f98510 100644 --- a/docs/docs/examples/progress/index.html +++ b/docs/docs/examples/progress/index.html @@ -4,32 +4,32 @@ -Form / Progress | H2O Wave +Form / Progress | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Progress

      Use a progress bar to indicate completion status of an operation.

      from h2o_wave import site, ui
      +

      Form / Progress

      Use a progress bar to indicate completion status of an operation.

      from h2o_wave import site, ui
      page = site['/demo']
      -
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.progress(label='Indeterminate Progress', caption='Goes on forever'),
      ui.progress(label='Standard Progress', caption='Downloading the interwebs...', value=0.25),
      ]
      )
      page.save()
      Edit this page
      +
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.progress(label='Indeterminate Progress', caption='Goes on forever'),
      ui.progress(label='Standard Progress', caption='Downloading the interwebs...', value=0.25),
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/range-slider/index.html b/docs/docs/examples/range-slider/index.html index f842cfa207..de62619b9b 100644 --- a/docs/docs/examples/range-slider/index.html +++ b/docs/docs/examples/range-slider/index.html @@ -4,34 +4,34 @@ -Form / Range Slider | H2O Wave +Form / Range Slider | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Range Slider

      Use a range slider to allow users to select a value range (from, to).

      from h2o_wave import Q, listen, ui
      +

      Form / Range Slider

      Use a range slider to allow users to select a value range (from, to).

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'range_slider={q.args.range_slider}'),
      ui.text(f'range_slider_step={q.args.range_slider_step}'),
      ui.text(f'range_slider_disabled={q.args.range_slider_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.range_slider(name='range_slider', label='Default slider'),
      ui.range_slider(name='range_slider_step', label='Step slider', min=0, max=1000, step=100, min_value=0, max_value=100),
      ui.range_slider(name='range_slider_disabled', label='Disabled slider', min=0, max=100, step=10, min_value=0,
      max_value=70, disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/separator/index.html b/docs/docs/examples/separator/index.html index d8abf046b4..6b45b4e34f 100644 --- a/docs/docs/examples/separator/index.html +++ b/docs/docs/examples/separator/index.html @@ -4,33 +4,33 @@ -Form / Separator | H2O Wave +Form / Separator | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Separator

      Use a separator to visually separate content into groups.

      from h2o_wave import site, ui
      +

      Form / Separator

      Use a separator to visually separate content into groups.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 2 5',
      items=[
      ui.separator(label='Separator 1'),
      ui.text('The quick brown fox jumps over the lazy dog.'),
      ui.separator(label='Separator 2'),
      ui.text('The quick brown fox jumps over the lazy dog.'),
      ui.separator(label='Separator 3'),
      ui.text('The quick brown fox jumps over the lazy dog.'),
      ]
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/slider/index.html b/docs/docs/examples/slider/index.html index c550052691..f2de9c2dcd 100644 --- a/docs/docs/examples/slider/index.html +++ b/docs/docs/examples/slider/index.html @@ -4,34 +4,34 @@ -Form / Slider | H2O Wave +Form / Slider | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Slider

      Use a slider to allow users to set a value within a specific range.

      from h2o_wave import Q, listen, ui
      +

      Form / Slider

      Use a slider to allow users to set a value within a specific range.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'slider={q.args.slider}'),
      ui.text(f'slider_zero={q.args.slider_zero}'),
      ui.text(f'slider_disabled={q.args.slider_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.slider(name='slider', label='Standard slider', min=0, max=100, step=10, value=30),
      ui.slider(name='slider_zero', label='Origin from zero', min=-10, max=10, step=1, value=-3),
      ui.slider(name='slider_disabled', label='Disabled slider', min=0, max=100, step=10, value=30,
      disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/spinbox/index.html b/docs/docs/examples/spinbox/index.html index d9919c6b79..013b3918fa 100644 --- a/docs/docs/examples/spinbox/index.html +++ b/docs/docs/examples/spinbox/index.html @@ -4,34 +4,34 @@ -Form / Spinbox | H2O Wave +Form / Spinbox | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Spinbox

      Use a spinbox to allow users to incrementally adjust a value in small steps.

      from h2o_wave import Q, listen, ui
      +

      Form / Spinbox

      Use a spinbox to allow users to incrementally adjust a value in small steps.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'spinbox={q.args.spinbox}'),
      ui.text(f'spinbox_disabled={q.args.spinbox_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.spinbox(name='spinbox', label='Standard spinbox', min=0, max=100, step=10, value=30),
      ui.spinbox(name='spinbox_disabled', label='Disabled spinbox', min=0, max=100, step=10, value=30,
      disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-large-bar/index.html b/docs/docs/examples/stat-large-bar/index.html index 41c2c38d19..2d430692f3 100644 --- a/docs/docs/examples/stat-large-bar/index.html +++ b/docs/docs/examples/stat-large-bar/index.html @@ -4,35 +4,35 @@ -Stat / Bar / Large | H2O Wave +Stat / Bar / Large | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stat / Bar / Large

      Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

      import time
      +

      Stat / Bar / Large

      Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

      import time
      from faker import Faker
      from synth import FakePercent
      from h2o_wave import site, ui
      page = site['/demo']
      fake = Faker()
      f = FakePercent()
      val, pc = f.next()
      c = page.add(f'example', ui.large_bar_stat_card(
      box='1 1 2 2',
      title=fake.cryptocurrency_name(),
      value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      value_caption='This Month',
      aux_value='={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value_caption='Previous Month',
      plot_color='$red',
      progress=pc,
      data=dict(foo=val, bar=pc),
      caption=' '.join(fake.sentences(2)),
      ))
      page.save()
      -
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-large/index.html b/docs/docs/examples/stat-large/index.html index cf9a29548c..fd6491156d 100644 --- a/docs/docs/examples/stat-large/index.html +++ b/docs/docs/examples/stat-large/index.html @@ -4,35 +4,35 @@ -Stat / Large | H2O Wave +Stat / Large | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stat / Large

      Create a stat card displaying a primary value, an auxiliary value and a caption.

      import time
      +

      Stat / Large

      Create a stat card displaying a primary value, an auxiliary value and a caption.

      import time
      from faker import Faker
      from synth import FakePercent
      from h2o_wave import site, ui
      page = site['/demo']
      fake = Faker()
      f = FakePercent()
      val, pc = f.next()
      c = page.add(f'example', ui.large_stat_card(
      box='1 1 2 2',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
      data=dict(qux=val, quux=pc),
      caption=' '.join(fake.sentences()),
      ))
      page.save()
      -
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-small-series-area/index.html b/docs/docs/examples/stat-small-series-area/index.html index 634311dbff..09d7d56012 100644 --- a/docs/docs/examples/stat-small-series-area/index.html +++ b/docs/docs/examples/stat-small-series-area/index.html @@ -4,35 +4,35 @@ -Stat / Series / Small / Area | H2O Wave +Stat / Series / Small / Area | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stat / Series / Small / Area

      Create a small stat card displaying a primary value and a series plot.

      import time
      +

      Stat / Series / Small / Area

      Create a small stat card displaying a primary value and a series plot.

      import time
      from faker import Faker
      from synth import FakeCategoricalSeries
      from h2o_wave import site, ui, data
      page = site['/demo']
      colors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()
      curves = 'linear smooth step step-after step-before'.split()
      fake = Faker()
      cards = []
      for i in range(len(curves)):
      f = FakeCategoricalSeries()
      cat, val, pc = f.next()
      c = page.add(f'example{i}', ui.small_series_stat_card(
      box=f'1 {i + 1} 1 1',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      data=dict(qux=val, quux=pc),
      plot_category='foo',
      plot_type='area',
      plot_value='qux',
      plot_color=colors[i],
      plot_data=data('foo qux', -15),
      plot_zero_value=0,
      plot_curve=curves[i],
      ))
      cards.append((f, c))
      page.save()
      -
      while True:
      time.sleep(1)
      for f, c in cards:
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      for f, c in cards:
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-small-series-interval/index.html b/docs/docs/examples/stat-small-series-interval/index.html index a87181b8b4..e7bc07532c 100644 --- a/docs/docs/examples/stat-small-series-interval/index.html +++ b/docs/docs/examples/stat-small-series-interval/index.html @@ -4,35 +4,35 @@ -Stat / Series / Small / Interval | H2O Wave +Stat / Series / Small / Interval | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stat / Series / Small / Interval

      Create a small stat card displaying a primary value and a series plot.

      import time
      +

      Stat / Series / Small / Interval

      Create a small stat card displaying a primary value and a series plot.

      import time
      from faker import Faker
      from synth import FakeCategoricalSeries
      from h2o_wave import site, ui, data
      page = site['/demo']
      fake = Faker()
      f = FakeCategoricalSeries()
      cat, val, pc = f.next()
      c = page.add(f'example', ui.small_series_stat_card(
      box='1 1 1 1',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      data=dict(qux=val, quux=pc),
      plot_category='foo',
      plot_type='interval',
      plot_value='qux',
      plot_color='$red',
      plot_data=data('foo qux', -20),
      plot_zero_value=0,
      ))
      page.save()
      -
      while True:
      time.sleep(1)
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-small/index.html b/docs/docs/examples/stat-small/index.html index 92fdba70b5..b8a2784ae0 100644 --- a/docs/docs/examples/stat-small/index.html +++ b/docs/docs/examples/stat-small/index.html @@ -4,35 +4,35 @@ -Stat / Small | H2O Wave +Stat / Small | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stat / Small

      Create a stat card displaying a single value.

      import time
      +

      Stat / Small

      Create a stat card displaying a single value.

      import time
      from faker import Faker
      from synth import FakePercent
      from h2o_wave import site, ui
      page = site['/demo']
      fake = Faker()
      f = FakePercent()
      val, _ = f.next()
      c = page.add('example', ui.small_stat_card(
      box=f'1 1 1 1',
      title=fake.cryptocurrency_name(),
      value=f'${val:.2f}',
      ))
      page.save()
      -
      while True:
      time.sleep(1)
      val, _ = f.next()
      c.value = f'${val:.2f}'
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      val, _ = f.next()
      c.value = f'${val:.2f}'
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-tall-gauge/index.html b/docs/docs/examples/stat-tall-gauge/index.html index 57cff909be..1390792679 100644 --- a/docs/docs/examples/stat-tall-gauge/index.html +++ b/docs/docs/examples/stat-tall-gauge/index.html @@ -4,35 +4,35 @@ -Stat / Gauge / Tall | H2O Wave +Stat / Gauge / Tall | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stat / Gauge / Tall

      Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

      import time
      +

      Stat / Gauge / Tall

      Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

      import time
      from faker import Faker
      from synth import FakePercent
      from h2o_wave import site, ui
      page = site['/demo']
      fake = Faker()
      f = FakePercent()
      val, pc = f.next()
      c = page.add(f'example', ui.tall_gauge_stat_card(
      box='1 1 1 2',
      title=fake.cryptocurrency_name(),
      value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      plot_color='$red',
      progress=pc,
      data=dict(foo=val, bar=pc),
      ))
      page.save()
      -
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-tall-series-area/index.html b/docs/docs/examples/stat-tall-series-area/index.html index 0bf9fdc8f4..2ff61f3864 100644 --- a/docs/docs/examples/stat-tall-series-area/index.html +++ b/docs/docs/examples/stat-tall-series-area/index.html @@ -4,35 +4,35 @@ -Stat / Series / Tall / Area | H2O Wave +Stat / Series / Tall / Area | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stat / Series / Tall / Area

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      +

      Stat / Series / Tall / Area

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      from faker import Faker
      from synth import FakeCategoricalSeries
      from h2o_wave import site, ui, data
      page = site['/demo']
      colors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()
      curves = 'linear smooth step step-after step-before'.split()
      fake = Faker()
      cards = []
      for i in range(len(curves)):
      f = FakeCategoricalSeries()
      cat, val, pc = f.next()
      c = page.add(f'example{i}', ui.tall_series_stat_card(
      box=f'{i + 1} 1 1 2',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
      data=dict(qux=val, quux=pc / 100),
      plot_type='area',
      plot_category='foo',
      plot_value='qux',
      plot_color=colors[i],
      plot_data=data('foo qux', -15),
      plot_zero_value=0,
      plot_curve=curves[i],
      ))
      cards.append((f, c))
      page.save()
      -
      while True:
      time.sleep(1)
      for f, c in cards:
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc / 100
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      for f, c in cards:
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc / 100
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-tall-series-interval/index.html b/docs/docs/examples/stat-tall-series-interval/index.html index 9d7278eb68..538763f729 100644 --- a/docs/docs/examples/stat-tall-series-interval/index.html +++ b/docs/docs/examples/stat-tall-series-interval/index.html @@ -4,35 +4,35 @@ -Stat / Series / Tall / Interval | H2O Wave +Stat / Series / Tall / Interval | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stat / Series / Tall / Interval

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      +

      Stat / Series / Tall / Interval

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      from faker import Faker
      from synth import FakeCategoricalSeries
      from h2o_wave import site, ui, data
      page = site['/demo']
      fake = Faker()
      f = FakeCategoricalSeries()
      cat, val, pc = f.next()
      c = page.add(f'example', ui.tall_series_stat_card(
      box='1 1 1 2',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
      data=dict(qux=val, quux=pc / 100),
      plot_category='foo',
      plot_type='interval',
      plot_value='qux',
      plot_color='$red',
      plot_data=data('foo qux', -20),
      plot_zero_value=0,
      ))
      page.save()
      -
      while True:
      time.sleep(1)
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc / 100
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc / 100
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-wide-bar/index.html b/docs/docs/examples/stat-wide-bar/index.html index ba0ed6d84d..7fc4043b82 100644 --- a/docs/docs/examples/stat-wide-bar/index.html +++ b/docs/docs/examples/stat-wide-bar/index.html @@ -4,35 +4,35 @@ -Stat / Bar / Wide | H2O Wave +Stat / Bar / Wide | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stat / Bar / Wide

      Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

      import time
      +

      Stat / Bar / Wide

      Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

      import time
      from faker import Faker
      from synth import FakePercent
      from h2o_wave import site, ui
      page = site['/demo']
      fake = Faker()
      f = FakePercent()
      val, pc = f.next()
      c = page.add(f'example', ui.wide_bar_stat_card(
      box='1 1 2 1',
      title=fake.cryptocurrency_name(),
      value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      plot_color='$red',
      progress=pc,
      data=dict(foo=val, bar=pc),
      ))
      page.save()
      -
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-wide-gauge/index.html b/docs/docs/examples/stat-wide-gauge/index.html index 2ca3bd8da2..64deb07a3d 100644 --- a/docs/docs/examples/stat-wide-gauge/index.html +++ b/docs/docs/examples/stat-wide-gauge/index.html @@ -4,35 +4,35 @@ -Stat / Gauge / Wide | H2O Wave +Stat / Gauge / Wide | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stat / Gauge / Wide

      Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

      import time
      +

      Stat / Gauge / Wide

      Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

      import time
      from faker import Faker
      from synth import FakePercent
      from h2o_wave import site, ui
      page = site['/demo']
      fake = Faker()
      f = FakePercent()
      val, pc = f.next()
      c = page.add(f'example', ui.wide_gauge_stat_card(
      box='1 1 2 1',
      title=fake.cryptocurrency_name(),
      value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      plot_color='$red',
      progress=pc,
      data=dict(foo=val, bar=pc),
      ))
      page.save()
      -
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-wide-series-area/index.html b/docs/docs/examples/stat-wide-series-area/index.html index ea1f0e5ecd..f3ca3330f0 100644 --- a/docs/docs/examples/stat-wide-series-area/index.html +++ b/docs/docs/examples/stat-wide-series-area/index.html @@ -4,35 +4,35 @@ -Stat / Series / Wide / Area | H2O Wave +Stat / Series / Wide / Area | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stat / Series / Wide / Area

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      +

      Stat / Series / Wide / Area

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      from faker import Faker
      from synth import FakeCategoricalSeries
      from h2o_wave import site, ui, data
      page = site['/demo']
      colors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()
      curves = 'linear smooth step step-after step-before'.split()
      fake = Faker()
      cards = []
      for i in range(len(curves)):
      f = FakeCategoricalSeries()
      cat, val, pc = f.next()
      c = page.add(f'example{i}', ui.wide_series_stat_card(
      box=f'1 {i + 1} 2 1',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
      data=dict(qux=val, quux=pc / 100),
      plot_category='foo',
      plot_type='area',
      plot_value='qux',
      plot_color=colors[i],
      plot_data=data('foo qux', -15),
      plot_zero_value=0,
      plot_curve=curves[i],
      ))
      cards.append((f, c))
      page.save()
      -
      while True:
      time.sleep(1)
      for f, c in cards:
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc / 100
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      for f, c in cards:
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc / 100
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-wide-series-interval/index.html b/docs/docs/examples/stat-wide-series-interval/index.html index 0d41fd7e3d..d70e65abcf 100644 --- a/docs/docs/examples/stat-wide-series-interval/index.html +++ b/docs/docs/examples/stat-wide-series-interval/index.html @@ -4,35 +4,35 @@ -Stat / Series / Wide / Interval | H2O Wave +Stat / Series / Wide / Interval | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stat / Series / Wide / Interval

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      +

      Stat / Series / Wide / Interval

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      from faker import Faker
      from synth import FakeCategoricalSeries
      from h2o_wave import site, ui, data
      page = site['/demo']
      fake = Faker()
      f = FakeCategoricalSeries()
      cat, val, pc = f.next()
      c = page.add(f'example', ui.wide_series_stat_card(
      box='1 1 2 1',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
      data=dict(qux=val, quux=pc / 100),
      plot_category='foo',
      plot_type='interval',
      plot_value='qux',
      plot_color='$red',
      plot_data=data('foo qux', -15),
      plot_zero_value=0,
      ))
      page.save()
      -
      while True:
      time.sleep(1)
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc / 100
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      +
      while True:
      time.sleep(1)
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc / 100
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stepper/index.html b/docs/docs/examples/stepper/index.html index 934503bb59..849d37b85d 100644 --- a/docs/docs/examples/stepper/index.html +++ b/docs/docs/examples/stepper/index.html @@ -4,34 +4,34 @@ -Stepper | H2O Wave +Stepper | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Stepper

      Use Stepper to show progress through numbered steps.

      from h2o_wave import Q, listen, ui
      +

      Stepper

      Use Stepper to show progress through numbered steps.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      q.page['basic-stepper'] = ui.form_card(
      box='1 1 4 1',
      items=[
      ui.stepper(name='basic-stepper', items=[
      ui.step(label='Step 1'),
      ui.step(label='Step 2'),
      ui.step(label='Step 3'),
      ])
      ]
      )
      q.page['icon-stepper'] = ui.form_card(
      box='1 2 4 1',
      items=[
      ui.stepper(name='icon-stepper', items=[
      ui.step(label='Step 1', icon='MailLowImportance'),
      ui.step(label='Step 2', icon='TaskManagerMirrored'),
      ui.step(label='Step 3', icon='Cafe'),
      ])
      ]
      )
      q.page['almost-done-stepper'] = ui.form_card(
      box='1 3 4 1',
      items=[
      ui.stepper(name='almost-done-stepper', items=[
      ui.step(label='Step 1', done=True),
      ui.step(label='Step 2', done=True),
      ui.step(label='Step 3'),
      ])
      ]
      )
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/swatch-picker/index.html b/docs/docs/examples/swatch-picker/index.html index 9745ebb841..01b65d0dae 100644 --- a/docs/docs/examples/swatch-picker/index.html +++ b/docs/docs/examples/swatch-picker/index.html @@ -4,34 +4,34 @@ -Form / Swatch Picker | H2O Wave +Form / Swatch Picker | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Swatch Picker

      Use a swatch picker to allow users to choose a from a specific set of colors.

      from h2o_wave import Q, listen, ui
      +

      Form / Swatch Picker

      Use a swatch picker to allow users to choose a from a specific set of colors.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'swatch={q.args.swatch}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.color_picker(
      name='swatch',
      label='Pick a swatch',
      choices=[
      '#011627', '#2EC4B6', '#E71D36', '#FF9F1C', '#50514F',
      '#F25F5C', '#FFE066', '#247BA0', '#70C1B3', '#FDFFFC',
      ]),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/tab-delete/index.html b/docs/docs/examples/tab-delete/index.html index 7b84a19bb4..7db24ef500 100644 --- a/docs/docs/examples/tab-delete/index.html +++ b/docs/docs/examples/tab-delete/index.html @@ -4,21 +4,21 @@ -Tabs / Navigation | H2O Wave +Tabs / Navigation | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Tabs / Navigation

      Navigate between two or more tabs. +

      Tabs / Navigation

      Navigate between two or more tabs. Delete the cards when switching between tabs.

      from h2o_wave import Q, listen, ui
      TABS = 'abcde'
      @@ -30,16 +30,16 @@
      if q.args['#']:
      q.client.tab = str(q.args['#'])
      await remove_cards(q)
      await display_tab(q)
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/tab-link/index.html b/docs/docs/examples/tab-link/index.html index b3ad737227..4b707ef865 100644 --- a/docs/docs/examples/tab-link/index.html +++ b/docs/docs/examples/tab-link/index.html @@ -4,34 +4,34 @@ -Tab / Links | H2O Wave +Tab / Links | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Tab / Links

      Use tab cards to display tabs on a page. +

      Tab / Links

      Use tab cards to display tabs on a page. This examples render tabs styled as links.

      from h2o_wave import site, ui
      page = site['/demo']
      page['tabs'] = ui.tab_card(
      box='1 1 4 1',
      items=[
      ui.tab(name='#menu/spam', label='Spam'),
      ui.tab(name='#menu/ham', label='Ham'),
      ui.tab(name='#menu/eggs', label='Eggs'),
      ui.tab(name='#about', label='About'),
      ],
      link=True,
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/tab-routing/index.html b/docs/docs/examples/tab-routing/index.html index 0fad8cad1f..8f4c7e2926 100644 --- a/docs/docs/examples/tab-routing/index.html +++ b/docs/docs/examples/tab-routing/index.html @@ -4,35 +4,35 @@ -Routing / Tabs | H2O Wave +Routing / Tabs | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Routing / Tabs

      This example demonstrates how you can observe and handle changes to the browser's +

      Routing / Tabs

      This example demonstrates how you can observe and handle changes to the browser's location hash

      The location hash can be accessed using q.args['#'].

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      hash = q.args['#']
      if hash:
      blurb = q.page['blurb']
      if hash == 'menu/spam':
      blurb.content = "Sorry, we're out of spam!"
      elif hash == 'menu/ham':
      blurb.content = "Sorry, we're out of ham!"
      elif hash == 'menu/eggs':
      blurb.content = "Sorry, we're out of eggs!"
      elif hash == 'about':
      blurb.content = 'Everything here is gluten-free!'
      else:
      q.page['nav'] = ui.tab_card(
      box='1 1 4 1',
      items=[
      ui.tab(name='#menu/spam', label='Spam'),
      ui.tab(name='#menu/ham', label='Ham'),
      ui.tab(name='#menu/eggs', label='Eggs'),
      ui.tab(name='#about', label='About'),
      ],
      )
      q.page['blurb'] = ui.markdown_card(
      box='1 2 4 2',
      title='Store',
      content='Welcome to our store!',
      )
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/tab/index.html b/docs/docs/examples/tab/index.html index 8f850e4f98..042a6fb057 100644 --- a/docs/docs/examples/tab/index.html +++ b/docs/docs/examples/tab/index.html @@ -4,33 +4,33 @@ -Tab | H2O Wave +Tab | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Tab

      Use tab cards to display tabs on a page.

      from h2o_wave import site, ui
      +

      Tab

      Use tab cards to display tabs on a page.

      from h2o_wave import site, ui
      page = site['/demo']
      page['tabs'] = ui.tab_card(
      box='1 1 4 1',
      items=[
      ui.tab(name='#menu/spam', label='Spam'),
      ui.tab(name='#menu/ham', label='Ham'),
      ui.tab(name='#menu/eggs', label='Eggs'),
      ui.tab(name='#about', label='About'),
      ],
      )
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-download/index.html b/docs/docs/examples/table-download/index.html index 333de704d1..73b55ebaf9 100644 --- a/docs/docs/examples/table-download/index.html +++ b/docs/docs/examples/table-download/index.html @@ -4,21 +4,21 @@ -Table / Download | H2O Wave +Table / Download | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Table / Download

      Allow downloading a table's data as CSV file.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Download

      Allow downloading a table's data as CSV file.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      fake = Faker()
      _id = 0
      @@ -29,16 +29,16 @@
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      downloadable=True,
      )
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-filter-backend/index.html b/docs/docs/examples/table-filter-backend/index.html index c56b1fca28..439adc5973 100644 --- a/docs/docs/examples/table-filter-backend/index.html +++ b/docs/docs/examples/table-filter-backend/index.html @@ -4,21 +4,21 @@ -Table / Filter / Backend | H2O Wave +Table / Filter / Backend | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Table / Filter / Backend

      Filter table using Python

      import pandas as pd
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Filter / Backend

      Filter table using Python

      import pandas as pd
      from faker import Faker
      from h2o_wave import Q, listen, ui
      fake = Faker()
      N = 50 # number of rows
      # Make a synthetic data frame
      addresses = pd.DataFrame(dict(
      ID=[i + 1 for i in range(N)],
      Name=[fake.name() for _ in range(N)],
      Language=[fake.language_name() for _ in range(N)],
      Job=[fake.job() for _ in range(N)],
      Address=[fake.address() for _ in range(N)],
      City=[fake.city() for _ in range(N)],
      ))
      @@ -31,16 +31,16 @@
      async def serve(q: Q):
      if not q.client.initialized:
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.textbox(name='search', label='Search', placeholder='Enter a keyword...', trigger=True),
      ui.table(
      name='issues',
      columns=[ui.table_column(name=name, label=name) for name in column_names],
      rows=df_to_rows(addresses)
      )
      ])
      q.client.initialized = True
      else:
      items = q.page['form'].items
      search_box = items[0].textbox
      table = items[1].table
      term: str = q.args.search
      term = term.strip() if term else ''
      search_box.value = term
      table.rows = df_to_rows(search_df(addresses, term) if len(term) else addresses)
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-filter/index.html b/docs/docs/examples/table-filter/index.html index cf88ca69c7..2724cb6bdd 100644 --- a/docs/docs/examples/table-filter/index.html +++ b/docs/docs/examples/table-filter/index.html @@ -4,21 +4,21 @@ -Table / Filter | H2O Wave +Table / Filter | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Table / Filter

      Enable filtering values for specific columns.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Filter

      Enable filtering values for specific columns.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      fake = Faker()
      _id = 0
      @@ -29,16 +29,16 @@
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues]
      )
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-groupby/index.html b/docs/docs/examples/table-groupby/index.html index 064924fb12..f43f73243f 100644 --- a/docs/docs/examples/table-groupby/index.html +++ b/docs/docs/examples/table-groupby/index.html @@ -4,21 +4,21 @@ -Table / Group by | H2O Wave +Table / Group by | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Table / Group by

      Allow grouping a table by column values.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Group by

      Allow grouping a table by column values.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      fake = Faker()
      _id = 0
      @@ -29,16 +29,16 @@
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      groupable=True,
      )])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-markdown/index.html b/docs/docs/examples/table-markdown/index.html index d8914e53f6..850baf8ac8 100644 --- a/docs/docs/examples/table-markdown/index.html +++ b/docs/docs/examples/table-markdown/index.html @@ -4,21 +4,21 @@ -Table / Markdown | H2O Wave +Table / Markdown | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Table / Markdown

      Display a table using markdown.

      from h2o_wave import site, ui
      +

      Table / Markdown

      Display a table using markdown.

      from h2o_wave import site, ui
      air_passengers_fields = ['Year', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
      air_passengers_rows = [
      ['1949', '112', '118', '132', '129', '121', '135'],
      ['1950', '115', '126', '141', '135', '125', '149'],
      ['1951', '145', '150', '178', '163', '172', '178'],
      ['1952', '171', '180', '193', '181', '183', '218'],
      ['1953', '196', '196', '236', '235', '229', '243'],
      ['1954', '204', '188', '235', '227', '234', '264'],
      ['1955', '242', '233', '267', '269', '270', '315'],
      ['1956', '284', '277', '317', '313', '318', '374'],
      ['1957', '315', '301', '356', '348', '355', '422'],
      ['1958', '340', '318', '362', '348', '363', '435'],
      ['1959', '360', '342', '406', '396', '420', '472'],
      ['1960', '417', '391', '419', '461', '472', '535'],
      ]
      def make_markdown_row(values):
      return f"| {' | '.join([str(x) for x in values])} |"
      @@ -27,16 +27,16 @@
      page = site['/demo']
      v = page.add('example', ui.form_card(
      box='1 1 4 5',
      items=[
      ui.text(make_markdown_table(
      fields=air_passengers_fields,
      rows=air_passengers_rows,
      )),
      ],
      ))
      -
      page.save()
      Edit this page
      +
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-search/index.html b/docs/docs/examples/table-search/index.html index 5ca55e5414..8f866250e2 100644 --- a/docs/docs/examples/table-search/index.html +++ b/docs/docs/examples/table-search/index.html @@ -4,21 +4,21 @@ -Table / Search | H2O Wave +Table / Search | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Table / Search

      Enable searching a table across specific columns.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Search

      Enable searching a table across specific columns.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      fake = Faker()
      _id = 0
      @@ -29,16 +29,16 @@
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      )
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-select/index.html b/docs/docs/examples/table-select/index.html new file mode 100644 index 0000000000..fa03eacd60 --- /dev/null +++ b/docs/docs/examples/table-select/index.html @@ -0,0 +1,44 @@ + + + + + + +Table / Preselection | H2O Wave + + + + + + + + + + + + +
      +

      Table / Preselection

      Use a table as an advanced multi-select. Specify rownames in 'values' for preselection.

      from faker import Faker
      from h2o_wave import Q, listen, ui
      +
      fake = Faker()
      +
      _id = 0
      +
      +
      class Issue:
      def __init__(self, text: str):
      global _id
      _id += 1
      self.id = f'I{_id}'
      self.text = text
      +
      +
      # Create some issues
      issues = [Issue(text=fake.sentence()) for i in range(10)]
      +
      # Create columns for our issue table.
      columns = [ui.table_column(name='text', label='Issue', min_width='300px')]
      +
      +
      async def main(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.issues}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(name=issue.id, cells=[issue.text]) for issue in issues],
      values=['I1', 'I2', 'I3']
      ),
      ui.button(name='show_inputs', label='Submit', primary=True)
      ])
      await q.page.save()
      +
      +
      listen('/demo', main)
      Edit this page
      + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-sort/index.html b/docs/docs/examples/table-sort/index.html index ba61c19ef4..71d11046b6 100644 --- a/docs/docs/examples/table-sort/index.html +++ b/docs/docs/examples/table-sort/index.html @@ -4,21 +4,21 @@ -Table / Sort | H2O Wave +Table / Sort | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Table / Sort

      Allow sorting a table by specific columns.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Sort

      Allow sorting a table by specific columns.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      fake = Faker()
      _id = 0
      @@ -29,16 +29,16 @@
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      )
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table/index.html b/docs/docs/examples/table/index.html index 5197720ee8..5c7f282e82 100644 --- a/docs/docs/examples/table/index.html +++ b/docs/docs/examples/table/index.html @@ -4,21 +4,21 @@ -Table | H2O Wave +Table | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Table

      Use a table to display tabular data.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table

      Use a table to display tabular data.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      fake = Faker()
      _id = 0
      @@ -29,16 +29,16 @@
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      groupable=True,
      downloadable=True,
      resettable=True,
      height='800px'
      )
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/tabs/index.html b/docs/docs/examples/tabs/index.html index f37695193e..de335ba026 100644 --- a/docs/docs/examples/tabs/index.html +++ b/docs/docs/examples/tabs/index.html @@ -4,37 +4,37 @@ -Form / Tabs | H2O Wave +Form / Tabs | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Tabs

      Use tabs within a form to navigate between two or more distinct content categories.

      from h2o_wave import Q, listen, ui
      +

      Form / Tabs

      Use tabs within a form to navigate between two or more distinct content categories.

      from h2o_wave import Q, listen, ui
      tabs = [
      ui.tab(name='email', label='Mail', icon='Mail'),
      ui.tab(name='events', label='Events', icon='Calendar'),
      ui.tab(name='spam', label='Spam'),
      ]
      async def serve(q: Q):
      if q.args.menu:
      q.page['example'].items = [
      ui.tabs(name='menu', value=q.args.menu, items=tabs),
      get_tab_content(q.args.menu),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.tabs(name='menu', value='email', items=tabs),
      get_tab_content('email'),
      ])
      await q.page.save()
      def get_tab_content(category: str):
      # Return a checklist of dummy items.
      items = [f'{category.title()} {i}' for i in range(1, 11)]
      return ui.checklist(name='items', choices=[ui.choice(name=item, label=item) for item in items])
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/template-data/index.html b/docs/docs/examples/template-data/index.html index 8cbfdff061..4906affc50 100644 --- a/docs/docs/examples/template-data/index.html +++ b/docs/docs/examples/template-data/index.html @@ -4,37 +4,37 @@ -Template / Data | H2O Wave +Template / Data | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Template / Data

      Update a template card's data periodically.

      import time
      import random
      from h2o_wave import site, ui
      +

      Template / Data

      Update a template card's data periodically.

      import time
      import random
      from h2o_wave import site, ui
      page = site['/demo']
      page.drop()
      menu = '''
      <ol>
      {{#each dishes}}
      <li><strong>{{name}}</strong> costs {{price}}</li>
      {{/each}}
      </ol
      '''
      menu_card = page.add('template_example', ui.template_card(
      box=f'1 1 2 2',
      title='Surge-priced Menu',
      content=menu,
      data=dict(dishes=[
      dict(name='Spam', price='$2.00'),
      dict(name='Ham', price='$3.45'),
      dict(name='Eggs', price='$1.75'),
      ]),
      ))
      page.save()
      def rand_price(): return f'${random.randrange(0, 4)}.{random.randrange(10, 99)}'
      -
      dishes = menu_card.data.dishes
      for i in range(98, 2, -1):
      time.sleep(1)
      dishes[0].price = rand_price()
      dishes[1].price = rand_price()
      dishes[2].price = rand_price()
      page.save()
      Edit this page
      +
      dishes = menu_card.data.dishes
      for i in range(98, 2, -1):
      time.sleep(1)
      dishes[0].price = rand_price()
      dishes[1].price = rand_price()
      dishes[2].price = rand_price()
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/template/index.html b/docs/docs/examples/template/index.html index 2d920c8420..78a410ded0 100644 --- a/docs/docs/examples/template/index.html +++ b/docs/docs/examples/template/index.html @@ -4,33 +4,33 @@ -Template | H2O Wave +Template | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Template

      Use a template card to render dynamic content using a HTML template.

      from h2o_wave import site, pack, ui
      +

      Template

      Use a template card to render dynamic content using a HTML template.

      from h2o_wave import site, pack, ui
      page = site['/demo']
      page.drop()
      menu = '''
      <ol>
      {{#each dishes}}
      <li><strong>{{name}}</strong> costs {{price}}</li>
      {{/each}}
      </ol
      '''
      -
      c = page.add('template_example', ui.template_card(
      box=f'1 1 2 2',
      title='Menu',
      content=menu,
      data=pack(dict(dishes=[
      dict(name='Spam', price='$2.00'),
      dict(name='Ham', price='$3.45'),
      dict(name='Eggs', price='$1.75'),
      ])),
      ))
      page.save()
      Edit this page
      +
      c = page.add('template_example', ui.template_card(
      box=f'1 1 2 2',
      title='Menu',
      content=menu,
      data=pack(dict(dishes=[
      dict(name='Spam', price='$2.00'),
      dict(name='Ham', price='$3.45'),
      dict(name='Eggs', price='$1.75'),
      ])),
      ))
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/text-sizes/index.html b/docs/docs/examples/text-sizes/index.html index baccbc709c..38b7038acc 100644 --- a/docs/docs/examples/text-sizes/index.html +++ b/docs/docs/examples/text-sizes/index.html @@ -4,33 +4,33 @@ -Form / Text / Sizes | H2O Wave +Form / Text / Sizes | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Text / Sizes

      Use text size variants to display formatted text using predefined font sizes.

      from h2o_wave import site, ui
      +

      Form / Text / Sizes

      Use text size variants to display formatted text using predefined font sizes.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.separator('Separator'),
      ui.text_xl('Extra large text'),
      ui.text_l('Large text'),
      ui.text('Normal text'),
      ui.text_m('Medium text'),
      ui.text_s('Small text'),
      ui.text_xs('Extra small text'),
      -
      # Using `ui.text()` with a `size` argument produces similar results:
      ui.separator('Separator'),
      ui.text('Extra large text', size='xl'),
      ui.text('Large text', size='l'),
      ui.text('Normal text'),
      ui.text('Medium text', size='m'),
      ui.text('Small text', size='s'),
      ui.text('Extra small text', size='xs'),
      ],
      )
      page.save()
      Edit this page
      +
      # Using `ui.text()` with a `size` argument produces similar results:
      ui.separator('Separator'),
      ui.text('Extra large text', size='xl'),
      ui.text('Large text', size='l'),
      ui.text('Normal text'),
      ui.text('Medium text', size='m'),
      ui.text('Small text', size='s'),
      ui.text('Extra small text', size='xs'),
      ],
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/text/index.html b/docs/docs/examples/text/index.html index d6ad230590..bbc010db71 100644 --- a/docs/docs/examples/text/index.html +++ b/docs/docs/examples/text/index.html @@ -4,21 +4,21 @@ -Form / Text | H2O Wave +Form / Text | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Text

      Use markdown in a text component to display formatted content within a form.

      from h2o_wave import site, ui
      +

      Form / Text

      Use markdown in a text component to display formatted content within a form.

      from h2o_wave import site, ui
      page = site['/demo']
      sample_markdown = '''
      The **quick** _brown_ fox jumped over the lazy dog.
      Block quote:
      @@ -33,16 +33,16 @@
      Here's a [link to an image](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg).
      Table:
      | Column 1 | Column 2 | Column 3 |
      | -------- | -------- | -------- |
      | Item 1 | Item 2 | Item 3 |
      | Item 1 | Item 2 | Item 3 |
      | Item 1 | Item 2 | Item 3 |
      '''
      -
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[ui.text(sample_markdown)]
      )
      page.save()
      Edit this page
      +
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[ui.text(sample_markdown)]
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/textbox-trigger/index.html b/docs/docs/examples/textbox-trigger/index.html index 5135e4d7bb..0e67b1612a 100644 --- a/docs/docs/examples/textbox-trigger/index.html +++ b/docs/docs/examples/textbox-trigger/index.html @@ -4,36 +4,36 @@ -Form / Textbox / Trigger | H2O Wave +Form / Textbox / Trigger | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Textbox / Trigger

      To handle live changes to a textbox, enable the trigger attribute.

      from h2o_wave import Q, listen, ui
      +

      Form / Textbox / Trigger

      To handle live changes to a textbox, enable the trigger attribute.

      from h2o_wave import Q, listen, ui
      def to_pig_latin(text: str):
      if text is None:
      return ''
      words = text.lower().strip().split(" ")
      text = []
      for word in words:
      if word[0] in 'aeiou':
      text.append(f'{word}yay')
      else:
      for letter in word:
      if letter in 'aeiou':
      text.append(f'{word[word.index(letter):]}{word[:word.index(letter)]}ay')
      break
      return " ".join(text)
      async def serve(q: Q):
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.textbox(name='text', label='English', value=q.args.text or '', multiline=True, trigger=True),
      ui.label('Pig Latin'),
      ui.text(to_pig_latin(q.args.text) or '*Type in some text above to translate to Pig Latin!*'),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/textbox/index.html b/docs/docs/examples/textbox/index.html index c21e5b3f77..14155dbe9c 100644 --- a/docs/docs/examples/textbox/index.html +++ b/docs/docs/examples/textbox/index.html @@ -4,34 +4,34 @@ -Form / Textbox | H2O Wave +Form / Textbox | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Textbox

      Use a textbox to allow users to provide text inputs.

      from h2o_wave import Q, listen, ui
      +

      Form / Textbox

      Use a textbox to allow users to provide text inputs.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'textbox={q.args.textbox}'),
      ui.text(f'textbox_disabled={q.args.textbox_disabled}'),
      ui.text(f'textbox_readonly={q.args.textbox_readonly}'),
      ui.text(f'textbox_required={q.args.textbox_required}'),
      ui.text(f'textbox_error={q.args.textbox_error}'),
      ui.text(f'textbox_mask={q.args.textbox_mask}'),
      ui.text(f'textbox_icon={q.args.textbox_icon}'),
      ui.text(f'textbox_prefix={q.args.textbox_prefix}'),
      ui.text(f'textbox_suffix={q.args.textbox_suffix}'),
      ui.text(f'textbox_placeholder={q.args.textbox_placeholder}'),
      ui.text(f'textbox_disabled_placeholder={q.args.textbox_disabled_placeholder}'),
      ui.text(f'textbox_multiline={q.args.textbox_multiline}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.textbox(name='textbox', label='Standard'),
      ui.textbox(name='textbox_disabled', label='Disabled', value='I am disabled', disabled=True),
      ui.textbox(name='textbox_readonly', label='Read-only', value='I am read-only', readonly=True),
      ui.textbox(name='textbox_required', label='Required', required=True),
      ui.textbox(name='textbox_error', label='With error message', error='I have an error'),
      ui.textbox(name='textbox_mask', label='With input mask', mask='(999) 999 - 9999'),
      ui.textbox(name='textbox_icon', label='With icon', icon='Calendar'),
      ui.textbox(name='textbox_prefix', label='With prefix', prefix='http://'),
      ui.textbox(name='textbox_suffix', label='With suffix', suffix='@h2o.ai'),
      ui.textbox(name='textbox_placeholder', label='With placeholder', placeholder='I need some input'),
      ui.textbox(name='textbox_disabled_placeholder', label='Disabled with placeholder', disabled=True,
      placeholder='I am disabled'),
      ui.textbox(name='textbox_multiline', label='Multiline textarea', multiline=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/todo/index.html b/docs/docs/examples/todo/index.html index d7d09f4253..f5a85affd3 100644 --- a/docs/docs/examples/todo/index.html +++ b/docs/docs/examples/todo/index.html @@ -4,21 +4,21 @@ -To-do List App | H2O Wave +To-do List App | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      To-do List App

      A simple multi-user To-do list application.

      from h2o_wave import Q, listen, ui
      from typing import List
      +

      To-do List App

      A simple multi-user To-do list application.

      from h2o_wave import Q, listen, ui
      from typing import List
      _id = 0
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.done = False
      self.text = text
      @@ -36,16 +36,16 @@
      async def new_todo(q: Q):
      # Display an input form
      q.page['form'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_l('Add To Do'),
      ui.textbox(name='text', label='What needs to be done?', multiline=True),
      ui.buttons([
      ui.button(name='add_todo', label='Add', primary=True),
      ui.button(name='show_todos', label='Back'),
      ]),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/toggle/index.html b/docs/docs/examples/toggle/index.html index 5c2c2e3a3f..ba784a6748 100644 --- a/docs/docs/examples/toggle/index.html +++ b/docs/docs/examples/toggle/index.html @@ -4,34 +4,34 @@ -Form / Toggle | H2O Wave +Form / Toggle | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Form / Toggle

      Use a toggle to present users with two mutually exclusive options (to turn settings on and off).

      from h2o_wave import Q, listen, ui
      +

      Form / Toggle

      Use a toggle to present users with two mutually exclusive options (to turn settings on and off).

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'toggle_unchecked={q.args.toggle_unchecked}'),
      ui.text(f'toggle_checked={q.args.toggle_checked}'),
      ui.text(f'toggle_unchecked_disabled={q.args.toggle_unchecked_disabled}'),
      ui.text(f'toggle_checked_disabled={q.args.toggle_checked_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.toggle(name='toggle_unchecked', label='Not checked'),
      ui.toggle(name='toggle_checked', label='Checked', value=True),
      ui.toggle(name='toggle_unchecked_disabled', label='Not checked (Disabled)', disabled=True),
      ui.toggle(name='toggle_checked_disabled', label='Checked (Disabled)', value=True, disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/toolbar-routing/index.html b/docs/docs/examples/toolbar-routing/index.html index b5247d82ad..ebab708227 100644 --- a/docs/docs/examples/toolbar-routing/index.html +++ b/docs/docs/examples/toolbar-routing/index.html @@ -4,35 +4,35 @@ -Routing / Toolbar | H2O Wave +Routing / Toolbar | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Routing / Toolbar

      This example demonstrates how you can observe and handle changes to the browser's +

      Routing / Toolbar

      This example demonstrates how you can observe and handle changes to the browser's location hash

      The location hash can be accessed using q.args['#'].

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      hash = q.args['#']
      if hash:
      blurb = q.page['blurb']
      if hash == 'menu/spam':
      blurb.content = "Sorry, we're out of spam!"
      elif hash == 'menu/ham':
      blurb.content = "Sorry, we're out of ham!"
      elif hash == 'menu/eggs':
      blurb.content = "Sorry, we're out of eggs!"
      elif hash == 'about':
      blurb.content = 'Everything here is gluten-free!'
      else:
      q.page['nav'] = ui.toolbar_card(
      box='1 1 4 1',
      items=[
      ui.command(name='#menu/spam', label='Spam'),
      ui.command(name='#menu/ham', label='Ham'),
      ui.command(name='#menu/eggs', label='Eggs'),
      ui.command(name='#about', label='About'),
      ],
      )
      q.page['blurb'] = ui.markdown_card(
      box='1 2 4 2',
      title='Store',
      content='Welcome to our store!',
      )
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/toolbar/index.html b/docs/docs/examples/toolbar/index.html index a4d3a2ae31..26e0df8cdb 100644 --- a/docs/docs/examples/toolbar/index.html +++ b/docs/docs/examples/toolbar/index.html @@ -4,34 +4,34 @@ -Toolbar | H2O Wave +Toolbar | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Toolbar

      Use toolbars to provide commands that operate on the content of a page.

      from h2o_wave import Q, listen, ui
      +

      Toolbar

      Use toolbars to provide commands that operate on the content of a page.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      q.page['nav'] = ui.toolbar_card(
      box='1 1 4 1',
      items=[
      ui.command(
      name='new', label='New', icon='Add', items=[
      ui.command(name='email', label='Email Message', icon='Mail'),
      ui.command(name='calendar', label='Calendar Event', icon='Calendar'),
      ]
      ),
      ui.command(name='upload', label='Upload', icon='Upload'),
      ui.command(name='share', label='Share', icon='Share'),
      ui.command(name='download', label='Download', icon='Download'),
      ],
      secondary_items=[
      ui.command(name='tile', caption='Grid View', icon='Tiles'),
      ui.command(name='info', caption='Info', icon='Info'),
      ],
      overflow_items=[
      ui.command(name='move', label='Move to...', icon='MoveToFolder'),
      ui.command(name='copy', label='Copy to...', icon='Copy'),
      ui.command(name='rename', label='Rename', icon='Edit'),
      ],
      )
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/upload-async/index.html b/docs/docs/examples/upload-async/index.html index 486c0c8d4e..76f9ac4284 100644 --- a/docs/docs/examples/upload-async/index.html +++ b/docs/docs/examples/upload-async/index.html @@ -4,37 +4,37 @@ -Uploads / Async | H2O Wave +Uploads / Async | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Uploads / Async

      Upload files from an interactive app.

      import os
      from h2o_wave import Q, listen, ui
      +

      Uploads / Async

      Upload files from an interactive app.

      import os
      from h2o_wave import Q, listen, ui
      def write_csv(filename, rows):
      with open(filename, 'w') as f:
      f.write('\n'.join([','.join([str(x) for x in row]) for row in rows]))
      async def serve(q: Q):
      if q.args.generate_csv:
      # Generate
      write_csv('squares.csv', [[x, x * x] for x in range(1, 1 + q.args.row_count)])
      # Upload
      download_path, = await q.site.upload(['squares.csv'])
      # Clean up
      os.remove('squares.csv')
      # Display link
      q.page['example'].items = [
      ui.text_xl('Squares Generated!'),
      ui.text(f'[Download my {q.args.row_count} squares!]({download_path})'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      # Accept a row count from the user
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl('Square Generator'),
      ui.slider(name='row_count', label='Squares to generate', min=0, max=100, step=10, value=30),
      ui.button(name='generate_csv', label='Generate', primary=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/upload-download/index.html b/docs/docs/examples/upload-download/index.html index 0f124375fe..1334c69a1a 100644 --- a/docs/docs/examples/upload-download/index.html +++ b/docs/docs/examples/upload-download/index.html @@ -4,35 +4,35 @@ -Uploads / Download | H2O Wave +Uploads / Download | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Uploads / Download

      Accept files from the user and downloads them locally.

      import os
      import os.path
      from h2o_wave import Q, listen, ui
      +

      Uploads / Download

      Accept files from the user and downloads them locally.

      import os
      import os.path
      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      links = q.args.user_files
      if links:
      items = [ui.text_xl('Files uploaded!')]
      for link in links:
      local_path = await q.site.download(link, '.')
      #
      # The file is now available locally; process the file.
      # To keep this example simple, we just read the file size.
      #
      size = os.path.getsize(local_path)
      items.append(ui.link(label=f'{os.path.basename(link)} ({size} bytes)', download=True, path=link))
      # Clean up
      os.remove(local_path)
      items.append(ui.button(name='back', label='Back', primary=True))
      q.page['example'].items = items
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl('Upload some files'),
      ui.file_upload(name='user_files', label='Upload', multiple=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/upload-ui/index.html b/docs/docs/examples/upload-ui/index.html index fbe82af24f..15a7d5e00c 100644 --- a/docs/docs/examples/upload-ui/index.html +++ b/docs/docs/examples/upload-ui/index.html @@ -4,36 +4,36 @@ -Uploads / UI | H2O Wave +Uploads / UI | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Uploads / UI

      Accept files from the user.

      import os
      from h2o_wave import Q, listen, ui
      import os.path
      +

      Uploads / UI

      Accept files from the user.

      import os
      from h2o_wave import Q, listen, ui
      import os.path
      def make_link_list(links):
      # Make a markdown list of links.
      return '\n'.join([f'- [{os.path.basename(link)}]({link})' for link in links])
      async def serve(q: Q):
      if q.args.user_files:
      q.page['example'].items = [
      ui.text_xl('Files uploaded!'),
      ui.text(make_link_list(q.args.user_files)),
      ui.button(name='back', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl('Upload some files'),
      ui.file_upload(name='user_files', label='Upload', multiple=True),
      ])
      await q.page.save()
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/upload/index.html b/docs/docs/examples/upload/index.html index 88cbc6eba4..31d2e1a7db 100644 --- a/docs/docs/examples/upload/index.html +++ b/docs/docs/examples/upload/index.html @@ -4,37 +4,37 @@ -Uploads | H2O Wave +Uploads | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Uploads

      Upload files to the Q server.

      import os
      from h2o_wave import site, ui
      +

      Uploads

      Upload files to the Q server.

      import os
      from h2o_wave import site, ui
      def write_csv(filename, rows):
      with open(filename, 'w') as f:
      f.write('\n'.join([','.join([str(x) for x in row]) for row in rows]))
      # Create a couple of fake CSV files
      write_csv('squares.csv', [[x, x * x] for x in range(1, 11)])
      write_csv('cubes.csv', [[x, x * x * x] for x in range(1, 11)])
      # Upload CSVs
      squares_path, cubes_path = site.upload(['squares.csv', 'cubes.csv'])
      # Delete local CSVs
      os.remove('squares.csv')
      os.remove('cubes.csv')
      -
      # Display links to these CSVs
      page = site['/demo']
      page['example'] = ui.markdown_card(
      box='1 1 2 2',
      title='Download CSVs',
      content=f'[Squares]({squares_path}) [Cubes]({cubes_path})',
      )
      page.save()
      Edit this page
      +
      # Display links to these CSVs
      page = site['/demo']
      page['example'] = ui.markdown_card(
      box='1 1 2 2',
      title='Download CSVs',
      content=f'[Squares]({squares_path}) [Cubes]({cubes_path})',
      )
      page.save()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/wizard/index.html b/docs/docs/examples/wizard/index.html index 31eb3c2acc..186ee46490 100644 --- a/docs/docs/examples/wizard/index.html +++ b/docs/docs/examples/wizard/index.html @@ -4,21 +4,21 @@ -Wizard | H2O Wave +Wizard | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Wizard

      Create a multi-step wizard using form cards.

      from h2o_wave import Q, ui, listen, cypress, Cypress
      +

      Wizard

      Create a multi-step wizard using form cards.

      from h2o_wave import Q, ui, listen, cypress, Cypress
      async def serve(q: Q):
      if not q.client.initialized: # First visit, create an empty form card for our wizard
      q.page['wizard'] = ui.form_card(box='1 1 2 4', items=[])
      q.client.initialized = True
      wizard = q.page['wizard'] # Get a reference to the wizard form
      if q.args.step1:
      wizard.items = [
      ui.text_xl('Wizard - Step 1'),
      ui.text("What is your name?"),
      ui.textbox(name='nickname', label='My name is...', value='Gandalf'),
      ui.buttons([ui.button(name='step2', label='Next', primary=True)]),
      ]
      elif q.args.step2:
      q.client.nickname = q.args.nickname
      wizard.items = [
      ui.text_xl('Wizard - Step 2'),
      ui.text(f"Hi {q.args.nickname}! How do you feel right now?"),
      ui.textbox(name='feeling', label='I feel...', value='magical'),
      ui.buttons([ui.button(name='step3', label='Next', primary=True)]),
      ]
      elif q.args.step3:
      wizard.items = [
      ui.text_xl('Wizard - Done'),
      ui.text(f"What a coincidence, {q.client.nickname}! I feel {q.args.feeling} too!"),
      ui.buttons([ui.button(name='step1', label='Try Again', primary=True)]),
      ]
      else:
      wizard.items = [
      ui.text_xl('Wizard Example'),
      ui.text("Let's have a conversation, shall we?"),
      ui.buttons([ui.button(name='step1', label='Of course!', primary=True)]),
      ]
      @@ -26,16 +26,16 @@
      @cypress('Walk through the wizard')
      def try_walk_through(cy: Cypress):
      cy.visit('/demo')
      cy.locate('step1').click()
      cy.locate('text').should('contain.text', 'What is your name?')
      cy.locate('nickname').clear().type('Fred')
      cy.locate('step2').click()
      cy.locate('text').should('contain.text', 'Hi Fred! How do you feel right now?')
      cy.locate('feeling').clear().type('quirky')
      cy.locate('step3').click()
      cy.locate('text').should('contain.text', 'What a coincidence, Fred! I feel quirky too!')
      -
      listen('/demo', serve)
      Edit this page
      +
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/expressions/index.html b/docs/docs/expressions/index.html index 8fbb9b66dd..246dc737c6 100644 --- a/docs/docs/expressions/index.html +++ b/docs/docs/expressions/index.html @@ -4,30 +4,30 @@ -Data-binding | H2O Wave +Data-binding | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Data-binding

      Some cards in the Wave SDK support data-binding expressions, a mini language that allows computing a card's attribute from the card's data.

      Rationale

      A card's attribute can be set directly when created:

      card = page.add(f'donut', ui.small_stat_card(
      box='1 1 2 2',
      title='Donut',
      value='2.99',
      ))

      The attribute can be updated later using:

      card.value = '3.49'

      The above approach works fine, but sometimes it's prudent to separate the data (what is displayed) from the presentation (how it is displayed). This is especially important if you care about internationalization and displaying language-sensitive number, date, and time formatting.

      The above example can be rewritten by pulling the donut price out into data, and pointing the value to the data using an expression:

      card = page.add(f'donut', ui.small_stat_card(
      box='1 1 2 2',
      title='Donut',
      value='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      data=dict(price=2.99),
      ))

      The attribute can be update later using:

      card.data.price = 3.49

      Syntax

      Data-binding expressions are indicated with a leading = (similar to spreadsheet formulae). For example, '={{price}}' is an expression, but '{{price}}' is not.

      Placeholders are enclosed between {{ and }}. The placeholder price in ={{price}} points to data.price. If data.price is 2.99:

      • ={{price}} translates to 2.99.
      • =${{price}} translates to $2.99.
      • =Donuts cost ${{price}} translates to Donuts cost $2.99.

      An expression can have multiple placeholders. For example, ={{product}} costs {{price}}

      If an expression has a placeholder and nothing else, the {{ and }} can be elided. For example, =price is shorthand for ={{price}}.

      Functions can be applied to placeholders using the general form {{function_name placeholder param1=arg1 param2=arg2 ...}}. For example {{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}} applies the formatting function intl to price with arguments minimum_fraction_digits=2 and maximum_fraction_digits=2.

      Functions

      Expressions currently support only one function, intl, which provides language-sensitive number, date, and time formatting using the ECMAScript Internationalization API.

      tip

      Options in the Internationalization API are camelCased, but you can use both camelCased and snake_cased options in data-binding expressions. For example, both maximum_fraction_digits and maximumFractionDigits are valid.

      Edit this page
      +

      Data-binding

      Some cards in the Wave SDK support data-binding expressions, a mini language that allows computing a card's attribute from the card's data.

      Rationale

      A card's attribute can be set directly when created:

      card = page.add(f'donut', ui.small_stat_card(
      box='1 1 2 2',
      title='Donut',
      value='2.99',
      ))

      The attribute can be updated later using:

      card.value = '3.49'

      The above approach works fine, but sometimes it's prudent to separate the data (what is displayed) from the presentation (how it is displayed). This is especially important if you care about internationalization and displaying language-sensitive number, date, and time formatting.

      The above example can be rewritten by pulling the donut price out into data, and pointing the value to the data using an expression:

      card = page.add(f'donut', ui.small_stat_card(
      box='1 1 2 2',
      title='Donut',
      value='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      data=dict(price=2.99),
      ))

      The attribute can be update later using:

      card.data.price = 3.49

      Syntax

      Data-binding expressions are indicated with a leading = (similar to spreadsheet formulae). For example, '={{price}}' is an expression, but '{{price}}' is not.

      Placeholders are enclosed between {{ and }}. The placeholder price in ={{price}} points to data.price. If data.price is 2.99:

      • ={{price}} translates to 2.99.
      • =${{price}} translates to $2.99.
      • =Donuts cost ${{price}} translates to Donuts cost $2.99.

      An expression can have multiple placeholders. For example, ={{product}} costs {{price}}

      If an expression has a placeholder and nothing else, the {{ and }} can be elided. For example, =price is shorthand for ={{price}}.

      Functions can be applied to placeholders using the general form {{function_name placeholder param1=arg1 param2=arg2 ...}}. For example {{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}} applies the formatting function intl to price with arguments minimum_fraction_digits=2 and maximum_fraction_digits=2.

      Functions

      Expressions currently support only one function, intl, which provides language-sensitive number, date, and time formatting using the ECMAScript Internationalization API.

      tip

      Options in the Internationalization API are camelCased, but you can use both camelCased and snake_cased options in data-binding expressions. For example, both maximum_fraction_digits and maximumFractionDigits are valid.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/files/index.html b/docs/docs/files/index.html index 3d2ca6867e..9fe6ecc0e6 100644 --- a/docs/docs/files/index.html +++ b/docs/docs/files/index.html @@ -4,34 +4,34 @@ -Files | H2O Wave +Files | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Files

      Wave provides four functions to manage files from your app:

      • ui.file_upload() allows uploading files from the browser to the Wave server.
      • q.site.upload() uploads files from your app to the Wave server.
      • q.site.download() downloads a file from the Wave server to your app.
      • q.site.unload() deletes a file from the Wave server.

      Accept file uploads

      Use a file upload component (ui.file_upload()) to accept file uploads from the browser. Files get uploaded from the browser and get stored on the Wave server. Use q.site.download() to download files from the Wave server to your app.

      from h2o_wave import Q, listen, ui
      +

      Files

      Wave provides four functions to manage files from your app:

      • ui.file_upload() allows uploading files from the browser to the Wave server.
      • q.site.upload() uploads files from your app to the Wave server.
      • q.site.download() downloads a file from the Wave server to your app.
      • q.site.unload() deletes a file from the Wave server.

      Accept file uploads

      Use a file upload component (ui.file_upload()) to accept file uploads from the browser. Files get uploaded from the browser and get stored on the Wave server. Use q.site.download() to download files from the Wave server to your app.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      paths = q.args.datasets
      if not paths:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl('Upload datasets'),
      ui.file_upload(name='datasets', label='Upload', multiple=True),
      ])
      else:
      for path in paths:
      local_path = await q.site.download(path, '.')
      # Do something with the file located at local_path
      # ...
      await q.page.save()
      listen('/uploads', serve)
      tip

      After a file is uploaded from the browser, it is stored forever on the Wave server. If you don't need the file any longer, use q.site.unload() to delete it from the Wave server.

      Provide file downloads

      Use q.site.upload() to upload files from your app to the Wave server. Use the returned paths to display download links in the browser.

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      download_path, = await q.site.upload(['results.csv'])
      q.page['download'] = ui.form_card(box='1 1 2 2', items = [
      ui.link(label='Download Results', path=download_path),
      ])
      await q.page.save()
      -
      listen('/downloads', serve)
      tip

      q.site.upload() accepts a list of file paths, so you can upload multiple files at a time.

      Edit this page
      +
      listen('/downloads', serve)
      tip

      q.site.upload() accepts a list of file paths, so you can upload multiple files at a time.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/getting-started/index.html b/docs/docs/getting-started/index.html index 6bbbddcf8b..12edc4b329 100644 --- a/docs/docs/getting-started/index.html +++ b/docs/docs/getting-started/index.html @@ -4,35 +4,35 @@ -Introduction | H2O Wave +Introduction | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Introduction

      H2O Wave lets you build and deploy amazing realtime analytics with dramatically less effort.

      What is H2O Wave?

      H2O Wave is a software stack for building beautiful, low-latency, realtime, browser-based applications and dashboards entirely in Python without using HTML, Javascript or CSS.

      It excels at capturing data, visualizations, and graphics from multiple sources, and broadcasting them live over the web.

      What can I do with it?

      H2O Wave gives your Python programs the ability to push content to connected clients as it happens, in realtime. In other words, it lets your program display up-to-date information without asking your users to hit their browser's reload button.

      You can use H2O Wave for:

      • Dashboards and visualizations for live monitoring.
      • Live information displays: news, tickers, health, or performance data.
      • Apps that require instant notifications, updates, events, or alerts.
      • Apps that involve messaging: chat, bots, etc.
      • Collaborative apps: whiteboards, sharing, etc.

      You can also use H2O Wave when you find yourself reaching for a web application framework - it can handle regular (non-realtime) apps just fine.

      How do I use it?

      H2O Wave's mental model is simple, but powerful1:

      1. Your instance holds a collection of pages.
      2. To change a page, simply grab a reference to a page, change it, and save it.

      That's it. Your changes are now visible to everyone.

      This simplicity makes it fast, fun and easy to rapidly build and deploy interactive applications without having to reason about client/server, HTTP request/response, browser quirks, and front-end development.

      The API is concise and elegant, freeing you to create in broad strokes, tackling high level ideas first, and polishing up the details later.

      Show me some code!

      Here's a bean counter. Clicking the button increments the bean count:

      And here's how it's written:

      from h2o_wave import Q, listen, ui
      +

      Introduction

      H2O Wave lets you build and deploy amazing, realtime analytics with dramatically less effort.

      What is H2O Wave?

      H2O Wave is a software stack for building beautiful, low-latency, realtime, browser-based applications and dashboards entirely in Python without using HTML, Javascript, or CSS.

      It excels at capturing data, visualizations, and graphics from multiple sources and broadcasting them live over the web.

      What can I do with it?

      H2O Wave gives your Python programs the ability to push content to connected clients as it happens, in realtime. In other words, it lets your program display up-to-date information without asking your users to hit their browser's reload button.

      You can use H2O Wave for:

      • Dashboards and visualizations for live monitoring.
      • Live information displays: news, tickers, health, or performance data.
      • Apps that require instant notifications, updates, events, or alerts.
      • Apps that involve messaging: chat, bots, etc.
      • Collaborative apps: whiteboards, sharing, etc.

      You can also use H2O Wave when you find yourself reaching for a web application framework - it can handle regular (non-realtime) apps just fine.

      How do I use it?

      H2O Wave's mental model is simple, but powerful1:

      1. Your instance holds a collection of pages.
      2. To change a page, simply grab a reference to a page, change it, and save it.

      That's it. Your changes are now visible to everyone.

      This simplicity makes it fast, fun, and easy to rapidly build and deploy interactive applications without having to reason about client/server, HTTP request/response, browser quirks, or front-end development.

      The API is concise and elegant, freeing you to create in broad strokes, tackling high level ideas first and polishing up the details later.

      Show me some code!

      Here's a bean counter. Clicking the button increments the bean count:

      And here's how it's written:

      from h2o_wave import Q, listen, ui
      bean_count = 0
      async def serve(q: Q):
      global bean_count
      # Was the 'increment' button clicked?
      if q.args.increment:
      bean_count += 1
      # Display a form on the page
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.text_xl('Beans!'),
      ui.button(name='increment', label=f'{bean_count} beans'),
      ],
      )
      # Save the page
      await q.page.save()
      -
      listen('/counter', serve)

      What's included?

      The SDK ships batteries-included with a wide variety of user interface widgets and charts. You also get to use your favorite Python libraries seamlessly - anything that works in a Jupyter notebook works in H2O Wave - including Altair, Bokeh, H2O, Keras, Matplotlib, Plotly, PyTorch, Seaborn, TensorFlow, Vega-lite, and others. H2O Wave lets you use and broadcast results from all these libraries, in realtime.

      H2O Wave is not only a programming toolkit but a programmable content server as well: it can capture, retain, and relay information efficiently in realtime. The content server (or Wave Server) is written in Go, a ~10MB static executable without runtime dependencies2. It currently ships with a Python language driver, but is language-agnostic (an R language driver is under development).

      The Wave Server stores all the content and acts as a hub between your user's web browser and your apps. Therefore, it must be up and running before you launch Wave apps. Typically, you only need one Wave Server to serve several apps.

      +---------+
      +------------->+ app1.py |
      | +---------+
      |
      +---------+ +----+-----+ +---------+
      | Browser +------>+ Server +------->+ app2.py |
      +---------+ +----+-----+ +---------+
      |
      | +---------+
      +------------->+ app3.py |
      +---------+
      -

      In Summary

      H2O Wave is rapid application development for a more... civilized age3.

      Also, this page was mostly hyperbole, so let's download it and take it for a spin, shall we.

      1 The model parallels retained mode graphics, with compositing performed on an remote server.

      2 Runs anywhere Go executables run, which is almost everywhere.

      3 Hat tip to xkcd.

      Edit this page
      +
      listen('/counter', serve)

      What's included?

      The SDK ships batteries-included with a wide variety of user interface widgets and charts. You also get to use your favorite Python libraries seamlessly - anything that works in a Jupyter notebook works in H2O Wave - including Altair, Bokeh, H2O, Keras, Matplotlib, Plotly, PyTorch, Seaborn, TensorFlow, Vega-lite, and others. H2O Wave lets you use and broadcast results from all of these libraries, in realtime.

      H2O Wave is not only a programming toolkit but a programmable content server as well: it can capture, retain, and relay information efficiently in realtime. The content server (or Wave Server) is written in Go, a ~10MB static executable without runtime dependencies2. It currently ships with a Python language driver, but is language-agnostic (an R language driver is under development).

      The Wave Server stores all the content and acts as a hub between your user's web browser and your apps. Therefore, it must be up and running before you launch Wave apps. Typically, you only need one Wave Server to serve several apps.

      +---------+
      +------------->+ app1.py |
      | +---------+
      |
      +---------+ +----+-----+ +---------+
      | Browser +------>+ Server +------->+ app2.py |
      +---------+ +----+-----+ +---------+
      |
      | +---------+
      +------------->+ app3.py |
      +---------+
      +

      In Summary

      H2O Wave is rapid application development for a more... civilized age3.

      Also, this page was mostly hyperbole, so let's download it and take it for a spin, shall we.

      1 The model parallels retained mode graphics, with compositing performed on an remote server.

      2 Runs anywhere Go executables run, which is almost everywhere.

      3 Hat tip to xkcd.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/graphics/index.html b/docs/docs/graphics/index.html index d5fc9c115a..a5b9fc466b 100644 --- a/docs/docs/graphics/index.html +++ b/docs/docs/graphics/index.html @@ -4,34 +4,34 @@ -Graphics | H2O Wave +Graphics | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Graphics

      Wave provides a versatile API for rendering vector graphics (SVG) backed by data buffers.

      Use the graphics card ui.graphics_card() to render graphics.

      Stages and scenes

      The graphics card has two attributes that control how graphics are rendered: stage and scene:

      • A stage holds static shapes that are rendered as part of the background (literally, behind the scene).
      • A scene holds shapes whose attributes need to be animated (causing a re-render, or, literally, cause a scene).

      Use ui.stage() and ui.scene() to create the stage and the scene:

      • ui.stage() creates a packed, static representation of its shapes (recall that the stage is not supposed to change).
      • ui.scene() declares a data buffer to efficiently update its shapes if changed (recall that the scene is animated).

      Here's an example that draws a clock with a circular face placed on the stage, and hour, min and sec hands placed in the scene:

      from h2o_wave import site, ui, graphics as g
      +

      Graphics

      Wave provides a versatile API for rendering vector graphics (SVG) backed by data buffers.

      Use the graphics card ui.graphics_card() to render graphics.

      Stages and scenes

      The graphics card has two attributes that control how graphics are rendered: stage and scene:

      • A stage holds static shapes that are rendered as part of the background (literally, behind the scene).
      • A scene holds shapes whose attributes need to be animated (causing a re-render, or, literally, cause a scene).

      Use ui.stage() and ui.scene() to create the stage and the scene:

      • ui.stage() creates a packed, static representation of its shapes (recall that the stage is not supposed to change).
      • ui.scene() declares a data buffer to efficiently update its shapes if changed (recall that the scene is animated).

      Here's an example that draws a clock with a circular face placed on the stage, and hour, min and sec hands placed in the scene:

      from h2o_wave import site, ui, graphics as g
      page = site['/demo']
      page['example'] = ui.graphics_card(
      box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',
      stage=g.stage(
      face=g.circle(cx='50', cy='50', r='45', fill='#111', stroke_width='2px', stroke='#f55'),
      ),
      scene=g.scene(
      hour=g.rect(x='47.5', y='12.5', width='5', height='40', rx='2.5', fill='#333', stroke='#555'),
      min=g.rect(x='48.5', y='12.5', width='3', height='40', rx='2', fill='#333', stroke='#555'),
      sec=g.line(x1='50', y1='50', x2='50', y2='16', stroke='#f55', stroke_width='1px'),
      ),
      )

      Shapes

      Use drawing functions to add shapes to the stage or scene:

      PrimitiveUse
      arc()Circular or annular sector, as in a pie or donut chart
      circle()Circle
      ellipse()Ellipse
      image()Image
      line()Line
      path()Path
      polygon()Polygon
      polyline()Polyline
      spline()Curves (including radial curves) using various algorithms: basis, cardinal, smooth, linear, monotone, natural, step.
      rect()Rect
      text()Text

      Paths

      The path() function is special: it can draw arbitrary shapes. This is because SVG path elements support an attribute called d which holds drawing commands.

      Here's a path that represents a red square:

      g.path(d='m 25 25 h 50 v 50 h -50 z', fill='red')

      The above snippet produces:

      <path d='m 25 25 h 50 v 50 h -50 z' fill='red'/>

      The drawing commands in the above example work like this:

      1. m 25 25: Move 25px left, 25px down
      2. h 50: Draw a line 50px right
      3. v 50: Draw a line 50px down
      4. h -50: Draw a line 50px left
      5. z: Close the path (going back to where we started)

      The little drawing syntax above is part of the SVG specification, not something unique to Wave.

      Authoring path() drawing commands by hand is tedious, so Wave provides two utilities to make it easier: p() and turtle().

      Drawing with paths

      p() creates a path generator with convenience methods to draw step by step. For example, the following two lines are equivalent:

      red_square = g.path(d='m 25 25 h 50 v 50 h -50 z', fill='red')
      red_square = g.p().m(25, 25).h(50).v(50).h(-50).z().path(fill='red')

      Commands

      MethodUse
      M()Move, absolute
      H()Horizontal line, absolute
      V()Vertical line, absolute
      L()Line, absolute
      A()Elliptical arc, absolute
      C()Cubic Bézier curve, absolute
      S()Cubic Bézier curve, smooth, absolute
      Q()Quadratic Bézier curve, absolute
      T()Quadratic Bézier curve, smooth, absolute
      Z()Close path
      m()Move, relative
      h()Horizontal line, relative
      v()Vertical line, relative
      l()Line, relative
      a()Elliptical arc, relative
      c()Cubic Bézier curve, relative
      s()Cubic Bézier curve, smooth, relative
      q()Quadratic Bézier curve, relative
      t()Quadratic Bézier curve, smooth, relative
      z()Close path
      d()Serialize this path's commands into SVG path data.
      path()Create a SVG path element
      info

      The upper-cased commands use absolute coordinates. The lower-cased commands use relative coordinates. For example, L(4,2) means "draw a line to (4,2)", but l(4,2) means "draw a line 4px right, 2px down from the current position".

      Drawing with a turtle

      turtle() creates a path generator (similar to p()), but using Turtle Geometry.

      Commands

      MethodUse
      pd()Pen down
      pu()Pen up
      p()Set the turtle's position
      a()Set the turtle's orientation
      f()Move forward
      b()Move backward
      l()Turn left
      r()Turn right
      d()Serialize this turtle's movements into SVG path data
      path()Create a SVG path element

      Example

      Here is an example from Python's turtle module:

      star

      Here is the above example recreated in Wave:

      from turtle import *
      color('red', 'yellow')
      begin_fill()
      while True:
      forward(200)
      left(170)
      if abs(pos()) < 1:
      break
      end_fill()
      done()
      from h2o_wave import site, ui, graphics as g
      t = g.turtle().f(100).r(90).pd()
      for _ in range(36):
      t.f(200).l(170)
      spirograph = t.pu(1).path(stroke='red', fill='yellow')
      page = site['/demo']
      page['example'] = ui.graphics_card(
      box='1 1 2 3', view_box='0 0 220 220', width='100%', height='100%',
      scene=g.scene(foo=spirograph),
      )
      -
      page.save()
      info

      Turtle graphics is not just kid stuff: See Turtle Geometry by Harold Abelson and Andrea diSessa.

      Edit this page
      +
      page.save()
      info

      Turtle graphics is not just kid stuff: See Turtle Geometry by Harold Abelson and Andrea diSessa.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/guide/index.html b/docs/docs/guide/index.html index 1c8424b712..8a38695a8e 100644 --- a/docs/docs/guide/index.html +++ b/docs/docs/guide/index.html @@ -4,30 +4,30 @@ -Introduction | H2O Wave +Introduction | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Introduction

      Welcome to the H2O Wave Guide! If you prefer to learn concepts step by step, you've come to the right place.

      info

      If you haven't already, it's worthwhile reading the Getting Started page, which offers a 5-minute overview of what H2O Wave is all about.

      Before you start

      If you prefer to learn by doing, start with our tutorials - they're short and simple, illustrate the most important concepts in a beginner-friendly way, and are the best way to get hands-on with Wave. Like any unfamiliar technology, Wave has a slight learning curve, but you will get the hang of it with practice and patience.

      Who is this for?

      This documentation assumes that you have some familiarity with the Python programming language. You don't have to be an expert, but it might be harder to learn both Wave and Python at the same time.

      If you already know Python, but have no experience authoring web apps, you'll probably find Wave a fun and easy way to get started, without the hassle of learning HTML, CSS, Javascript and client-server programming.

      If you have some experience building web apps using Python (or even other languages), you'll find that Wave offers an approach quite different from traditional client-server or request-reply programming. The mental model is much simpler, functional (in the functional programming sense), and lets you reason about your code in terms of a single tier (server-only) as opposed to two tiers (client and server). Additionally, Wave offers straightforward ways to integrate realtime features into your apps using the same programming model.

      Edit this page
      +

      Introduction

      Welcome to the H2O Wave Guide! If you prefer to learn concepts step by step, you've come to the right place.

      info

      If you haven't already, it's worthwhile reading the Getting Started page, which offers a 5-minute overview of what H2O Wave is all about.

      Before you start

      If you prefer to learn by doing, start with our tutorials - they're short and simple, illustrate the most important concepts in a beginner-friendly way, and are the best way to get hands-on with Wave. Like any unfamiliar technology, Wave has a slight learning curve, but you will get the hang of it with practice and patience.

      Who is this for?

      This documentation assumes that you have some familiarity with the Python programming language. You don't have to be an expert, but it might be harder to learn both Wave and Python at the same time.

      If you already know Python, but have no experience authoring web apps, you'll probably find Wave a fun and easy way to get started, without the hassle of learning HTML, CSS, Javascript and client-server programming.

      If you have some experience building web apps using Python (or even other languages), you'll find that Wave offers an approach quite different from traditional client-server or request-reply programming. The mental model is much simpler, functional (in the functional programming sense), and lets you reason about your code in terms of a single tier (server-only) as opposed to two tiers (client and server). Additionally, Wave offers straightforward ways to integrate realtime features into your apps using the same programming model.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/installation/index.html b/docs/docs/installation/index.html index 37d5482c95..5a712af25d 100644 --- a/docs/docs/installation/index.html +++ b/docs/docs/installation/index.html @@ -4,30 +4,30 @@ -Installation | H2O Wave +Installation | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Installation

      To set up H2O Wave, simply download and extract a release (~8MB). The release ships with a precompiled binary executable, so no explicit installation step is necessary.

      Prerequisites

      H2O Wave runs on Linux, macOS, and Windows, having Python 3.6.1 or later.

      Setup

      Step 1: Download

      Download the H2O Wave SDK for your platform.

      Step 2: Extract

      Extract your download.

      tar -xzf wave-x.y.z-linux-amd64.tar.gz

      Step 3: Move

      Move it to a convenient location, say $HOME/wave/.

      mv wave-x.y.z-linux-amd64 $HOME/wave
      note

      If you have a previous version of Wave installed, be sure to remove it before installing another. To remove it, simply delete the previous directory.

      Inspect your $HOME/wave directory. You should see the following content:

      .
      ├── docs/ ... Documentation
      ├── examples/ ... Examples
      ├── test/ ... Browser testing framework
      ├── www/ ... Wave server web root (do not modify!)
      └── wave ... Wave server executable

      Step 4: Run

      Go to your Wave directory.

      cd $HOME/wave

      Start the Wave server.

      ./wave
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # ┌───────────────────┐
      2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
      2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
      2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
      2020/10/15 12:04:40 # └───────────────────┘
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}
      info

      On Windows, run wave.exe to start the server.

      Step 5: Verify

      Finally, point your web browser to http://localhost:55555/. You should see an empty page with a spinner that looks like this:

      spinner

      Congratulations! Wave is now running, but doesn't have any content yet (hence the spinner).

      In the next few sections, we'll add some content and see what the fuss is all about.

      Edit this page
      +

      Installation

      To set up H2O Wave, simply download and extract a release (~10MB). The release ships with a precompiled binary executable, so no explicit installation step is necessary.

      Prerequisites

      H2O Wave runs on Linux, macOS, and Windows, having Python 3.6.1 or later.

      Setup

      Step 1: Download

      Download the H2O Wave SDK for your platform.

      Step 2: Extract

      Extract your download.

      tar -xzf wave-x.y.z-linux-amd64.tar.gz

      Step 3: Move

      Move it to a convenient location, say $HOME/wave/.

      mv wave-x.y.z-linux-amd64 $HOME/wave
      note

      If you have a previous version of Wave installed, be sure to remove it before installing another. To remove it, simply delete the previous directory.

      Inspect your $HOME/wave directory. You should see the following content:

      .
      ├── docs/ ... Documentation
      ├── examples/ ... Examples
      ├── test/ ... Browser testing framework
      ├── www/ ... Wave server web root (do not modify!)
      └── wave ... Wave server executable

      Step 4: Run

      Go to your Wave directory.

      cd $HOME/wave

      Start the Wave server.

      ./wave
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # ┌───────────────────┐
      2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
      2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
      2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
      2020/10/15 12:04:40 # └───────────────────┘
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}
      info

      On Windows, run wave.exe to start the server.

      Step 5: Verify

      Finally, point your web browser to http://localhost:55555/. You should see an empty page with a spinner that looks like this:

      spinner

      Congratulations! Wave is now running, but doesn't have any content yet (hence the spinner).

      In the next few sections, we'll add some content and see what the fuss is all about.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/layout/index.html b/docs/docs/layout/index.html index eec4bec72a..abb77f869d 100644 --- a/docs/docs/layout/index.html +++ b/docs/docs/layout/index.html @@ -4,30 +4,30 @@ -Layout | H2O Wave +Layout | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Layout

      This section illustrates how to lay out cards on a page.

      Grid system

      By default, every page has a grid system in place, designed to fit HD displays (1920 x 1080 pixels). The grid has 12 columns and 10 rows. A column is 134 pixels wide. A row is 76 pixels high. The gap between rows and columns is set to 15 pixels.

      The box attribute

      Every card has a box attribute that specifies how to position the card on the page, a string of the form 'column row width height', for example '1 1 2 4' or '8 7 3 6'.

      page['quote'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World',
      content='"The Internet? Is that thing still around?" - *Homer Simpson*',
      )

      The column and row indicate which column and row to position the top-left corner of the card. The width and height indicate the width and height of the cards, respectively. The column and row are 1-based. The width and height are in spans (units) of columns or rows.

      AttributeValueInterpreted as
      columnNNth column
      rowNNth row
      widthNN columns wide
      heightNN rows high

      For example, a box of 1 2 3 4 is interpreted as:

      AttributeValueInterpreted as
      column11st column
      row22nd row
      width33 columns wide
      height44 rows high

      Why a fixed grid?

      A fixed grid like this ensures that your page layout looks exactly the same on every display, without surprises. That said, the default grid is designed to fit HD displays (1920 x 1080 pixels), so if you want your page to fit smaller displays, don't use up the entire grid. Instead, use up less columns and rows, like 8 columns x 6 rows.

      Other layout options

      A fixed grid system is great for dashboards, but limiting for apps that require more flexibility, including the ability to responsively fit various display sizes.

      We are working on additional layout mechanisms, slated for release by the end of 2020.

      See also

      Positioning and Sizing examples.

      Edit this page
      +

      Layout

      This section illustrates how to lay out cards on a page.

      Grid system

      By default, every page has a grid system in place, designed to fit HD displays (1920 x 1080 pixels). The grid has 12 columns and 10 rows. A column is 134 pixels wide. A row is 76 pixels high. The gap between rows and columns is set to 15 pixels.

      The box attribute

      Every card has a box attribute that specifies how to position the card on the page, a string of the form 'column row width height', for example '1 1 2 4' or '8 7 3 6'.

      page['quote'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World',
      content='"The Internet? Is that thing still around?" - *Homer Simpson*',
      )

      The column and row indicate which column and row to position the top-left corner of the card. The width and height indicate the width and height of the cards, respectively. The column and row are 1-based. The width and height are in spans (units) of columns or rows.

      AttributeValueInterpreted as
      columnNNth column
      rowNNth row
      widthNN columns wide
      heightNN rows high

      For example, a box of 1 2 3 4 is interpreted as:

      AttributeValueInterpreted as
      column11st column
      row22nd row
      width33 columns wide
      height44 rows high

      Why a fixed grid?

      A fixed grid like this ensures that your page layout looks exactly the same on every display, without surprises. That said, the default grid is designed to fit HD displays (1920 x 1080 pixels), so if you want your page to fit smaller displays, don't use up the entire grid. Instead, use up less columns and rows, like 8 columns x 6 rows.

      Other layout options

      A fixed grid system is great for dashboards, but limiting for apps that require more flexibility, including the ability to responsively fit various display sizes.

      We are working on additional layout mechanisms, slated for release by the end of 2020.

      See also

      Positioning and Sizing examples.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/logging/index.html b/docs/docs/logging/index.html index ddf72edae7..d2eb832e8a 100644 --- a/docs/docs/logging/index.html +++ b/docs/docs/logging/index.html @@ -4,33 +4,33 @@ -Logging | H2O Wave +Logging | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Logging

      Wave apps are plain Python programs. Use Python's built-in logging module to configure logging.

      Here's a basic configuration that logs a ISO8601 timestamp, log level, and message:

      from h2o_wave import Q, listen
      +

      Logging

      Wave apps are plain Python programs. Use Python's built-in logging module to configure logging.

      Here's a basic configuration that logs a ISO8601 timestamp, log level, and message:

      from h2o_wave import Q, listen
      import logging
      logging.basicConfig(format='%(asctime)s %(levelname)s %(message)s')
      async def serve(q: Q):
      logging.warning('All your base are belong to us')
      -
      listen('/demo', serve)

      The above snippet makes the app log a warning every time it is accessed. This is what the logged message look like:

      2010-12-12 11:41:42,612 WARNING All your base are belong to us
      info

      See Python's logging module for more information.

      Edit this page
      +
      listen('/demo', serve)

      The above snippet makes the app log a warning every time it is accessed. This is what the logged message look like:

      2010-12-12 11:41:42,612 WARNING All your base are belong to us
      info

      See Python's logging module for more information.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/migrating-0/index.html b/docs/docs/migrating-0/index.html index c4335ac86d..502beaa5b3 100644 --- a/docs/docs/migrating-0/index.html +++ b/docs/docs/migrating-0/index.html @@ -4,21 +4,21 @@ -Migrating from pre-alpha | H2O Wave +Migrating from pre-alpha | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Migrating from pre-alpha

      Before you begin, it is highly recommended that you download a release and run the interactive tour.py that ships with the release to get a feel for what Wave programs look like in practice.

      What has changed?

      From an app-development perspective, the most important change is that Wave is more of a library rather than a framework.

      With the previous framework, the only way to execute an app was via the Q server. This limitation has been removed. The script/app you author is just a regular Python program in which you import h2o_wave and execute via:

      • The command line: python3 my_script.py.
      • In the Python REPL.
      • In a Jupyter notebook.
      • In your favorite IDE (PyCharm, VSCode, etc.).

      This also means that you can apply breakpoints and debug or step-through your program in your debugger of choice.

      From an information architecture perspective, control has been inverted: instead of your app being an extension to Wave's data/prep/search features, Wave's features are now optional additions to your app, and your app takes center stage. Implementation-wise, instead of your app running in a sidebar inside of Wave's UI, your app now occupies the entire UI.

      Breaking changes

      Removed: @Q.app, @Q.ui annotations.

      Instead, define a async request-handling function, say main(), and pass that function to listen(), like this:

      from h2o_wave import Q, listen
      +

      Migrating from pre-alpha

      Before you begin, it is highly recommended that you download a release and run the interactive tour.py that ships with the release to get a feel for what Wave programs look like in practice.

      What has changed?

      From an app-development perspective, the most important change is that Wave is more of a library rather than a framework.

      With the previous framework, the only way to execute an app was via the Q server. This limitation has been removed. The script/app you author is just a regular Python program in which you import h2o_wave and execute via:

      • The command line: python3 my_script.py.
      • In the Python REPL.
      • In a Jupyter notebook.
      • In your favorite IDE (PyCharm, VSCode, etc.).

      This also means that you can apply breakpoints and debug or step-through your program in your debugger of choice.

      From an information architecture perspective, control has been inverted: instead of your app being an extension to Wave's data/prep/search features, Wave's features are now optional additions to your app, and your app takes center stage. Implementation-wise, instead of your app running in a sidebar inside of Wave's UI, your app now occupies the entire UI.

      Breaking changes

      Removed: @Q.app, @Q.ui annotations.

      Instead, define a async request-handling function, say main(), and pass that function to listen(), like this:

      from h2o_wave import Q, listen
      async def main(q: Q):
      pass
      listen('/my/app/route', main)

      Removed: q.wait(), q.show(), q.fail(), q.exit().

      The above four methods were the primary mechanism to make changes to your app's UI. They have all been replaced with a single h2o_wave.core.Page.save() method.

      The new technique is:

      1. Access the page or card you want to modify.
      2. Modify the page or card.
      3. Call h2o_wave.core.Page.save() to save your changes and update the browser page.

      Before:

      q.wait(
      callback_function,
      ui.text('Step 1'),
      ui.button(name='next', label='Next'),
      )

      After:

      q.page['my_card'] = ui.form_card(
      # A card with its top-left corner at column 1, row 5; 2 columns wide and 4 rows high.
      box='1 5 2 4',
      items=[
      ui.text('Step 1'),
      ui.button(name='next', label='Next'),
      ],
      )
      await q.page.save()

      Note that the After example requires a box that specifies where to draw your form. This is because you are not limited to using a sidebar, and can use the entire width/length of the page.

      The same technique can be used to update the UI again (or display intermediate results):

      Before:

      q.wait(
      callback_function,
      ui.text('Step 2'),
      ui.button(name='next', label='Next'),
      )

      After:

      # Don't have to recreate the entire form again; simply replace its items and save the page.
      q.page['my_card'].items = [
      ui.text('Step 2'),
      ui.button(name='next', label='Next'),
      ]
      await q.page.save()

      Removed: callback functions for request-handling.

      Wave apps are 100% push-based, using duplex communication instead of a request/reply paradigm. There is no need to have a tangled mess of callbacks to handle UI events.

      Instead, all requests are routed to a single function, and you can decide how to organize your application logic by branching on q.args.*.

      Before:

      def step1(q: Q):
      q.wait(
      step2,
      ui.text('Step 1'),
      ui.button(name='next', label='Next'),
      )
      def step2(q: Q):
      q.wait(
      step3,
      ui.text('Step 2'),
      ui.button(name='next', label='Next'),
      )
      @@ -26,16 +26,16 @@
      q.page['my_card'].items = items
      await q.page.save()
      listen('/my/app/route', main)

      Removed: q.dashboard() and q.notebook().

      Every page in Wave is a dashboard page. Instead of creating a separate dashboard or notebook, simply add cards to a page and arrange it the way you want. Cards can be created by using one of the several ui.*_card() APIs. Also see the dashboard, layout and sizing examples to learn how to lay out several cards on a page.

      If you want to display a notebook-style vertical stack of markdown, html or other content, use h2o_wave.ui.text() and h2o_wave.ui.frame() contained inside a h2o_wave.ui.form_card(), like this:

      Before:

      ui.notebook([ui.notebook_section([
      ui.markdown_cell(content='Foo'),
      ui.frame_cell(source=html_foo, height='200px'),
      ui.markdown_cell(content='Bar'),
      ui.frame_cell(source=html_bar, height='200px'),
      ])])

      After: Note the parameter name change frame_cell(source=...) to frame(content=...).

      ui.form_card(
      box='1 5 2 4',
      items=[
      ui.text(content='Foo'),
      ui.frame(content=html_foo, height='200px'),
      ui.text(content='Bar'),
      ui.frame(content=html_bar, height='200px'),
      ],
      )

      Changed: ui.buttons(), ui.expander() and ui.tabs() accept a list of items instead of var args *args.

      Before:

      ui.buttons(ui.button(...), ui.button(...), ui.button(...))

      After:

      ui.buttons([ui.button(...), ui.button(...), ui.button(...)]) # Note enclosing [ ]

      Changed: q.upload() changed to q.site.upload().

      The upload() method has been moved to the h2o_wave.core.Site instance, since each h2o_wave.core.Site represents a distinct server, and makes it possible to control multiple sites from a single Python script.

      Changed: q.args.foo= changed to q.client.foo=.

      Setting attributes on q.args (e.g. q.args.foo = 'bar') is no longer preserved between requests. This was the primary mechanism employed previously to preserve data between requests.

      Instead, Wave provides 4 mechanisms for preserving data between requests:

      1. Process-level: Use global variables.
      2. App-level: Use q.app.foo = 'bar' to save; access q.app.foo to read it back again.
      3. User-level: Use q.user.foo = 'bar' to save; access q.user.foo to read it back again.
      4. Client-level: Use q.client.foo = 'bar' to save; access q.client.foo to read it back again.

      Here, Client refers to a distinct tab in a browser.

      If you want to rely on the old behavior of preserving q.args for the lifetime of the application, copy q.args to q.client like this:

      from h2o_wave import copy_expando
      -
      copy_expando(q.args, q.client, exclude_keys=['back2', 'select_target', 'restart'])

      Changed: No need to JSON-serialize values to preserve them between requests.

      q.args.foo= only supported JSON-serialized values. No such restrictions exist for the q.app, q.user and q.client containers. You could, for example, load a Pandas dataframe and set q.user.df = my_df, and the dataframe will be accessible across requests for the lifetime of the app.

      Edit this page
      +
      copy_expando(q.args, q.client, exclude_keys=['back2', 'select_target', 'restart'])

      Changed: No need to JSON-serialize values to preserve them between requests.

      q.args.foo= only supported JSON-serialized values. No such restrictions exist for the q.app, q.user and q.client containers. You could, for example, load a Pandas dataframe and set q.user.df = my_df, and the dataframe will be accessible across requests for the lifetime of the app.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/pages/index.html b/docs/docs/pages/index.html index cd6e2ab6a0..8e41ed9bd0 100644 --- a/docs/docs/pages/index.html +++ b/docs/docs/pages/index.html @@ -4,30 +4,30 @@ -Pages | H2O Wave +Pages | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Pages

      The Wave server stores and manages content. Content is stored in a page cache, called a site. A Wave server contains exactly one site. A site holds a collection of pages. A page is composed of cards. Cards hold content and data buffers.

      To reference a site from within a Wave script, import site.

      from h2o_wave import site

      site is a dictionary-like object.

      To reference the current site from within a Wave app, use q.site.

      async def serve(q: Q):
      site = q.site

      To reference a page hosted at /foo, use site['/foo'].

      page = site['/foo']

      To reference the current page in a Wave app, use q.page.

      async def serve(q: Q):
      page = q.page

      page is also a dictionary-like object. To reference a card named foo, use page['foo'].

      card = page['foo']

      There are two ways to add a card to a page.

      The first way is to assign a new card to page['foo'].

      page['foo'] = card

      The second way is to use page.add(). This is useful when you want to add a card to a page and obtain a reference to the new card.

      card = page.add('foo', card)

      The following two forms are equivalent. The second form is more concise.

      page['foo'] = ui.form_card(...)
      card = page['foo']
      card = page.add('foo', ui.form_card(...)

      To delete a card named foo from a page, use del page['foo']:

      del page['foo']

      Assigning a card to page['foo'] replaces any previously assigned card named foo. Therefore, the following two forms are equivalent. The second form is more concise, hence preferred.

      page['foo'] = card1
      del page['foo']
      page['foo'] = card2
      page['foo'] = card1
      page['foo'] = card2

      To save a page from within a Wave script, use page.save().

      page.save()

      To save the active page from within a Wave app, use q.page.save().

      async def serve(q: Q):
      await q.page.save()
      caution

      q.page.save() is an async function, so you must await while calling it.

      You don't need to explicitly create a new page. A page is automatically created on save if it doesn't exist.

      To delete the page hosted at /foo, use page.drop() or del site['/foo']. The following three forms are equivalent.

      page = site['/foo']
      page.drop()
      site['/foo'].drop()
      del site['/foo']

      Deleting a page automatically drops all cards associated with that page. Conversely, to delete all cards from a page, simply delete the page.

      To clear all cards in the active page from within a Wave app, use q.page.drop():

      async def serve(q: Q):
      await q.page.drop()
      Edit this page
      +

      Pages

      The Wave server stores and manages content. Content is stored in a page cache, called a site. A Wave server contains exactly one site. A site holds a collection of pages. A page is composed of cards. Cards hold content and data buffers.

      To reference a site from within a Wave script, import site.

      from h2o_wave import site

      site is a dictionary-like object.

      To reference the current site from within a Wave app, use q.site.

      async def serve(q: Q):
      site = q.site

      To reference a page hosted at /foo, use site['/foo'].

      page = site['/foo']

      To reference the current page in a Wave app, use q.page.

      async def serve(q: Q):
      page = q.page

      page is also a dictionary-like object. To reference a card named foo, use page['foo'].

      card = page['foo']

      There are two ways to add a card to a page.

      The first way is to assign a new card to page['foo'].

      page['foo'] = card

      The second way is to use page.add(). This is useful when you want to add a card to a page and obtain a reference to the new card.

      card = page.add('foo', card)

      The following two forms are equivalent. The second form is more concise.

      page['foo'] = ui.form_card(...)
      card = page['foo']
      card = page.add('foo', ui.form_card(...)

      To delete a card named foo from a page, use del page['foo']:

      del page['foo']

      Assigning a card to page['foo'] replaces any previously assigned card named foo. Therefore, the following two forms are equivalent. The second form is more concise, hence preferred.

      page['foo'] = card1
      del page['foo']
      page['foo'] = card2
      page['foo'] = card1
      page['foo'] = card2

      To save a page from within a Wave script, use page.save().

      page.save()

      To save the active page from within a Wave app, use q.page.save().

      async def serve(q: Q):
      await q.page.save()
      caution

      q.page.save() is an async function, so you must await while calling it.

      You don't need to explicitly create a new page. A page is automatically created on save if it doesn't exist.

      To delete the page hosted at /foo, use page.drop() or del site['/foo']. The following three forms are equivalent.

      page = site['/foo']
      page.drop()
      site['/foo'].drop()
      del site['/foo']

      Deleting a page automatically drops all cards associated with that page. Conversely, to delete all cards from a page, simply delete the page.

      To clear all cards in the active page from within a Wave app, use q.page.drop():

      async def serve(q: Q):
      await q.page.drop()
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/plotting/index.html b/docs/docs/plotting/index.html index 8f8ad82ea4..38fec80ac5 100644 --- a/docs/docs/plotting/index.html +++ b/docs/docs/plotting/index.html @@ -4,32 +4,32 @@ -Plots | H2O Wave +Plots | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Plots

      Wave provides a versatile plotting API based on Leland Wilkinson's Grammar of Graphics.

      A plot is a layered graphic, created using ui.plot(). Each layer displays marks, described by ui.mark(). The layers are rendered on top of each other to produce the final plot.

      ui.mark() describes a collection of marks, not one mark. Since each ui.mark() describes one layer in the plot, it follows that all the marks on a layer are of the same type (its geometry). A mark's type can be one of point, interval, line, path, area, polygon, schema, edge.

      There are two ways to add plots to a page:

      • Use a plot card (ui.plot_card()) and set its plot attribute using ui.plot().
      • Use a form card (ui.form_card()), insert a visualization (ui.visualization()) and set its plot attribute using ui.plot().

      Here's a short example that renders a scatterplot of random values between [0, 1].

      import random
      from h2o_wave import site, data, ui
      +

      Plots

      Wave provides a versatile plotting API based on Leland Wilkinson's Grammar of Graphics.

      A plot is a layered graphic, created using ui.plot(). Each layer displays marks, described by ui.mark(). The layers are rendered on top of each other to produce the final plot.

      ui.mark() describes a collection of marks, not one mark. Since each ui.mark() describes one layer in the plot, it follows that all the marks on a layer are of the same type (its geometry). A mark's type can be one of point, interval, line, path, area, polygon, schema, edge.

      There are two ways to add plots to a page:

      • Use a plot card (ui.plot_card()) and set its plot attribute using ui.plot().
      • Use a form card (ui.form_card()), insert a visualization (ui.visualization()) and set its plot attribute using ui.plot().

      Here's a short example that renders a scatterplot of random values between [0, 1].

      import random
      from h2o_wave import site, data, ui
      page = site['/demo']
      -
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point',
      data=data('price performance', 50, rows=[(random.random(), random.random()) for _ in range(50)]),
      plot=ui.plot([
      ui.mark(type='point', x='=price', y='=performance')
      ])
      ))
      page.save()

      ui.plot() accepts a list of marks. This example renders annotations on top of a scatterplot, like this:

      ui.plot([
      ui.mark(type='point', x='=price', y='=performance', x_min=0, x_max=100, y_min=0, y_max=100), # the plot
      ui.mark(x=50, y=50, label='point'),
      ui.mark(x=40, label='vertical line'),
      ui.mark(y=40, label='horizontal line'),
      ui.mark(x=70, x0=60, label='vertical region'),
      ui.mark(y=70, y0=60, label='horizontal region'),
      ui.mark(x=30, x0=20, y=30, y0=20, label='rectangular region')
      ])

      Point

      • Basic: Make a scatterplot.
      • Shapes: Make a scatterplot with categories encoded as mark shapes.
      • Sizes: Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").
      • Map: Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.
      • Groups: Make a scatterplot with categories encoded as colors.
      • Annotation: Add annotations (points, lines and regions) to a plot.
      • Custom: Customize a plot's fill/stroke color, size and opacity.

      Interval

      Columns

      • Basic: Make a column plot.
      • Groups: Make a grouped column plot.
      • Range: Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.
      • Labels: Make a column plot with labels on each bar.
      • Stacked: Make a stacked column plot.
      • Stacked, Grouped: Make a column plot with both stacked and grouped bars.
      • Annotation: Add annotations to a column plot.
      • Theta: Make a "racetrack" plot (a column plot in polar coordinates).

      Bars

      • Basic: Make a bar plot.
      • Groups: Make a grouped bar plot.
      • Range: Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.
      • Stacked: Make a stacked bar plot.
      • Stacked, Grouped: Make a bar plot with both stacked and grouped bars.
      • Annotation: Add annotations to a bar plot.
      • Polar: Make a rose plot (a bar plot in polar coordinates).
      • Polar, Stacked: Make a stacked rose plot (a stacked bar plot in polar coordinates).
      • Helix: Make a bar plot in helical coordinates.

      Line

      • Basic: Make a line plot.
      • Groups: Make a multi-series line plot.
      • Smooth: Make a line plot using a smooth curve.
      • Step: Make a line plot with a step curve.
      • Step, After: Make a line plot with a step-after curve.
      • Step, Before: Make a line plot with a step-before curve.
      • Labels: Add labels to a line plot.
      • Labels, Stroked: Customize label rendering: add a subtle outline to labels to improve readability.
      • Labels, Occlusion: Make a line plot with non-overlapping labels.
      • Annotation: Add annotations to a line plot.

      Path

      • Basic: Make a path plot.
      • Point: Make a path plot with an additional layer of points.
      • Smooth: Make a path plot with a smooth curve.

      Area

      • Basic: Make an area plot.
      • Groups: Make an area plot showing multiple categories.
      • Negative: Make an area plot showing positive and negative values.
      • Range: Make an area plot representing a range (band) of values.
      • Smooth: Make an area plot with a smooth curve.
      • Stacked: Make a stacked area plot.

      Area + Line

      • Area + Line: Make an area plot with an additional line layer on top.
      • Area + Smooth: Make a combined area + line plot using a smooth curve.
      • Area + Groups: Make an combined area + line plot showing multiple categories.

      Polygon

      Schema

      Other

      • Axis Titles: Display custom axis titles on a plot.
      • Form: Display a plot inside a form.
      Edit this page
      +
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point',
      data=data('price performance', 50, rows=[(random.random(), random.random()) for _ in range(50)]),
      plot=ui.plot([
      ui.mark(type='point', x='=price', y='=performance')
      ])
      ))
      page.save()

      ui.plot() accepts a list of marks. This example renders annotations on top of a scatterplot, like this:

      ui.plot([
      ui.mark(type='point', x='=price', y='=performance', x_min=0, x_max=100, y_min=0, y_max=100), # the plot
      ui.mark(x=50, y=50, label='point'),
      ui.mark(x=40, label='vertical line'),
      ui.mark(y=40, label='horizontal line'),
      ui.mark(x=70, x0=60, label='vertical region'),
      ui.mark(y=70, y0=60, label='horizontal region'),
      ui.mark(x=30, x0=20, y=30, y0=20, label='rectangular region')
      ])

      Point

      • Basic: Make a scatterplot.
      • Shapes: Make a scatterplot with categories encoded as mark shapes.
      • Sizes: Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").
      • Map: Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.
      • Groups: Make a scatterplot with categories encoded as colors.
      • Annotation: Add annotations (points, lines and regions) to a plot.
      • Custom: Customize a plot's fill/stroke color, size and opacity.

      Interval

      Columns

      • Basic: Make a column plot.
      • Groups: Make a grouped column plot.
      • Range: Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.
      • Labels: Make a column plot with labels on each bar.
      • Stacked: Make a stacked column plot.
      • Stacked, Grouped: Make a column plot with both stacked and grouped bars.
      • Annotation: Add annotations to a column plot.
      • Theta: Make a "racetrack" plot (a column plot in polar coordinates).

      Bars

      • Basic: Make a bar plot.
      • Groups: Make a grouped bar plot.
      • Range: Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.
      • Stacked: Make a stacked bar plot.
      • Stacked, Grouped: Make a bar plot with both stacked and grouped bars.
      • Annotation: Add annotations to a bar plot.
      • Polar: Make a rose plot (a bar plot in polar coordinates).
      • Polar, Stacked: Make a stacked rose plot (a stacked bar plot in polar coordinates).
      • Helix: Make a bar plot in helical coordinates.

      Line

      • Basic: Make a line plot.
      • Groups: Make a multi-series line plot.
      • Smooth: Make a line plot using a smooth curve.
      • Step: Make a line plot with a step curve.
      • Step, After: Make a line plot with a step-after curve.
      • Step, Before: Make a line plot with a step-before curve.
      • Labels: Add labels to a line plot.
      • Labels, Stroked: Customize label rendering: add a subtle outline to labels to improve readability.
      • Labels, Occlusion: Make a line plot with non-overlapping labels.
      • Annotation: Add annotations to a line plot.

      Path

      • Basic: Make a path plot.
      • Point: Make a path plot with an additional layer of points.
      • Smooth: Make a path plot with a smooth curve.

      Area

      • Basic: Make an area plot.
      • Groups: Make an area plot showing multiple categories.
      • Negative: Make an area plot showing positive and negative values.
      • Range: Make an area plot representing a range (band) of values.
      • Smooth: Make an area plot with a smooth curve.
      • Stacked: Make a stacked area plot.

      Area + Line

      • Area + Line: Make an area plot with an additional line layer on top.
      • Area + Smooth: Make a combined area + line plot using a smooth curve.
      • Area + Groups: Make an combined area + line plot showing multiple categories.

      Polygon

      Schema

      Other

      • Axis Titles: Display custom axis titles on a plot.
      • Form: Display a plot inside a form.
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/realtime/index.html b/docs/docs/realtime/index.html index a43629e6d5..39c183b17b 100644 --- a/docs/docs/realtime/index.html +++ b/docs/docs/realtime/index.html @@ -4,32 +4,32 @@ -Realtime Sync | H2O Wave +Realtime Sync | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Realtime Sync

      Wave's realtime sync feature enables all connected users to see up to date content.

      Pages created by Wave scripts are automatically synced across all users.

      Pages created by Wave apps need to explicitly enable realtime sync. This is because apps support multiple users and multiple clients (browser tabs) by default, and, depending on the problem you're trying to solve, it's up to you to decide whether your app's UI should be synced across all users, synced across one user, or not synced at all.

      To enable realtime sync in a Wave app, pass the mode argument to listen():

      • mode='broadcast' syncs across all users.
      • mode='multicast' syncs across one user (in other words, all the clients for that user).
      • mode='unicast' disables sync. This is the default.
      from h2o_wave import Q, listen, ui
      +

      Realtime Sync

      Wave's realtime sync feature enables all connected users to see up to date content.

      Pages created by Wave scripts are automatically synced across all users.

      Pages created by Wave apps need to explicitly enable realtime sync. This is because apps support multiple users and multiple clients (browser tabs) by default, and, depending on the problem you're trying to solve, it's up to you to decide whether your app's UI should be synced across all users, synced across one user, or not synced at all.

      To enable realtime sync in a Wave app, pass the mode argument to listen():

      • mode='broadcast' syncs across all users.
      • mode='multicast' syncs across one user (in other words, all the clients for that user).
      • mode='unicast' disables sync. This is the default.
      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      pass
      -
      listen('/foo', serve, mode='broadcast')

      If you change the mode, make sure you store run-time state appropriate to the mode. Generally:

      modeStore state in
      broadcastq.app
      multicastq.user
      unicastq.client
      Edit this page
      +
      listen('/foo', serve, mode='broadcast')

      If you change the mode, make sure you store run-time state appropriate to the mode. Generally:

      modeStore state in
      broadcastq.app
      multicastq.user
      unicastq.client
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/routing/index.html b/docs/docs/routing/index.html index 5eb249c9bc..26aa3fda2c 100644 --- a/docs/docs/routing/index.html +++ b/docs/docs/routing/index.html @@ -4,21 +4,21 @@ -Routing | H2O Wave +Routing | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Routing

      App routing

      Your Wave app gets hosted at the route you passed to listen().

      from h2o_wave import Q, listen
      +

      Routing

      App routing

      Your Wave app gets hosted at the route you passed to listen().

      from h2o_wave import Q, listen
      async def serve(q: Q):
      pass
      listen('/foo', serve)

      To host your app at localhost:55555/foo or www.example.com/foo, pass /foo to listen().

      To host your app at localhost:55555 or www.example.com, pass / to listen(). Do this if you plan to host exactly one app and nothing else.

      You can host multiple apps behind a single Wave server.

      caution

      /foo and /foo/bar are two distinct paths. /foo/bar is not interpreted as a sub-path of /foo.

      Hash routing

      Wave apps support hash routing, a popular client-side mechanism where the location hash (the baz/qux in /foo/bar#baz/qux) can be used to decide which part of the UI to display.

      Setting the location hash

      To set the location hash, prefix # to the name attribute of command-like components. When the command is invoked, the location hash is set to the name of the command.

      For example, if a button is named foo is clicked, q.args.foo is set to True. Instead, if a button named #foo is clicked, the location hash is set to foo (q.args.foo is not set).

      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      q.page['sides'] = ui.form_card(
      box='1 1 4 4',
      items=[
      ui.button(name='#heads', label='Heads'),
      ui.button(name='#tails', label='Tails'),
      ],
      )
      q.page.save()
      @@ -29,16 +29,16 @@
      async def serve(q: Q):
      hash = q.args['#']
      if hash == 'heads':
      q.page['sides'].items = [ui.message_bar(text='Heads!')]
      elif hash == 'tails':
      q.page['sides'].items = [ui.message_bar(text='Tails!')]
      else:
      q.page['sides'] = ui.form_card(
      box='1 1 4 4',
      items=[
      ui.button(name='#heads', label='Heads'),
      ui.button(name='#tails', label='Tails'),
      ],
      )
      q.page.save()
      -
      listen('/toss', serve)
      Edit this page
      +
      listen('/toss', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/scripts/index.html b/docs/docs/scripts/index.html index c8c2d33d64..03b4c0392d 100644 --- a/docs/docs/scripts/index.html +++ b/docs/docs/scripts/index.html @@ -4,21 +4,21 @@ -Wave Scripts | H2O Wave +Wave Scripts | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Wave Scripts

      A Wave script is the simplest way to publish content in Q, especially live web content:

      • Dashboards and visualizations for live monitoring.
      • Live information displays: news, tickers, health, or performance data.

      A Wave script is one kind of program you can author to interact with Q. The other kind is a Wave App. The primary difference between an app and a script is that apps are interactive (able to handle user interactions) and scripts are not. If you are not interested in handling user interactions, and only want to publish content, use a Wave script.

      Here is the skeleton of a Wave script (example):

      from h2o_wave import site, ui
      +

      Wave Scripts

      A Wave script is the simplest way to publish content in Q, especially live web content:

      • Dashboards and visualizations for live monitoring.
      • Live information displays: news, tickers, health, or performance data.

      A Wave script is one kind of program you can author to interact with Q. The other kind is a Wave App. The primary difference between an app and a script is that apps are interactive (able to handle user interactions) and scripts are not. If you are not interested in handling user interactions, and only want to publish content, use a Wave script.

      Here is the skeleton of a Wave script (example):

      from h2o_wave import site, ui
      # Grab a reference to a page
      page = site['/foo']
      # Modify the page
      page['qux'] = ui.some_card()
      # Save the page
      page.save()

      Here is the skeleton of a Wave script that continuously updates a page (example):

      import time
      from h2o_wave import site, ui
      @@ -30,16 +30,16 @@
      # Grab a reference to a card on the page
      card = page['qux']
      # Read data from somewhere
      cpu_percent, mem_usage, disk_usage = read_system_stats()
      # Update card's data
      card.data[-1] = [cpu_percent, mem_usage, disk_usage]
      -
      # Save the page
      page.save()

      Multiple Wave scripts running on multiple devices can update the same Wave page. You can use this capability to publish a single page that displays content originating from multiple sources. For example, a single page that displays stats for all the systems in your network, or a single page that displays tickers from different stock exchanges.

      Edit this page
      +
      # Save the page
      page.save()

      Multiple Wave scripts running on multiple devices can update the same Wave page. You can use this capability to publish a single page that displays content originating from multiple sources. For example, a single page that displays stats for all the systems in your network, or a single page that displays tickers from different stock exchanges.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/security/index.html b/docs/docs/security/index.html new file mode 100644 index 0000000000..9d3c6bbfe9 --- /dev/null +++ b/docs/docs/security/index.html @@ -0,0 +1,35 @@ + + + + + + +Security | H2O Wave + + + + + + + + + + + + +
      +

      Security

      HTTPS

      To enable HTTP over TLS to secure your Wave server, pass the following flags when starting the Wave server:

      • -tls-cert-file: path to certificate file.
      • -tls-key-file: path to private key file.

      Self Signed Certificate

      To enable TLS during development, use a self-signed certificate.

      To create a private key and a self-signed certificate from scratch, use openssl:

      openssl req \
      -newkey rsa:2048 -nodes -keyout domain.key \
      -x509 -days 365 -out domain.crt

      The above command creates a 2048-bit private key (domain.key) and a self-signed x509 certificate (domain.crt) valid for 365 days.

      Single Sign On

      Wave has built-in support for OpenID Connect.

      To enable OpenID Connect, pass the following flags when starting the Wave server:

      • -oidc-provider-url: URL for authentication (the identity provider's URL).
      • -oidc-redirect-url: URL to redirect to after authentication.
      • -oidc-end-session-url: URL to log out (or sign out).
      • -oidc-client-id: Client ID (refer to your identity provider's documentation).
      • -oidc-client-secret: Client secret (refer to your identity provider's documentation).

      Once authenticated, you can access user's authentication and authorization information from your app using q.auth (see the Auth class for details):

      from h2o_wave import Q, listen
      +
      async def serve(q: Q):
      print(q.auth.username)
      print(q.auth.subject)
      +
      listen('/example', serve)
      Edit this page
      + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/state/index.html b/docs/docs/state/index.html index 180aff4891..e89cb7a3b4 100644 --- a/docs/docs/state/index.html +++ b/docs/docs/state/index.html @@ -4,32 +4,32 @@ -State | H2O Wave +State | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      State

      How you manage your Wave app's state depends on your app's requirements. In most cases, an app's data is best stored in a database or data store of some kind. But sometimes it's convenient to store run-time information in your app's memory, especially during prototyping when you're trying to iterate quickly and refine ideas.

      In a Wave app, you can store run-time information at three levels:

      • App-level: Information shared across all users.
      • User-level: Information private to a user, but shared across all browser tabs.
      • Client-level: Information private to a browser tab.

      In real world apps, the decision on whether to store information at the client, user, or app level depends on the problem you're trying to solve. For example, if you were building an online store, you'd probably want to store product inventory at the app level and shopping carts at the user level. Most other kinds of information - search results, past orders, or product details - are best stored at the client-level (searching for products in one tab and having search results appear in another tab would drive even your most loyal customers up the wall).

      In other words, your Wave app is multi-user by default, but how your app manages data at the app-level, at the user-level, and at the client-level is up to you.

      The Wave query context q (of type Q) carries q.app, q.user, and q.client, three dictionary-like objects for storing information at the app-level, user-level, and client-level, respectively.

      tip

      q.app, q.user, and q.client are all Expando instances, which means they behave both like dictionaries and objects: q.client['foo'] is the same as q.client.foo. q.client.foo is easier to read.

      In most non-trivial apps, you'll find yourself frequently copying values from q.args into q.client (or q.user, depending on the problem you're solving). If this gets too repetitive for your taste, use copy_expando() to copy everything in q.args to q.client at the beginning of your listen() handler:

      from h2o_wave import Q, listen, copy_expando
      +

      State

      How you manage your Wave app's state depends on your app's requirements. In most cases, an app's data is best stored in a database or data store of some kind. But sometimes it's convenient to store run-time information in your app's memory, especially during prototyping when you're trying to iterate quickly and refine ideas.

      In a Wave app, you can store run-time information at three levels:

      • App-level: Information shared across all users.
      • User-level: Information private to a user, but shared across all browser tabs.
      • Client-level: Information private to a browser tab.

      In real world apps, the decision on whether to store information at the client, user, or app level depends on the problem you're trying to solve. For example, if you were building an online store, you'd probably want to store product inventory at the app level and shopping carts at the user level. Most other kinds of information - search results, past orders, or product details - are best stored at the client-level (searching for products in one tab and having search results appear in another tab would drive even your most loyal customers up the wall).

      In other words, your Wave app is multi-user by default, but how your app manages data at the app-level, at the user-level, and at the client-level is up to you.

      The Wave query context q (of type Q) carries q.app, q.user, and q.client, three dictionary-like objects for storing information at the app-level, user-level, and client-level, respectively.

      tip

      q.app, q.user, and q.client are all Expando instances, which means they behave both like dictionaries and objects: q.client['foo'] is the same as q.client.foo. q.client.foo is easier to read.

      In most non-trivial apps, you'll find yourself frequently copying values from q.args into q.client (or q.user, depending on the problem you're solving). If this gets too repetitive for your taste, use copy_expando() to copy everything in q.args to q.client at the beginning of your listen() handler:

      from h2o_wave import Q, listen, copy_expando
      async def serve(q: Q):
      copy_expando(q.args, q.client)
      # Do something else...
      -
      listen('/foo', serve)
      Edit this page
      +
      listen('/foo', serve)
      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/testing/index.html b/docs/docs/testing/index.html index fa1fd9a439..826b2b9092 100644 --- a/docs/docs/testing/index.html +++ b/docs/docs/testing/index.html @@ -4,30 +4,30 @@ -Testing | H2O Wave +Testing | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Testing

      Edit this page
      +

      Testing

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/tour/index.html b/docs/docs/tour/index.html index 2b46eaee80..3a8f28eadf 100644 --- a/docs/docs/tour/index.html +++ b/docs/docs/tour/index.html @@ -4,32 +4,32 @@ -A Tour of Wave | H2O Wave +A Tour of Wave | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      A Tour of Wave

      Your Wave release download ships with over 150 examples.

      You can play around with these examples in your browser using tour.py, a Python script (itself a Wave app) located in examples/:

      Contents of $HOME/wave
      q/
      ├── docs/
      ├── examples/ <-- Examples live here.
      | └── tour.py <-- The Wave Tour.
      ├── test/
      ├── www/
      └── wave

      To run the tour, as with any Wave app, we need to start both the Wave server (wave) and the tour (tour.py). Let's go ahead and do that.

      Step 1: Start the Wave server

      To start the Wave server, simply open a new terminal window execute wave (or wave.exe on Windows).

      cd $HOME/wave
      ./wave
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # ┌───────────────────┐
      2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
      2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
      2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
      2020/10/15 12:04:40 # └───────────────────┘
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}

      The Wave server should now be running at http://localhost:55555.

      Don't close this terminal window!

      To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app.

      Step 2: Run the tour

      To run the tour, create a virtual environment, install the tour's dependencies, and finally execute tour.py.

      important

      Do this from a new terminal window!

      cd $HOME/wave
      python3 -m venv venv
      ./venv/bin/pip install -r examples/requirements.txt
      ./venv/bin/python examples/tour.py

      On Windows:

      cd $HOME\wave
      python3 -m venv venv
      venv\Scripts\pip install -r examples\requirements.txt
      venv\Scripts\python examples\tour.py

      Step 3: Enjoy the tour

      Go to http://localhost:55555/tour to access the tour.

      tour

      tour.py is an ordinary Wave app that runs other apps. The tour itself runs at the route /tour, and each of the examples runs at /demo.

      tip

      To play with the tour's active example in isolation, simply open a new browser tab and head to http://localhost:55555/demo.

      Wrapping up

      In this section, we started the Wave server and then launched tour.py to experience the tour. In general, this is how you'd typically launch any app, including your own. There is nothing special about tour.py. In fact, to run any example, all you need to do is repeat the steps above in a new terminal window. For example, to run todo.py, simply run:

      cd $HOME/wave
      ./venv/bin/python examples/todo.py

      You can now access the example at http://localhost:55555/demo. Simple!

      Edit this page
      +

      A Tour of Wave

      Your Wave release download ships with over 150 examples.

      You can play around with these examples in your browser using tour.py, a Python script (itself a Wave app) located in examples/:

      Contents of $HOME/wave
      wave/
      ├── docs/
      ├── examples/ <-- Examples live here.
      | └── tour.py <-- The Wave Tour.
      ├── test/
      ├── www/
      └── wave

      To run the tour, as with any Wave app, we need to start both the Wave server (wave) and the tour (tour.py). Let's go ahead and do that.

      Step 1: Start the Wave server

      To start the Wave server, simply open a new terminal window and execute wave (or wave.exe on Windows).

      cd $HOME/wave
      ./wave
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # ┌───────────────────┐
      2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
      2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
      2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
      2020/10/15 12:04:40 # └───────────────────┘
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}

      The Wave server should now be running at http://localhost:55555.

      Don't close this terminal window!

      To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app.

      Step 2: Run the tour

      To run the tour, create a virtual environment, install the tour's dependencies, and finally execute tour.py.

      important

      Do this from a new terminal window!

      cd $HOME/wave
      python3 -m venv venv
      ./venv/bin/pip install -r examples/requirements.txt
      ./venv/bin/python examples/tour.py

      On Windows:

      cd $HOME\wave
      python3 -m venv venv
      venv\Scripts\pip install -r examples\requirements.txt
      venv\Scripts\python examples\tour.py

      Step 3: Enjoy the tour

      Go to http://localhost:55555/tour to access the tour.

      tour

      tour.py is an ordinary Wave app that runs other apps. The tour itself runs at the route /tour, and each of the examples runs at /demo.

      tip

      To play with the tour's active example in isolation, simply open a new browser tab and head to http://localhost:55555/demo.

      Wrapping up

      In this section, we started the Wave server and then launched tour.py to experience the tour. In general, this is how you'd typically launch any app, including your own. There is nothing special about tour.py. In fact, to run any example, all you need to do is repeat the steps above in a new terminal window. For example, to run todo.py, simply run:

      cd $HOME/wave
      ./venv/bin/python examples/todo.py

      You can now access the example at http://localhost:55555/demo. Simple!

      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/tutorial-beer/index.html b/docs/docs/tutorial-beer/index.html index ac174d48d0..20876a5eab 100644 --- a/docs/docs/tutorial-beer/index.html +++ b/docs/docs/tutorial-beer/index.html @@ -4,21 +4,21 @@ -Tutorial: Beer Wall | H2O Wave +Tutorial: Beer Wall | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Tutorial: Beer Wall

      In this tutorial, we'll learn how to update a web page periodically and observe our changes live in the browser. Completing this tutorial should improve your understanding of how easy it is to use Wave to publish information in realtime.

      The program we'll be writing is a verse generator for the runaway mid-20th century smash hit, 99 Bottles of Beer, which looks something like this:

      99 bottles of beer on the wall, 99 bottles of beer.
      +

      Tutorial: Beer Wall

      In this tutorial, we'll learn how to update a web page periodically and observe our changes live in the browser. Completing this tutorial should improve your understanding of how easy it is to use Wave to publish information in realtime.

      The program we'll be writing is a verse generator for the runaway mid-20th century smash hit, 99 Bottles of Beer, which looks something like this:

      99 bottles of beer on the wall, 99 bottles of beer.
      Take one down, pass it around, 98 bottles of beer on the wall...

      98 bottles of beer on the wall, 98 bottles of beer.
      Take one down, pass it around, 97 bottles of beer on the wall...

      ...

      Our program will be analogous to our "Hello, World!" program, with the addition of a loop. We'll generate a verse every second, and observe the verse change in the browser in realtime. After that, we'll take a stab at making our program a bit more efficient, introducing how expressions work.

      (Incidentally, Donald Knuth proved that this song has a complexity of O(log N) in "The Complexity of Songs", but we won't let that little detail deter us for now.)

      Prerequisites

      This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the Hello World tutorial and complete steps 1 and 2.

      Step 1: Write your program

      Our program looks like this. It's mostly similar to the one in the Hello World tutorial, with one exception: we're setting the markdown card's content inside a for loop.

      $HOME/wave-apps/beer_wall.py
      import time
      from h2o_wave import site, ui
      page = site['/beer']
      @@ -30,16 +30,16 @@
      beer_verse = '''={{before}} bottles of beer on the wall, {{before}} bottles of beer.
      Take one down, pass it around, {{after}} bottles of beer on the wall...
      '''
      beer_card = page.add('wall', ui.markdown_card(
      box='1 1 4 2',
      title='99 Bottles of Beer',
      content=beer_verse,
      data=dict(before='99', after='98'),
      ))
      -
      for i in range(99, 0, -1):
      beer_card.data.before = str(i)
      beer_card.data.after = str(i - 1)
      page.save()
      time.sleep(1)

      Run your program again. You should see the same results in your browser as before, but you'll notice that the information flowing through the Wave server is significantly less than before:

      2020/10/02 13:53:11 * /beer {"d":[{"k":"wall data before","v":"98"},{"k":"wall data after","v":"97"}]}
      2020/10/02 13:53:12 * /beer {"d":[{"k":"wall data before","v":"97"},{"k":"wall data after","v":"96"}]}
      2020/10/02 13:53:13 * /beer {"d":[{"k":"wall data before","v":"96"},{"k":"wall data after","v":"95"}]}
      2020/10/02 13:53:14 * /beer {"d":[{"k":"wall data before","v":"95"},{"k":"wall data after","v":"94"}]}
      2020/10/02 13:53:15 * /beer {"d":[{"k":"wall data before","v":"94"},{"k":"wall data after","v":"93"}]}
      2020/10/02 13:53:16 * /beer {"d":[{"k":"wall data before","v":"93"},{"k":"wall data after","v":"92"}]}

      Summary

      In this tutorial, we learned how to send periodic updates to the Wave server and observe changes in realtime.

      In the next tutorial, we'll put these principles to real-world use, popping up charts for a song instead of chart topping pop songs.

      Edit this page
      +
      for i in range(99, 0, -1):
      beer_card.data.before = str(i)
      beer_card.data.after = str(i - 1)
      page.save()
      time.sleep(1)

      Run your program again. You should see the same results in your browser as before, but you'll notice that the information flowing through the Wave server is significantly less than before:

      2020/10/02 13:53:11 * /beer {"d":[{"k":"wall data before","v":"98"},{"k":"wall data after","v":"97"}]}
      2020/10/02 13:53:12 * /beer {"d":[{"k":"wall data before","v":"97"},{"k":"wall data after","v":"96"}]}
      2020/10/02 13:53:13 * /beer {"d":[{"k":"wall data before","v":"96"},{"k":"wall data after","v":"95"}]}
      2020/10/02 13:53:14 * /beer {"d":[{"k":"wall data before","v":"95"},{"k":"wall data after","v":"94"}]}
      2020/10/02 13:53:15 * /beer {"d":[{"k":"wall data before","v":"94"},{"k":"wall data after","v":"93"}]}
      2020/10/02 13:53:16 * /beer {"d":[{"k":"wall data before","v":"93"},{"k":"wall data after","v":"92"}]}

      Summary

      In this tutorial, we learned how to send periodic updates to the Wave server and observe changes in realtime.

      In the next tutorial, we'll put these principles to real-world use, popping up charts for a song instead of chart topping pop songs.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/tutorial-counter/index.html b/docs/docs/tutorial-counter/index.html index 0504a7aef3..0c6d3dd53a 100644 --- a/docs/docs/tutorial-counter/index.html +++ b/docs/docs/tutorial-counter/index.html @@ -4,21 +4,21 @@ -Tutorial: Bean Counter | H2O Wave +Tutorial: Bean Counter | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Tutorial: Bean Counter

      In the previous tutorials, we've been authoring Wave scripts. A Wave script is a perfectly fine and dandy way to modify pages in Wave and build dashboards. However, to build interactive applications in Wave - user interfaces that can dynamically respond to events (the user's actions) - Wave apps are the way to go.

      In the fine tradition of keeping tutorials succinct and useful, we'll author a little app that counts beans of the virtual kind, or, a bean counter, not to be confused with dubiously intentioned financial officers.

      This tutorial outlines the basics of how to handle events, update the UI, manage state and easily add realtime sync capabilities to your app. It's probably the most important tutorial to wrap your head around if you're interesting in authoring interactive applications.

      Prerequisites

      This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the Hello World tutorial and complete steps 1 and 2.

      Step 1: Start listening

      The first step towards listening to events from the UI is to, literally, listen.

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, listen
      +

      Tutorial: Bean Counter

      In the previous tutorials, we've been authoring Wave scripts. A Wave script is a perfectly fine and dandy way to modify pages in Wave and build dashboards. However, to build interactive applications in Wave - user interfaces that can dynamically respond to events (the user's actions) - Wave apps are the way to go.

      In the fine tradition of keeping tutorials succinct and useful, we'll author a little app that counts beans of the virtual kind, or, a bean counter, not to be confused with dubiously intentioned financial officers.

      This tutorial outlines the basics of how to handle events, update the UI, manage state and easily add realtime sync capabilities to your app. It's probably the most important tutorial to wrap your head around if you're interesting in authoring interactive applications.

      Prerequisites

      This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the Hello World tutorial and complete steps 1 and 2.

      Step 1: Start listening

      The first step towards listening to events from the UI is to, literally, listen.

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, listen
      async def serve(q: Q):
      pass
      listen('/counter', serve)

      listen() is a function that takes two required arguments:

      1. The route to listen to, in this case /counter (which translates to localhost:55555/counter or www.example.com/counter).
      2. The function to call when a event arrives from the UI, in this case serve() (but you can call it anything you please, like shoe_strings()).

      It's important to understand that serve() is called on every event from the UI. No matter how many event originate from the UI, they all pass through serve().

      caution

      serve() is an async function, and must be declared as async def serve(...) instead of plain def serve(...).

      Next, run your app:

      cd $HOME/wave-apps
      ./venv/bin/python counter.py

      At this point, your app will be up and running, but it doesn't do anything yet. Let's change that in a second.

      Step 2: Display a button

      Let's add a button to our app. Out goal is to increment and display the bean count each time the button is clicked.

      To do this, we declare a variable called bean_count, and use form_card() to add a form to our page. A form card is a special type of card that displays a vertical stack of components (also called widgets). In this case our form contains a solitary button named increment, with a caption showing the current bean_count. The button is marked as primary, which serves no other purpose than to make it look tall, dark, and handsome.

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, listen, ui
      @@ -50,16 +50,16 @@
      async def serve(q: Q):
      bean_count = q.app.bean_count or 0
      if q.args.increment:
      q.app.bean_count = bean_count = bean_count + 1
      if not q.client.initialized:
      q.client.initialized = True
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      else:
      q.page['beans'].items[0].button.caption = f'{bean_count} beans'
      await q.page.save()
      -
      listen('/counter', serve, mode='broadcast')
      tip

      The broadcast mode can be used to build collaborative apps that need to synchronize state across all users, like group chat or multiplayer games.

      Summary

      In this tutorial, we learned how to author interactive applications, or apps, and easily add realtime sync capabilities to our apps. More importantly, we learned how to deal with events and manage state using four dictionary-like objects:

      AttributeTypeUse
      q.argsRead-onlyStores command arguments
      q.clientRead/WriteStores client-level state
      q.userRead/WriteStores user-level state
      q.appRead/WriteStores app-level state

      Also, we built ourselves a little app that counts beans, and you can now put that knowledge to good use, like build an online voting app for the upcoming elections in the banana republic you're running on your private island (a smidgen of democracy can't hurt).

      In the next section, we'll build something a bit more substantial and useful: a to-do list with realtime sync.

      Edit this page
      +
      listen('/counter', serve, mode='broadcast')
      tip

      The broadcast mode can be used to build collaborative apps that need to synchronize state across all users, like group chat or multiplayer games.

      Summary

      In this tutorial, we learned how to author interactive applications, or apps, and easily add realtime sync capabilities to our apps. More importantly, we learned how to deal with events and manage state using four dictionary-like objects:

      AttributeTypeUse
      q.argsRead-onlyStores command arguments
      q.clientRead/WriteStores client-level state
      q.userRead/WriteStores user-level state
      q.appRead/WriteStores app-level state

      Also, we built ourselves a little app that counts beans, and you can now put that knowledge to good use, like build an online voting app for the upcoming elections in the banana republic you're running on your private island (a smidgen of democracy can't hurt).

      In the next section, we'll build something a bit more substantial and useful: a to-do list with realtime sync.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/tutorial-hello/index.html b/docs/docs/tutorial-hello/index.html index 9f36810161..c2d25e36c2 100644 --- a/docs/docs/tutorial-hello/index.html +++ b/docs/docs/tutorial-hello/index.html @@ -4,35 +4,35 @@ -Tutorial: Hello World | H2O Wave +Tutorial: Hello World | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Tutorial: Hello World

      In this section, we'll learn how to author our first Wave program from scratch, and understand the basics of how to display content in a web browser.

      note

      These tutorials assume that you have some familiarity with the Python programming language. You don't have to be an expert, but it might be harder to learn both Wave and Python at the same time.

      Step 1: Start the Wave Server

      To start the Wave server, simply open a new terminal window execute wave (or wave.exe on Windows).

      cd $HOME/wave
      ./wave
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # ┌───────────────────┐
      2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
      2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
      2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
      2020/10/15 12:04:40 # └───────────────────┘
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}

      The Wave server should now be running at http://localhost:55555.

      Don't close this terminal window!

      To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app.

      Step 2: Set up a working directory

      Next, let's set up a working directory to author our program.

      Create a directory

      mkdir $HOME/wave-apps
      cd $HOME/wave-apps

      Set up a virtual environment

      A virtual environment helps us manage our program's dependencies without interfering with system-wide packages.

      python3 -m venv venv

      Install the Wave Python driver

      ./venv/bin/pip install h2o-wave

      Step 3: Write your program

      Next, open your preferred text editor, create a Python script called hello_world.py in the $HOME/wave-apps directory, and copy-paste the following.

      For now, don't worry too much about what this program is doing. We'll get to that shortly.

      $HOME/wave-apps/hello_world.py
      from h2o_wave import site, ui
      +

      Tutorial: Hello World

      In this section, we'll learn how to author our first Wave program from scratch, and understand the basics of how to display content in a web browser.

      note

      These tutorials assume that you have some familiarity with the Python programming language. You don't have to be an expert, but it might be harder to learn both Wave and Python at the same time.

      Step 1: Start the Wave Server

      To start the Wave server, simply open a new terminal window and execute wave (or wave.exe on Windows).

      cd $HOME/wave
      ./wave
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # ┌───────────────────┐
      2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
      2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
      2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
      2020/10/15 12:04:40 # └───────────────────┘
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}

      The Wave server should now be running at http://localhost:55555.

      Don't close this terminal window!

      To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app.

      Step 2: Set up a working directory

      Next, let's set up a working directory to author our program.

      Create a directory

      mkdir $HOME/wave-apps
      cd $HOME/wave-apps

      Set up a virtual environment

      A virtual environment helps us manage our program's dependencies without interfering with system-wide packages.

      python3 -m venv venv

      Install the Wave Python driver

      ./venv/bin/pip install h2o-wave

      Step 3: Write your program

      Next, open your preferred text editor, create a Python script called hello_world.py in the $HOME/wave-apps directory, and copy-paste the following.

      For now, don't worry too much about what this program is doing. We'll get to that shortly.

      $HOME/wave-apps/hello_world.py
      from h2o_wave import site, ui
      # Grab a reference to the page at route '/hello'
      page = site['/hello']
      # Add a markdown card to the page.
      page['quote'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World',
      content='"The Internet? Is that thing still around?" - *Homer Simpson*',
      )
      -
      # Finally, save the page.
      page.save()

      Step 4: Run your program

      cd $HOME/wave-apps
      ./venv/bin/python hello_world.py

      Step 5: Admire your creation

      Point your browser to http://localhost:55555/hello, and pause to reflect on a particularly pithy quote from the venerable Homer Simpson.

      Hello World 1

      Step 6: Understand your program

      Let's walk through this program step by step.

      This program (technically a script), illustrates the core of Wave's programming model, or, "How to think in Wave."

      1. Your Wave server instance holds a collection of pages.
      2. To change a page, simply grab a reference to a page, change it, and save it.

      That's it. Your changes are now visible to everyone.

      Let's understand this principle in practice using the little program we just created.

      Grab a reference to a page

      A site represents a dictionary of all the pages on the Wave server. To get a reference to a page hosted at the route /hello (which translates to http://localhost:55555/hello), simply grab the value at key /hello.

      page = site['/hello']

      Change the page

      Similar to how a site represents a collection of pages, a page represents a collection of cards. A card represents a block of content: text, graphics, widgets, or some combination of those.

      page['hello'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World',
      content='"The Internet? Is that thing still around?" - *Homer Simpson*',
      )

      Pages support different kinds of cards. In this case, we add a card named hello that displays markdown content (markdown_card()). The position and size of the card on the page is specified by the box attribute. In this case, the card is placed at column 1, row 1, sized 2 x 2 units. The content attribute supports Github Flavored Markdown.

      Save the page

      Finally, we call save() on the page, which broadcasts our changes to all connected web browsers.

      page.save()

      Hello World 1

      So far, so good.

      Step 7: Edit your page from a REPL

      Finally, just for kicks, let's make some changes to our hello world page using a Python REPL and watch our page reflect those changes in realtime.

      Start a Python REPL

      cd $HOME/wave-apps
      ./venv/bin/python

      Grab a reference to our page

      >>>
      from h2o_wave import site
      page = site['/hello']

      Grab a reference to our card

      >>>
      quote = page['quote']

      Change the title

      >>>
      quote.title = 'Hello Again!'
      page.save()

      Hello World 2

      Change the content

      >>>
      quote.content = "D'oh! - *Homer Simpson*"
      page.save()

      Hello World 3

      Quit your REPL

      >>>
      quit()

      Summary

      What we just did - add content from one program and make edits to it from another - illustrates another important aspect of Wave's programming model: The Wave server retains content. Your hello_world.py program did its thing and exited. So did your REPL. But your content was retained for the viewing pleasure of future visitors to /hello.

      Next, we'll take the principles we learned from this tutorial and apply it towards a supposedly spirited folk song involving arithmetic progressions.

      Edit this page
      +
      # Finally, save the page.
      page.save()

      Step 4: Run your program

      cd $HOME/wave-apps
      ./venv/bin/python hello_world.py

      Step 5: Admire your creation

      Point your browser to http://localhost:55555/hello, and pause to reflect on a particularly pithy quote from the venerable Homer Simpson.

      Hello World 1

      Step 6: Understand your program

      Let's walk through this program step by step.

      This program (technically a script), illustrates the core of Wave's programming model, or, "How to think in Wave."

      1. Your Wave server instance holds a collection of pages.
      2. To change a page, simply grab a reference to a page, change it, and save it.

      That's it. Your changes are now visible to everyone.

      Let's understand this principle in practice using the little program we just created.

      Grab a reference to a page

      A site represents a dictionary of all the pages on the Wave server. To get a reference to a page hosted at the route /hello (which translates to http://localhost:55555/hello), simply grab the value at key /hello.

      page = site['/hello']

      Change the page

      Similar to how a site represents a collection of pages, a page represents a collection of cards. A card represents a block of content: text, graphics, widgets, or some combination of those.

      page['hello'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World',
      content='"The Internet? Is that thing still around?" - *Homer Simpson*',
      )

      Pages support different kinds of cards. In this case, we add a card named hello that displays markdown content (markdown_card()). The position and size of the card on the page is specified by the box attribute. In this case, the card is placed at column 1, row 1, sized 2 x 2 units. The content attribute supports Github Flavored Markdown.

      Save the page

      Finally, we call save() on the page, which broadcasts our changes to all connected web browsers.

      page.save()

      Hello World 1

      So far, so good.

      Step 7: Edit your page from a REPL

      Finally, just for kicks, let's make some changes to our hello world page using a Python REPL and watch our page reflect those changes in realtime.

      Start a Python REPL

      cd $HOME/wave-apps
      ./venv/bin/python

      Grab a reference to our page

      >>>
      from h2o_wave import site
      page = site['/hello']

      Grab a reference to our card

      >>>
      quote = page['quote']

      Change the title

      >>>
      quote.title = 'Hello Again!'
      page.save()

      Hello World 2

      Change the content

      >>>
      quote.content = "D'oh! - *Homer Simpson*"
      page.save()

      Hello World 3

      Quit your REPL

      >>>
      quit()

      Summary

      What we just did - add content from one program and make edits to it from another - illustrates another important aspect of Wave's programming model: The Wave server retains content. Your hello_world.py program did its thing and exited. So did your REPL. But your content was retained for the viewing pleasure of future visitors to /hello.

      Next, we'll take the principles we learned from this tutorial and apply it towards a supposedly spirited folk song involving arithmetic progressions.

      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/tutorial-monitor/index.html b/docs/docs/tutorial-monitor/index.html index 2ce773ef9e..ff3b8adfac 100644 --- a/docs/docs/tutorial-monitor/index.html +++ b/docs/docs/tutorial-monitor/index.html @@ -4,21 +4,21 @@ -Tutorial: System Monitor | H2O Wave +Tutorial: System Monitor | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Tutorial: System Monitor

      In this tutorial, we'll put our learnings from the first and second tutorials to some real-world use: a simple system monitoring tool that displays CPU, memory and network stats on a web page.

      CPU

      For example, if you have a spare 256-node Raspberry Pi cluster lying somewhere, you can run this program to each node and monitor your entire cluster's system utilization from one place. How cool is that?

      We'll also introduce a new concept, called data buffers, which allows you to use the Wave server to store rows (also called tuples or records) of information - much like how you would use tables in a database, or dataframes in Python or R - to deal with structured data.

      Prerequisites

      This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the Hello World tutorial and complete steps 1 and 2.

      Step 1: Install dependencies

      We'll be using the excellent psutil package to read system stats. Let's go ahead and install that in our virtual environment:

      cd $HOME/wave-apps
      ./venv/bin/pip install psutil

      Step 2: Monitor CPU usage

      Here's what our program looks like:

      $HOME/wave-apps/system_monitor.py
      import time
      import psutil
      from h2o_wave import site, ui, data
      +

      Tutorial: System Monitor

      In this tutorial, we'll put our learnings from the first and second tutorials to some real-world use: a simple system monitoring tool that displays CPU, memory and network stats on a web page.

      CPU

      For example, if you have a spare 256-node Raspberry Pi cluster lying somewhere, you can run this program to each node and monitor your entire cluster's system utilization from one place. How cool is that?

      We'll also introduce a new concept, called data buffers, which allows you to use the Wave server to store rows (also called tuples or records) of information - much like how you would use tables in a database, or dataframes in Python or R - to deal with structured data.

      Prerequisites

      This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the Hello World tutorial and complete steps 1 and 2.

      Step 1: Install dependencies

      We'll be using the excellent psutil package to read system stats. Let's go ahead and install that in our virtual environment:

      cd $HOME/wave-apps
      ./venv/bin/pip install psutil

      Step 2: Monitor CPU usage

      Here's what our program looks like:

      $HOME/wave-apps/system_monitor.py
      import time
      import psutil
      from h2o_wave import site, ui, data
      page = site['/monitor']
      cpu_card = page.add('cpu_stats', ui.small_series_stat_card(
      box='1 1 1 1',
      title='CPU',
      value='={{usage}}%',
      data=dict(usage=0.0),
      plot_data=data('tick usage', -15),
      plot_category='tick',
      plot_value='usage',
      plot_zero_value=0,
      plot_color='$red',
      ))
      tick = 0
      while True:
      tick += 1
      @@ -29,16 +29,16 @@
      tick = 0
      while True:
      tick += 1
      cpu_usage = psutil.cpu_percent(interval=1)
      cpu_card.data.usage = cpu_usage
      cpu_card.plot_data[-1] = [tick, cpu_usage]
      mem_usage = psutil.virtual_memory().percent
      mem_card.data.usage = mem_usage
      mem_card.plot_data[-1] = [tick, mem_usage]
      -
      page.save()
      time.sleep(1)

      Step 6: Run your program again

      Terminate your program (^C) and restart it:

      cd $HOME/wave-apps
      ./venv/bin/python system_stats.py

      Point your browser to http://localhost:55555/monitor. You should now see both CPU and memory stats live:

      CPU

      Exercise

      Explore other kinds of cards in the Gallery and display additional stats gleaned from psutil (network, disk, processes, etc.).

      Summary

      In this tutorial, we learned how to use stats cards to display live information. The knowledge you've gained from these first few tutorials should be enough to design and deploy live dashboards using Wave. You will also have noticed that you don't need to keep your Python program running all the time to continue displaying your pages. You can terminate your Python program any time, and the Wave server will happily display the last known state of all your pages.

      The programs you've been authoring till now are one kind of programs, called Wave scripts. Wave scripts are not interactive. They can modify pages on the Wave server, but cannot respond to user actions, like handling button clicks, menu commands, dropdown changes, and so on. To handle user interactions, you need to author Wave Apps, which are long-running programs (servers or services) that are capable of modifying pages in response to user actions. Let's see how to do that in the next tutorial.

      Edit this page
      +
      page.save()
      time.sleep(1)

      Step 6: Run your program again

      Terminate your program (^C) and restart it:

      cd $HOME/wave-apps
      ./venv/bin/python system_stats.py

      Point your browser to http://localhost:55555/monitor. You should now see both CPU and memory stats live:

      CPU

      Exercise

      Explore other kinds of cards in the Gallery and display additional stats gleaned from psutil (network, disk, processes, etc.).

      Summary

      In this tutorial, we learned how to use stats cards to display live information. The knowledge you've gained from these first few tutorials should be enough to design and deploy live dashboards using Wave. You will also have noticed that you don't need to keep your Python program running all the time to continue displaying your pages. You can terminate your Python program any time, and the Wave server will happily display the last known state of all your pages.

      The programs you've been authoring till now are one kind of programs, called Wave scripts. Wave scripts are not interactive. They can modify pages on the Wave server, but cannot respond to user actions, like handling button clicks, menu commands, dropdown changes, and so on. To handle user interactions, you need to author Wave Apps, which are long-running programs (servers or services) that are capable of modifying pages in response to user actions. Let's see how to do that in the next tutorial.

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/tutorial-todo/index.html b/docs/docs/tutorial-todo/index.html index 1b7d0b3c69..5523b12938 100644 --- a/docs/docs/tutorial-todo/index.html +++ b/docs/docs/tutorial-todo/index.html @@ -4,21 +4,21 @@ -Tutorial: Todo List | H2O Wave +Tutorial: Todo List | H2O Wave - - - - - - - - - + + + + + + + + +
      -

      Tutorial: Todo List

      In this tutorial, we'll build something a bit more substantial and useful: a to-do list with realtime sync, in under 75 lines of (well-formatted, well-commented) code.

      More importantly, this tutorial will not introduce any new concepts. Everything you need to know about authoring interactive apps using Wave is already covered in the previous tutorial. From this point on, it's mostly a matter of abstraction, which is a fancy term for how you solve the problem at hand using short, simple, clear, elegant, modular functions that do one thing and do it well.

      Above all, prefer brevity and clarity. The best code is no code at all.

      Step 1: Listen

      We'll start with a basic skeleton, and then work our way up from there.

      The first step is to listen(). Also, we want the landing page to show a list of to-dos, so we'll throw in an empty show_todos() function for now, and call it from serve().

      $HOME/wave-apps/todo.py
      from h2o_wave import Q, listen, ui
      +

      Tutorial: Todo List

      In this tutorial, we'll build something a bit more substantial and useful: a to-do list with realtime sync, in under 75 lines of (well-formatted, well-commented) code.

      More importantly, this tutorial will not introduce any new concepts. Everything you need to know about authoring interactive apps using Wave is already covered in the previous tutorial. From this point on, it's mostly a matter of abstraction, which is a fancy term for how you solve the problem at hand using short, simple, clear, elegant, modular functions that do one thing and do it well.

      Above all, prefer brevity and clarity. The best code is no code at all.

      Step 1: Listen

      We'll start with a basic skeleton, and then work our way up from there.

      The first step is to listen(). Also, we want the landing page to show a list of to-dos, so we'll throw in an empty show_todos() function for now, and call it from serve().

      $HOME/wave-apps/todo.py
      from h2o_wave import Q, listen, ui
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      @@ -116,16 +116,16 @@
      listen('/todo', serve)

      Restart your app and reload your browser. You should now be able to add new to-do items to your list. Congratulations!

      Step 9: Make it realtime

      To make your app realtime, simply pass mode='multicast' to your listen().

      $HOME/wave-apps/todo.py
      listen('/todo', serve, mode='multicast')

      Restart your app, and try opening http://localhost:55555/todo from multiple browser tabs:

      Groovy!

      Exercise

      A little housekeeping goes a long way: add a "Clear" button on the main page to clear all completed to-dos.

      "And this mess is so big
      And so deep and so tall,
      We cannot pick it up.
      -There is no way at all!"

      ― Dr. Seuss, The Cat in the Hat

      Next steps

      Congratulations! You've completed all the tutorials (hopefully). There are three paths you can take from here:

      • Gallery. 150+ examples that cover everything that Wave has to offer.
      • Guide. In-depth look at each of Wave's features.
      • API. Reference-level documentation for the Python API.

      Happy hacking!

      Edit this page
      +There is no way at all!"

      ― Dr. Seuss, The Cat in the Hat

      Next steps

      Congratulations! You've completed all the tutorials (hopefully). There are three paths you can take from here:

      • Gallery. 150+ examples that cover everything that Wave has to offer.
      • Guide. In-depth look at each of Wave's features.
      • API. Reference-level documentation for the Python API.

      Happy hacking!

      Edit this page
      - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/docs/e013439f.1a5b3d9a.js b/docs/e013439f.143ae2bf.js similarity index 93% rename from docs/e013439f.1a5b3d9a.js rename to docs/e013439f.143ae2bf.js index 8103e3716a..be8c1eba3d 100644 --- a/docs/e013439f.1a5b3d9a.js +++ b/docs/e013439f.143ae2bf.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[202],{255:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return l})),t.d(n,"rightToc",(function(){return c})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),o=(t(0),t(287)),i={title:"Plot / Line / Annotation"},l={unversionedId:"examples/plot-line-annotation",id:"examples/plot-line-annotation",isDocsHomePage:!1,title:"Plot / Line / Annotation",description:"Add annotations to a line plot.",source:"@site/docs/examples/plot-line-annotation.md",slug:"/examples/plot-line-annotation",permalink:"/wave/docs/examples/plot-line-annotation",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-annotation.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Labels / Occlusion",permalink:"/wave/docs/examples/plot-line-labels-no-overlap"},next:{title:"Plot / Path",permalink:"/wave/docs/examples/plot-path"}},c=[],p={rightToc:c};function u(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Add annotations to a line plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(446).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeTimeSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeTimeSeries()\nv = page.add('example', ui.plot_card(\n box='1 1 4 5',\n title='Time-Numeric',\n data=data('date price', n),\n plot=ui.plot([\n ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0, y_max=100),\n ui.mark(x=50, y=50, label='point'),\n ui.mark(x='2010-05-15T19:59:21.000000Z', label='vertical line'),\n ui.mark(y=40, label='horizontal line'),\n ui.mark(x='2010-05-24T19:59:21.000000Z', x0='2010-05-20T19:59:21.000000Z', label='vertical region'),\n ui.mark(y=70, y0=60, label='horizontal region'),\n ui.mark(x='2010-05-10T19:59:21.000000Z', x0='2010-05-05T19:59:21.000000Z', y=30, y0=20,\n label='rectangular region')\n ])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}u.isMDXComponent=!0},287:function(e,n,t){"use strict";t.d(n,"a",(function(){return s})),t.d(n,"b",(function(){return f}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function l(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),u=function(e){var n=a.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},s=function(e){var n=u(e.components);return a.a.createElement(p.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(t),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return t?a.a.createElement(f,l(l({ref:n},p),{},{components:t})):a.a.createElement(f,l({ref:n},p))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=d;var l={};for(var c in n)hasOwnProperty.call(n,c)&&(l[c]=n[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),u=function(e){var n=a.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},s=function(e){var n=u(e.components);return a.a.createElement(p.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(t),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return t?a.a.createElement(f,l(l({ref:n},p),{},{components:t})):a.a.createElement(f,l({ref:n},p))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=d;var l={};for(var c in n)hasOwnProperty.call(n,c)&&(l[c]=n[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},x=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),p=l(r),x=n,f=p["".concat(o,".").concat(x)]||p[x]||m[x]||i;return r?a.a.createElement(f,s(s({ref:t},u),{},{components:r})):a.a.createElement(f,s({ref:t},u))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=x;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var u=2;u=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},x=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),p=l(r),x=n,f=p["".concat(o,".").concat(x)]||p[x]||m[x]||i;return r?a.a.createElement(f,s(s({ref:t},u),{},{components:r})):a.a.createElement(f,s({ref:t},u))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=x;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var u=2;u\n\n\n

      Hello World!

      \n\n\n'''\n\npage = site['/demo']\n\npage['example'] = ui.form_card(\n box='1 1 2 2',\n items=[\n ui.frame(content=html, height='100px')\n ]\n)\n\npage.save()\n")))}u.isMDXComponent=!0},287:function(e,n,t){"use strict";t.d(n,"a",(function(){return f})),t.d(n,"b",(function(){return A}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function m(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function c(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),u=function(e){var n=a.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},f=function(e){var n=u(e.components);return a.a.createElement(p.Provider,{value:n},e.children)},i={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,m=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),f=u(t),d=r,A=f["".concat(m,".").concat(d)]||f[d]||i[d]||o;return t?a.a.createElement(A,c(c({ref:n},p),{},{components:t})):a.a.createElement(A,c({ref:n},p))}));function A(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,m=new Array(o);m[0]=d;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,m[1]=c;for(var p=2;p\n\n\n

      Hello World!

      \n\n\n'''\n\npage = site['/demo']\n\npage['example'] = ui.form_card(\n box='1 1 2 2',\n items=[\n ui.frame(content=html, height='100px')\n ]\n)\n\npage.save()\n")))}u.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return f})),t.d(n,"b",(function(){return A}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function m(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function c(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),u=function(e){var n=a.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},f=function(e){var n=u(e.components);return a.a.createElement(p.Provider,{value:n},e.children)},i={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,m=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),f=u(t),d=r,A=f["".concat(m,".").concat(d)]||f[d]||i[d]||o;return t?a.a.createElement(A,c(c({ref:n},p),{},{components:t})):a.a.createElement(A,c({ref:n},p))}));function A(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,m=new Array(o);m[0]=d;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,m[1]=c;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,d=u["".concat(i,".").concat(m)]||u[m]||f[m]||o;return n?a.a.createElement(d,c(c({ref:t},s),{},{components:n})):a.a.createElement(d,c({ref:t},s))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,d=u["".concat(i,".").concat(m)]||u[m]||f[m]||o;return n?a.a.createElement(d,c(c({ref:t},s),{},{components:n})):a.a.createElement(d,c({ref:t},s))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),c=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=c(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),m=c(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||o;return n?a.a.createElement(f,l(l({ref:t},s),{},{components:n})):a.a.createElement(f,l({ref:t},s))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),c=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=c(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),m=c(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||o;return n?a.a.createElement(f,l(l({ref:t},s),{},{components:n})):a.a.createElement(f,l({ref:t},s))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var s=2;s=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=r.a.createContext({}),l=function(e){var t=r.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},u=function(e){var t=l(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=l(a),m=n,b=u["".concat(o,".").concat(m)]||u[m]||d[m]||i;return a?r.a.createElement(b,s(s({ref:t},p),{},{components:a})):r.a.createElement(b,s({ref:t},p))}));function b(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=m;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var p=2;p=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=r.a.createContext({}),l=function(e){var t=r.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},u=function(e){var t=l(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=l(a),m=n,b=u["".concat(o,".").concat(m)]||u[m]||d[m]||i;return a?r.a.createElement(b,s(s({ref:t},p),{},{components:a})):r.a.createElement(b,s({ref:t},p))}));function b(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=m;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var p=2;p=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(l=0;l=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var b=n.a.createContext({}),c=function(e){var a=n.a.useContext(b),t=a;return e&&(t="function"==typeof e?e(a):o(o({},a),e)),t},s=function(e){var a=c(e.components);return n.a.createElement(b.Provider,{value:a},e.children)},m={inlineCode:"code",wrapper:function(e){var a=e.children;return n.a.createElement(n.a.Fragment,{},a)}},u=n.a.forwardRef((function(e,a){var t=e.components,l=e.mdxType,r=e.originalType,i=e.parentName,b=p(e,["components","mdxType","originalType","parentName"]),s=c(t),u=l,O=s["".concat(i,".").concat(u)]||s[u]||m[u]||r;return t?n.a.createElement(O,o(o({ref:a},b),{},{components:t})):n.a.createElement(O,o({ref:a},b))}));function O(e,a){var t=arguments,l=a&&a.mdxType;if("string"==typeof e||l){var r=t.length,i=new Array(r);i[0]=u;var o={};for(var p in a)hasOwnProperty.call(a,p)&&(o[p]=a[p]);o.originalType=e,o.mdxType="string"==typeof e?e:l,i[1]=o;for(var b=2;b=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(l=0;l=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var b=n.a.createContext({}),c=function(e){var a=n.a.useContext(b),t=a;return e&&(t="function"==typeof e?e(a):o(o({},a),e)),t},s=function(e){var a=c(e.components);return n.a.createElement(b.Provider,{value:a},e.children)},m={inlineCode:"code",wrapper:function(e){var a=e.children;return n.a.createElement(n.a.Fragment,{},a)}},u=n.a.forwardRef((function(e,a){var t=e.components,l=e.mdxType,r=e.originalType,i=e.parentName,b=p(e,["components","mdxType","originalType","parentName"]),s=c(t),u=l,O=s["".concat(i,".").concat(u)]||s[u]||m[u]||r;return t?n.a.createElement(O,o(o({ref:a},b),{},{components:t})):n.a.createElement(O,o({ref:a},b))}));function O(e,a){var t=arguments,l=a&&a.mdxType;if("string"==typeof e||l){var r=t.length,i=new Array(r);i[0]=u;var o={};for(var p in a)hasOwnProperty.call(a,p)&&(o[p]=a[p]);o.originalType=e,o.mdxType="string"==typeof e?e:l,i[1]=o;for(var b=2;b=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,m=s["".concat(i,".").concat(f)]||s[f]||d[f]||o;return n?a.a.createElement(m,l(l({ref:t},p),{},{components:n})):a.a.createElement(m,l({ref:t},p))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,m=s["".concat(i,".").concat(f)]||s[f]||d[f]||o;return n?a.a.createElement(m,l(l({ref:t},p),{},{components:n})):a.a.createElement(m,l({ref:t},p))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(r[t]=A[t]);return r}(A,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(A);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(A,t)&&(r[t]=A[t])}return r}var c=r.a.createContext({}),u=function(A){var e=r.a.useContext(c),t=e;return A&&(t="function"==typeof A?A(e):f(f({},e),A)),t},g=function(A){var e=u(A.components);return r.a.createElement(c.Provider,{value:e},A.children)},v={inlineCode:"code",wrapper:function(A){var e=A.children;return r.a.createElement(r.a.Fragment,{},e)}},w=r.a.forwardRef((function(A,e){var t=A.components,n=A.mdxType,o=A.originalType,a=A.parentName,c=i(A,["components","mdxType","originalType","parentName"]),g=u(t),w=n,b=g["".concat(a,".").concat(w)]||g[w]||v[w]||o;return t?r.a.createElement(b,f(f({ref:e},c),{},{components:t})):r.a.createElement(b,f({ref:e},c))}));function b(A,e){var t=arguments,n=e&&e.mdxType;if("string"==typeof A||n){var o=t.length,a=new Array(o);a[0]=w;var f={};for(var i in e)hasOwnProperty.call(e,i)&&(f[i]=e[i]);f.originalType=A,f.mdxType="string"==typeof A?A:n,a[1]=f;for(var c=2;c=0||(r[t]=A[t]);return r}(A,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(A);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(A,t)&&(r[t]=A[t])}return r}var c=r.a.createContext({}),u=function(A){var e=r.a.useContext(c),t=e;return A&&(t="function"==typeof A?A(e):f(f({},e),A)),t},g=function(A){var e=u(A.components);return r.a.createElement(c.Provider,{value:e},A.children)},v={inlineCode:"code",wrapper:function(A){var e=A.children;return r.a.createElement(r.a.Fragment,{},e)}},w=r.a.forwardRef((function(A,e){var t=A.components,n=A.mdxType,o=A.originalType,a=A.parentName,c=i(A,["components","mdxType","originalType","parentName"]),g=u(t),w=n,b=g["".concat(a,".").concat(w)]||g[w]||v[w]||o;return t?r.a.createElement(b,f(f({ref:e},c),{},{components:t})):r.a.createElement(b,f({ref:e},c))}));function b(A,e){var t=arguments,n=e&&e.mdxType;if("string"==typeof A||n){var o=t.length,a=new Array(o);a[0]=w;var f={};for(var i in e)hasOwnProperty.call(e,i)&&(f[i]=e[i]);f.originalType=A,f.mdxType="string"==typeof A?A:n,a[1]=f;for(var c=2;c=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),p=function(e){var n=a.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},u=function(e){var n=p(e.components);return a.a.createElement(s.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(t),d=r,m=u["".concat(i,".").concat(d)]||u[d]||b[d]||c;return t?a.a.createElement(m,o(o({ref:n},s),{},{components:t})):a.a.createElement(m,o({ref:n},s))}));function m(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var c=t.length,i=new Array(c);i[0]=d;var o={};for(var l in n)hasOwnProperty.call(n,l)&&(o[l]=n[l]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var s=2;s=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),p=function(e){var n=a.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},u=function(e){var n=p(e.components);return a.a.createElement(s.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(t),d=r,m=u["".concat(i,".").concat(d)]||u[d]||b[d]||c;return t?a.a.createElement(m,o(o({ref:n},s),{},{components:t})):a.a.createElement(m,o({ref:n},s))}));function m(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var c=t.length,i=new Array(c);i[0]=d;var o={};for(var l in n)hasOwnProperty.call(n,l)&&(o[l]=n[l]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var s=2;s=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=o.a.createContext({}),u=function(e){var t=o.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=u(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,d=s["".concat(i,".").concat(f)]||s[f]||m[f]||a;return n?o.a.createElement(d,p(p({ref:t},c),{},{components:n})):o.a.createElement(d,p({ref:t},c))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=f;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p.mdxType="string"==typeof e?e:r,i[1]=p;for(var c=2;c=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=o.a.createContext({}),u=function(e){var t=o.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=u(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,d=s["".concat(i,".").concat(f)]||s[f]||m[f]||a;return n?o.a.createElement(d,p(p({ref:t},c),{},{components:n})):o.a.createElement(d,p({ref:t},c))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=f;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p.mdxType="string"==typeof e?e:r,i[1]=p;for(var c=2;c=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),u=function(e){var r=a.a.useContext(c),n=r;return e&&(n="function"==typeof e?e(r):o(o({},r),e)),n},p=function(e){var r=u(e.components);return a.a.createElement(c.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},m=a.a.forwardRef((function(e,r){var n=e.components,t=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=t,f=p["".concat(l,".").concat(m)]||p[m]||d[m]||i;return n?a.a.createElement(f,o(o({ref:r},c),{},{components:n})):a.a.createElement(f,o({ref:r},c))}));function f(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var i=n.length,l=new Array(i);l[0]=m;var o={};for(var s in r)hasOwnProperty.call(r,s)&&(o[s]=r[s]);o.originalType=e,o.mdxType="string"==typeof e?e:t,l[1]=o;for(var c=2;c=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),u=function(e){var r=a.a.useContext(c),n=r;return e&&(n="function"==typeof e?e(r):o(o({},r),e)),n},p=function(e){var r=u(e.components);return a.a.createElement(c.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},m=a.a.forwardRef((function(e,r){var n=e.components,t=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=t,f=p["".concat(l,".").concat(m)]||p[m]||d[m]||i;return n?a.a.createElement(f,o(o({ref:r},c),{},{components:n})):a.a.createElement(f,o({ref:r},c))}));function f(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var i=n.length,l=new Array(i);l[0]=m;var o={};for(var s in r)hasOwnProperty.call(r,s)&&(o[s]=r[s]);o.originalType=e,o.mdxType="string"==typeof e?e:t,l[1]=o;for(var c=2;c=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var u=i.a.createContext({}),f=function(e){var t=i.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=f(e.components);return i.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},m=i.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,a=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),p=f(n),m=r,b=p["".concat(a,".").concat(m)]||p[m]||d[m]||c;return n?i.a.createElement(b,o(o({ref:t},u),{},{components:n})):i.a.createElement(b,o({ref:t},u))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,a=new Array(c);a[0]=m;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o.mdxType="string"==typeof e?e:r,a[1]=o;for(var u=2;u=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var u=i.a.createContext({}),f=function(e){var t=i.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=f(e.components);return i.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},m=i.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,a=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),p=f(n),m=r,b=p["".concat(a,".").concat(m)]||p[m]||d[m]||c;return n?i.a.createElement(b,o(o({ref:t},u),{},{components:n})):i.a.createElement(b,o({ref:t},u))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,a=new Array(c);a[0]=m;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o.mdxType="string"==typeof e?e:r,a[1]=o;for(var u=2;u=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var u=o.a.createContext({}),l=function(e){var n=o.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=l(e.components);return o.a.createElement(u.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},m=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(t),m=r,f=p["".concat(i,".").concat(m)]||p[m]||b[m]||a;return t?o.a.createElement(f,c(c({ref:n},u),{},{components:t})):o.a.createElement(f,c({ref:n},u))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=m;var c={};for(var s in n)hasOwnProperty.call(n,s)&&(c[s]=n[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var u=2;u=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var u=o.a.createContext({}),l=function(e){var n=o.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=l(e.components);return o.a.createElement(u.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},m=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(t),m=r,f=p["".concat(i,".").concat(m)]||p[m]||b[m]||a;return t?o.a.createElement(f,c(c({ref:n},u),{},{components:t})):o.a.createElement(f,c({ref:n},u))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=m;var c={};for(var s in n)hasOwnProperty.call(n,s)&&(c[s]=n[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var u=2;u',id:"breadcrumb",children:[]},{value:'breadcrumbs_card ',id:"breadcrumbs_card",children:[]},{value:'button ',id:"button",children:[]},{value:'buttons ',id:"buttons",children:[]},{value:'checkbox ',id:"checkbox",children:[]},{value:'checklist ',id:"checklist",children:[]},{value:'choice ',id:"choice",children:[]},{value:'choice_group ',id:"choice_group",children:[]},{value:'color_picker ',id:"color_picker",children:[]},{value:'combobox ',id:"combobox",children:[]},{value:'command ',id:"command",children:[]},{value:'component ',id:"component",children:[]},{value:'date_picker ',id:"date_picker",children:[]},{value:'dropdown ',id:"dropdown",children:[]},{value:'expander ',id:"expander",children:[]},{value:'file_upload ',id:"file_upload",children:[]},{value:'flex_card ',id:"flex_card",children:[]},{value:'form_card ',id:"form_card",children:[]},{value:'frame ',id:"frame",children:[]},{value:'frame_card ',id:"frame_card",children:[]},{value:'graphics_card ',id:"graphics_card",children:[]},{value:'grid_card ',id:"grid_card",children:[]},{value:'header_card ',id:"header_card",children:[]},{value:'icon_table_cell_type ',id:"icon_table_cell_type",children:[]},{value:'image_card ',id:"image_card",children:[]},{value:'label ',id:"label",children:[]},{value:'large_bar_stat_card ',id:"large_bar_stat_card",children:[]},{value:'large_stat_card ',id:"large_stat_card",children:[]},{value:'link ',id:"link",children:[]},{value:'list_card ',id:"list_card",children:[]},{value:'list_item1_card ',id:"list_item1_card",children:[]},{value:'mark ',id:"mark",children:[]},{value:'markdown_card ',id:"markdown_card",children:[]},{value:'markup ',id:"markup",children:[]},{value:'markup_card ',id:"markup_card",children:[]},{value:'message_bar ',id:"message_bar",children:[]},{value:'meta_card ',id:"meta_card",children:[]},{value:'nav_card ',id:"nav_card",children:[]},{value:'nav_group ',id:"nav_group",children:[]},{value:'nav_item ',id:"nav_item",children:[]},{value:'picker ',id:"picker",children:[]},{value:'pixel_art_card ',id:"pixel_art_card",children:[]},{value:'plot ',id:"plot",children:[]},{value:'plot_card ',id:"plot_card",children:[]},{value:'progress ',id:"progress",children:[]},{value:'progress_table_cell_type ',id:"progress_table_cell_type",children:[]},{value:'range_slider ',id:"range_slider",children:[]},{value:'repeat_card ',id:"repeat_card",children:[]},{value:'separator ',id:"separator",children:[]},{value:'slider ',id:"slider",children:[]},{value:'small_series_stat_card ',id:"small_series_stat_card",children:[]},{value:'small_stat_card ',id:"small_stat_card",children:[]},{value:'spinbox ',id:"spinbox",children:[]},{value:'step ',id:"step",children:[]},{value:'stepper ',id:"stepper",children:[]},{value:'tab ',id:"tab",children:[]},{value:'tab_card ',id:"tab_card",children:[]},{value:'table ',id:"table",children:[]},{value:'table_cell_type ',id:"table_cell_type",children:[]},{value:'table_column ',id:"table_column",children:[]},{value:'table_row ',id:"table_row",children:[]},{value:'tabs ',id:"tabs",children:[]},{value:'tall_gauge_stat_card ',id:"tall_gauge_stat_card",children:[]},{value:'tall_series_stat_card ',id:"tall_series_stat_card",children:[]},{value:'template ',id:"template",children:[]},{value:'template_card ',id:"template_card",children:[]},{value:'text ',id:"text",children:[]},{value:'text_l ',id:"text_l",children:[]},{value:'text_m ',id:"text_m",children:[]},{value:'text_s ',id:"text_s",children:[]},{value:'text_xl ',id:"text_xl",children:[]},{value:'text_xs ',id:"text_xs",children:[]},{value:'textbox ',id:"textbox",children:[]},{value:'toggle ',id:"toggle",children:[]},{value:'toolbar_card ',id:"toolbar_card",children:[]},{value:'vega_card ',id:"vega_card",children:[]},{value:'vega_visualization ',id:"vega_visualization",children:[]},{value:'visualization ',id:"visualization",children:[]},{value:'wide_bar_stat_card ',id:"wide_bar_stat_card",children:[]},{value:'wide_gauge_stat_card ',id:"wide_gauge_stat_card",children:[]},{value:'wide_series_stat_card ',id:"wide_series_stat_card",children:[]}]}],i={rightToc:d};function s(e){var t=e.components,l=Object(n.a)(e,["components"]);return Object(b.b)("wrapper",Object(a.a)({},i,l,{components:t,mdxType:"MDXLayout"}),Object(b.b)("h2",{id:"functions"},"Functions"),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"breadcrumb"},"breadcrumb ",Object(b.b)("a",{name:"h2o_wave.ui.breadcrumb"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"breadcrumb"),"(name:\xa0str, label:\xa0str) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a breadcrumb for a ",Object(b.b)("code",null,"h2o_q.types.BreadcrumbsCard()"),"."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The label to display.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"breadcrumbs_card"},"breadcrumbs_card ",Object(b.b)("a",{name:"h2o_wave.ui.breadcrumbs_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"breadcrumbs_card"),"(box:\xa0str, items:\xa0List[",Object(b.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb"),"], commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"types#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page\u2019s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"items")),Object(b.b)("dd",null,"A list of ",Object(b.b)("code",null,"h2o_q.types.Breadcrumb")," instances to display. See ",Object(b.b)("code",null,"h2o_q.ui.breadcrumb()")),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"types#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"button"},"button ",Object(b.b)("a",{name:"h2o_wave.ui.button"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"button"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, primary:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a button."),Object(b.b)("p",null,"Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog."),Object(b.b)("p",null,"When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements."),Object(b.b)("p",null,'Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.'),Object(b.b)("p",null,"While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The text displayed on the button."),Object(b.b)("dt",null,Object(b.b)("code",null,"caption")),Object(b.b)("dd",null,"The caption displayed below the label. Setting a caption renders a compound button."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True."),Object(b.b)("dt",null,Object(b.b)("code",null,"primary")),Object(b.b)("dd",null,"True if the button should be rendered as the primary button in the set."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if the button should be disabled."),Object(b.b)("dt",null,Object(b.b)("code",null,"link")),Object(b.b)("dd",null,"True if the button should be rendered as link text and not a standard button."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Button",href:"types#h2o_wave.types.Button"},"Button"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"buttons"},"buttons ",Object(b.b)("a",{name:"h2o_wave.ui.buttons"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"buttons"),"(items:\xa0List[",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"),"], justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a set of buttons to be layed out horizontally."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"items")),Object(b.b)("dd",null,"The button in this set."),Object(b.b)("dt",null,Object(b.b)("code",null,"justify")),Object(b.b)("dd",null,"Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Buttons",href:"types#h2o_wave.types.Buttons"},"Buttons"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"checkbox"},"checkbox ",Object(b.b)("a",{name:"h2o_wave.ui.checkbox"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"checkbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, indeterminate:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a checkbox."),Object(b.b)("p",null,"A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component."),Object(b.b)("p",null,"A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected."),Object(b.b)("p",null,"For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action."),Object(b.b)("p",null,"Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed alongside the checkbox."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"True if selected, False if unselected."),Object(b.b)("dt",null,Object(b.b)("code",null,"indeterminate")),Object(b.b)("dd",null,"True if the selection is indeterminate (neither selected nor unselected)."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if the checkbox is disabled."),Object(b.b)("dt",null,Object(b.b)("code",null,"trigger")),Object(b.b)("dd",null,"True if the form should be submitted when the checkbox value changes."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Checkbox",href:"types#h2o_wave.types.Checkbox"},"Checkbox"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"checklist"},"checklist ",Object(b.b)("a",{name:"h2o_wave.ui.checklist"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"checklist"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed above the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"values")),Object(b.b)("dd",null,"The names of the selected choices."),Object(b.b)("dt",null,Object(b.b)("code",null,"choices")),Object(b.b)("dd",null,"The choices to be presented."),Object(b.b)("dt",null,Object(b.b)("code",null,"trigger")),Object(b.b)("dd",null,"True if the form should be submitted when the checklist value changes."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Checklist",href:"types#h2o_wave.types.Checklist"},"Checklist"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"choice"},"choice ",Object(b.b)("a",{name:"h2o_wave.ui.choice"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"choice"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a choice for a checklist, choice group or dropdown."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed alongside the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if the checkbox is disabled.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"choice_group"},"choice_group ",Object(b.b)("a",{name:"h2o_wave.ui.choice_group"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"choice_group"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group."),Object(b.b)("p",null,"Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead."),Object(b.b)("p",null,'If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don\'t agree."'),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed alongside the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The name of the selected choice."),Object(b.b)("dt",null,Object(b.b)("code",null,"choices")),Object(b.b)("dd",null,"The choices to be presented."),Object(b.b)("dt",null,Object(b.b)("code",null,"required")),Object(b.b)("dd",null,"True if this field is required."),Object(b.b)("dt",null,Object(b.b)("code",null,"trigger")),Object(b.b)("dd",null,"True if the form should be submitted when the selection changes."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"types#h2o_wave.types.ChoiceGroup"},"ChoiceGroup"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"color_picker"},"color_picker ",Object(b.b)("a",{name:"h2o_wave.ui.color_picker"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"color_picker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a color picker."),Object(b.b)("p",null,"A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed alongside the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The selected color (CSS-compatible string)"),Object(b.b)("dt",null,Object(b.b)("code",null,"choices")),Object(b.b)("dd",null,"A list of colors (CSS-compatible strings) to limit color choices to."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.ColorPicker",href:"types#h2o_wave.types.ColorPicker"},"ColorPicker"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"combobox"},"combobox ",Object(b.b)("a",{name:"h2o_wave.ui.combobox"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"combobox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a combobox."),Object(b.b)("p",null,"A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI."),Object(b.b)("p",null,"When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed alongside the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"placeholder")),Object(b.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The name of the selected choice."),Object(b.b)("dt",null,Object(b.b)("code",null,"choices")),Object(b.b)("dd",null,"The choices to be presented."),Object(b.b)("dt",null,Object(b.b)("code",null,"error")),Object(b.b)("dd",null,"Text to be displayed as an error below the text box."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if this field is disabled."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Combobox",href:"types#h2o_wave.types.Combobox"},"Combobox"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"command"},"command ",Object(b.b)("a",{name:"h2o_wave.ui.command"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"command"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, data:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a command."),Object(b.b)("p",null,"Commands are typically displayed as context menu items or toolbar button."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The text displayed for this command."),Object(b.b)("dt",null,Object(b.b)("code",null,"caption")),Object(b.b)("dd",null,"The caption for this command (typically a tooltip)."),Object(b.b)("dt",null,Object(b.b)("code",null,"icon")),Object(b.b)("dd",null,"The icon to be displayed for this command."),Object(b.b)("dt",null,Object(b.b)("code",null,"items")),Object(b.b)("dd",null,"Sub-commands, if any"),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data associated with this command, if any.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"component"},"component ",Object(b.b)("a",{name:"h2o_wave.ui.component"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"component"),"(text:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Text",href:"types#h2o_wave.types.Text"},"Text"),",\xa0NoneType]\xa0=\xa0None, text_xl:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.TextXl",href:"types#h2o_wave.types.TextXl"},"TextXl"),",\xa0NoneType]\xa0=\xa0None, text_l:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.TextL",href:"types#h2o_wave.types.TextL"},"TextL"),",\xa0NoneType]\xa0=\xa0None, text_m:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.TextM",href:"types#h2o_wave.types.TextM"},"TextM"),",\xa0NoneType]\xa0=\xa0None, text_s:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.TextS",href:"types#h2o_wave.types.TextS"},"TextS"),",\xa0NoneType]\xa0=\xa0None, text_xs:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.TextXs",href:"types#h2o_wave.types.TextXs"},"TextXs"),",\xa0NoneType]\xa0=\xa0None, label:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Label",href:"types#h2o_wave.types.Label"},"Label"),",\xa0NoneType]\xa0=\xa0None, separator:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Separator",href:"types#h2o_wave.types.Separator"},"Separator"),",\xa0NoneType]\xa0=\xa0None, progress:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Progress",href:"types#h2o_wave.types.Progress"},"Progress"),",\xa0NoneType]\xa0=\xa0None, message_bar:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.MessageBar",href:"types#h2o_wave.types.MessageBar"},"MessageBar"),",\xa0NoneType]\xa0=\xa0None, textbox:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Textbox",href:"types#h2o_wave.types.Textbox"},"Textbox"),",\xa0NoneType]\xa0=\xa0None, checkbox:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Checkbox",href:"types#h2o_wave.types.Checkbox"},"Checkbox"),",\xa0NoneType]\xa0=\xa0None, toggle:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Toggle",href:"types#h2o_wave.types.Toggle"},"Toggle"),",\xa0NoneType]\xa0=\xa0None, choice_group:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"types#h2o_wave.types.ChoiceGroup"},"ChoiceGroup"),",\xa0NoneType]\xa0=\xa0None, checklist:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Checklist",href:"types#h2o_wave.types.Checklist"},"Checklist"),",\xa0NoneType]\xa0=\xa0None, dropdown:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Dropdown",href:"types#h2o_wave.types.Dropdown"},"Dropdown"),",\xa0NoneType]\xa0=\xa0None, combobox:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Combobox",href:"types#h2o_wave.types.Combobox"},"Combobox"),",\xa0NoneType]\xa0=\xa0None, slider:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Slider",href:"types#h2o_wave.types.Slider"},"Slider"),",\xa0NoneType]\xa0=\xa0None, spinbox:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Spinbox",href:"types#h2o_wave.types.Spinbox"},"Spinbox"),",\xa0NoneType]\xa0=\xa0None, date_picker:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.DatePicker",href:"types#h2o_wave.types.DatePicker"},"DatePicker"),",\xa0NoneType]\xa0=\xa0None, color_picker:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.ColorPicker",href:"types#h2o_wave.types.ColorPicker"},"ColorPicker"),",\xa0NoneType]\xa0=\xa0None, button:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Button",href:"types#h2o_wave.types.Button"},"Button"),",\xa0NoneType]\xa0=\xa0None, buttons:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Buttons",href:"types#h2o_wave.types.Buttons"},"Buttons"),",\xa0NoneType]\xa0=\xa0None, file_upload:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.FileUpload",href:"types#h2o_wave.types.FileUpload"},"FileUpload"),",\xa0NoneType]\xa0=\xa0None, table:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Table",href:"types#h2o_wave.types.Table"},"Table"),",\xa0NoneType]\xa0=\xa0None, link:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Link",href:"types#h2o_wave.types.Link"},"Link"),",\xa0NoneType]\xa0=\xa0None, tabs:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Tabs",href:"types#h2o_wave.types.Tabs"},"Tabs"),",\xa0NoneType]\xa0=\xa0None, expander:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Expander",href:"types#h2o_wave.types.Expander"},"Expander"),",\xa0NoneType]\xa0=\xa0None, frame:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Frame",href:"types#h2o_wave.types.Frame"},"Frame"),",\xa0NoneType]\xa0=\xa0None, markup:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Markup",href:"types#h2o_wave.types.Markup"},"Markup"),",\xa0NoneType]\xa0=\xa0None, template:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Template",href:"types#h2o_wave.types.Template"},"Template"),",\xa0NoneType]\xa0=\xa0None, picker:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Picker",href:"types#h2o_wave.types.Picker"},"Picker"),",\xa0NoneType]\xa0=\xa0None, range_slider:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.RangeSlider",href:"types#h2o_wave.types.RangeSlider"},"RangeSlider"),",\xa0NoneType]\xa0=\xa0None, stepper:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Stepper",href:"types#h2o_wave.types.Stepper"},"Stepper"),",\xa0NoneType]\xa0=\xa0None, visualization:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.Visualization",href:"types#h2o_wave.types.Visualization"},"Visualization"),",\xa0NoneType]\xa0=\xa0None, vega_visualization:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"types#h2o_wave.types.VegaVisualization"},"VegaVisualization"),",\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a component."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"text")),Object(b.b)("dd",null,"Text block."),Object(b.b)("dt",null,Object(b.b)("code",null,"text_xl")),Object(b.b)("dd",null,"Extra-large sized text block."),Object(b.b)("dt",null,Object(b.b)("code",null,"text_l")),Object(b.b)("dd",null,"Large sized text block."),Object(b.b)("dt",null,Object(b.b)("code",null,"text_m")),Object(b.b)("dd",null,"Medium sized text block."),Object(b.b)("dt",null,Object(b.b)("code",null,"text_s")),Object(b.b)("dd",null,"Small sized text block."),Object(b.b)("dt",null,Object(b.b)("code",null,"text_xs")),Object(b.b)("dd",null,"Extra-small sized text block."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Label."),Object(b.b)("dt",null,Object(b.b)("code",null,"separator")),Object(b.b)("dd",null,"Separator."),Object(b.b)("dt",null,Object(b.b)("code",null,"progress")),Object(b.b)("dd",null,"Progress bar."),Object(b.b)("dt",null,Object(b.b)("code",null,"message_bar")),Object(b.b)("dd",null,"Message bar."),Object(b.b)("dt",null,Object(b.b)("code",null,"textbox")),Object(b.b)("dd",null,"Textbox."),Object(b.b)("dt",null,Object(b.b)("code",null,"checkbox")),Object(b.b)("dd",null,"Checkbox."),Object(b.b)("dt",null,Object(b.b)("code",null,"toggle")),Object(b.b)("dd",null,"Toggle."),Object(b.b)("dt",null,Object(b.b)("code",null,"choice_group")),Object(b.b)("dd",null,"Choice group."),Object(b.b)("dt",null,Object(b.b)("code",null,"checklist")),Object(b.b)("dd",null,"Checklist."),Object(b.b)("dt",null,Object(b.b)("code",null,"dropdown")),Object(b.b)("dd",null,"Dropdown."),Object(b.b)("dt",null,Object(b.b)("code",null,"combobox")),Object(b.b)("dd",null,"Combobox."),Object(b.b)("dt",null,Object(b.b)("code",null,"slider")),Object(b.b)("dd",null,"Slider."),Object(b.b)("dt",null,Object(b.b)("code",null,"spinbox")),Object(b.b)("dd",null,"Spinbox."),Object(b.b)("dt",null,Object(b.b)("code",null,"date_picker")),Object(b.b)("dd",null,"Date picker."),Object(b.b)("dt",null,Object(b.b)("code",null,"color_picker")),Object(b.b)("dd",null,"Color picker."),Object(b.b)("dt",null,Object(b.b)("code",null,"button")),Object(b.b)("dd",null,"Button."),Object(b.b)("dt",null,Object(b.b)("code",null,"buttons")),Object(b.b)("dd",null,"Button set."),Object(b.b)("dt",null,Object(b.b)("code",null,"file_upload")),Object(b.b)("dd",null,"File upload."),Object(b.b)("dt",null,Object(b.b)("code",null,"table")),Object(b.b)("dd",null,"Table."),Object(b.b)("dt",null,Object(b.b)("code",null,"link")),Object(b.b)("dd",null,"Link."),Object(b.b)("dt",null,Object(b.b)("code",null,"tabs")),Object(b.b)("dd",null,"Tabs."),Object(b.b)("dt",null,Object(b.b)("code",null,"expander")),Object(b.b)("dd",null,"Expander."),Object(b.b)("dt",null,Object(b.b)("code",null,"frame")),Object(b.b)("dd",null,"Frame."),Object(b.b)("dt",null,Object(b.b)("code",null,"markup")),Object(b.b)("dd",null,"Markup"),Object(b.b)("dt",null,Object(b.b)("code",null,"template")),Object(b.b)("dd",null,"Template"),Object(b.b)("dt",null,Object(b.b)("code",null,"picker")),Object(b.b)("dd",null,"Picker."),Object(b.b)("dt",null,Object(b.b)("code",null,"range_slider")),Object(b.b)("dd",null,"Range Slider."),Object(b.b)("dt",null,Object(b.b)("code",null,"stepper")),Object(b.b)("dd",null,"Stepper."),Object(b.b)("dt",null,Object(b.b)("code",null,"visualization")),Object(b.b)("dd",null,"Visualization."),Object(b.b)("dt",null,Object(b.b)("code",null,"vega_visualization")),Object(b.b)("dd",null,"Vega-lite Visualization.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"date_picker"},"date_picker ",Object(b.b)("a",{name:"h2o_wave.ui.date_picker"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"date_picker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a date picker."),Object(b.b)("p",null,"A date picker allows a user to pick a date value."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed alongside the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"placeholder")),Object(b.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The date value in YYYY-MM-DD format."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if this field is disabled."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.DatePicker",href:"types#h2o_wave.types.DatePicker"},"DatePicker"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"dropdown"},"dropdown ",Object(b.b)("a",{name:"h2o_wave.ui.dropdown"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"dropdown"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a dropdown."),Object(b.b)("p",null,"A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible."),Object(b.b)("p",null,"To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value."),Object(b.b)("p",null,"Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed alongside the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"placeholder")),Object(b.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The name of the selected choice."),Object(b.b)("dt",null,Object(b.b)("code",null,"values")),Object(b.b)("dd",null,"The names of the selected choices. If this parameter is set, multiple selections will be allowed."),Object(b.b)("dt",null,Object(b.b)("code",null,"choices")),Object(b.b)("dd",null,"The choices to be presented."),Object(b.b)("dt",null,Object(b.b)("code",null,"required")),Object(b.b)("dd",null,"True if this is a required field."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if this field is disabled."),Object(b.b)("dt",null,Object(b.b)("code",null,"trigger")),Object(b.b)("dd",null,"True if the form should be submitted when the dropdown value changes."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Dropdown",href:"types#h2o_wave.types.Dropdown"},"Dropdown"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"expander"},"expander ",Object(b.b)("a",{name:"h2o_wave.ui.expander"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"expander"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, expanded:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Creates a new expander."),Object(b.b)("p",null,"Expanders can be used to show or hide a group of related components."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The text displayed on the expander."),Object(b.b)("dt",null,Object(b.b)("code",null,"expanded")),Object(b.b)("dd",null,"True if expanded, False if collapsed."),Object(b.b)("dt",null,Object(b.b)("code",null,"items")),Object(b.b)("dd",null,"List of components to be hideable by the expander.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Expander",href:"types#h2o_wave.types.Expander"},"Expander"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"file_upload"},"file_upload ",Object(b.b)("a",{name:"h2o_wave.ui.file_upload"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"file_upload"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, file_extensions:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_file_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a file upload component. A file upload component allows a user to browse, select and upload one or more files."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed alongside the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"multiple")),Object(b.b)("dd",null,"True if the component should allow multiple files to be uploaded."),Object(b.b)("dt",null,Object(b.b)("code",null,"file_extensions")),Object(b.b)("dd",null,"List of allowed file extensions, e.g. ",Object(b.b)("code",null,"pdf"),", ",Object(b.b)("code",null,"docx"),", etc."),Object(b.b)("dt",null,Object(b.b)("code",null,"max_file_size")),Object(b.b)("dd",null,"Maximum allowed size (Mb) per file. Defaults to no limit."),Object(b.b)("dt",null,Object(b.b)("code",null,"max_size")),Object(b.b)("dd",null,"Maximum allowed size (Mb) for all files combined. Defaults to no limit."),Object(b.b)("dt",null,Object(b.b)("code",null,"height")),Object(b.b)("dd",null,"The height of the file upload, e.g. '400px', '50%', etc."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.FileUpload",href:"types#h2o_wave.types.FileUpload"},"FileUpload"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"flex_card"},"flex_card ",Object(b.b)("a",{name:"h2o_wave.ui.flex_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"flex_card"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], direction:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, wrap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.FlexCard",href:"types#h2o_wave.types.FlexCard"},"FlexCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"item_view")),Object(b.b)("dd",null,"The child card type."),Object(b.b)("dt",null,Object(b.b)("code",null,"item_props")),Object(b.b)("dd",null,"The child card properties."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"direction")),Object(b.b)("dd",null,"Layout direction. One of 'horizontal', 'vertical'."),Object(b.b)("dt",null,Object(b.b)("code",null,"justify")),Object(b.b)("dd",null,"Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'."),Object(b.b)("dt",null,Object(b.b)("code",null,"align")),Object(b.b)("dd",null,"Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'."),Object(b.b)("dt",null,Object(b.b)("code",null,"wrap")),Object(b.b)("dd",null,"Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.FlexCard",href:"types#h2o_wave.types.FlexCard"},"FlexCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"form_card"},"form_card ",Object(b.b)("a",{name:"h2o_wave.ui.form_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"form_card"),"(box:\xa0str, items:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"),"],\xa0str], commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.FormCard",href:"types#h2o_wave.types.FormCard"},"FormCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a form."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"items")),Object(b.b)("dd",null,"The components in this form."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.FormCard",href:"types#h2o_wave.types.FormCard"},"FormCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"frame"},"frame ",Object(b.b)("a",{name:"h2o_wave.ui.frame"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"frame"),"(path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a new inline frame (an ",Object(b.b)("code",null,"iframe"),")."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"path")),Object(b.b)("dd",null,"The path or URL of the web page, e.g. ",Object(b.b)("code",null,"/foo.html")," or ",Object(b.b)("code",null,"http://example.com/foo.html")),Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The HTML content of the page. A string containing ",Object(b.b)("code",null,"..."),"."),Object(b.b)("dt",null,Object(b.b)("code",null,"width")),Object(b.b)("dd",null,"The width of the frame, e.g. ",Object(b.b)("code",null,"200px"),", ",Object(b.b)("code",null,"50%"),", etc. Defaults to ",Object(b.b)("code",null,"100%"),"."),Object(b.b)("dt",null,Object(b.b)("code",null,"height")),Object(b.b)("dd",null,"The height of the frame, e.g. ",Object(b.b)("code",null,"200px"),", ",Object(b.b)("code",null,"50%"),", etc. Defaults to ",Object(b.b)("code",null,"150px"),".")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Frame",href:"types#h2o_wave.types.Frame"},"Frame"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"frame_card"},"frame_card ",Object(b.b)("a",{name:"h2o_wave.ui.frame_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"frame_card"),"(box:\xa0str, title:\xa0str, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.FrameCard",href:"types#h2o_wave.types.FrameCard"},"FrameCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Render a card containing a HTML page inside an inline frame (an ",Object(b.b)("code",null,"iframe"),")."),Object(b.b)("p",null,"Either a path or content can be provided as arguments."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The title for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"path")),Object(b.b)("dd",null,"The path or URL of the web page, e.g. ",Object(b.b)("code",null,"/foo.html")," or ",Object(b.b)("code",null,"http://example.com/foo.html")),Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The HTML content of the page. A string containing ",Object(b.b)("code",null,"...")),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.FrameCard",href:"types#h2o_wave.types.FrameCard"},"FrameCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"graphics_card"},"graphics_card ",Object(b.b)("a",{name:"h2o_wave.ui.graphics_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"graphics_card"),"(box:\xa0str, view_box:\xa0str, stage:\xa0Union[List[dict],\xa0str,\xa0NoneType]\xa0=\xa0None, scene:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a card for displaying vector graphics."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"view_box")),Object(b.b)("dd",null,"The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: ",Object(b.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox")),Object(b.b)("dt",null,Object(b.b)("code",null,"stage")),Object(b.b)("dd",null,"Background layer for rendering static SVG elements. Must be packed to conserve memory."),Object(b.b)("dt",null,Object(b.b)("code",null,"scene")),Object(b.b)("dd",null,"Foreground layer for rendering dynamic SVG elements."),Object(b.b)("dt",null,Object(b.b)("code",null,"width")),Object(b.b)("dd",null,"The displayed width of the rectangular viewport. (Not the width of its coordinate system.)"),Object(b.b)("dt",null,Object(b.b)("code",null,"height")),Object(b.b)("dd",null,"The displayed height of the rectangular viewport. (Not the height of its coordinate system.)"),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"grid_card"},"grid_card ",Object(b.b)("a",{name:"h2o_wave.ui.grid_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"grid_card"),"(box:\xa0str, title:\xa0str, cells:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], data:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.GridCard",href:"types#h2o_wave.types.GridCard"},"GridCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"EXPERIMENTAL. DO NOT USE."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(b.b)("dt",null,Object(b.b)("code",null,"cells")),Object(b.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.GridCard",href:"types#h2o_wave.types.GridCard"},"GridCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"header_card"},"header_card ",Object(b.b)("a",{name:"h2o_wave.ui.header_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"header_card"),"(box:\xa0str, title:\xa0str, subtitle:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.HeaderCard",href:"types#h2o_wave.types.HeaderCard"},"HeaderCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Render a card containing a HTML page inside an inline frame (iframe)."),Object(b.b)("p",null,"Either a path or content can be provided as arguments."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The title."),Object(b.b)("dt",null,Object(b.b)("code",null,"subtitle")),Object(b.b)("dd",null,"The subtitle, displayed below the title."),Object(b.b)("dt",null,Object(b.b)("code",null,"icon")),Object(b.b)("dd",null,"The icon type, displayed to the left."),Object(b.b)("dt",null,Object(b.b)("code",null,"icon_color")),Object(b.b)("dd",null,"The icon's color."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.HeaderCard",href:"types#h2o_wave.types.HeaderCard"},"HeaderCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"icon_table_cell_type"},"icon_table_cell_type ",Object(b.b)("a",{name:"h2o_wave.ui.icon_table_cell_type"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"icon_table_cell_type"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"color")),Object(b.b)("dd",null,"Icon color.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"types#h2o_wave.types.IconTableCellType"},"IconTableCellType"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"image_card"},"image_card ",Object(b.b)("a",{name:"h2o_wave.ui.image_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"image_card"),"(box:\xa0str, title:\xa0str, type:\xa0str, image:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.ImageCard",href:"types#h2o_wave.types.ImageCard"},"ImageCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a card that displays a base64-encoded image."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The card's title."),Object(b.b)("dt",null,Object(b.b)("code",null,"type")),Object(b.b)("dd",null,"The image MIME subtype. One of ",Object(b.b)("code",null,"apng"),", ",Object(b.b)("code",null,"bmp"),", ",Object(b.b)("code",null,"gif"),", ",Object(b.b)("code",null,"x-icon"),", ",Object(b.b)("code",null,"jpeg"),", ",Object(b.b)("code",null,"png"),", ",Object(b.b)("code",null,"webp"),"."),Object(b.b)("dt",null,Object(b.b)("code",null,"image")),Object(b.b)("dd",null,"Image data, base64-encoded."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.ImageCard",href:"types#h2o_wave.types.ImageCard"},"ImageCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"label"},"label ",Object(b.b)("a",{name:"h2o_wave.ui.label"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"label"),"(label:\xa0str, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a label."),Object(b.b)("p",null,"Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component\u2019s purpose."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The text displayed on the label."),Object(b.b)("dt",null,Object(b.b)("code",null,"required")),Object(b.b)("dd",null,"True if the field is required."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if the label should be disabled."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Label",href:"types#h2o_wave.types.Label"},"Label"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"large_bar_stat_card"},"large_bar_stat_card ",Object(b.b)("a",{name:"h2o_wave.ui.large_bar_stat_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"large_bar_stat_card"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, value_caption:\xa0str, aux_value_caption:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.LargeBarStatCard",href:"types#h2o_wave.types.LargeBarStatCard"},"LargeBarStatCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The card's title."),Object(b.b)("dt",null,Object(b.b)("code",null,"caption")),Object(b.b)("dd",null,"The card's caption."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The primary value displayed."),Object(b.b)("dt",null,Object(b.b)("code",null,"aux_value")),Object(b.b)("dd",null,"The auxiliary value, typically a target value."),Object(b.b)("dt",null,Object(b.b)("code",null,"value_caption")),Object(b.b)("dd",null,"The caption displayed below the primary value."),Object(b.b)("dt",null,Object(b.b)("code",null,"aux_value_caption")),Object(b.b)("dd",null,"The caption displayed below the auxiliary value."),Object(b.b)("dt",null,Object(b.b)("code",null,"progress")),Object(b.b)("dd",null,"The value of the progress bar, between 0 and 1."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_color")),Object(b.b)("dd",null,"The color of the progress bar."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.LargeBarStatCard",href:"types#h2o_wave.types.LargeBarStatCard"},"LargeBarStatCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"large_stat_card"},"large_stat_card ",Object(b.b)("a",{name:"h2o_wave.ui.large_stat_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"large_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, caption:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.LargeStatCard",href:"types#h2o_wave.types.LargeStatCard"},"LargeStatCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a stat card displaying a primary value, an auxiliary value and a caption."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The card's title."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The primary value displayed."),Object(b.b)("dt",null,Object(b.b)("code",null,"aux_value")),Object(b.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(b.b)("dt",null,Object(b.b)("code",null,"caption")),Object(b.b)("dd",null,"The caption displayed below the primary value."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.LargeStatCard",href:"types#h2o_wave.types.LargeStatCard"},"LargeStatCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"link"},"link ",Object(b.b)("a",{name:"h2o_wave.ui.link"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"link"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, download:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, button:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a hyperlink."),Object(b.b)("p",null,"Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a ",Object(b.b)("code",null,"/")," and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The text to be displayed. If blank, the ",Object(b.b)("code",null,"path")," is used as the label."),Object(b.b)("dt",null,Object(b.b)("code",null,"path")),Object(b.b)("dd",null,"The path or URL to link to."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if the link should be disabled."),Object(b.b)("dt",null,Object(b.b)("code",null,"download")),Object(b.b)("dd",null,"True if the link should be used for file download."),Object(b.b)("dt",null,Object(b.b)("code",null,"button")),Object(b.b)("dd",null,"True if the link should be rendered as a button."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Link",href:"types#h2o_wave.types.Link"},"Link"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"list_card"},"list_card ",Object(b.b)("a",{name:"h2o_wave.ui.list_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"list_card"),"(box:\xa0str, title:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.ListCard",href:"types#h2o_wave.types.ListCard"},"ListCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom)."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The title for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"item_view")),Object(b.b)("dd",null,"The child card type."),Object(b.b)("dt",null,Object(b.b)("code",null,"item_props")),Object(b.b)("dd",null,"The child card properties."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.ListCard",href:"types#h2o_wave.types.ListCard"},"ListCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"list_item1_card"},"list_item1_card ",Object(b.b)("a",{name:"h2o_wave.ui.list_item1_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"list_item1_card"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.ListItem1Card",href:"types#h2o_wave.types.ListItem1Card"},"ListItem1Card")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"EXPERIMENTAL. DO NOT USE."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(b.b)("dt",null,Object(b.b)("code",null,"caption")),Object(b.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(b.b)("dt",null,Object(b.b)("code",null,"aux_value")),Object(b.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.ListItem1Card",href:"types#h2o_wave.types.ListItem1Card"},"ListItem1Card"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"mark"},"mark ",Object(b.b)("a",{name:"h2o_wave.ui.mark"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"mark"),"(coord:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, x_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, y_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_domain:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, shape:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, shape_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, size:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, size_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stack:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, dodge:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_offset:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_x:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_y:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_rotation:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_position:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_overlap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_weight:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_line_height:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Mark",href:"types#h2o_wave.types.Mark"},"Mark")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"coord")),Object(b.b)("dd",null,"Coordinate system. ",Object(b.b)("code",null,"rect")," is synonymous to ",Object(b.b)("code",null,"cartesian"),". ",Object(b.b)("code",null,"theta")," is transposed ",Object(b.b)("code",null,"polar"),". One of 'rect', 'cartesian', 'polar', 'theta', 'helix'."),Object(b.b)("dt",null,Object(b.b)("code",null,"type")),Object(b.b)("dd",null,"Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'."),Object(b.b)("dt",null,Object(b.b)("code",null,"x")),Object(b.b)("dd",null,"X field or value."),Object(b.b)("dt",null,Object(b.b)("code",null,"x0")),Object(b.b)("dd",null,"X base field or value."),Object(b.b)("dt",null,Object(b.b)("code",null,"x1")),Object(b.b)("dd",null,"X bin lower bound field or value. For histograms."),Object(b.b)("dt",null,Object(b.b)("code",null,"x2")),Object(b.b)("dd",null,"X bin upper bound field or value. For histograms."),Object(b.b)("dt",null,Object(b.b)("code",null,"x_min")),Object(b.b)("dd",null,"X axis scale minimum."),Object(b.b)("dt",null,Object(b.b)("code",null,"x_max")),Object(b.b)("dd",null,"X axis scale maximum."),Object(b.b)("dt",null,Object(b.b)("code",null,"x_nice")),Object(b.b)("dd",null,"Whether to nice X axis scale ticks."),Object(b.b)("dt",null,Object(b.b)("code",null,"x_scale")),Object(b.b)("dd",null,"X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'."),Object(b.b)("dt",null,Object(b.b)("code",null,"x_title")),Object(b.b)("dd",null,"X axis title."),Object(b.b)("dt",null,Object(b.b)("code",null,"y")),Object(b.b)("dd",null,"Y field or value."),Object(b.b)("dt",null,Object(b.b)("code",null,"y0")),Object(b.b)("dd",null,"Y base field or value."),Object(b.b)("dt",null,Object(b.b)("code",null,"y1")),Object(b.b)("dd",null,"Y bin lower bound field or value. For histograms."),Object(b.b)("dt",null,Object(b.b)("code",null,"y2")),Object(b.b)("dd",null,"Y bin upper bound field or value. For histograms."),Object(b.b)("dt",null,Object(b.b)("code",null,"y_min")),Object(b.b)("dd",null,"Y axis scale minimum."),Object(b.b)("dt",null,Object(b.b)("code",null,"y_max")),Object(b.b)("dd",null,"Y axis scale maximum."),Object(b.b)("dt",null,Object(b.b)("code",null,"y_nice")),Object(b.b)("dd",null,"Whether to nice Y axis scale ticks."),Object(b.b)("dt",null,Object(b.b)("code",null,"y_scale")),Object(b.b)("dd",null,"Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'."),Object(b.b)("dt",null,Object(b.b)("code",null,"y_title")),Object(b.b)("dd",null,"Y axis title."),Object(b.b)("dt",null,Object(b.b)("code",null,"color")),Object(b.b)("dd",null,"Mark color field or value."),Object(b.b)("dt",null,Object(b.b)("code",null,"color_range")),Object(b.b)("dd",null,"Mark color range for multi-series plots. A string containing space-separated colors, e.g. ",Object(b.b)("code",null,"'#fee8c8 #fdbb84 #e34a33'")),Object(b.b)("dt",null,Object(b.b)("code",null,"color_domain")),Object(b.b)("dd",null,"The unique values in the data (labels or categories or classes) to map colors to, e.g. ",Object(b.b)("code",null,"['high', 'medium', 'low']"),". If this is not provided, the unique values are automatically inferred from the ",Object(b.b)("code",null,"color")," attribute."),Object(b.b)("dt",null,Object(b.b)("code",null,"shape")),Object(b.b)("dd",null,"Mark shape field or value for ",Object(b.b)("code",null,"point")," mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'."),Object(b.b)("dt",null,Object(b.b)("code",null,"shape_range")),Object(b.b)("dd",null,"Mark shape range for multi-series plots using ",Object(b.b)("code",null,"point")," mark types. A string containing space-separated shapes, e.g. ",Object(b.b)("code",null,"'circle square diamond'")),Object(b.b)("dt",null,Object(b.b)("code",null,"size")),Object(b.b)("dd",null,"Mark size field or value."),Object(b.b)("dt",null,Object(b.b)("code",null,"size_range")),Object(b.b)("dd",null,"Mark size range. A string containing space-separated integers, e.g. ",Object(b.b)("code",null,"'4 30'")),Object(b.b)("dt",null,Object(b.b)("code",null,"stack")),Object(b.b)("dd",null,"Field to stack marks by, or 'auto' to infer."),Object(b.b)("dt",null,Object(b.b)("code",null,"dodge")),Object(b.b)("dd",null,"Field to dodge marks by, or 'auto' to infer."),Object(b.b)("dt",null,Object(b.b)("code",null,"curve")),Object(b.b)("dd",null,"Curve type for ",Object(b.b)("code",null,"line")," and ",Object(b.b)("code",null,"area")," mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'."),Object(b.b)("dt",null,Object(b.b)("code",null,"fill_color")),Object(b.b)("dd",null,"Mark fill color."),Object(b.b)("dt",null,Object(b.b)("code",null,"fill_opacity")),Object(b.b)("dd",null,"Mark fill opacity."),Object(b.b)("dt",null,Object(b.b)("code",null,"stroke_color")),Object(b.b)("dd",null,"Mark stroke color."),Object(b.b)("dt",null,Object(b.b)("code",null,"stroke_opacity")),Object(b.b)("dd",null,"Mark stroke opacity."),Object(b.b)("dt",null,Object(b.b)("code",null,"stroke_size")),Object(b.b)("dd",null,"Mark stroke size."),Object(b.b)("dt",null,Object(b.b)("code",null,"stroke_dash")),Object(b.b)("dd",null,"Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25]."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Label field or value."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_offset")),Object(b.b)("dd",null,"Distance between label and mark."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_offset_x")),Object(b.b)("dd",null,"Horizontal distance between label and mark."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_offset_y")),Object(b.b)("dd",null,"Vertical distance between label and mark."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_rotation")),Object(b.b)("dd",null,"Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_position")),Object(b.b)("dd",null,"Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_overlap")),Object(b.b)("dd",null,"Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_fill_color")),Object(b.b)("dd",null,"Label fill color."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_fill_opacity")),Object(b.b)("dd",null,"Label fill opacity."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_stroke_color")),Object(b.b)("dd",null,"Label stroke color."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_stroke_opacity")),Object(b.b)("dd",null,"Label stroke opacity."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_stroke_size")),Object(b.b)("dd",null,"Label stroke size (line width or pen thickness)."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_font_size")),Object(b.b)("dd",null,"Label font size."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_font_weight")),Object(b.b)("dd",null,"Label font weight."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_line_height")),Object(b.b)("dd",null,"Label line height."),Object(b.b)("dt",null,Object(b.b)("code",null,"label_align")),Object(b.b)("dd",null,"Label text alignment. One of 'left', 'right', 'center', 'start', 'end'."),Object(b.b)("dt",null,Object(b.b)("code",null,"ref_stroke_color")),Object(b.b)("dd",null,"Reference line stroke color."),Object(b.b)("dt",null,Object(b.b)("code",null,"ref_stroke_opacity")),Object(b.b)("dd",null,"Reference line stroke opacity."),Object(b.b)("dt",null,Object(b.b)("code",null,"ref_stroke_size")),Object(b.b)("dd",null,"Reference line stroke size (line width or pen thickness)."),Object(b.b)("dt",null,Object(b.b)("code",null,"ref_stroke_dash")),Object(b.b)("dd",null,"Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Mark",href:"types#h2o_wave.types.Mark"},"Mark"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"markdown_card"},"markdown_card ",Object(b.b)("a",{name:"h2o_wave.ui.markdown_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"markdown_card"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.MarkdownCard",href:"types#h2o_wave.types.MarkdownCard"},"MarkdownCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a card that renders Markdown content."),Object(b.b)("p",null,"Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The title for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The markdown content. Supports Github Flavored Markdown (GFM): ",Object(b.b)("a",{href:"https://guides.github.com/features/mastering-markdown/"},"https://guides.github.com/features/mastering-markdown/")),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Additional data for the card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.MarkdownCard",href:"types#h2o_wave.types.MarkdownCard"},"MarkdownCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"markup"},"markup ",Object(b.b)("a",{name:"h2o_wave.ui.markup"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"markup"),"(content:\xa0str) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Render HTML content."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The HTML content.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Markup",href:"types#h2o_wave.types.Markup"},"Markup"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"markup_card"},"markup_card ",Object(b.b)("a",{name:"h2o_wave.ui.markup_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"markup_card"),"(box:\xa0str, title:\xa0str, content:\xa0str, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.MarkupCard",href:"types#h2o_wave.types.MarkupCard"},"MarkupCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Render HTML content."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The title for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The HTML content."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.MarkupCard",href:"types#h2o_wave.types.MarkupCard"},"MarkupCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"message_bar"},"message_bar ",Object(b.b)("a",{name:"h2o_wave.ui.message_bar"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"message_bar"),"(type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, text:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a message bar."),Object(b.b)("p",null,"A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"type")),Object(b.b)("dd",null,"The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'."),Object(b.b)("dt",null,Object(b.b)("code",null,"text")),Object(b.b)("dd",null,"The text displayed on the message bar.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.MessageBar",href:"types#h2o_wave.types.MessageBar"},"MessageBar"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"meta_card"},"meta_card ",Object(b.b)("a",{name:"h2o_wave.ui.meta_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"meta_card"),"(box:\xa0str, title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, refresh:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, notification:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, redirect:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.MetaCard",href:"types#h2o_wave.types.MetaCard"},"MetaCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Represents page-global state."),Object(b.b)("p",null,"This card is invisible. It is used to control attributes of the active page."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The title of the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"refresh")),Object(b.b)("dd",null,"Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use)."),Object(b.b)("dt",null,Object(b.b)("code",null,"notification")),Object(b.b)("dd",null,"Display a desktop notification to the user."),Object(b.b)("dt",null,Object(b.b)("code",null,"redirect")),Object(b.b)("dd",null,"Redirect the page to a new URL."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.MetaCard",href:"types#h2o_wave.types.MetaCard"},"MetaCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"nav_card"},"nav_card ",Object(b.b)("a",{name:"h2o_wave.ui.nav_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"nav_card"),"(box:\xa0str, items:\xa0List[",Object(b.b)("a",{title:"h2o_wave.types.NavGroup",href:"types#h2o_wave.types.NavGroup"},"NavGroup"),"], commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.NavCard",href:"types#h2o_wave.types.NavCard"},"NavCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a card containing a navigation pane."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"items")),Object(b.b)("dd",null,"The navigation groups contained in this pane."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.NavCard",href:"types#h2o_wave.types.NavCard"},"NavCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"nav_group"},"nav_group ",Object(b.b)("a",{name:"h2o_wave.ui.nav_group"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"nav_group"),"(label:\xa0str, items:\xa0List[",Object(b.b)("a",{title:"h2o_wave.types.NavItem",href:"types#h2o_wave.types.NavItem"},"NavItem"),"]) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.NavGroup",href:"types#h2o_wave.types.NavGroup"},"NavGroup")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a group of navigation items."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The label to display for this group."),Object(b.b)("dt",null,Object(b.b)("code",null,"items")),Object(b.b)("dd",null,"The navigation items contained in this group.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.NavGroup",href:"types#h2o_wave.types.NavGroup"},"NavGroup"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"nav_item"},"nav_item ",Object(b.b)("a",{name:"h2o_wave.ui.nav_item"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"nav_item"),"(name:\xa0str, label:\xa0str) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.NavItem",href:"types#h2o_wave.types.NavItem"},"NavItem")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a navigation item."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The label to display.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.NavItem",href:"types#h2o_wave.types.NavItem"},"NavItem"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"picker"},"picker ",Object(b.b)("a",{name:"h2o_wave.ui.picker"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"picker"),"(name:\xa0str, choices:\xa0List[",Object(b.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"], label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_choices:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"choices")),Object(b.b)("dd",null,"The choices to be presented."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed above the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"values")),Object(b.b)("dd",null,"The names of the selected choices."),Object(b.b)("dt",null,Object(b.b)("code",null,"max_choices")),Object(b.b)("dd",null,"Maximum number of selectable choices. Defaults to no limit."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"Controls whether the picker should be disabled or not."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Picker",href:"types#h2o_wave.types.Picker"},"Picker"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"pixel_art_card"},"pixel_art_card ",Object(b.b)("a",{name:"h2o_wave.ui.pixel_art_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"pixel_art_card"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.PixelArtCard",href:"types#h2o_wave.types.PixelArtCard"},"PixelArtCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a card displaying a collaborative Pixel art tool, just for kicks."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The title for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"The data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.PixelArtCard",href:"types#h2o_wave.types.PixelArtCard"},"PixelArtCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"plot"},"plot ",Object(b.b)("a",{name:"h2o_wave.ui.plot"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"plot"),"(marks:\xa0List[",Object(b.b)("a",{title:"h2o_wave.types.Mark",href:"types#h2o_wave.types.Mark"},"Mark"),"]) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a plot. A plot is composed of one or more graphical mark layers."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"marks")),Object(b.b)("dd",null,"The graphical mark layers contained in this plot.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"plot_card"},"plot_card ",Object(b.b)("a",{name:"h2o_wave.ui.plot_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"plot_card"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], plot:\xa0",Object(b.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot"),", commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.PlotCard",href:"types#h2o_wave.types.PlotCard"},"PlotCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a card displaying a plot."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The title for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot")),Object(b.b)("dd",null,"The plot to be displayed in this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.PlotCard",href:"types#h2o_wave.types.PlotCard"},"PlotCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"progress"},"progress ",Object(b.b)("a",{name:"h2o_wave.ui.progress"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"progress"),"(label:\xa0str, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a progress bar."),Object(b.b)("p",null,"Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing."),Object(b.b)("p",null,"Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]"),Object(b.b)("p",null,"Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid \u201crewinding\u201d the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The text displayed above the bar."),Object(b.b)("dt",null,Object(b.b)("code",null,"caption")),Object(b.b)("dd",null,"The text displayed below the bar."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The progress, between 0.0 and 1.0, or -1 (default) if indeterminate."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Progress",href:"types#h2o_wave.types.Progress"},"Progress"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"progress_table_cell_type"},"progress_table_cell_type ",Object(b.b)("a",{name:"h2o_wave.ui.progress_table_cell_type"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"progress_table_cell_type"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"color")),Object(b.b)("dd",null,"Color of the progress arc.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"types#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"range_slider"},"range_slider ",Object(b.b)("a",{name:"h2o_wave.ui.range_slider"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"range_slider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, min_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a range slider."),Object(b.b)("p",null,"A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed alongside the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"min")),Object(b.b)("dd",null,"The minimum value of the slider. Defaults to 0."),Object(b.b)("dt",null,Object(b.b)("code",null,"max")),Object(b.b)("dd",null,"The maximum value of the slider. Defaults to 100."),Object(b.b)("dt",null,Object(b.b)("code",null,"step")),Object(b.b)("dd",null,"The difference between two adjacent values of the slider."),Object(b.b)("dt",null,Object(b.b)("code",null,"min_value")),Object(b.b)("dd",null,"The lower bound of the selected range."),Object(b.b)("dt",null,Object(b.b)("code",null,"max_value")),Object(b.b)("dd",null,"The upper bound of the selected range."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if this field is disabled."),Object(b.b)("dt",null,Object(b.b)("code",null,"trigger")),Object(b.b)("dd",null,"True if the form should be submitted when the slider value changes."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.RangeSlider",href:"types#h2o_wave.types.RangeSlider"},"RangeSlider"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"repeat_card"},"repeat_card ",Object(b.b)("a",{name:"h2o_wave.ui.repeat_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"repeat_card"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.RepeatCard",href:"types#h2o_wave.types.RepeatCard"},"RepeatCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"item_view")),Object(b.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(b.b)("dt",null,Object(b.b)("code",null,"item_props")),Object(b.b)("dd",null,"The child card properties."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.RepeatCard",href:"types#h2o_wave.types.RepeatCard"},"RepeatCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"separator"},"separator ",Object(b.b)("a",{name:"h2o_wave.ui.separator"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"separator"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a separator."),Object(b.b)("p",null,"A separator visually separates content into groups."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The text displayed on the separator.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Separator",href:"types#h2o_wave.types.Separator"},"Separator"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"slider"},"slider ",Object(b.b)("a",{name:"h2o_wave.ui.slider"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"slider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a slider."),Object(b.b)("p",null,"A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value."),Object(b.b)("p",null,"A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium \u2014 not about setting the value to two or five."),Object(b.b)("p",null,"The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed alongside the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"min")),Object(b.b)("dd",null,"The minimum value of the slider."),Object(b.b)("dt",null,Object(b.b)("code",null,"max")),Object(b.b)("dd",null,"The maximum value of the slider."),Object(b.b)("dt",null,Object(b.b)("code",null,"step")),Object(b.b)("dd",null,"The difference between two adjacent values of the slider."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The current value of the slider."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if this field is disabled."),Object(b.b)("dt",null,Object(b.b)("code",null,"trigger")),Object(b.b)("dd",null,"True if the form should be submitted when the slider value changes."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Slider",href:"types#h2o_wave.types.Slider"},"Slider"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"small_series_stat_card"},"small_series_stat_card ",Object(b.b)("a",{name:"h2o_wave.ui.small_series_stat_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"small_series_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, plot_data:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.SmallSeriesStatCard",href:"types#h2o_wave.types.SmallSeriesStatCard"},"SmallSeriesStatCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a small stat card displaying a primary value and a series plot."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The card's title."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The primary value displayed."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_data")),Object(b.b)("dd",null,"The plot's data."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_value")),Object(b.b)("dd",null,"The data field to use for y-axis values."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_zero_value")),Object(b.b)("dd",null,"The base value to use for each y-axis mark. Set this to ",Object(b.b)("code",null,"0")," if you want to pin the x-axis at ",Object(b.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_category")),Object(b.b)("dd",null,"The data field to use for x-axis values (ignored if ",Object(b.b)("code",null,"plot_type")," is ",Object(b.b)("code",null,"area"),"; must be provided if ",Object(b.b)("code",null,"plot_type")," is ",Object(b.b)("code",null,"interval"),"). Defaults to 'x'."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_type")),Object(b.b)("dd",null,"The type of plot. Defaults to ",Object(b.b)("code",null,"area"),". One of 'area', 'interval'."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_curve")),Object(b.b)("dd",null,"The plot's curve style. Defaults to ",Object(b.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_color")),Object(b.b)("dd",null,"The plot's color."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.SmallSeriesStatCard",href:"types#h2o_wave.types.SmallSeriesStatCard"},"SmallSeriesStatCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"small_stat_card"},"small_stat_card ",Object(b.b)("a",{name:"h2o_wave.ui.small_stat_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"small_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.SmallStatCard",href:"types#h2o_wave.types.SmallStatCard"},"SmallStatCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a stat card displaying a single value."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The card's title."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The primary value displayed."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.SmallStatCard",href:"types#h2o_wave.types.SmallStatCard"},"SmallStatCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"spinbox"},"spinbox ",Object(b.b)("a",{name:"h2o_wave.ui.spinbox"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"spinbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a spinbox."),Object(b.b)("p",null,"A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed alongside the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"min")),Object(b.b)("dd",null,"The minimum value of the spinbox."),Object(b.b)("dt",null,Object(b.b)("code",null,"max")),Object(b.b)("dd",null,"The maximum value of the spinbox."),Object(b.b)("dt",null,Object(b.b)("code",null,"step")),Object(b.b)("dd",null,"The difference between two adjacent values of the spinbox."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The current value of the spinbox."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if this field is disabled."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Spinbox",href:"types#h2o_wave.types.Spinbox"},"Spinbox"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"step"},"step ",Object(b.b)("a",{name:"h2o_wave.ui.step"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"step"),"(label:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, done:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Step",href:"types#h2o_wave.types.Step"},"Step")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a step for a stepper."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text displayed below icon."),Object(b.b)("dt",null,Object(b.b)("code",null,"icon")),Object(b.b)("dd",null,"Icon to be displayed."),Object(b.b)("dt",null,Object(b.b)("code",null,"done")),Object(b.b)("dd",null,"Indicates whether this step has already been completed.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Step",href:"types#h2o_wave.types.Step"},"Step"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"stepper"},"stepper ",Object(b.b)("a",{name:"h2o_wave.ui.stepper"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"stepper"),"(name:\xa0str, items:\xa0List[",Object(b.b)("a",{title:"h2o_wave.types.Step",href:"types#h2o_wave.types.Step"},"Step"),"], tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"items")),Object(b.b)("dd",null,"The sequence of steps to be displayed."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Stepper",href:"types#h2o_wave.types.Stepper"},"Stepper"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"tab"},"tab ",Object(b.b)("a",{name:"h2o_wave.ui.tab"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"tab"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a tab."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The text displayed on the tab."),Object(b.b)("dt",null,Object(b.b)("code",null,"icon")),Object(b.b)("dd",null,"The icon displayed on the tab.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"tab_card"},"tab_card ",Object(b.b)("a",{name:"h2o_wave.ui.tab_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"tab_card"),"(box:\xa0str, items:\xa0List[",Object(b.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab"),"], value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.TabCard",href:"types#h2o_wave.types.TabCard"},"TabCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a card containing tabs for navigation."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"items")),Object(b.b)("dd",null,"Items to render."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The name of the tab to select."),Object(b.b)("dt",null,Object(b.b)("code",null,"link")),Object(b.b)("dd",null,"True if tabs should be rendered as links and not a standard tab."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.TabCard",href:"types#h2o_wave.types.TabCard"},"TabCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"table"},"table ",Object(b.b)("a",{name:"h2o_wave.ui.table"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"table"),"(name:\xa0str, columns:\xa0List[",Object(b.b)("a",{title:"h2o_wave.types.TableColumn",href:"types#h2o_wave.types.TableColumn"},"TableColumn"),"], rows:\xa0List[",Object(b.b)("a",{title:"h2o_wave.types.TableRow",href:"types#h2o_wave.types.TableRow"},"TableRow"),"], multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, groupable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, downloadable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, resettable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create an interactive table."),Object(b.b)("p",null,"This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table."),Object(b.b)("p",null,"If ",Object(b.b)("code",null,"multiple")," is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and ",Object(b.b)("code",null,"q.args.table_name")," is set to ",Object(b.b)("code",null,"[row_name]"),", where ",Object(b.b)("code",null,"table_name")," is the ",Object(b.b)("code",null,"name")," of the table, and ",Object(b.b)("code",null,"row_name")," is the ",Object(b.b)("code",null,"name")," of the row that was clicked on."),Object(b.b)("p",null,"If ",Object(b.b)("code",null,"multiple")," is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,",Object(b.b)("code",null,"q.args.table_name")," is set to ",Object(b.b)("code",null,"[row1_name, row2_name, \u2026]")," where ",Object(b.b)("code",null,"table_name")," is the ",Object(b.b)("code",null,"name")," of the table, and ",Object(b.b)("code",null,"row1_name"),", ",Object(b.b)("code",null,"row2_name")," are the ",Object(b.b)("code",null,"name")," of the rows that were selected. Note that if ",Object(b.b)("code",null,"multiple")," is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"columns")),Object(b.b)("dd",null,"The columns in this table."),Object(b.b)("dt",null,Object(b.b)("code",null,"rows")),Object(b.b)("dd",null,"The rows in this table."),Object(b.b)("dt",null,Object(b.b)("code",null,"multiple")),Object(b.b)("dd",null,"True to allow multiple rows to be selected."),Object(b.b)("dt",null,Object(b.b)("code",null,"groupable")),Object(b.b)("dd",null,"True to allow group by feature."),Object(b.b)("dt",null,Object(b.b)("code",null,"downloadable")),Object(b.b)("dd",null,"Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False."),Object(b.b)("dt",null,Object(b.b)("code",null,"resettable")),Object(b.b)("dd",null,"Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False."),Object(b.b)("dt",null,Object(b.b)("code",null,"height")),Object(b.b)("dd",null,"The height of the table, e.g. '400px', '50%', etc."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Table",href:"types#h2o_wave.types.Table"},"Table"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"table_cell_type"},"table_cell_type ",Object(b.b)("a",{name:"h2o_wave.ui.table_cell_type"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"table_cell_type"),"(progress:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"types#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType"),",\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"types#h2o_wave.types.IconTableCellType"},"IconTableCellType"),",\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Defines cell content to be rendered instead of a simple text."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"progress")),Object(b.b)("dd",null,"No documentation available."),Object(b.b)("dt",null,Object(b.b)("code",null,"icon")),Object(b.b)("dd",null,"No documentation available.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"table_column"},"table_column ",Object(b.b)("a",{name:"h2o_wave.ui.table_column"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"table_column"),"(name:\xa0str, label:\xa0str, min_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, max_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, sortable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, searchable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, filterable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, cell_type:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType"),",\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.TableColumn",href:"types#h2o_wave.types.TableColumn"},"TableColumn")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a table column."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this column."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The text displayed on the column header."),Object(b.b)("dt",null,Object(b.b)("code",null,"min_width")),Object(b.b)("dd",null,"The minimum width of this column, e.g. '50px'. Only ",Object(b.b)("code",null,"px")," units are supported at this time."),Object(b.b)("dt",null,Object(b.b)("code",null,"max_width")),Object(b.b)("dd",null,"The maximum width of this column, e.g. '100px'. Only ",Object(b.b)("code",null,"px")," units are supported at this time."),Object(b.b)("dt",null,Object(b.b)("code",null,"sortable")),Object(b.b)("dd",null,"Indicates whether the column is sortable."),Object(b.b)("dt",null,Object(b.b)("code",null,"searchable")),Object(b.b)("dd",null,"Indicates whether the contents of this column can be searched through. Enables a search box for the table if true."),Object(b.b)("dt",null,Object(b.b)("code",null,"filterable")),Object(b.b)("dd",null,"Indicates whether the contents of this column are displayed as filters in a dropdown."),Object(b.b)("dt",null,Object(b.b)("code",null,"link")),Object(b.b)("dd",null,"Indicates whether each cell in this column should be displayed as a clickable link."),Object(b.b)("dt",null,Object(b.b)("code",null,"cell_type")),Object(b.b)("dd",null,"Defines how to render each cell in this column. Defaults to plain text.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.TableColumn",href:"types#h2o_wave.types.TableColumn"},"TableColumn"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"table_row"},"table_row ",Object(b.b)("a",{name:"h2o_wave.ui.table_row"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"table_row"),"(name:\xa0str, cells:\xa0List[str]) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.TableRow",href:"types#h2o_wave.types.TableRow"},"TableRow")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a table row."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this row."),Object(b.b)("dt",null,Object(b.b)("code",null,"cells")),Object(b.b)("dd",null,"The cells in this row (displayed left to right).")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.TableRow",href:"types#h2o_wave.types.TableRow"},"TableRow"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"tabs"},"tabs ",Object(b.b)("a",{name:"h2o_wave.ui.tabs"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"tabs"),"(name:\xa0str, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a tab bar."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The name of the tab to select."),Object(b.b)("dt",null,Object(b.b)("code",null,"items")),Object(b.b)("dd",null,"The tabs in this tab bar.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Tabs",href:"types#h2o_wave.types.Tabs"},"Tabs"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"tall_gauge_stat_card"},"tall_gauge_stat_card ",Object(b.b)("a",{name:"h2o_wave.ui.tall_gauge_stat_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"tall_gauge_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.TallGaugeStatCard",href:"types#h2o_wave.types.TallGaugeStatCard"},"TallGaugeStatCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The card's title."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The primary value displayed."),Object(b.b)("dt",null,Object(b.b)("code",null,"aux_value")),Object(b.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(b.b)("dt",null,Object(b.b)("code",null,"progress")),Object(b.b)("dd",null,"The value of the progress gauge, between 0 and 1."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_color")),Object(b.b)("dd",null,"The color of the progress gauge."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.TallGaugeStatCard",href:"types#h2o_wave.types.TallGaugeStatCard"},"TallGaugeStatCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"tall_series_stat_card"},"tall_series_stat_card ",Object(b.b)("a",{name:"h2o_wave.ui.tall_series_stat_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"tall_series_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.TallSeriesStatCard",href:"types#h2o_wave.types.TallSeriesStatCard"},"TallSeriesStatCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a series plot."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The card's title."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The primary value displayed."),Object(b.b)("dt",null,Object(b.b)("code",null,"aux_value")),Object(b.b)("dd",null,"The auxiliary value displayed below the primary value."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_data")),Object(b.b)("dd",null,"The plot's data."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_value")),Object(b.b)("dd",null,"The data field to use for y-axis values."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_zero_value")),Object(b.b)("dd",null,"The base value to use for each y-axis mark. Set this to ",Object(b.b)("code",null,"0")," if you want to pin the x-axis at ",Object(b.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_category")),Object(b.b)("dd",null,"The data field to use for x-axis values (ignored if ",Object(b.b)("code",null,"plot_type")," is ",Object(b.b)("code",null,"area"),"; must be provided if ",Object(b.b)("code",null,"plot_type")," is ",Object(b.b)("code",null,"interval"),"). Defaults to 'x'."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_type")),Object(b.b)("dd",null,"The type of plot. Defaults to ",Object(b.b)("code",null,"area"),". One of 'area', 'interval'."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_curve")),Object(b.b)("dd",null,"The plot's curve style. Defaults to ",Object(b.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_color")),Object(b.b)("dd",null,"The plot's color."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.TallSeriesStatCard",href:"types#h2o_wave.types.TallSeriesStatCard"},"TallSeriesStatCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"template"},"template ",Object(b.b)("a",{name:"h2o_wave.ui.template"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"template"),"(content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Render dynamic content using a HTML template."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The Handlebars template. ",Object(b.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/")),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for the Handlebars template")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Template",href:"types#h2o_wave.types.Template"},"Template"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"template_card"},"template_card ",Object(b.b)("a",{name:"h2o_wave.ui.template_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"template_card"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.TemplateCard",href:"types#h2o_wave.types.TemplateCard"},"TemplateCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Render dynamic content using a HTML template."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The title for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The Handlebars template. ",Object(b.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/")),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for the Handlebars template"),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.TemplateCard",href:"types#h2o_wave.types.TemplateCard"},"TemplateCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"text"},"text ",Object(b.b)("a",{name:"h2o_wave.ui.text"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"text"),"(content:\xa0str, size:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create text content."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The text content."),Object(b.b)("dt",null,Object(b.b)("code",null,"size")),Object(b.b)("dd",null,"The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"Tooltip message.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Text",href:"types#h2o_wave.types.Text"},"Text"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"text_l"},"text_l ",Object(b.b)("a",{name:"h2o_wave.ui.text_l"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"text_l"),"(content:\xa0str, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create large sized text content."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The text content."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"Tooltip message."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.TextL",href:"types#h2o_wave.types.TextL"},"TextL"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"text_m"},"text_m ",Object(b.b)("a",{name:"h2o_wave.ui.text_m"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"text_m"),"(content:\xa0str, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create medium sized text content."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The text content."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"Tooltip message.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.TextM",href:"types#h2o_wave.types.TextM"},"TextM"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"text_s"},"text_s ",Object(b.b)("a",{name:"h2o_wave.ui.text_s"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"text_s"),"(content:\xa0str, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create small sized text content."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The text content."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"Tooltip message.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.TextS",href:"types#h2o_wave.types.TextS"},"TextS"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"text_xl"},"text_xl ",Object(b.b)("a",{name:"h2o_wave.ui.text_xl"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"text_xl"),"(content:\xa0str, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create extra-large sized text content."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The text content."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"Tooltip message."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.TextXl",href:"types#h2o_wave.types.TextXl"},"TextXl"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"text_xs"},"text_xs ",Object(b.b)("a",{name:"h2o_wave.ui.text_xs"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"text_xs"),"(content:\xa0str, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create extra-small sized text content."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"content")),Object(b.b)("dd",null,"The text content."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"Tooltip message.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.TextXs",href:"types#h2o_wave.types.TextXs"},"TextXs"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"textbox"},"textbox ",Object(b.b)("a",{name:"h2o_wave.ui.textbox"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"textbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, mask:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, prefix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, suffix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, readonly:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, multiline:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, password:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a text box."),Object(b.b)("p",null,"The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"The text displayed above the field."),Object(b.b)("dt",null,Object(b.b)("code",null,"placeholder")),Object(b.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"Text to be displayed inside the text box."),Object(b.b)("dt",null,Object(b.b)("code",null,"mask")),Object(b.b)("dd",null,"The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9]."),Object(b.b)("dt",null,Object(b.b)("code",null,"icon")),Object(b.b)("dd",null,"Icon displayed in the far right end of the text field."),Object(b.b)("dt",null,Object(b.b)("code",null,"prefix")),Object(b.b)("dd",null,"Text to be displayed before the text box contents."),Object(b.b)("dt",null,Object(b.b)("code",null,"suffix")),Object(b.b)("dd",null,"Text to be displayed after the text box contents."),Object(b.b)("dt",null,Object(b.b)("code",null,"error")),Object(b.b)("dd",null,"Text to be displayed as an error below the text box."),Object(b.b)("dt",null,Object(b.b)("code",null,"required")),Object(b.b)("dd",null,"True if the text box is a required field."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if the text box is disabled."),Object(b.b)("dt",null,Object(b.b)("code",null,"readonly")),Object(b.b)("dd",null,"True if the text box is a read-only field."),Object(b.b)("dt",null,Object(b.b)("code",null,"multiline")),Object(b.b)("dd",null,"True if the text box should allow multi-line text entry."),Object(b.b)("dt",null,Object(b.b)("code",null,"password")),Object(b.b)("dd",null,"True if the text box should hide text content."),Object(b.b)("dt",null,Object(b.b)("code",null,"trigger")),Object(b.b)("dd",null,"True if the form should be submitted when the text value changes."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Textbox",href:"types#h2o_wave.types.Textbox"},"Textbox"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"toggle"},"toggle ",Object(b.b)("a",{name:"h2o_wave.ui.toggle"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"toggle"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action."),Object(b.b)("p",null,"Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"name")),Object(b.b)("dd",null,"An identifying name for this component."),Object(b.b)("dt",null,Object(b.b)("code",null,"label")),Object(b.b)("dd",null,"Text to be displayed alongside the component."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"True if selected, False if unselected."),Object(b.b)("dt",null,Object(b.b)("code",null,"disabled")),Object(b.b)("dd",null,"True if the checkbox is disabled."),Object(b.b)("dt",null,Object(b.b)("code",null,"trigger")),Object(b.b)("dd",null,"True if the form should be submitted when the toggle value changes."),Object(b.b)("dt",null,Object(b.b)("code",null,"tooltip")),Object(b.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Toggle",href:"types#h2o_wave.types.Toggle"},"Toggle"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"toolbar_card"},"toolbar_card ",Object(b.b)("a",{name:"h2o_wave.ui.toolbar_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"toolbar_card"),"(box:\xa0str, items:\xa0List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"], secondary_items:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, overflow_items:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.ToolbarCard",href:"types#h2o_wave.types.ToolbarCard"},"ToolbarCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a card containing a toolbar."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"items")),Object(b.b)("dd",null,"Items to render."),Object(b.b)("dt",null,Object(b.b)("code",null,"secondary_items")),Object(b.b)("dd",null,"Items to render on the right side (or left, in RTL)."),Object(b.b)("dt",null,Object(b.b)("code",null,"overflow_items")),Object(b.b)("dd",null,"Items to render in an overflow menu."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.ToolbarCard",href:"types#h2o_wave.types.ToolbarCard"},"ToolbarCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"vega_card"},"vega_card ",Object(b.b)("a",{name:"h2o_wave.ui.vega_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"vega_card"),"(box:\xa0str, title:\xa0str, specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.VegaCard",href:"types#h2o_wave.types.VegaCard"},"VegaCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a card containing a Vega-lite plot."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The title of this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"specification")),Object(b.b)("dd",null,"The Vega-lite specification."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for the plot, if any."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.VegaCard",href:"types#h2o_wave.types.VegaCard"},"VegaCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"vega_visualization"},"vega_visualization ",Object(b.b)("a",{name:"h2o_wave.ui.vega_visualization"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"vega_visualization"),"(specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a Vega-lite plot for display inside a form."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"specification")),Object(b.b)("dd",null,"The Vega-lite specification."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for the plot, if any."),Object(b.b)("dt",null,Object(b.b)("code",null,"width")),Object(b.b)("dd",null,"The width of the visualization. Defaults to 100%."),Object(b.b)("dt",null,Object(b.b)("code",null,"height")),Object(b.b)("dd",null,"The height of the visualization. Defaults to 300px.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"types#h2o_wave.types.VegaVisualization"},"VegaVisualization"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"visualization"},"visualization ",Object(b.b)("a",{name:"h2o_wave.ui.visualization"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"visualization"),"(plot:\xa0",Object(b.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot"),", data:\xa0Union[dict,\xa0str], width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a visualization for display inside a form."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"plot")),Object(b.b)("dd",null,"The plot to be rendered in this visualization."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this visualization."),Object(b.b)("dt",null,Object(b.b)("code",null,"width")),Object(b.b)("dd",null,"The width of the visualization. Defaults to 100%."),Object(b.b)("dt",null,Object(b.b)("code",null,"height")),Object(b.b)("dd",null,"The height of the visualization. Defaults to 300px.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.Visualization",href:"types#h2o_wave.types.Visualization"},"Visualization"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"wide_bar_stat_card"},"wide_bar_stat_card ",Object(b.b)("a",{name:"h2o_wave.ui.wide_bar_stat_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"wide_bar_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.WideBarStatCard",href:"types#h2o_wave.types.WideBarStatCard"},"WideBarStatCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress bar."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The card's title."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The primary value displayed."),Object(b.b)("dt",null,Object(b.b)("code",null,"aux_value")),Object(b.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(b.b)("dt",null,Object(b.b)("code",null,"progress")),Object(b.b)("dd",null,"The value of the progress bar, between 0 and 1."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_color")),Object(b.b)("dd",null,"The color of the progress bar."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.WideBarStatCard",href:"types#h2o_wave.types.WideBarStatCard"},"WideBarStatCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"wide_gauge_stat_card"},"wide_gauge_stat_card ",Object(b.b)("a",{name:"h2o_wave.ui.wide_gauge_stat_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"wide_gauge_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.WideGaugeStatCard",href:"types#h2o_wave.types.WideGaugeStatCard"},"WideGaugeStatCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The card's title."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The primary value displayed."),Object(b.b)("dt",null,Object(b.b)("code",null,"aux_value")),Object(b.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(b.b)("dt",null,Object(b.b)("code",null,"progress")),Object(b.b)("dd",null,"The value of the progress gauge, between 0 and 1."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_color")),Object(b.b)("dd",null,"The color of the progress gauge."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.WideGaugeStatCard",href:"types#h2o_wave.types.WideGaugeStatCard"},"WideGaugeStatCard"))," instance.")))),Object(b.b)("div",{className:"api"},Object(b.b)("h3",{id:"wide_series_stat_card"},"wide_series_stat_card ",Object(b.b)("a",{name:"h2o_wave.ui.wide_series_stat_card"})),Object(b.b)("div",{className:"api__body"},Object(b.b)("div",{className:"api__signature"},"def ",Object(b.b)("span",{class:"ident"},"wide_series_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(b.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(b.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(b.b)("a",{title:"h2o_wave.types.WideSeriesStatCard",href:"types#h2o_wave.types.WideSeriesStatCard"},"WideSeriesStatCard")),Object(b.b)("div",{className:"api__description"},Object(b.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a series plot."),Object(b.b)("h5",{id:"args"},"Args"),Object(b.b)("dl",null,Object(b.b)("dt",null,Object(b.b)("code",null,"box")),Object(b.b)("dd",null,"A string indicating how to place this component on the page."),Object(b.b)("dt",null,Object(b.b)("code",null,"title")),Object(b.b)("dd",null,"The card's title."),Object(b.b)("dt",null,Object(b.b)("code",null,"value")),Object(b.b)("dd",null,"The primary value displayed."),Object(b.b)("dt",null,Object(b.b)("code",null,"aux_value")),Object(b.b)("dd",null,"The auxiliary value displayed below the primary value."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_data")),Object(b.b)("dd",null,"The plot's data."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_value")),Object(b.b)("dd",null,"The data field to use for y-axis values."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_zero_value")),Object(b.b)("dd",null,"The base value to use for each y-axis mark. Set this to ",Object(b.b)("code",null,"0")," if you want to pin the x-axis at ",Object(b.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_category")),Object(b.b)("dd",null,"The data field to use for x-axis values (ignored if ",Object(b.b)("code",null,"plot_type")," is ",Object(b.b)("code",null,"area"),"; must be provided if ",Object(b.b)("code",null,"plot_type")," is ",Object(b.b)("code",null,"interval"),"). Defaults to 'x'."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_type")),Object(b.b)("dd",null,"The type of plot. Defaults to ",Object(b.b)("code",null,"area"),". One of 'area', 'interval'."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_curve")),Object(b.b)("dd",null,"The plot's curve style. Defaults to ",Object(b.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'."),Object(b.b)("dt",null,Object(b.b)("code",null,"plot_color")),Object(b.b)("dd",null,"The plot's color."),Object(b.b)("dt",null,Object(b.b)("code",null,"data")),Object(b.b)("dd",null,"Data for this card."),Object(b.b)("dt",null,Object(b.b)("code",null,"commands")),Object(b.b)("dd",null,"Contextual menu commands for this component.")),Object(b.b)("h5",{id:"returns"},"Returns"),Object(b.b)("p",null,"A ",Object(b.b)("code",null,Object(b.b)("a",{title:"h2o_wave.types.WideSeriesStatCard",href:"types#h2o_wave.types.WideSeriesStatCard"},"WideSeriesStatCard"))," instance.")))))}s.isMDXComponent=!0},287:function(e,t,l){"use strict";l.d(t,"a",(function(){return r})),l.d(t,"b",(function(){return O}));var a=l(0),n=l.n(a);function b(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function o(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),l.push.apply(l,a)}return l}function c(e){for(var t=1;t=0||(n[l]=e[l]);return n}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(n[l]=e[l])}return n}var i=n.a.createContext({}),s=function(e){var t=n.a.useContext(i),l=t;return e&&(l="function"==typeof e?e(t):c(c({},t),e)),l},r=function(e){var t=s(e.components);return n.a.createElement(i.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},p=n.a.forwardRef((function(e,t){var l=e.components,a=e.mdxType,b=e.originalType,o=e.parentName,i=d(e,["components","mdxType","originalType","parentName"]),r=s(l),p=a,O=r["".concat(o,".").concat(p)]||r[p]||u[p]||b;return l?n.a.createElement(O,c(c({ref:t},i),{},{components:l})):n.a.createElement(O,c({ref:t},i))}));function O(e,t){var l=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var b=l.length,o=new Array(b);o[0]=p;var c={};for(var d in t)hasOwnProperty.call(t,d)&&(c[d]=t[d]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var i=2;i',id:"breadcrumb",children:[]},{value:'breadcrumbs_card ',id:"breadcrumbs_card",children:[]},{value:'button ',id:"button",children:[]},{value:'buttons ',id:"buttons",children:[]},{value:'checkbox ',id:"checkbox",children:[]},{value:'checklist ',id:"checklist",children:[]},{value:'choice ',id:"choice",children:[]},{value:'choice_group ',id:"choice_group",children:[]},{value:'color_picker ',id:"color_picker",children:[]},{value:'combobox ',id:"combobox",children:[]},{value:'command ',id:"command",children:[]},{value:'component ',id:"component",children:[]},{value:'date_picker ',id:"date_picker",children:[]},{value:'dropdown ',id:"dropdown",children:[]},{value:'expander ',id:"expander",children:[]},{value:'file_upload ',id:"file_upload",children:[]},{value:'flex_card ',id:"flex_card",children:[]},{value:'form_card ',id:"form_card",children:[]},{value:'frame ',id:"frame",children:[]},{value:'frame_card ',id:"frame_card",children:[]},{value:'graphics_card ',id:"graphics_card",children:[]},{value:'grid_card ',id:"grid_card",children:[]},{value:'header_card ',id:"header_card",children:[]},{value:'icon_table_cell_type ',id:"icon_table_cell_type",children:[]},{value:'image_card ',id:"image_card",children:[]},{value:'label ',id:"label",children:[]},{value:'large_bar_stat_card ',id:"large_bar_stat_card",children:[]},{value:'large_stat_card ',id:"large_stat_card",children:[]},{value:'link ',id:"link",children:[]},{value:'list_card ',id:"list_card",children:[]},{value:'list_item1_card ',id:"list_item1_card",children:[]},{value:'mark ',id:"mark",children:[]},{value:'markdown_card ',id:"markdown_card",children:[]},{value:'markup ',id:"markup",children:[]},{value:'markup_card ',id:"markup_card",children:[]},{value:'message_bar ',id:"message_bar",children:[]},{value:'meta_card ',id:"meta_card",children:[]},{value:'nav_card ',id:"nav_card",children:[]},{value:'nav_group ',id:"nav_group",children:[]},{value:'nav_item ',id:"nav_item",children:[]},{value:'picker ',id:"picker",children:[]},{value:'pixel_art_card ',id:"pixel_art_card",children:[]},{value:'plot ',id:"plot",children:[]},{value:'plot_card ',id:"plot_card",children:[]},{value:'progress ',id:"progress",children:[]},{value:'progress_table_cell_type ',id:"progress_table_cell_type",children:[]},{value:'range_slider ',id:"range_slider",children:[]},{value:'repeat_card ',id:"repeat_card",children:[]},{value:'separator ',id:"separator",children:[]},{value:'slider ',id:"slider",children:[]},{value:'small_series_stat_card ',id:"small_series_stat_card",children:[]},{value:'small_stat_card ',id:"small_stat_card",children:[]},{value:'spinbox ',id:"spinbox",children:[]},{value:'step ',id:"step",children:[]},{value:'stepper ',id:"stepper",children:[]},{value:'tab ',id:"tab",children:[]},{value:'tab_card ',id:"tab_card",children:[]},{value:'table ',id:"table",children:[]},{value:'table_cell_type ',id:"table_cell_type",children:[]},{value:'table_column ',id:"table_column",children:[]},{value:'table_row ',id:"table_row",children:[]},{value:'tabs ',id:"tabs",children:[]},{value:'tall_gauge_stat_card ',id:"tall_gauge_stat_card",children:[]},{value:'tall_series_stat_card ',id:"tall_series_stat_card",children:[]},{value:'template ',id:"template",children:[]},{value:'template_card ',id:"template_card",children:[]},{value:'text ',id:"text",children:[]},{value:'text_l ',id:"text_l",children:[]},{value:'text_m ',id:"text_m",children:[]},{value:'text_s ',id:"text_s",children:[]},{value:'text_xl ',id:"text_xl",children:[]},{value:'text_xs ',id:"text_xs",children:[]},{value:'textbox ',id:"textbox",children:[]},{value:'toggle ',id:"toggle",children:[]},{value:'toolbar_card ',id:"toolbar_card",children:[]},{value:'vega_card ',id:"vega_card",children:[]},{value:'vega_visualization ',id:"vega_visualization",children:[]},{value:'visualization ',id:"visualization",children:[]},{value:'wide_bar_stat_card ',id:"wide_bar_stat_card",children:[]},{value:'wide_gauge_stat_card ',id:"wide_gauge_stat_card",children:[]},{value:'wide_series_stat_card ',id:"wide_series_stat_card",children:[]}]}],i={rightToc:d};function s(e){var t=e.components,l=Object(b.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},i,l,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"functions"},"Functions"),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"breadcrumb"},"breadcrumb ",Object(a.b)("a",{name:"h2o_wave.ui.breadcrumb"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"breadcrumb"),"(name:\xa0str, label:\xa0str) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a breadcrumb for a ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"types#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),"."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The label to display.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"breadcrumbs_card"},"breadcrumbs_card ",Object(a.b)("a",{name:"h2o_wave.ui.breadcrumbs_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"breadcrumbs_card"),"(box:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb"),"], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"types#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page\u2019s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"A list of ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb"))," instances to display. See ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.ui.breadcrumb",href:"#h2o_wave.ui.breadcrumb"},"breadcrumb()"))),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"types#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"button"},"button ",Object(a.b)("a",{name:"h2o_wave.ui.button"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"button"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, primary:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a button."),Object(a.b)("p",null,"Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog."),Object(a.b)("p",null,"When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements."),Object(a.b)("p",null,'Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.'),Object(a.b)("p",null,"While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the button."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The caption displayed below the label. Setting a caption renders a compound button."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True."),Object(a.b)("dt",null,Object(a.b)("code",null,"primary")),Object(a.b)("dd",null,"True if the button should be rendered as the primary button in the set."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the button should be disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"link")),Object(a.b)("dd",null,"True if the button should be rendered as link text and not a standard button."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Button",href:"types#h2o_wave.types.Button"},"Button"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"buttons"},"buttons ",Object(a.b)("a",{name:"h2o_wave.ui.buttons"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"buttons"),"(items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"),"], justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a set of buttons to be layed out horizontally."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The button in this set."),Object(a.b)("dt",null,Object(a.b)("code",null,"justify")),Object(a.b)("dd",null,"Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Buttons",href:"types#h2o_wave.types.Buttons"},"Buttons"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"checkbox"},"checkbox ",Object(a.b)("a",{name:"h2o_wave.ui.checkbox"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"checkbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, indeterminate:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a checkbox."),Object(a.b)("p",null,"A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component."),Object(a.b)("p",null,"A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected."),Object(a.b)("p",null,"For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action."),Object(a.b)("p",null,"Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the checkbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"True if selected, False if unselected."),Object(a.b)("dt",null,Object(a.b)("code",null,"indeterminate")),Object(a.b)("dd",null,"True if the selection is indeterminate (neither selected nor unselected)."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the checkbox is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the checkbox value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Checkbox",href:"types#h2o_wave.types.Checkbox"},"Checkbox"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"checklist"},"checklist ",Object(a.b)("a",{name:"h2o_wave.ui.checklist"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"checklist"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed above the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"values")),Object(a.b)("dd",null,"The names of the selected choices."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the checklist value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Checklist",href:"types#h2o_wave.types.Checklist"},"Checklist"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"choice"},"choice ",Object(a.b)("a",{name:"h2o_wave.ui.choice"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"choice"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a choice for a checklist, choice group or dropdown."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the checkbox is disabled.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"choice_group"},"choice_group ",Object(a.b)("a",{name:"h2o_wave.ui.choice_group"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"choice_group"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group."),Object(a.b)("p",null,"Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead."),Object(a.b)("p",null,'If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don\'t agree."'),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the selected choice."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"required")),Object(a.b)("dd",null,"True if this field is required."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the selection changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"types#h2o_wave.types.ChoiceGroup"},"ChoiceGroup"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"color_picker"},"color_picker ",Object(a.b)("a",{name:"h2o_wave.ui.color_picker"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"color_picker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a color picker."),Object(a.b)("p",null,"A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The selected color (CSS-compatible string)"),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"A list of colors (CSS-compatible strings) to limit color choices to."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ColorPicker",href:"types#h2o_wave.types.ColorPicker"},"ColorPicker"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"combobox"},"combobox ",Object(a.b)("a",{name:"h2o_wave.ui.combobox"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"combobox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a combobox."),Object(a.b)("p",null,"A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI."),Object(a.b)("p",null,"When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"placeholder")),Object(a.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the selected choice."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"error")),Object(a.b)("dd",null,"Text to be displayed as an error below the text box."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Combobox",href:"types#h2o_wave.types.Combobox"},"Combobox"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"command"},"command ",Object(a.b)("a",{name:"h2o_wave.ui.command"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"command"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, data:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a command."),Object(a.b)("p",null,"Commands are typically displayed as context menu items or toolbar button."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed for this command."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The caption for this command (typically a tooltip)."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"The icon to be displayed for this command."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"Sub-commands, if any"),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data associated with this command, if any.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"component"},"component ",Object(a.b)("a",{name:"h2o_wave.ui.component"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"component"),"(text:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Text",href:"types#h2o_wave.types.Text"},"Text"),",\xa0NoneType]\xa0=\xa0None, text_xl:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextXl",href:"types#h2o_wave.types.TextXl"},"TextXl"),",\xa0NoneType]\xa0=\xa0None, text_l:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextL",href:"types#h2o_wave.types.TextL"},"TextL"),",\xa0NoneType]\xa0=\xa0None, text_m:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextM",href:"types#h2o_wave.types.TextM"},"TextM"),",\xa0NoneType]\xa0=\xa0None, text_s:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextS",href:"types#h2o_wave.types.TextS"},"TextS"),",\xa0NoneType]\xa0=\xa0None, text_xs:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextXs",href:"types#h2o_wave.types.TextXs"},"TextXs"),",\xa0NoneType]\xa0=\xa0None, label:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Label",href:"types#h2o_wave.types.Label"},"Label"),",\xa0NoneType]\xa0=\xa0None, separator:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Separator",href:"types#h2o_wave.types.Separator"},"Separator"),",\xa0NoneType]\xa0=\xa0None, progress:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Progress",href:"types#h2o_wave.types.Progress"},"Progress"),",\xa0NoneType]\xa0=\xa0None, message_bar:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.MessageBar",href:"types#h2o_wave.types.MessageBar"},"MessageBar"),",\xa0NoneType]\xa0=\xa0None, textbox:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Textbox",href:"types#h2o_wave.types.Textbox"},"Textbox"),",\xa0NoneType]\xa0=\xa0None, checkbox:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Checkbox",href:"types#h2o_wave.types.Checkbox"},"Checkbox"),",\xa0NoneType]\xa0=\xa0None, toggle:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Toggle",href:"types#h2o_wave.types.Toggle"},"Toggle"),",\xa0NoneType]\xa0=\xa0None, choice_group:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"types#h2o_wave.types.ChoiceGroup"},"ChoiceGroup"),",\xa0NoneType]\xa0=\xa0None, checklist:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Checklist",href:"types#h2o_wave.types.Checklist"},"Checklist"),",\xa0NoneType]\xa0=\xa0None, dropdown:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Dropdown",href:"types#h2o_wave.types.Dropdown"},"Dropdown"),",\xa0NoneType]\xa0=\xa0None, combobox:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Combobox",href:"types#h2o_wave.types.Combobox"},"Combobox"),",\xa0NoneType]\xa0=\xa0None, slider:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Slider",href:"types#h2o_wave.types.Slider"},"Slider"),",\xa0NoneType]\xa0=\xa0None, spinbox:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Spinbox",href:"types#h2o_wave.types.Spinbox"},"Spinbox"),",\xa0NoneType]\xa0=\xa0None, date_picker:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.DatePicker",href:"types#h2o_wave.types.DatePicker"},"DatePicker"),",\xa0NoneType]\xa0=\xa0None, color_picker:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.ColorPicker",href:"types#h2o_wave.types.ColorPicker"},"ColorPicker"),",\xa0NoneType]\xa0=\xa0None, button:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Button",href:"types#h2o_wave.types.Button"},"Button"),",\xa0NoneType]\xa0=\xa0None, buttons:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Buttons",href:"types#h2o_wave.types.Buttons"},"Buttons"),",\xa0NoneType]\xa0=\xa0None, file_upload:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.FileUpload",href:"types#h2o_wave.types.FileUpload"},"FileUpload"),",\xa0NoneType]\xa0=\xa0None, table:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Table",href:"types#h2o_wave.types.Table"},"Table"),",\xa0NoneType]\xa0=\xa0None, link:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Link",href:"types#h2o_wave.types.Link"},"Link"),",\xa0NoneType]\xa0=\xa0None, tabs:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Tabs",href:"types#h2o_wave.types.Tabs"},"Tabs"),",\xa0NoneType]\xa0=\xa0None, expander:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Expander",href:"types#h2o_wave.types.Expander"},"Expander"),",\xa0NoneType]\xa0=\xa0None, frame:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Frame",href:"types#h2o_wave.types.Frame"},"Frame"),",\xa0NoneType]\xa0=\xa0None, markup:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Markup",href:"types#h2o_wave.types.Markup"},"Markup"),",\xa0NoneType]\xa0=\xa0None, template:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Template",href:"types#h2o_wave.types.Template"},"Template"),",\xa0NoneType]\xa0=\xa0None, picker:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Picker",href:"types#h2o_wave.types.Picker"},"Picker"),",\xa0NoneType]\xa0=\xa0None, range_slider:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.RangeSlider",href:"types#h2o_wave.types.RangeSlider"},"RangeSlider"),",\xa0NoneType]\xa0=\xa0None, stepper:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Stepper",href:"types#h2o_wave.types.Stepper"},"Stepper"),",\xa0NoneType]\xa0=\xa0None, visualization:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Visualization",href:"types#h2o_wave.types.Visualization"},"Visualization"),",\xa0NoneType]\xa0=\xa0None, vega_visualization:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"types#h2o_wave.types.VegaVisualization"},"VegaVisualization"),",\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a component."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"text")),Object(a.b)("dd",null,"Text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_xl")),Object(a.b)("dd",null,"Extra-large sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_l")),Object(a.b)("dd",null,"Large sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_m")),Object(a.b)("dd",null,"Medium sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_s")),Object(a.b)("dd",null,"Small sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_xs")),Object(a.b)("dd",null,"Extra-small sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Label."),Object(a.b)("dt",null,Object(a.b)("code",null,"separator")),Object(a.b)("dd",null,"Separator."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"Progress bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"message_bar")),Object(a.b)("dd",null,"Message bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"textbox")),Object(a.b)("dd",null,"Textbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"checkbox")),Object(a.b)("dd",null,"Checkbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"toggle")),Object(a.b)("dd",null,"Toggle."),Object(a.b)("dt",null,Object(a.b)("code",null,"choice_group")),Object(a.b)("dd",null,"Choice group."),Object(a.b)("dt",null,Object(a.b)("code",null,"checklist")),Object(a.b)("dd",null,"Checklist."),Object(a.b)("dt",null,Object(a.b)("code",null,"dropdown")),Object(a.b)("dd",null,"Dropdown."),Object(a.b)("dt",null,Object(a.b)("code",null,"combobox")),Object(a.b)("dd",null,"Combobox."),Object(a.b)("dt",null,Object(a.b)("code",null,"slider")),Object(a.b)("dd",null,"Slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"spinbox")),Object(a.b)("dd",null,"Spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"date_picker")),Object(a.b)("dd",null,"Date picker."),Object(a.b)("dt",null,Object(a.b)("code",null,"color_picker")),Object(a.b)("dd",null,"Color picker."),Object(a.b)("dt",null,Object(a.b)("code",null,"button")),Object(a.b)("dd",null,"Button."),Object(a.b)("dt",null,Object(a.b)("code",null,"buttons")),Object(a.b)("dd",null,"Button set."),Object(a.b)("dt",null,Object(a.b)("code",null,"file_upload")),Object(a.b)("dd",null,"File upload."),Object(a.b)("dt",null,Object(a.b)("code",null,"table")),Object(a.b)("dd",null,"Table."),Object(a.b)("dt",null,Object(a.b)("code",null,"link")),Object(a.b)("dd",null,"Link."),Object(a.b)("dt",null,Object(a.b)("code",null,"tabs")),Object(a.b)("dd",null,"Tabs."),Object(a.b)("dt",null,Object(a.b)("code",null,"expander")),Object(a.b)("dd",null,"Expander."),Object(a.b)("dt",null,Object(a.b)("code",null,"frame")),Object(a.b)("dd",null,"Frame."),Object(a.b)("dt",null,Object(a.b)("code",null,"markup")),Object(a.b)("dd",null,"Markup"),Object(a.b)("dt",null,Object(a.b)("code",null,"template")),Object(a.b)("dd",null,"Template"),Object(a.b)("dt",null,Object(a.b)("code",null,"picker")),Object(a.b)("dd",null,"Picker."),Object(a.b)("dt",null,Object(a.b)("code",null,"range_slider")),Object(a.b)("dd",null,"Range Slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"stepper")),Object(a.b)("dd",null,"Stepper."),Object(a.b)("dt",null,Object(a.b)("code",null,"visualization")),Object(a.b)("dd",null,"Visualization."),Object(a.b)("dt",null,Object(a.b)("code",null,"vega_visualization")),Object(a.b)("dd",null,"Vega-lite Visualization.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"date_picker"},"date_picker ",Object(a.b)("a",{name:"h2o_wave.ui.date_picker"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"date_picker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a date picker."),Object(a.b)("p",null,"A date picker allows a user to pick a date value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"placeholder")),Object(a.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The date value in YYYY-MM-DD format."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the datepicker value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.DatePicker",href:"types#h2o_wave.types.DatePicker"},"DatePicker"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"dropdown"},"dropdown ",Object(a.b)("a",{name:"h2o_wave.ui.dropdown"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"dropdown"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a dropdown."),Object(a.b)("p",null,"A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible."),Object(a.b)("p",null,"To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value."),Object(a.b)("p",null,"Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"placeholder")),Object(a.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the selected choice."),Object(a.b)("dt",null,Object(a.b)("code",null,"values")),Object(a.b)("dd",null,"The names of the selected choices. If this parameter is set, multiple selections will be allowed."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"required")),Object(a.b)("dd",null,"True if this is a required field."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the dropdown value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Dropdown",href:"types#h2o_wave.types.Dropdown"},"Dropdown"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"expander"},"expander ",Object(a.b)("a",{name:"h2o_wave.ui.expander"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"expander"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, expanded:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"),"],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Creates a new expander."),Object(a.b)("p",null,"Expanders can be used to show or hide a group of related components."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the expander."),Object(a.b)("dt",null,Object(a.b)("code",null,"expanded")),Object(a.b)("dd",null,"True if expanded, False if collapsed."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"List of components to be hideable by the expander."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Expander",href:"types#h2o_wave.types.Expander"},"Expander"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"file_upload"},"file_upload ",Object(a.b)("a",{name:"h2o_wave.ui.file_upload"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"file_upload"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, file_extensions:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_file_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a file upload component. A file upload component allows a user to browse, select and upload one or more files."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"multiple")),Object(a.b)("dd",null,"True if the component should allow multiple files to be uploaded."),Object(a.b)("dt",null,Object(a.b)("code",null,"file_extensions")),Object(a.b)("dd",null,"List of allowed file extensions, e.g. ",Object(a.b)("code",null,"pdf"),", ",Object(a.b)("code",null,"docx"),", etc."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_file_size")),Object(a.b)("dd",null,"Maximum allowed size (Mb) per file. Defaults to no limit."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_size")),Object(a.b)("dd",null,"Maximum allowed size (Mb) for all files combined. Defaults to no limit."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The height of the file upload, e.g. '400px', '50%', etc."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.FileUpload",href:"types#h2o_wave.types.FileUpload"},"FileUpload"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"flex_card"},"flex_card ",Object(a.b)("a",{name:"h2o_wave.ui.flex_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"flex_card"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], direction:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, wrap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.FlexCard",href:"types#h2o_wave.types.FlexCard"},"FlexCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_view")),Object(a.b)("dd",null,"The child card type."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_props")),Object(a.b)("dd",null,"The child card properties."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"direction")),Object(a.b)("dd",null,"Layout direction. One of 'horizontal', 'vertical'."),Object(a.b)("dt",null,Object(a.b)("code",null,"justify")),Object(a.b)("dd",null,"Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'."),Object(a.b)("dt",null,Object(a.b)("code",null,"align")),Object(a.b)("dd",null,"Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'."),Object(a.b)("dt",null,Object(a.b)("code",null,"wrap")),Object(a.b)("dd",null,"Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.FlexCard",href:"types#h2o_wave.types.FlexCard"},"FlexCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"form_card"},"form_card ",Object(a.b)("a",{name:"h2o_wave.ui.form_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"form_card"),"(box:\xa0str, items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"),"],\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.FormCard",href:"types#h2o_wave.types.FormCard"},"FormCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a form."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The components in this form."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.FormCard",href:"types#h2o_wave.types.FormCard"},"FormCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"frame"},"frame ",Object(a.b)("a",{name:"h2o_wave.ui.frame"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"frame"),"(path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a new inline frame (an ",Object(a.b)("code",null,"iframe"),")."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"path")),Object(a.b)("dd",null,"The path or URL of the web page, e.g. ",Object(a.b)("code",null,"/foo.html")," or ",Object(a.b)("code",null,"http://example.com/foo.html")),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The HTML content of the page. A string containing ",Object(a.b)("code",null,"..."),"."),Object(a.b)("dt",null,Object(a.b)("code",null,"width")),Object(a.b)("dd",null,"The width of the frame, e.g. ",Object(a.b)("code",null,"200px"),", ",Object(a.b)("code",null,"50%"),", etc. Defaults to ",Object(a.b)("code",null,"100%"),"."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The height of the frame, e.g. ",Object(a.b)("code",null,"200px"),", ",Object(a.b)("code",null,"50%"),", etc. Defaults to ",Object(a.b)("code",null,"150px"),"."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Frame",href:"types#h2o_wave.types.Frame"},"Frame"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"frame_card"},"frame_card ",Object(a.b)("a",{name:"h2o_wave.ui.frame_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"frame_card"),"(box:\xa0str, title:\xa0str, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.FrameCard",href:"types#h2o_wave.types.FrameCard"},"FrameCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render a card containing a HTML page inside an inline frame (an ",Object(a.b)("code",null,"iframe"),")."),Object(a.b)("p",null,"Either a path or content can be provided as arguments."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"path")),Object(a.b)("dd",null,"The path or URL of the web page, e.g. ",Object(a.b)("code",null,"/foo.html")," or ",Object(a.b)("code",null,"http://example.com/foo.html")),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The HTML content of the page. A string containing ",Object(a.b)("code",null,"...")),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.FrameCard",href:"types#h2o_wave.types.FrameCard"},"FrameCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"graphics_card"},"graphics_card ",Object(a.b)("a",{name:"h2o_wave.ui.graphics_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"graphics_card"),"(box:\xa0str, view_box:\xa0str, stage:\xa0Union[List[dict],\xa0str,\xa0NoneType]\xa0=\xa0None, scene:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card for displaying vector graphics."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"view_box")),Object(a.b)("dd",null,"The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: ",Object(a.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox")),Object(a.b)("dt",null,Object(a.b)("code",null,"stage")),Object(a.b)("dd",null,"Background layer for rendering static SVG elements. Must be packed to conserve memory."),Object(a.b)("dt",null,Object(a.b)("code",null,"scene")),Object(a.b)("dd",null,"Foreground layer for rendering dynamic SVG elements."),Object(a.b)("dt",null,Object(a.b)("code",null,"width")),Object(a.b)("dd",null,"The displayed width of the rectangular viewport. (Not the width of its coordinate system.)"),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The displayed height of the rectangular viewport. (Not the height of its coordinate system.)"),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"grid_card"},"grid_card ",Object(a.b)("a",{name:"h2o_wave.ui.grid_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"grid_card"),"(box:\xa0str, title:\xa0str, cells:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.GridCard",href:"types#h2o_wave.types.GridCard"},"GridCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"cells")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.GridCard",href:"types#h2o_wave.types.GridCard"},"GridCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"header_card"},"header_card ",Object(a.b)("a",{name:"h2o_wave.ui.header_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"header_card"),"(box:\xa0str, title:\xa0str, subtitle:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.HeaderCard",href:"types#h2o_wave.types.HeaderCard"},"HeaderCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render a card containing a HTML page inside an inline frame (iframe)."),Object(a.b)("p",null,"Either a path or content can be provided as arguments."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title."),Object(a.b)("dt",null,Object(a.b)("code",null,"subtitle")),Object(a.b)("dd",null,"The subtitle, displayed below the title."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"The icon type, displayed to the left."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon_color")),Object(a.b)("dd",null,"The icon's color."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.HeaderCard",href:"types#h2o_wave.types.HeaderCard"},"HeaderCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"icon_table_cell_type"},"icon_table_cell_type ",Object(a.b)("a",{name:"h2o_wave.ui.icon_table_cell_type"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"icon_table_cell_type"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"color")),Object(a.b)("dd",null,"Icon color."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"types#h2o_wave.types.IconTableCellType"},"IconTableCellType"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"image_card"},"image_card ",Object(a.b)("a",{name:"h2o_wave.ui.image_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"image_card"),"(box:\xa0str, title:\xa0str, type:\xa0str, image:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.ImageCard",href:"types#h2o_wave.types.ImageCard"},"ImageCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card that displays a base64-encoded image."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"type")),Object(a.b)("dd",null,"The image MIME subtype. One of ",Object(a.b)("code",null,"apng"),", ",Object(a.b)("code",null,"bmp"),", ",Object(a.b)("code",null,"gif"),", ",Object(a.b)("code",null,"x-icon"),", ",Object(a.b)("code",null,"jpeg"),", ",Object(a.b)("code",null,"png"),", ",Object(a.b)("code",null,"webp"),"."),Object(a.b)("dt",null,Object(a.b)("code",null,"image")),Object(a.b)("dd",null,"Image data, base64-encoded."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ImageCard",href:"types#h2o_wave.types.ImageCard"},"ImageCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"label"},"label ",Object(a.b)("a",{name:"h2o_wave.ui.label"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"label"),"(label:\xa0str, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a label."),Object(a.b)("p",null,"Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component\u2019s purpose."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the label."),Object(a.b)("dt",null,Object(a.b)("code",null,"required")),Object(a.b)("dd",null,"True if the field is required."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the label should be disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Label",href:"types#h2o_wave.types.Label"},"Label"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"large_bar_stat_card"},"large_bar_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.large_bar_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"large_bar_stat_card"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, value_caption:\xa0str, aux_value_caption:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.LargeBarStatCard",href:"types#h2o_wave.types.LargeBarStatCard"},"LargeBarStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The card's caption."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value, typically a target value."),Object(a.b)("dt",null,Object(a.b)("code",null,"value_caption")),Object(a.b)("dd",null,"The caption displayed below the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value_caption")),Object(a.b)("dd",null,"The caption displayed below the auxiliary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"The value of the progress bar, between 0 and 1."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The color of the progress bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.LargeBarStatCard",href:"types#h2o_wave.types.LargeBarStatCard"},"LargeBarStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"large_stat_card"},"large_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.large_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"large_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, caption:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.LargeStatCard",href:"types#h2o_wave.types.LargeStatCard"},"LargeStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a stat card displaying a primary value, an auxiliary value and a caption."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The caption displayed below the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.LargeStatCard",href:"types#h2o_wave.types.LargeStatCard"},"LargeStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"link"},"link ",Object(a.b)("a",{name:"h2o_wave.ui.link"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"link"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, download:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, button:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a hyperlink."),Object(a.b)("p",null,"Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a ",Object(a.b)("code",null,"/")," and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text to be displayed. If blank, the ",Object(a.b)("code",null,"path")," is used as the label."),Object(a.b)("dt",null,Object(a.b)("code",null,"path")),Object(a.b)("dd",null,"The path or URL to link to."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the link should be disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"download")),Object(a.b)("dd",null,"True if the link should be used for file download."),Object(a.b)("dt",null,Object(a.b)("code",null,"button")),Object(a.b)("dd",null,"True if the link should be rendered as a button."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Link",href:"types#h2o_wave.types.Link"},"Link"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"list_card"},"list_card ",Object(a.b)("a",{name:"h2o_wave.ui.list_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"list_card"),"(box:\xa0str, title:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.ListCard",href:"types#h2o_wave.types.ListCard"},"ListCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom)."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_view")),Object(a.b)("dd",null,"The child card type."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_props")),Object(a.b)("dd",null,"The child card properties."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ListCard",href:"types#h2o_wave.types.ListCard"},"ListCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"list_item1_card"},"list_item1_card ",Object(a.b)("a",{name:"h2o_wave.ui.list_item1_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"list_item1_card"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.ListItem1Card",href:"types#h2o_wave.types.ListItem1Card"},"ListItem1Card")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ListItem1Card",href:"types#h2o_wave.types.ListItem1Card"},"ListItem1Card"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"mark"},"mark ",Object(a.b)("a",{name:"h2o_wave.ui.mark"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"mark"),"(coord:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, x_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, y_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_domain:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, shape:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, shape_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, size:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, size_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stack:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, dodge:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_offset:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_x:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_y:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_rotation:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_position:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_overlap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_weight:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_line_height:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Mark",href:"types#h2o_wave.types.Mark"},"Mark")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"coord")),Object(a.b)("dd",null,"Coordinate system. ",Object(a.b)("code",null,"rect")," is synonymous to ",Object(a.b)("code",null,"cartesian"),". ",Object(a.b)("code",null,"theta")," is transposed ",Object(a.b)("code",null,"polar"),". One of 'rect', 'cartesian', 'polar', 'theta', 'helix'."),Object(a.b)("dt",null,Object(a.b)("code",null,"type")),Object(a.b)("dd",null,"Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'."),Object(a.b)("dt",null,Object(a.b)("code",null,"x")),Object(a.b)("dd",null,"X field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"x0")),Object(a.b)("dd",null,"X base field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"x1")),Object(a.b)("dd",null,"X bin lower bound field or value. For histograms."),Object(a.b)("dt",null,Object(a.b)("code",null,"x2")),Object(a.b)("dd",null,"X bin upper bound field or value. For histograms."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_min")),Object(a.b)("dd",null,"X axis scale minimum."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_max")),Object(a.b)("dd",null,"X axis scale maximum."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_nice")),Object(a.b)("dd",null,"Whether to nice X axis scale ticks."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_scale")),Object(a.b)("dd",null,"X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_title")),Object(a.b)("dd",null,"X axis title."),Object(a.b)("dt",null,Object(a.b)("code",null,"y")),Object(a.b)("dd",null,"Y field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"y0")),Object(a.b)("dd",null,"Y base field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"y1")),Object(a.b)("dd",null,"Y bin lower bound field or value. For histograms."),Object(a.b)("dt",null,Object(a.b)("code",null,"y2")),Object(a.b)("dd",null,"Y bin upper bound field or value. For histograms."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_min")),Object(a.b)("dd",null,"Y axis scale minimum."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_max")),Object(a.b)("dd",null,"Y axis scale maximum."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_nice")),Object(a.b)("dd",null,"Whether to nice Y axis scale ticks."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_scale")),Object(a.b)("dd",null,"Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_title")),Object(a.b)("dd",null,"Y axis title."),Object(a.b)("dt",null,Object(a.b)("code",null,"color")),Object(a.b)("dd",null,"Mark color field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"color_range")),Object(a.b)("dd",null,"Mark color range for multi-series plots. A string containing space-separated colors, e.g. ",Object(a.b)("code",null,"'#fee8c8 #fdbb84 #e34a33'")),Object(a.b)("dt",null,Object(a.b)("code",null,"color_domain")),Object(a.b)("dd",null,"The unique values in the data (labels or categories or classes) to map colors to, e.g. ",Object(a.b)("code",null,"['high', 'medium', 'low']"),". If this is not provided, the unique values are automatically inferred from the ",Object(a.b)("code",null,"color")," attribute."),Object(a.b)("dt",null,Object(a.b)("code",null,"shape")),Object(a.b)("dd",null,"Mark shape field or value for ",Object(a.b)("code",null,"point")," mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'."),Object(a.b)("dt",null,Object(a.b)("code",null,"shape_range")),Object(a.b)("dd",null,"Mark shape range for multi-series plots using ",Object(a.b)("code",null,"point")," mark types. A string containing space-separated shapes, e.g. ",Object(a.b)("code",null,"'circle square diamond'")),Object(a.b)("dt",null,Object(a.b)("code",null,"size")),Object(a.b)("dd",null,"Mark size field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"size_range")),Object(a.b)("dd",null,"Mark size range. A string containing space-separated integers, e.g. ",Object(a.b)("code",null,"'4 30'")),Object(a.b)("dt",null,Object(a.b)("code",null,"stack")),Object(a.b)("dd",null,"Field to stack marks by, or 'auto' to infer."),Object(a.b)("dt",null,Object(a.b)("code",null,"dodge")),Object(a.b)("dd",null,"Field to dodge marks by, or 'auto' to infer."),Object(a.b)("dt",null,Object(a.b)("code",null,"curve")),Object(a.b)("dd",null,"Curve type for ",Object(a.b)("code",null,"line")," and ",Object(a.b)("code",null,"area")," mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'."),Object(a.b)("dt",null,Object(a.b)("code",null,"fill_color")),Object(a.b)("dd",null,"Mark fill color."),Object(a.b)("dt",null,Object(a.b)("code",null,"fill_opacity")),Object(a.b)("dd",null,"Mark fill opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"stroke_color")),Object(a.b)("dd",null,"Mark stroke color."),Object(a.b)("dt",null,Object(a.b)("code",null,"stroke_opacity")),Object(a.b)("dd",null,"Mark stroke opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"stroke_size")),Object(a.b)("dd",null,"Mark stroke size."),Object(a.b)("dt",null,Object(a.b)("code",null,"stroke_dash")),Object(a.b)("dd",null,"Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25]."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Label field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_offset")),Object(a.b)("dd",null,"Distance between label and mark."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_offset_x")),Object(a.b)("dd",null,"Horizontal distance between label and mark."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_offset_y")),Object(a.b)("dd",null,"Vertical distance between label and mark."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_rotation")),Object(a.b)("dd",null,"Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_position")),Object(a.b)("dd",null,"Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_overlap")),Object(a.b)("dd",null,"Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_fill_color")),Object(a.b)("dd",null,"Label fill color."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_fill_opacity")),Object(a.b)("dd",null,"Label fill opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_stroke_color")),Object(a.b)("dd",null,"Label stroke color."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_stroke_opacity")),Object(a.b)("dd",null,"Label stroke opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_stroke_size")),Object(a.b)("dd",null,"Label stroke size (line width or pen thickness)."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_font_size")),Object(a.b)("dd",null,"Label font size."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_font_weight")),Object(a.b)("dd",null,"Label font weight."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_line_height")),Object(a.b)("dd",null,"Label line height."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_align")),Object(a.b)("dd",null,"Label text alignment. One of 'left', 'right', 'center', 'start', 'end'."),Object(a.b)("dt",null,Object(a.b)("code",null,"ref_stroke_color")),Object(a.b)("dd",null,"Reference line stroke color."),Object(a.b)("dt",null,Object(a.b)("code",null,"ref_stroke_opacity")),Object(a.b)("dd",null,"Reference line stroke opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"ref_stroke_size")),Object(a.b)("dd",null,"Reference line stroke size (line width or pen thickness)."),Object(a.b)("dt",null,Object(a.b)("code",null,"ref_stroke_dash")),Object(a.b)("dd",null,"Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Mark",href:"types#h2o_wave.types.Mark"},"Mark"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"markdown_card"},"markdown_card ",Object(a.b)("a",{name:"h2o_wave.ui.markdown_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"markdown_card"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.MarkdownCard",href:"types#h2o_wave.types.MarkdownCard"},"MarkdownCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card that renders Markdown content."),Object(a.b)("p",null,"Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The markdown content. Supports Github Flavored Markdown (GFM): ",Object(a.b)("a",{href:"https://guides.github.com/features/mastering-markdown/"},"https://guides.github.com/features/mastering-markdown/")),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Additional data for the card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.MarkdownCard",href:"types#h2o_wave.types.MarkdownCard"},"MarkdownCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"markup"},"markup ",Object(a.b)("a",{name:"h2o_wave.ui.markup"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"markup"),"(content:\xa0str, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render HTML content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The HTML content."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Markup",href:"types#h2o_wave.types.Markup"},"Markup"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"markup_card"},"markup_card ",Object(a.b)("a",{name:"h2o_wave.ui.markup_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"markup_card"),"(box:\xa0str, title:\xa0str, content:\xa0str, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.MarkupCard",href:"types#h2o_wave.types.MarkupCard"},"MarkupCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render HTML content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The HTML content."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.MarkupCard",href:"types#h2o_wave.types.MarkupCard"},"MarkupCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"message_bar"},"message_bar ",Object(a.b)("a",{name:"h2o_wave.ui.message_bar"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"message_bar"),"(type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, text:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a message bar."),Object(a.b)("p",null,"A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"type")),Object(a.b)("dd",null,"The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'."),Object(a.b)("dt",null,Object(a.b)("code",null,"text")),Object(a.b)("dd",null,"The text displayed on the message bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.MessageBar",href:"types#h2o_wave.types.MessageBar"},"MessageBar"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"meta_card"},"meta_card ",Object(a.b)("a",{name:"h2o_wave.ui.meta_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"meta_card"),"(box:\xa0str, title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, refresh:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, notification:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, redirect:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.MetaCard",href:"types#h2o_wave.types.MetaCard"},"MetaCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Represents page-global state."),Object(a.b)("p",null,"This card is invisible. It is used to control attributes of the active page."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title of the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"refresh")),Object(a.b)("dd",null,"Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use)."),Object(a.b)("dt",null,Object(a.b)("code",null,"notification")),Object(a.b)("dd",null,"Display a desktop notification to the user."),Object(a.b)("dt",null,Object(a.b)("code",null,"redirect")),Object(a.b)("dd",null,"Redirect the page to a new URL."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.MetaCard",href:"types#h2o_wave.types.MetaCard"},"MetaCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"nav_card"},"nav_card ",Object(a.b)("a",{name:"h2o_wave.ui.nav_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"nav_card"),"(box:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.NavGroup",href:"types#h2o_wave.types.NavGroup"},"NavGroup"),"], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.NavCard",href:"types#h2o_wave.types.NavCard"},"NavCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing a navigation pane."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The navigation groups contained in this pane."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.NavCard",href:"types#h2o_wave.types.NavCard"},"NavCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"nav_group"},"nav_group ",Object(a.b)("a",{name:"h2o_wave.ui.nav_group"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"nav_group"),"(label:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.NavItem",href:"types#h2o_wave.types.NavItem"},"NavItem"),"]) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.NavGroup",href:"types#h2o_wave.types.NavGroup"},"NavGroup")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a group of navigation items."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The label to display for this group."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The navigation items contained in this group.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.NavGroup",href:"types#h2o_wave.types.NavGroup"},"NavGroup"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"nav_item"},"nav_item ",Object(a.b)("a",{name:"h2o_wave.ui.nav_item"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"nav_item"),"(name:\xa0str, label:\xa0str) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.NavItem",href:"types#h2o_wave.types.NavItem"},"NavItem")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a navigation item."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The label to display.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.NavItem",href:"types#h2o_wave.types.NavItem"},"NavItem"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"picker"},"picker ",Object(a.b)("a",{name:"h2o_wave.ui.picker"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"picker"),"(name:\xa0str, choices:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"], label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_choices:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed above the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"values")),Object(a.b)("dd",null,"The names of the selected choices."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_choices")),Object(a.b)("dd",null,"Maximum number of selectable choices. Defaults to no limit."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"Controls whether the picker should be disabled or not."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Picker",href:"types#h2o_wave.types.Picker"},"Picker"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"pixel_art_card"},"pixel_art_card ",Object(a.b)("a",{name:"h2o_wave.ui.pixel_art_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"pixel_art_card"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.PixelArtCard",href:"types#h2o_wave.types.PixelArtCard"},"PixelArtCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card displaying a collaborative Pixel art tool, just for kicks."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"The data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.PixelArtCard",href:"types#h2o_wave.types.PixelArtCard"},"PixelArtCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"plot"},"plot ",Object(a.b)("a",{name:"h2o_wave.ui.plot"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"plot"),"(marks:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Mark",href:"types#h2o_wave.types.Mark"},"Mark"),"]) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a plot. A plot is composed of one or more graphical mark layers."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"marks")),Object(a.b)("dd",null,"The graphical mark layers contained in this plot.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"plot_card"},"plot_card ",Object(a.b)("a",{name:"h2o_wave.ui.plot_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"plot_card"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], plot:\xa0",Object(a.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot"),", commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.PlotCard",href:"types#h2o_wave.types.PlotCard"},"PlotCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card displaying a plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot")),Object(a.b)("dd",null,"The plot to be displayed in this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.PlotCard",href:"types#h2o_wave.types.PlotCard"},"PlotCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"progress"},"progress ",Object(a.b)("a",{name:"h2o_wave.ui.progress"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"progress"),"(label:\xa0str, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a progress bar."),Object(a.b)("p",null,"Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing."),Object(a.b)("p",null,"Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]"),Object(a.b)("p",null,"Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid \u201crewinding\u201d the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed above the bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The text displayed below the bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The progress, between 0.0 and 1.0, or -1 (default) if indeterminate."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Progress",href:"types#h2o_wave.types.Progress"},"Progress"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"progress_table_cell_type"},"progress_table_cell_type ",Object(a.b)("a",{name:"h2o_wave.ui.progress_table_cell_type"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"progress_table_cell_type"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"color")),Object(a.b)("dd",null,"Color of the progress arc."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"types#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"range_slider"},"range_slider ",Object(a.b)("a",{name:"h2o_wave.ui.range_slider"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"range_slider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, min_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a range slider."),Object(a.b)("p",null,"A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"min")),Object(a.b)("dd",null,"The minimum value of the slider. Defaults to 0."),Object(a.b)("dt",null,Object(a.b)("code",null,"max")),Object(a.b)("dd",null,"The maximum value of the slider. Defaults to 100."),Object(a.b)("dt",null,Object(a.b)("code",null,"step")),Object(a.b)("dd",null,"The difference between two adjacent values of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"min_value")),Object(a.b)("dd",null,"The lower bound of the selected range."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_value")),Object(a.b)("dd",null,"The upper bound of the selected range."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the slider value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.RangeSlider",href:"types#h2o_wave.types.RangeSlider"},"RangeSlider"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"repeat_card"},"repeat_card ",Object(a.b)("a",{name:"h2o_wave.ui.repeat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"repeat_card"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.RepeatCard",href:"types#h2o_wave.types.RepeatCard"},"RepeatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_view")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_props")),Object(a.b)("dd",null,"The child card properties."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.RepeatCard",href:"types#h2o_wave.types.RepeatCard"},"RepeatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"separator"},"separator ",Object(a.b)("a",{name:"h2o_wave.ui.separator"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"separator"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a separator."),Object(a.b)("p",null,"A separator visually separates content into groups."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the separator."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Separator",href:"types#h2o_wave.types.Separator"},"Separator"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"slider"},"slider ",Object(a.b)("a",{name:"h2o_wave.ui.slider"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"slider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a slider."),Object(a.b)("p",null,"A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value."),Object(a.b)("p",null,"A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium \u2014 not about setting the value to two or five."),Object(a.b)("p",null,"The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"min")),Object(a.b)("dd",null,"The minimum value of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"max")),Object(a.b)("dd",null,"The maximum value of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"step")),Object(a.b)("dd",null,"The difference between two adjacent values of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The current value of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the slider value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Slider",href:"types#h2o_wave.types.Slider"},"Slider"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"small_series_stat_card"},"small_series_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.small_series_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"small_series_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, plot_data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.SmallSeriesStatCard",href:"types#h2o_wave.types.SmallSeriesStatCard"},"SmallSeriesStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a small stat card displaying a primary value and a series plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_data")),Object(a.b)("dd",null,"The plot's data."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_value")),Object(a.b)("dd",null,"The data field to use for y-axis values."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_zero_value")),Object(a.b)("dd",null,"The base value to use for each y-axis mark. Set this to ",Object(a.b)("code",null,"0")," if you want to pin the x-axis at ",Object(a.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_category")),Object(a.b)("dd",null,"The data field to use for x-axis values (ignored if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"area"),"; must be provided if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"interval"),"). Defaults to 'x'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_type")),Object(a.b)("dd",null,"The type of plot. Defaults to ",Object(a.b)("code",null,"area"),". One of 'area', 'interval'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_curve")),Object(a.b)("dd",null,"The plot's curve style. Defaults to ",Object(a.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The plot's color."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.SmallSeriesStatCard",href:"types#h2o_wave.types.SmallSeriesStatCard"},"SmallSeriesStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"small_stat_card"},"small_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.small_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"small_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.SmallStatCard",href:"types#h2o_wave.types.SmallStatCard"},"SmallStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a stat card displaying a single value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.SmallStatCard",href:"types#h2o_wave.types.SmallStatCard"},"SmallStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"spinbox"},"spinbox ",Object(a.b)("a",{name:"h2o_wave.ui.spinbox"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"spinbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a spinbox."),Object(a.b)("p",null,"A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"min")),Object(a.b)("dd",null,"The minimum value of the spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"max")),Object(a.b)("dd",null,"The maximum value of the spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"step")),Object(a.b)("dd",null,"The difference between two adjacent values of the spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The current value of the spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Spinbox",href:"types#h2o_wave.types.Spinbox"},"Spinbox"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"step"},"step ",Object(a.b)("a",{name:"h2o_wave.ui.step"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"step"),"(label:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, done:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Step",href:"types#h2o_wave.types.Step"},"Step")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a step for a stepper."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text displayed below icon."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"Icon to be displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"done")),Object(a.b)("dd",null,"Indicates whether this step has already been completed.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Step",href:"types#h2o_wave.types.Step"},"Step"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"stepper"},"stepper ",Object(a.b)("a",{name:"h2o_wave.ui.stepper"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"stepper"),"(name:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Step",href:"types#h2o_wave.types.Step"},"Step"),"], visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The sequence of steps to be displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Stepper",href:"types#h2o_wave.types.Stepper"},"Stepper"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tab"},"tab ",Object(a.b)("a",{name:"h2o_wave.ui.tab"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tab"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a tab."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the tab."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"The icon displayed on the tab.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tab_card"},"tab_card ",Object(a.b)("a",{name:"h2o_wave.ui.tab_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tab_card"),"(box:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab"),"], value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TabCard",href:"types#h2o_wave.types.TabCard"},"TabCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing tabs for navigation."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"Items to render."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the tab to select."),Object(a.b)("dt",null,Object(a.b)("code",null,"link")),Object(a.b)("dd",null,"True if tabs should be rendered as links and not a standard tab."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TabCard",href:"types#h2o_wave.types.TabCard"},"TabCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"table"},"table ",Object(a.b)("a",{name:"h2o_wave.ui.table"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"table"),"(name:\xa0str, columns:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.TableColumn",href:"types#h2o_wave.types.TableColumn"},"TableColumn"),"], rows:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.TableRow",href:"types#h2o_wave.types.TableRow"},"TableRow"),"], multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, groupable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, downloadable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, resettable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create an interactive table."),Object(a.b)("p",null,"This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table."),Object(a.b)("p",null,"If ",Object(a.b)("code",null,"multiple")," is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and ",Object(a.b)("code",null,"q.args.table_name")," is set to ",Object(a.b)("code",null,"[row_name]"),", where ",Object(a.b)("code",null,"table_name")," is the ",Object(a.b)("code",null,"name")," of the table, and ",Object(a.b)("code",null,"row_name")," is the ",Object(a.b)("code",null,"name")," of the row that was clicked on."),Object(a.b)("p",null,"If ",Object(a.b)("code",null,"multiple")," is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,",Object(a.b)("code",null,"q.args.table_name")," is set to ",Object(a.b)("code",null,"[row1_name, row2_name, \u2026]")," where ",Object(a.b)("code",null,"table_name")," is the ",Object(a.b)("code",null,"name")," of the table, and ",Object(a.b)("code",null,"row1_name"),", ",Object(a.b)("code",null,"row2_name")," are the ",Object(a.b)("code",null,"name")," of the rows that were selected. Note that if ",Object(a.b)("code",null,"multiple")," is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"columns")),Object(a.b)("dd",null,"The columns in this table."),Object(a.b)("dt",null,Object(a.b)("code",null,"rows")),Object(a.b)("dd",null,"The rows in this table."),Object(a.b)("dt",null,Object(a.b)("code",null,"multiple")),Object(a.b)("dd",null,"True to allow multiple rows to be selected."),Object(a.b)("dt",null,Object(a.b)("code",null,"groupable")),Object(a.b)("dd",null,"True to allow group by feature."),Object(a.b)("dt",null,Object(a.b)("code",null,"downloadable")),Object(a.b)("dd",null,"Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False."),Object(a.b)("dt",null,Object(a.b)("code",null,"resettable")),Object(a.b)("dd",null,"Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The height of the table, e.g. '400px', '50%', etc."),Object(a.b)("dt",null,Object(a.b)("code",null,"values")),Object(a.b)("dd",null,"The names of the selected rows. If this parameter is set, multiple selections will be allowed (",Object(a.b)("code",null,"multiple")," is assumed to be ",Object(a.b)("code",null,"True"),")."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Table",href:"types#h2o_wave.types.Table"},"Table"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"table_cell_type"},"table_cell_type ",Object(a.b)("a",{name:"h2o_wave.ui.table_cell_type"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"table_cell_type"),"(progress:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"types#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType"),",\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"types#h2o_wave.types.IconTableCellType"},"IconTableCellType"),",\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Defines cell content to be rendered instead of a simple text."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"No documentation available."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"No documentation available.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"table_column"},"table_column ",Object(a.b)("a",{name:"h2o_wave.ui.table_column"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"table_column"),"(name:\xa0str, label:\xa0str, min_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, max_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, sortable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, searchable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, filterable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, cell_type:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType"),",\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableColumn",href:"types#h2o_wave.types.TableColumn"},"TableColumn")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a table column."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this column."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the column header."),Object(a.b)("dt",null,Object(a.b)("code",null,"min_width")),Object(a.b)("dd",null,"The minimum width of this column, e.g. '50px'. Only ",Object(a.b)("code",null,"px")," units are supported at this time."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_width")),Object(a.b)("dd",null,"The maximum width of this column, e.g. '100px'. Only ",Object(a.b)("code",null,"px")," units are supported at this time."),Object(a.b)("dt",null,Object(a.b)("code",null,"sortable")),Object(a.b)("dd",null,"Indicates whether the column is sortable."),Object(a.b)("dt",null,Object(a.b)("code",null,"searchable")),Object(a.b)("dd",null,"Indicates whether the contents of this column can be searched through. Enables a search box for the table if true."),Object(a.b)("dt",null,Object(a.b)("code",null,"filterable")),Object(a.b)("dd",null,"Indicates whether the contents of this column are displayed as filters in a dropdown."),Object(a.b)("dt",null,Object(a.b)("code",null,"link")),Object(a.b)("dd",null,"Indicates whether each cell in this column should be displayed as a clickable link."),Object(a.b)("dt",null,Object(a.b)("code",null,"cell_type")),Object(a.b)("dd",null,"Defines how to render each cell in this column. Defaults to plain text.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TableColumn",href:"types#h2o_wave.types.TableColumn"},"TableColumn"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"table_row"},"table_row ",Object(a.b)("a",{name:"h2o_wave.ui.table_row"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"table_row"),"(name:\xa0str, cells:\xa0List[str]) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableRow",href:"types#h2o_wave.types.TableRow"},"TableRow")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a table row."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this row."),Object(a.b)("dt",null,Object(a.b)("code",null,"cells")),Object(a.b)("dd",null,"The cells in this row (displayed left to right).")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TableRow",href:"types#h2o_wave.types.TableRow"},"TableRow"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tabs"},"tabs ",Object(a.b)("a",{name:"h2o_wave.ui.tabs"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tabs"),"(name:\xa0str, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab"),"],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a tab bar."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the tab to select."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The tabs in this tab bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Tabs",href:"types#h2o_wave.types.Tabs"},"Tabs"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tall_gauge_stat_card"},"tall_gauge_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.tall_gauge_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tall_gauge_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TallGaugeStatCard",href:"types#h2o_wave.types.TallGaugeStatCard"},"TallGaugeStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"The value of the progress gauge, between 0 and 1."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The color of the progress gauge."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TallGaugeStatCard",href:"types#h2o_wave.types.TallGaugeStatCard"},"TallGaugeStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tall_series_stat_card"},"tall_series_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.tall_series_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tall_series_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TallSeriesStatCard",href:"types#h2o_wave.types.TallSeriesStatCard"},"TallSeriesStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a series plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed below the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_data")),Object(a.b)("dd",null,"The plot's data."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_value")),Object(a.b)("dd",null,"The data field to use for y-axis values."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_zero_value")),Object(a.b)("dd",null,"The base value to use for each y-axis mark. Set this to ",Object(a.b)("code",null,"0")," if you want to pin the x-axis at ",Object(a.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_category")),Object(a.b)("dd",null,"The data field to use for x-axis values (ignored if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"area"),"; must be provided if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"interval"),"). Defaults to 'x'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_type")),Object(a.b)("dd",null,"The type of plot. Defaults to ",Object(a.b)("code",null,"area"),". One of 'area', 'interval'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_curve")),Object(a.b)("dd",null,"The plot's curve style. Defaults to ",Object(a.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The plot's color."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TallSeriesStatCard",href:"types#h2o_wave.types.TallSeriesStatCard"},"TallSeriesStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"template"},"template ",Object(a.b)("a",{name:"h2o_wave.ui.template"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"template"),"(content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render dynamic content using an HTML template."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The Handlebars template. ",Object(a.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/")),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for the Handlebars template"),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Template",href:"types#h2o_wave.types.Template"},"Template"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"template_card"},"template_card ",Object(a.b)("a",{name:"h2o_wave.ui.template_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"template_card"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TemplateCard",href:"types#h2o_wave.types.TemplateCard"},"TemplateCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render dynamic content using an HTML template."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The Handlebars template. ",Object(a.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/")),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for the Handlebars template."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TemplateCard",href:"types#h2o_wave.types.TemplateCard"},"TemplateCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text"},"text ",Object(a.b)("a",{name:"h2o_wave.ui.text"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text"),"(content:\xa0str, size:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"size")),Object(a.b)("dd",null,"The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Text",href:"types#h2o_wave.types.Text"},"Text"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_l"},"text_l ",Object(a.b)("a",{name:"h2o_wave.ui.text_l"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_l"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create large sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextL",href:"types#h2o_wave.types.TextL"},"TextL"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_m"},"text_m ",Object(a.b)("a",{name:"h2o_wave.ui.text_m"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_m"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create medium sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextM",href:"types#h2o_wave.types.TextM"},"TextM"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_s"},"text_s ",Object(a.b)("a",{name:"h2o_wave.ui.text_s"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_s"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create small sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextS",href:"types#h2o_wave.types.TextS"},"TextS"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_xl"},"text_xl ",Object(a.b)("a",{name:"h2o_wave.ui.text_xl"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_xl"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create extra-large sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextXl",href:"types#h2o_wave.types.TextXl"},"TextXl"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_xs"},"text_xs ",Object(a.b)("a",{name:"h2o_wave.ui.text_xs"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_xs"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create extra-small sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextXs",href:"types#h2o_wave.types.TextXs"},"TextXs"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"textbox"},"textbox ",Object(a.b)("a",{name:"h2o_wave.ui.textbox"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"textbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, mask:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, prefix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, suffix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, readonly:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, multiline:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, password:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a text box."),Object(a.b)("p",null,"The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed above the field."),Object(a.b)("dt",null,Object(a.b)("code",null,"placeholder")),Object(a.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"Text to be displayed inside the text box."),Object(a.b)("dt",null,Object(a.b)("code",null,"mask")),Object(a.b)("dd",null,"The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9]."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"Icon displayed in the far right end of the text field."),Object(a.b)("dt",null,Object(a.b)("code",null,"prefix")),Object(a.b)("dd",null,"Text to be displayed before the text box contents."),Object(a.b)("dt",null,Object(a.b)("code",null,"suffix")),Object(a.b)("dd",null,"Text to be displayed after the text box contents."),Object(a.b)("dt",null,Object(a.b)("code",null,"error")),Object(a.b)("dd",null,"Text to be displayed as an error below the text box."),Object(a.b)("dt",null,Object(a.b)("code",null,"required")),Object(a.b)("dd",null,"True if the text box is a required field."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the text box is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"readonly")),Object(a.b)("dd",null,"True if the text box is a read-only field."),Object(a.b)("dt",null,Object(a.b)("code",null,"multiline")),Object(a.b)("dd",null,"True if the text box should allow multi-line text entry."),Object(a.b)("dt",null,Object(a.b)("code",null,"password")),Object(a.b)("dd",null,"True if the text box should hide text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the text value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Textbox",href:"types#h2o_wave.types.Textbox"},"Textbox"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"toggle"},"toggle ",Object(a.b)("a",{name:"h2o_wave.ui.toggle"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"toggle"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action."),Object(a.b)("p",null,"Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"True if selected, False if unselected."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the checkbox is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the toggle value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Toggle",href:"types#h2o_wave.types.Toggle"},"Toggle"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"toolbar_card"},"toolbar_card ",Object(a.b)("a",{name:"h2o_wave.ui.toolbar_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"toolbar_card"),"(box:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"], secondary_items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, overflow_items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.ToolbarCard",href:"types#h2o_wave.types.ToolbarCard"},"ToolbarCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing a toolbar."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"Items to render."),Object(a.b)("dt",null,Object(a.b)("code",null,"secondary_items")),Object(a.b)("dd",null,"Items to render on the right side (or left, in RTL)."),Object(a.b)("dt",null,Object(a.b)("code",null,"overflow_items")),Object(a.b)("dd",null,"Items to render in an overflow menu."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ToolbarCard",href:"types#h2o_wave.types.ToolbarCard"},"ToolbarCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"vega_card"},"vega_card ",Object(a.b)("a",{name:"h2o_wave.ui.vega_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"vega_card"),"(box:\xa0str, title:\xa0str, specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.VegaCard",href:"types#h2o_wave.types.VegaCard"},"VegaCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing a Vega-lite plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title of this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"specification")),Object(a.b)("dd",null,"The Vega-lite specification."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for the plot, if any."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.VegaCard",href:"types#h2o_wave.types.VegaCard"},"VegaCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"vega_visualization"},"vega_visualization ",Object(a.b)("a",{name:"h2o_wave.ui.vega_visualization"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"vega_visualization"),"(specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a Vega-lite plot for display inside a form."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"specification")),Object(a.b)("dd",null,"The Vega-lite specification."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for the plot, if any."),Object(a.b)("dt",null,Object(a.b)("code",null,"width")),Object(a.b)("dd",null,"The width of the visualization. Defaults to 100%."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The height of the visualization. Defaults to 300px."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"types#h2o_wave.types.VegaVisualization"},"VegaVisualization"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"visualization"},"visualization ",Object(a.b)("a",{name:"h2o_wave.ui.visualization"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"visualization"),"(plot:\xa0",Object(a.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot"),", data:\xa0Union[dict,\xa0str], width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a visualization for display inside a form."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"plot")),Object(a.b)("dd",null,"The plot to be rendered in this visualization."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this visualization."),Object(a.b)("dt",null,Object(a.b)("code",null,"width")),Object(a.b)("dd",null,"The width of the visualization. Defaults to 100%."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The hight of the visualization. Defaults to 300px."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Visualization",href:"types#h2o_wave.types.Visualization"},"Visualization"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"wide_bar_stat_card"},"wide_bar_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.wide_bar_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"wide_bar_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.WideBarStatCard",href:"types#h2o_wave.types.WideBarStatCard"},"WideBarStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress bar."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"The value of the progress bar, between 0 and 1."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The color of the progress bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.WideBarStatCard",href:"types#h2o_wave.types.WideBarStatCard"},"WideBarStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"wide_gauge_stat_card"},"wide_gauge_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.wide_gauge_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"wide_gauge_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.WideGaugeStatCard",href:"types#h2o_wave.types.WideGaugeStatCard"},"WideGaugeStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"The value of the progress gauge, between 0 and 1."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The color of the progress gauge."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.WideGaugeStatCard",href:"types#h2o_wave.types.WideGaugeStatCard"},"WideGaugeStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"wide_series_stat_card"},"wide_series_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.wide_series_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"wide_series_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.WideSeriesStatCard",href:"types#h2o_wave.types.WideSeriesStatCard"},"WideSeriesStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a series plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed below the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_data")),Object(a.b)("dd",null,"The plot's data."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_value")),Object(a.b)("dd",null,"The data field to use for y-axis values."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_zero_value")),Object(a.b)("dd",null,"The base value to use for each y-axis mark. Set this to ",Object(a.b)("code",null,"0")," if you want to pin the x-axis at ",Object(a.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_category")),Object(a.b)("dd",null,"The data field to use for x-axis values (ignored if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"area"),"; must be provided if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"interval"),"). Defaults to 'x'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_type")),Object(a.b)("dd",null,"The type of plot. Defaults to ",Object(a.b)("code",null,"area"),". One of 'area', 'interval'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_curve")),Object(a.b)("dd",null,"The plot's curve style. Defaults to ",Object(a.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The plot's color."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.WideSeriesStatCard",href:"types#h2o_wave.types.WideSeriesStatCard"},"WideSeriesStatCard"))," instance.")))))}s.isMDXComponent=!0},290:function(e,t,l){"use strict";l.d(t,"a",(function(){return r})),l.d(t,"b",(function(){return O}));var n=l(0),b=l.n(n);function a(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function o(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),l.push.apply(l,n)}return l}function c(e){for(var t=1;t=0||(b[l]=e[l]);return b}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(b[l]=e[l])}return b}var i=b.a.createContext({}),s=function(e){var t=b.a.useContext(i),l=t;return e&&(l="function"==typeof e?e(t):c(c({},t),e)),l},r=function(e){var t=s(e.components);return b.a.createElement(i.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return b.a.createElement(b.a.Fragment,{},t)}},p=b.a.forwardRef((function(e,t){var l=e.components,n=e.mdxType,a=e.originalType,o=e.parentName,i=d(e,["components","mdxType","originalType","parentName"]),r=s(l),p=n,O=r["".concat(o,".").concat(p)]||r[p]||u[p]||a;return l?b.a.createElement(O,c(c({ref:t},i),{},{components:l})):b.a.createElement(O,c({ref:t},i))}));function O(e,t){var l=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=l.length,o=new Array(a);o[0]=p;var c={};for(var d in t)hasOwnProperty.call(t,d)&&(c[d]=t[d]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var i=2;i=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},l),{},{components:r})):a.a.createElement(m,i({ref:t},l))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},l),{},{components:r})):a.a.createElement(m,i({ref:t},l))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var l=2;l=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=o.a.createContext({}),u=function(e){var t=o.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,d=s["".concat(i,".").concat(f)]||s[f]||m[f]||a;return n?o.a.createElement(d,l(l({ref:t},c),{},{components:n})):o.a.createElement(d,l({ref:t},c))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=f;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=o.a.createContext({}),u=function(e){var t=o.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,d=s["".concat(i,".").concat(f)]||s[f]||m[f]||a;return n?o.a.createElement(d,l(l({ref:t},c),{},{components:n})):o.a.createElement(d,l({ref:t},c))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=f;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),m=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},p=function(e){var t=m(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=m(r),d=n,f=p["".concat(l,".").concat(d)]||p[d]||u[d]||o;return r?a.a.createElement(f,i(i({ref:t},c),{},{components:r})):a.a.createElement(f,i({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),m=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},p=function(e){var t=m(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=m(r),d=n,f=p["".concat(l,".").concat(d)]||p[d]||u[d]||o;return r?a.a.createElement(f,i(i({ref:t},c),{},{components:r})):a.a.createElement(f,i({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var c=2;c=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var J=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var E=r.a.createContext({}),S=function(e){var n=r.a.useContext(E),t=n;return e&&(t="function"==typeof e?e(n):k(k({},n),e)),t},I=function(e){var n=S(e.components);return r.a.createElement(E.Provider,{value:n},e.children)},o={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},l=r.a.forwardRef((function(e,n){var t=e.components,i=e.mdxType,J=e.originalType,A=e.parentName,E=a(e,["components","mdxType","originalType","parentName"]),I=S(t),l=i,g=I["".concat(A,".").concat(l)]||I[l]||o[l]||J;return t?r.a.createElement(g,k(k({ref:n},E),{},{components:t})):r.a.createElement(g,k({ref:n},E))}));function g(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var J=t.length,A=new Array(J);A[0]=l;var k={};for(var a in n)hasOwnProperty.call(n,a)&&(k[a]=n[a]);k.originalType=e,k.mdxType="string"==typeof e?e:i,A[1]=k;for(var E=2;E=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var J=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var E=r.a.createContext({}),S=function(e){var n=r.a.useContext(E),t=n;return e&&(t="function"==typeof e?e(n):k(k({},n),e)),t},I=function(e){var n=S(e.components);return r.a.createElement(E.Provider,{value:n},e.children)},o={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},l=r.a.forwardRef((function(e,n){var t=e.components,i=e.mdxType,J=e.originalType,A=e.parentName,E=a(e,["components","mdxType","originalType","parentName"]),I=S(t),l=i,g=I["".concat(A,".").concat(l)]||I[l]||o[l]||J;return t?r.a.createElement(g,k(k({ref:n},E),{},{components:t})):r.a.createElement(g,k({ref:n},E))}));function g(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var J=t.length,A=new Array(J);A[0]=l;var k={};for(var a in n)hasOwnProperty.call(n,a)&&(k[a]=n[a]);k.originalType=e,k.mdxType="string"==typeof e?e:i,A[1]=k;for(var E=2;E=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var s=i.a.createContext({}),p=function(e){var r=i.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):l(l({},r),e)),t},u=function(e){var r=p(e.components);return i.a.createElement(s.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return i.a.createElement(i.a.Fragment,{},r)}},h=i.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),u=p(t),h=n,b=u["".concat(c,".").concat(h)]||u[h]||d[h]||a;return t?i.a.createElement(b,l(l({ref:r},s),{},{components:t})):i.a.createElement(b,l({ref:r},s))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var a=t.length,c=new Array(a);c[0]=h;var l={};for(var o in r)hasOwnProperty.call(r,o)&&(l[o]=r[o]);l.originalType=e,l.mdxType="string"==typeof e?e:n,c[1]=l;for(var s=2;s=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var s=i.a.createContext({}),p=function(e){var r=i.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):l(l({},r),e)),t},u=function(e){var r=p(e.components);return i.a.createElement(s.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return i.a.createElement(i.a.Fragment,{},r)}},h=i.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),u=p(t),h=n,b=u["".concat(c,".").concat(h)]||u[h]||d[h]||a;return t?i.a.createElement(b,l(l({ref:r},s),{},{components:t})):i.a.createElement(b,l({ref:r},s))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var a=t.length,c=new Array(a);c[0]=h;var l={};for(var o in r)hasOwnProperty.call(r,o)&&(l[o]=r[o]);l.originalType=e,l.mdxType="string"==typeof e?e:n,c[1]=l;for(var s=2;s=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var m=o.a.createContext({}),p=function(e){var n=o.a.useContext(m),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},s=function(e){var n=p(e.components);return o.a.createElement(m.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},d=o.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),s=p(t),d=a,b=s["".concat(c,".").concat(d)]||s[d]||u[d]||r;return t?o.a.createElement(b,i(i({ref:n},m),{},{components:t})):o.a.createElement(b,i({ref:n},m))}));function b(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var r=t.length,c=new Array(r);c[0]=d;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:a,c[1]=i;for(var m=2;m=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var m=o.a.createContext({}),p=function(e){var n=o.a.useContext(m),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},s=function(e){var n=p(e.components);return o.a.createElement(m.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},d=o.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),s=p(t),d=a,b=s["".concat(c,".").concat(d)]||s[d]||u[d]||r;return t?o.a.createElement(b,i(i({ref:n},m),{},{components:t})):o.a.createElement(b,i({ref:n},m))}));function b(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var r=t.length,c=new Array(r);c[0]=d;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:a,c[1]=i;for(var m=2;m=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var b=n.a.createContext({}),p=function(e){var t=n.a.useContext(b),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},c=function(e){var t=p(e.components);return n.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,b=s(e,["components","mdxType","originalType","parentName"]),c=p(r),d=a,h=c["".concat(l,".").concat(d)]||c[d]||u[d]||o;return r?n.a.createElement(h,i(i({ref:t},b),{},{components:r})):n.a.createElement(h,i({ref:t},b))}));function h(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:a,l[1]=i;for(var b=2;b=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var b=n.a.createContext({}),p=function(e){var t=n.a.useContext(b),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},c=function(e){var t=p(e.components);return n.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,b=s(e,["components","mdxType","originalType","parentName"]),c=p(r),d=a,h=c["".concat(l,".").concat(d)]||c[d]||u[d]||o;return r?n.a.createElement(h,i(i({ref:t},b),{},{components:r})):n.a.createElement(h,i({ref:t},b))}));function h(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:a,l[1]=i;for(var b=2;b=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),p=function(e){var t=i.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},b=function(e){var t=p(e.components);return i.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},m=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,r=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),b=p(n),m=a,d=b["".concat(r,".").concat(m)]||b[m]||u[m]||o;return n?i.a.createElement(d,s(s({ref:t},l),{},{components:n})):i.a.createElement(d,s({ref:t},l))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,r=new Array(o);r[0]=m;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:a,r[1]=s;for(var l=2;l=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),p=function(e){var t=i.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},b=function(e){var t=p(e.components);return i.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},m=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,r=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),b=p(n),m=a,d=b["".concat(r,".").concat(m)]||b[m]||u[m]||o;return n?i.a.createElement(d,s(s({ref:t},l),{},{components:n})):i.a.createElement(d,s({ref:t},l))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,r=new Array(o);r[0]=m;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:a,r[1]=s;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,c(c({ref:t},p),{},{components:n})):a.a.createElement(f,c({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,c(c({ref:t},p),{},{components:n})):a.a.createElement(f,c({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var p=n.a.createContext({}),s=function(e){var t=n.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},m=n.a.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),m=a,b=u["".concat(o,".").concat(m)]||u[m]||d[m]||i;return r?n.a.createElement(b,c(c({ref:t},p),{},{components:r})):n.a.createElement(b,c({ref:t},p))}));function b(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var p=2;p=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var p=n.a.createContext({}),s=function(e){var t=n.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},m=n.a.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),m=a,b=u["".concat(o,".").concat(m)]||u[m]||d[m]||i;return r?n.a.createElement(b,c(c({ref:t},p),{},{components:r})):n.a.createElement(b,c({ref:t},p))}));function b(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var p=2;p=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=o.a.createContext({}),s=function(e){var t=o.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},l=function(e){var t=s(e.components);return o.a.createElement(p.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,a=e.parentName,p=u(e,["components","mdxType","originalType","parentName"]),l=s(n),d=r,m=l["".concat(a,".").concat(d)]||l[d]||f[d]||i;return n?o.a.createElement(m,c(c({ref:t},p),{},{components:n})):o.a.createElement(m,c({ref:t},p))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,a=new Array(i);a[0]=d;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:r,a[1]=c;for(var p=2;p=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=o.a.createContext({}),s=function(e){var t=o.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},l=function(e){var t=s(e.components);return o.a.createElement(p.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,a=e.parentName,p=u(e,["components","mdxType","originalType","parentName"]),l=s(n),d=r,m=l["".concat(a,".").concat(d)]||l[d]||f[d]||i;return n?o.a.createElement(m,c(c({ref:t},p),{},{components:n})):o.a.createElement(m,c({ref:t},p))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,a=new Array(i);a[0]=d;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:r,a[1]=c;for(var p=2;p>>"'}),"from h2o_wave import site\npage = site['/hello']\n")),Object(o.b)("h3",{id:"grab-a-reference-to-our-card"},"Grab a reference to our card"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"quote = page['quote']\n")),Object(o.b)("h3",{id:"change-the-title"},"Change the title"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"quote.title = 'Hello Again!'\npage.save()\n")),Object(o.b)("p",null,Object(o.b)("img",{alt:"Hello World 2",src:a(503).default})),Object(o.b)("h3",{id:"change-the-content"},"Change the content"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),'quote.content = "D\'oh! - *Homer Simpson*"\npage.save()\n')),Object(o.b)("p",null,Object(o.b)("img",{alt:"Hello World 3",src:a(504).default})),Object(o.b)("h3",{id:"quit-your-repl"},"Quit your REPL"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"quit()\n")),Object(o.b)("h2",{id:"summary"},"Summary"),Object(o.b)("p",null,"What we just did - add content from one program and make edits to it from another - illustrates another important aspect of Wave's programming model: ",Object(o.b)("em",{parentName:"p"},"The Wave server retains content"),". Your ",Object(o.b)("inlineCode",{parentName:"p"},"hello_world.py")," program did its thing and exited. So did your REPL. But your content was retained for the viewing pleasure of future visitors to ",Object(o.b)("inlineCode",{parentName:"p"},"/hello"),". "),Object(o.b)("p",null,"Next, we'll take the principles we learned from this tutorial and apply it towards a supposedly spirited folk song involving arithmetic progressions."))}b.isMDXComponent=!0},287:function(e,t,a){"use strict";a.d(t,"a",(function(){return b})),a.d(t,"b",(function(){return h}));var n=a(0),r=a.n(n);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function c(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=r.a.createContext({}),s=function(e){var t=r.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},b=function(e){var t=s(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),b=s(a),u=n,h=b["".concat(c,".").concat(u)]||b[u]||d[u]||o;return a?r.a.createElement(h,l(l({ref:t},p),{},{components:a})):r.a.createElement(h,l({ref:t},p))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,c=new Array(o);c[0]=u;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l.mdxType="string"==typeof e?e:n,c[1]=l;for(var p=2;p>>"'}),"from h2o_wave import site\npage = site['/hello']\n")),Object(o.b)("h3",{id:"grab-a-reference-to-our-card"},"Grab a reference to our card"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"quote = page['quote']\n")),Object(o.b)("h3",{id:"change-the-title"},"Change the title"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"quote.title = 'Hello Again!'\npage.save()\n")),Object(o.b)("p",null,Object(o.b)("img",{alt:"Hello World 2",src:a(508).default})),Object(o.b)("h3",{id:"change-the-content"},"Change the content"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),'quote.content = "D\'oh! - *Homer Simpson*"\npage.save()\n')),Object(o.b)("p",null,Object(o.b)("img",{alt:"Hello World 3",src:a(509).default})),Object(o.b)("h3",{id:"quit-your-repl"},"Quit your REPL"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"quit()\n")),Object(o.b)("h2",{id:"summary"},"Summary"),Object(o.b)("p",null,"What we just did - add content from one program and make edits to it from another - illustrates another important aspect of Wave's programming model: ",Object(o.b)("em",{parentName:"p"},"The Wave server retains content"),". Your ",Object(o.b)("inlineCode",{parentName:"p"},"hello_world.py")," program did its thing and exited. So did your REPL. But your content was retained for the viewing pleasure of future visitors to ",Object(o.b)("inlineCode",{parentName:"p"},"/hello"),". "),Object(o.b)("p",null,"Next, we'll take the principles we learned from this tutorial and apply it towards a supposedly spirited folk song involving arithmetic progressions."))}b.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return b})),a.d(t,"b",(function(){return h}));var n=a(0),r=a.n(n);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function c(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=r.a.createContext({}),s=function(e){var t=r.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},b=function(e){var t=s(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),b=s(a),u=n,h=b["".concat(c,".").concat(u)]||b[u]||d[u]||o;return a?r.a.createElement(h,l(l({ref:t},p),{},{components:a})):r.a.createElement(h,l({ref:t},p))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,c=new Array(o);c[0]=u;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l.mdxType="string"==typeof e?e:n,c[1]=l;for(var p=2;p=0||(n[r]=e[r]);return n}(e,o);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var b=n.a.createContext({}),s=function(e){var o=n.a.useContext(b),r=o;return e&&(r="function"==typeof e?e(o):i(i({},o),e)),r},m=function(e){var o=s(e.components);return n.a.createElement(b.Provider,{value:o},e.children)},u={inlineCode:"code",wrapper:function(e){var o=e.children;return n.a.createElement(n.a.Fragment,{},o)}},p=n.a.forwardRef((function(e,o){var r=e.components,t=e.mdxType,a=e.originalType,c=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),m=s(r),p=t,d=m["".concat(c,".").concat(p)]||m[p]||u[p]||a;return r?n.a.createElement(d,i(i({ref:o},b),{},{components:r})):n.a.createElement(d,i({ref:o},b))}));function d(e,o){var r=arguments,t=o&&o.mdxType;if("string"==typeof e||t){var a=r.length,c=new Array(a);c[0]=p;var i={};for(var l in o)hasOwnProperty.call(o,l)&&(i[l]=o[l]);i.originalType=e,i.mdxType="string"==typeof e?e:t,c[1]=i;for(var b=2;b=0||(n[r]=e[r]);return n}(e,o);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var b=n.a.createContext({}),s=function(e){var o=n.a.useContext(b),r=o;return e&&(r="function"==typeof e?e(o):i(i({},o),e)),r},m=function(e){var o=s(e.components);return n.a.createElement(b.Provider,{value:o},e.children)},u={inlineCode:"code",wrapper:function(e){var o=e.children;return n.a.createElement(n.a.Fragment,{},o)}},p=n.a.forwardRef((function(e,o){var r=e.components,t=e.mdxType,a=e.originalType,c=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),m=s(r),p=t,d=m["".concat(c,".").concat(p)]||m[p]||u[p]||a;return r?n.a.createElement(d,i(i({ref:o},b),{},{components:r})):n.a.createElement(d,i({ref:o},b))}));function d(e,o){var r=arguments,t=o&&o.mdxType;if("string"==typeof e||t){var a=r.length,c=new Array(a);c[0]=p;var i={};for(var l in o)hasOwnProperty.call(o,l)&&(i[l]=o[l]);i.originalType=e,i.mdxType="string"==typeof e?e:t,c[1]=i;for(var b=2;b=0||(n[i]=e[i]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(n[i]=e[i])}return n}var s=n.a.createContext({}),R=function(e){var t=n.a.useContext(s),i=t;return e&&(i="function"==typeof e?e(t):d(d({},t),e)),i},l=function(e){var t=R(e.components);return n.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},m=n.a.forwardRef((function(e,t){var i=e.components,r=e.mdxType,a=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),l=R(i),m=r,u=l["".concat(o,".").concat(m)]||l[m]||f[m]||a;return i?n.a.createElement(u,d(d({ref:t},s),{},{components:i})):n.a.createElement(u,d({ref:t},s))}));function u(e,t){var i=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=i.length,o=new Array(a);o[0]=m;var d={};for(var c in t)hasOwnProperty.call(t,c)&&(d[c]=t[c]);d.originalType=e,d.mdxType="string"==typeof e?e:r,o[1]=d;for(var s=2;s \ No newline at end of file + + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/docs/index.html b/docs/index.html index fb2b00edb2..78c1155726 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,20 +6,20 @@ Hello from H2O Wave | H2O Wave - - - - - + + + + +
      -

      Realtime Web Apps and Dashboards for Python

      From the makers of H2O

      Get Started

      Know Python?

      No HTML, CSS, Javascript skills required. Build rich, interactive web apps using pure Python.

      Realtime Sync

      Broadcast live information, visualizations and graphics using Wave's low-latency realtime server.

      Collaborative Content

      Instant control over every connected web browser using a simple and intuitive programming model.

      Develop Quickly

      Preview your app live as you code. Dramatically reduce the time and effort to build web apps.

      Deploy Instantly

      Easily share your apps with end-users, get feedback, improve and iterate.

      Run Anywhere

      ~10MB static executables for Linux, Windows, OSX, BSD, Solaris on AMD64, 386, ARM, PPC. Run it on a RPi Zero for great good!

      +

      Realtime Web Apps and Dashboards for Python

      From the makers of H2O

      Get Started

      Know Python?

      No HTML, CSS, Javascript skills required. Build rich, interactive web apps using pure Python.

      Realtime Sync

      Broadcast live information, visualizations and graphics using Wave's low-latency realtime server.

      Collaborative Content

      Instant control over every connected web browser using a simple and intuitive programming model.

      Develop Quickly

      Preview your app live as you code. Dramatically reduce the time and effort to build web apps.

      Deploy Instantly

      Easily share your apps with end-users, get feedback, improve and iterate.

      Run Anywhere

      ~10MB static executables for Linux, Windows, OSX, BSD, Solaris on AMD64, 386, ARM, PPC. Run it on a RPi Zero for great good!

      - - - - - + + + + + \ No newline at end of file diff --git a/docs/main.64610da1.js b/docs/main.64610da1.js new file mode 100644 index 0000000000..03a4002cea --- /dev/null +++ b/docs/main.64610da1.js @@ -0,0 +1,2 @@ +/*! For license information please see main.64610da1.js.LICENSE.txt */ +(window.webpackJsonp=window.webpackJsonp||[]).push([[233],[function(e,t,n){"use strict";e.exports=n(30)},function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return w})),n.d(t,"c",(function(){return S})),n.d(t,"d",(function(){return C})),n.d(t,"e",(function(){return g})),n.d(t,"f",(function(){return F})),n.d(t,"g",(function(){return L})),n.d(t,"h",(function(){return v})),n.d(t,"i",(function(){return E})),n.d(t,"j",(function(){return O})),n.d(t,"k",(function(){return M})),n.d(t,"l",(function(){return z})),n.d(t,"m",(function(){return $})),n.d(t,"n",(function(){return U})),n.d(t,"o",(function(){return D}));var a=n(3),o=n(0),r=n.n(o),i=(n(7),n(5)),l=n(17),s=n(4),c=n(2),u=n(18),p=n.n(u),d=(n(22),n(6)),f=n(27),m=n.n(f),h=function(e){var t=Object(l.a)();return t.displayName=e,t}("Router-History"),v=function(e){var t=Object(l.a)();return t.displayName=e,t}("Router"),g=function(e){function t(t){var n;return(n=e.call(this,t)||this).state={location:t.history.location},n._isMounted=!1,n._pendingLocation=null,t.staticContext||(n.unlisten=t.history.listen((function(e){n._isMounted?n.setState({location:e}):n._pendingLocation=e}))),n}Object(a.a)(t,e),t.computeRootMatch=function(e){return{path:"/",url:"/",params:{},isExact:"/"===e}};var n=t.prototype;return n.componentDidMount=function(){this._isMounted=!0,this._pendingLocation&&this.setState({location:this._pendingLocation})},n.componentWillUnmount=function(){this.unlisten&&this.unlisten()},n.render=function(){return r.a.createElement(v.Provider,{value:{history:this.props.history,location:this.state.location,match:t.computeRootMatch(this.state.location.pathname),staticContext:this.props.staticContext}},r.a.createElement(h.Provider,{children:this.props.children||null,value:this.props.history}))},t}(r.a.Component);var b=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),o=0;o=0;d--){var f=i[d];"."===f?r(i,d):".."===f?(r(i,d),p++):p&&(r(i,d),p--)}if(!c)for(;p--;p)i.unshift("..");!c||""===i[0]||i[0]&&o(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};function l(e){return e.valueOf?e.valueOf():Object.prototype.valueOf.call(e)}var s=function e(t,n){if(t===n)return!0;if(null==t||null==n)return!1;if(Array.isArray(t))return Array.isArray(n)&&t.length===n.length&&t.every((function(t,a){return e(t,n[a])}));if("object"==typeof t||"object"==typeof n){var a=l(t),o=l(n);return a!==t||o!==n?e(a,o):Object.keys(Object.assign({},t,n)).every((function(a){return e(t[a],n[a])}))}return!1},c=n(4);function u(e){return"/"===e.charAt(0)?e:"/"+e}function p(e){return"/"===e.charAt(0)?e.substr(1):e}function d(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function f(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function m(e){var t=e.pathname,n=e.search,a=e.hash,o=t||"/";return n&&"?"!==n&&(o+="?"===n.charAt(0)?n:"?"+n),a&&"#"!==a&&(o+="#"===a.charAt(0)?a:"#"+a),o}function h(e,t,n,o){var r;"string"==typeof e?(r=function(e){var t=e||"/",n="",a="",o=t.indexOf("#");-1!==o&&(a=t.substr(o),t=t.substr(0,o));var r=t.indexOf("?");return-1!==r&&(n=t.substr(r),t=t.substr(0,r)),{pathname:t,search:"?"===n?"":n,hash:"#"===a?"":a}}(e)).state=t:(void 0===(r=Object(a.a)({},e)).pathname&&(r.pathname=""),r.search?"?"!==r.search.charAt(0)&&(r.search="?"+r.search):r.search="",r.hash?"#"!==r.hash.charAt(0)&&(r.hash="#"+r.hash):r.hash="",void 0!==t&&void 0===r.state&&(r.state=t));try{r.pathname=decodeURI(r.pathname)}catch(l){throw l instanceof URIError?new URIError('Pathname "'+r.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):l}return n&&(r.key=n),o?r.pathname?"/"!==r.pathname.charAt(0)&&(r.pathname=i(r.pathname,o.pathname)):r.pathname=o.pathname:r.pathname||(r.pathname="/"),r}function v(e,t){return e.pathname===t.pathname&&e.search===t.search&&e.hash===t.hash&&e.key===t.key&&s(e.state,t.state)}function g(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,a,o){if(null!=e){var r="function"==typeof e?e(t,n):e;"string"==typeof r?"function"==typeof a?a(r,o):o(!0):o(!1!==r)}else o(!0)},appendListener:function(e){var n=!0;function a(){n&&e.apply(void 0,arguments)}return t.push(a),function(){n=!1,t=t.filter((function(e){return e!==a}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),a=0;at?n.splice(t,n.length-t,o):n.push(o),p({action:a,location:o,index:t,entries:n})}}))},replace:function(e,t){var a="REPLACE",o=h(e,t,d(),w.location);u.confirmTransitionTo(o,a,n,(function(e){e&&(w.entries[w.index]=o,p({action:a,location:o}))}))},go:x,goBack:function(){x(-1)},goForward:function(){x(1)},canGo:function(e){var t=w.index+e;return t>=0&&t=0||(o[n]=e[n]);return o}n.d(t,"a",(function(){return a}))},function(e,t,n){e.exports=n(34)()},function(e,t,n){"use strict";n.d(t,"a",(function(){return l})),n.d(t,"b",(function(){return s}));var a=n(1),o=n(2),r=n(0),i=n.n(r);function l(e,t,n){return void 0===n&&(n=[]),e.some((function(e){var o=e.path?Object(a.j)(t,e):n.length?n[n.length-1].match:a.e.computeRootMatch(t);return o&&(n.push({route:e,match:o}),e.routes&&l(e.routes,t,n)),o})),n}function s(e,t,n){return void 0===t&&(t={}),void 0===n&&(n={}),e?i.a.createElement(a.g,n,e.map((function(e,n){return i.a.createElement(a.d,{key:e.key||n,path:e.path,exact:e.exact,strict:e.strict,render:function(n){return e.render?e.render(Object(o.a)({},n,{},t,{route:e})):i.a.createElement(e.component,Object(o.a)({},n,t,{route:e}))}})}))):null}},function(e,t,n){"use strict";n.r(t),t.default={title:"H2O Wave",tagline:"From the makers of H2O",url:"https://h2oai.github.io/wave/",baseUrl:"/wave/",onBrokenLinks:"throw",favicon:"img/favicon.ico",organizationName:"h2oai",projectName:"wave",themeConfig:{prism:{additionalLanguages:["toml"]},navbar:{title:"H2O Wave",logo:{alt:"H2O Wave",src:"img/logo.svg"},items:[{to:"docs/examples",label:"Gallery",position:"left"},{to:"docs/getting-started",label:"Get Started",position:"left"},{to:"docs/guide",label:"Guide",position:"left"},{to:"docs/enterprise",label:"Enterprise",position:"left"},{to:"docs/api/index",label:"API",position:"left"},{to:"https://github.com/h2oai/wave/releases/latest",label:"Download",position:"right"},{href:"https://github.com/h2oai/wave",label:"GitHub",position:"right"}],hideOnScroll:!1},footer:{style:"dark",links:[{title:"Learn",items:[{label:"Gallery",to:"docs/examples"},{label:"Get Started",to:"docs/getting-started",activeBasePath:"docs"},{label:"Guide",to:"docs/guide"},{label:"Enterprise",to:"docs/enterprise"},{label:"API",to:"docs/api/index"}]},{title:"Community",items:[{label:"Stack Overflow",href:"https://stackoverflow.com/questions/tagged/h2o-wave"},{label:"Twitter",href:"https://twitter.com/h2oai"}]},{title:"More",items:[{label:"Download",href:"https://github.com/h2oai/wave/releases/latest"},{label:"GitHub",href:"https://github.com/h2oai/wave"}]}],copyright:"Copyright \xa9 2020 H2O.ai, Inc."},colorMode:{defaultMode:"light",disableSwitch:!1,respectPrefersColorScheme:!1,switchConfig:{darkIcon:"\ud83c\udf1c",darkIconStyle:{},lightIcon:"\ud83c\udf1e",lightIconStyle:{}}},metadatas:[]},presets:[["@docusaurus/preset-classic",{docs:{sidebarPath:"/home/elp/git/wave/website/sidebars.js",editUrl:"https://github.com/h2oai/wave/edit/master/website/"},blog:{showReadingTime:!0,editUrl:"https://github.com/facebook/docusaurus/edit/master/website/blog/"},theme:{customCss:"/home/elp/git/wave/website/src/css/custom.css"}}]],onDuplicateRoutes:"warn",customFields:{},plugins:[],themes:[],titleDelimiter:"|"}},function(e,t,n){"use strict";const a=!("undefined"==typeof window||!window.document||!window.document.createElement),o={canUseDOM:a,canUseEventListeners:a&&!(!window.addEventListener&&!window.attachEvent),canUseIntersectionObserver:a&&"IntersectionObserver"in window,canUseViewport:a&&!!window.screen};t.a=o},function(e){e.exports=JSON.parse('{"/wave/-1a9":{"component":"c4f5d8e4","config":"5e9f5e1a"},"/wave/blog-318":{"component":"a6aa9e1f","items":[{"content":"af172acd"},{"content":"3570154c"},{"content":"8e9f0a8a"}],"metadata":"0eb58673"},"/wave/blog/hello-world-652":{"component":"ccc49370","content":"d610846f"},"/wave/blog/hola-a3c":{"component":"ccc49370","content":"bdd709f1"},"/wave/blog/tags-f9b":{"component":"01a85c17","tags":"121dd878"},"/wave/blog/tags/docusaurus-0d7":{"component":"6875c492","items":[{"content":"af172acd"},{"content":"3570154c"},{"content":"8e9f0a8a"}],"metadata":"60759c05"},"/wave/blog/tags/facebook-1b4":{"component":"6875c492","items":[{"content":"af172acd"}],"metadata":"4657d646"},"/wave/blog/tags/hello-719":{"component":"6875c492","items":[{"content":"af172acd"},{"content":"3570154c"}],"metadata":"4fc0cd6f"},"/wave/blog/tags/hola-5a7":{"component":"6875c492","items":[{"content":"8e9f0a8a"}],"metadata":"93896215"},"/wave/blog/welcome-2ca":{"component":"ccc49370","content":"2868cdab"},"/wave/docs-0fd":{"component":"1be78505","versionMetadata":"935f2afb"},"/wave/docs/_start_q-1b6":{"component":"17896441","content":"15a78352"},"/wave/docs/api/autoreload-136":{"component":"17896441","content":"28283d16"},"/wave/docs/api/core-506":{"component":"17896441","content":"36fe3260"},"/wave/docs/api/db-270":{"component":"17896441","content":"a50fe136"},"/wave/docs/api/graphics-576":{"component":"17896441","content":"7f8f4b62"},"/wave/docs/api/index-d57":{"component":"17896441","content":"5e8c322a"},"/wave/docs/api/server-e76":{"component":"17896441","content":"296a8b4f"},"/wave/docs/api/test-5bd":{"component":"17896441","content":"430c4fb3"},"/wave/docs/api/types-82d":{"component":"17896441","content":"b999a6e4"},"/wave/docs/api/ui-1df":{"component":"17896441","content":"f151ab1a"},"/wave/docs/apps-b2f":{"component":"17896441","content":"d3f54ca5"},"/wave/docs/architecture-1aa":{"component":"17896441","content":"5281b7a2"},"/wave/docs/arguments-dd1":{"component":"17896441","content":"65b8ef03"},"/wave/docs/backup-06a":{"component":"17896441","content":"1b0f8c91"},"/wave/docs/browser-testing-85e":{"component":"17896441","content":"3713dbfc"},"/wave/docs/buffers-70a":{"component":"17896441","content":"649e08dd"},"/wave/docs/cards-4c7":{"component":"17896441","content":"4f6dabb0"},"/wave/docs/change-log-095":{"component":"17896441","content":"3b64911a"},"/wave/docs/components-2bb":{"component":"17896441","content":"1f7c204c"},"/wave/docs/configuration-e5a":{"component":"17896441","content":"9ed00105"},"/wave/docs/contributing-b63":{"component":"17896441","content":"4d54d076"},"/wave/docs/development-e3f":{"component":"17896441","content":"8f030830"},"/wave/docs/enterprise/-197":{"component":"17896441","content":"ca1ac85d"},"/wave/docs/enterprise/basic-concepts-9ca":{"component":"17896441","content":"6ee3bac7"},"/wave/docs/enterprise/developer-guide-f02":{"component":"17896441","content":"1375ade1"},"/wave/docs/examples-247":{"component":"17896441","content":"bf614533"},"/wave/docs/examples/breadcrumbs-42a":{"component":"17896441","content":"c07c3c71"},"/wave/docs/examples/button-d1c":{"component":"17896441","content":"879fc8a6"},"/wave/docs/examples/buttons-4f3":{"component":"17896441","content":"452608cb"},"/wave/docs/examples/card-menu-52c":{"component":"17896441","content":"9152460a"},"/wave/docs/examples/checkbox-8fd":{"component":"17896441","content":"8c12d624"},"/wave/docs/examples/checklist-35d":{"component":"17896441","content":"7d1cd1c9"},"/wave/docs/examples/choice-group-f4d":{"component":"17896441","content":"82f75f63"},"/wave/docs/examples/color-picker-014":{"component":"17896441","content":"4612f97b"},"/wave/docs/examples/combobox-fe1":{"component":"17896441","content":"fd056868"},"/wave/docs/examples/counter-broadcast-5e7":{"component":"17896441","content":"917fcb62"},"/wave/docs/examples/counter-global-921":{"component":"17896441","content":"dceb90d2"},"/wave/docs/examples/counter-multicast-d7a":{"component":"17896441","content":"bd7ed1d7"},"/wave/docs/examples/counter-unicast-823":{"component":"17896441","content":"47b3e1f7"},"/wave/docs/examples/dashboard-613":{"component":"17896441","content":"0965cdf6"},"/wave/docs/examples/date-picker-1b7":{"component":"17896441","content":"faf81df8"},"/wave/docs/examples/date-picker-trigger-8c1":{"component":"17896441","content":"fe4d4432"},"/wave/docs/examples/dropdown-0e1":{"component":"17896441","content":"b140a32d"},"/wave/docs/examples/file-upload-429":{"component":"17896441","content":"3aa768f5"},"/wave/docs/examples/form-8d7":{"component":"17896441","content":"883d6399"},"/wave/docs/examples/form-frame-078":{"component":"17896441","content":"e4e8fb51"},"/wave/docs/examples/form-frame-path-5e9":{"component":"17896441","content":"77770fc3"},"/wave/docs/examples/form-markup-bf4":{"component":"17896441","content":"41849bc6"},"/wave/docs/examples/form-menu-035":{"component":"17896441","content":"7ca2f128"},"/wave/docs/examples/form-template-6f7":{"component":"17896441","content":"a9331674"},"/wave/docs/examples/frame-6ff":{"component":"17896441","content":"b1e50d5a"},"/wave/docs/examples/frame-path-f9c":{"component":"17896441","content":"746a1919"},"/wave/docs/examples/glider-gun-b5d":{"component":"17896441","content":"18fdb351"},"/wave/docs/examples/graphics-clock-3a3":{"component":"17896441","content":"6ce0e474"},"/wave/docs/examples/graphics-hilbert-ecc":{"component":"17896441","content":"f349fb86"},"/wave/docs/examples/graphics-path-8af":{"component":"17896441","content":"7ecd2c5c"},"/wave/docs/examples/graphics-primitives-169":{"component":"17896441","content":"8954e356"},"/wave/docs/examples/graphics-spline-4c7":{"component":"17896441","content":"b18fb770"},"/wave/docs/examples/graphics-turtle-134":{"component":"17896441","content":"9363aca1"},"/wave/docs/examples/hash-routing-600":{"component":"17896441","content":"f132454a"},"/wave/docs/examples/header-2b4":{"component":"17896441","content":"207f87c1"},"/wave/docs/examples/hello-world-49b":{"component":"17896441","content":"a8b2a833"},"/wave/docs/examples/image-5b5":{"component":"17896441","content":"b81c5e46"},"/wave/docs/examples/issue-tracker-073":{"component":"17896441","content":"549ea605"},"/wave/docs/examples/label-15f":{"component":"17896441","content":"10172759"},"/wave/docs/examples/layout-342":{"component":"17896441","content":"dc705eb8"},"/wave/docs/examples/layout-size-4bf":{"component":"17896441","content":"f3473c5b"},"/wave/docs/examples/link-bc8":{"component":"17896441","content":"ecdac497"},"/wave/docs/examples/markdown-d09":{"component":"17896441","content":"997fea1d"},"/wave/docs/examples/markdown-data-2ac":{"component":"17896441","content":"b8435c12"},"/wave/docs/examples/markup-180":{"component":"17896441","content":"6d36af6b"},"/wave/docs/examples/message-bar-97f":{"component":"17896441","content":"1ae86ebe"},"/wave/docs/examples/meta-notification-ae1":{"component":"17896441","content":"e7ba74f4"},"/wave/docs/examples/meta-redirect-f63":{"component":"17896441","content":"3584c003"},"/wave/docs/examples/meta-refresh-0b0":{"component":"17896441","content":"b9e4d6e6"},"/wave/docs/examples/meta-title-a2d":{"component":"17896441","content":"f09ebdf1"},"/wave/docs/examples/nav-50d":{"component":"17896441","content":"c1570962"},"/wave/docs/examples/picker-396":{"component":"17896441","content":"4ab7b8a0"},"/wave/docs/examples/picker-selection-015":{"component":"17896441","content":"1a4f1376"},"/wave/docs/examples/pixel-art-588":{"component":"17896441","content":"37382beb"},"/wave/docs/examples/plot-altair-9c7":{"component":"17896441","content":"2673e11f"},"/wave/docs/examples/plot-area-e26":{"component":"17896441","content":"31f8b56c"},"/wave/docs/examples/plot-area-groups-ae1":{"component":"17896441","content":"53da2547"},"/wave/docs/examples/plot-area-line-3a6":{"component":"17896441","content":"bb5446ac"},"/wave/docs/examples/plot-area-line-groups-49e":{"component":"17896441","content":"7d744a8f"},"/wave/docs/examples/plot-area-line-smooth-8df":{"component":"17896441","content":"f846e950"},"/wave/docs/examples/plot-area-negative-5bf":{"component":"17896441","content":"273cfbdf"},"/wave/docs/examples/plot-area-range-5c0":{"component":"17896441","content":"126e0b0e"},"/wave/docs/examples/plot-area-smooth-cb7":{"component":"17896441","content":"718f151f"},"/wave/docs/examples/plot-area-stacked-85c":{"component":"17896441","content":"97d9aba4"},"/wave/docs/examples/plot-axis-title-ebc":{"component":"17896441","content":"c0ac41fc"},"/wave/docs/examples/plot-bokeh-75a":{"component":"17896441","content":"109e456e"},"/wave/docs/examples/plot-d3-d44":{"component":"17896441","content":"1486e3bc"},"/wave/docs/examples/plot-form-d4d":{"component":"17896441","content":"48786391"},"/wave/docs/examples/plot-histogram-cc7":{"component":"17896441","content":"eb2bb38c"},"/wave/docs/examples/plot-interval-8cf":{"component":"17896441","content":"12e676cf"},"/wave/docs/examples/plot-interval-annotation-977":{"component":"17896441","content":"aa7f648d"},"/wave/docs/examples/plot-interval-annotation-transpose-65e":{"component":"17896441","content":"4e3b2ad1"},"/wave/docs/examples/plot-interval-groups-4cb":{"component":"17896441","content":"c1cf1fe4"},"/wave/docs/examples/plot-interval-groups-transpose-646":{"component":"17896441","content":"97e78655"},"/wave/docs/examples/plot-interval-helix-3ee":{"component":"17896441","content":"e96704c5"},"/wave/docs/examples/plot-interval-labels-5dc":{"component":"17896441","content":"8eaf94d7"},"/wave/docs/examples/plot-interval-polar-aeb":{"component":"17896441","content":"9a52a2f7"},"/wave/docs/examples/plot-interval-polar-stacked-978":{"component":"17896441","content":"2db704cb"},"/wave/docs/examples/plot-interval-range-0da":{"component":"17896441","content":"a8dc7269"},"/wave/docs/examples/plot-interval-range-transpose-0f2":{"component":"17896441","content":"bd0b0bbe"},"/wave/docs/examples/plot-interval-stacked-d35":{"component":"17896441","content":"22188a36"},"/wave/docs/examples/plot-interval-stacked-grouped-4dd":{"component":"17896441","content":"f1ec6cfa"},"/wave/docs/examples/plot-interval-stacked-grouped-transpose-d39":{"component":"17896441","content":"c7b62599"},"/wave/docs/examples/plot-interval-stacked-transpose-5fa":{"component":"17896441","content":"cd329814"},"/wave/docs/examples/plot-interval-theta-035":{"component":"17896441","content":"31c3c419"},"/wave/docs/examples/plot-interval-transpose-aae":{"component":"17896441","content":"ac27f894"},"/wave/docs/examples/plot-line-238":{"component":"17896441","content":"d05981be"},"/wave/docs/examples/plot-line-annotation-27b":{"component":"17896441","content":"e013439f"},"/wave/docs/examples/plot-line-groups-812":{"component":"17896441","content":"f21433ff"},"/wave/docs/examples/plot-line-labels-187":{"component":"17896441","content":"6c3eb428"},"/wave/docs/examples/plot-line-labels-no-overlap-d7f":{"component":"17896441","content":"3f5dd320"},"/wave/docs/examples/plot-line-labels-stroked-1e3":{"component":"17896441","content":"54aab825"},"/wave/docs/examples/plot-line-smooth-e21":{"component":"17896441","content":"c9e5c590"},"/wave/docs/examples/plot-matplotlib-366":{"component":"17896441","content":"e7c32899"},"/wave/docs/examples/plot-path-1d1":{"component":"17896441","content":"2fa9e1ff"},"/wave/docs/examples/plot-path-point-b35":{"component":"17896441","content":"de02e8e6"},"/wave/docs/examples/plot-path-smooth-46b":{"component":"17896441","content":"c87c151a"},"/wave/docs/examples/plot-plotly-470":{"component":"17896441","content":"aa9ca283"},"/wave/docs/examples/plot-point-c44":{"component":"17896441","content":"34cd3da4"},"/wave/docs/examples/plot-point-annotation-faf":{"component":"17896441","content":"ed3db3ec"},"/wave/docs/examples/plot-point-custom-fe9":{"component":"17896441","content":"190e4f21"},"/wave/docs/examples/plot-point-groups-3be":{"component":"17896441","content":"1ac8922b"},"/wave/docs/examples/plot-point-map-8f7":{"component":"17896441","content":"38067279"},"/wave/docs/examples/plot-point-shapes-086":{"component":"17896441","content":"4b953dd8"},"/wave/docs/examples/plot-point-sizes-a9d":{"component":"17896441","content":"1cc3ff79"},"/wave/docs/examples/plot-polygon-c78":{"component":"17896441","content":"a814b970"},"/wave/docs/examples/plot-step-c36":{"component":"17896441","content":"17b5adee"},"/wave/docs/examples/plot-step-after-afc":{"component":"17896441","content":"941b9d10"},"/wave/docs/examples/plot-step-before-b83":{"component":"17896441","content":"26907763"},"/wave/docs/examples/plot-vegalite-cf6":{"component":"17896441","content":"b22f7242"},"/wave/docs/examples/plot-vegalite-form-e1b":{"component":"17896441","content":"4104f38c"},"/wave/docs/examples/plot-vegalite-update-e40":{"component":"17896441","content":"3697284d"},"/wave/docs/examples/progress-b94":{"component":"17896441","content":"4784cd26"},"/wave/docs/examples/progress-update-122":{"component":"17896441","content":"c641a4e8"},"/wave/docs/examples/range-slider-82e":{"component":"17896441","content":"eec6e613"},"/wave/docs/examples/separator-daf":{"component":"17896441","content":"cc0ea0cf"},"/wave/docs/examples/slider-ae1":{"component":"17896441","content":"ca622d62"},"/wave/docs/examples/spinbox-309":{"component":"17896441","content":"d8689276"},"/wave/docs/examples/stat-large-5a2":{"component":"17896441","content":"ba1aeef8"},"/wave/docs/examples/stat-large-bar-927":{"component":"17896441","content":"692ea9bc"},"/wave/docs/examples/stat-small-1db":{"component":"17896441","content":"a54511d2"},"/wave/docs/examples/stat-small-series-area-4b9":{"component":"17896441","content":"f21d2ab0"},"/wave/docs/examples/stat-small-series-interval-44e":{"component":"17896441","content":"5e52c414"},"/wave/docs/examples/stat-tall-gauge-1b3":{"component":"17896441","content":"11e3ce2c"},"/wave/docs/examples/stat-tall-series-area-91c":{"component":"17896441","content":"9747bb1a"},"/wave/docs/examples/stat-tall-series-interval-0ac":{"component":"17896441","content":"424c54c2"},"/wave/docs/examples/stat-wide-bar-5f0":{"component":"17896441","content":"4f49ed83"},"/wave/docs/examples/stat-wide-gauge-515":{"component":"17896441","content":"5168cb29"},"/wave/docs/examples/stat-wide-series-area-9bc":{"component":"17896441","content":"79d0d182"},"/wave/docs/examples/stat-wide-series-interval-8d4":{"component":"17896441","content":"360edac9"},"/wave/docs/examples/stepper-394":{"component":"17896441","content":"8c8ea2c1"},"/wave/docs/examples/swatch-picker-6dc":{"component":"17896441","content":"1c59264e"},"/wave/docs/examples/tab-07b":{"component":"17896441","content":"661410ac"},"/wave/docs/examples/tab-delete-9c5":{"component":"17896441","content":"58b13b12"},"/wave/docs/examples/tab-link-478":{"component":"17896441","content":"bdc330a7"},"/wave/docs/examples/tab-routing-6e6":{"component":"17896441","content":"36db7894"},"/wave/docs/examples/table-63d":{"component":"17896441","content":"135cee2a"},"/wave/docs/examples/table-download-667":{"component":"17896441","content":"88c2f924"},"/wave/docs/examples/table-filter-185":{"component":"17896441","content":"600ae505"},"/wave/docs/examples/table-filter-backend-7d8":{"component":"17896441","content":"887b127f"},"/wave/docs/examples/table-groupby-2d7":{"component":"17896441","content":"6eb0e506"},"/wave/docs/examples/table-markdown-c18":{"component":"17896441","content":"0f2a58c8"},"/wave/docs/examples/table-search-cef":{"component":"17896441","content":"c0b6bb44"},"/wave/docs/examples/table-select-2b7":{"component":"17896441","content":"d8aa093c"},"/wave/docs/examples/table-sort-3f0":{"component":"17896441","content":"15837ef3"},"/wave/docs/examples/tabs-2de":{"component":"17896441","content":"8542acf3"},"/wave/docs/examples/template-7a0":{"component":"17896441","content":"2bf08973"},"/wave/docs/examples/template-data-998":{"component":"17896441","content":"d4ee2b4f"},"/wave/docs/examples/text-bf6":{"component":"17896441","content":"50b74c5f"},"/wave/docs/examples/text-sizes-25f":{"component":"17896441","content":"e32c5859"},"/wave/docs/examples/textbox-d9f":{"component":"17896441","content":"7c1cba9e"},"/wave/docs/examples/textbox-trigger-381":{"component":"17896441","content":"35dabcf3"},"/wave/docs/examples/todo-28c":{"component":"17896441","content":"bbdd3825"},"/wave/docs/examples/toggle-75f":{"component":"17896441","content":"b9f028e1"},"/wave/docs/examples/toolbar-7fe":{"component":"17896441","content":"f60be60c"},"/wave/docs/examples/toolbar-routing-1ae":{"component":"17896441","content":"948118d6"},"/wave/docs/examples/upload-d1b":{"component":"17896441","content":"0923c366"},"/wave/docs/examples/upload-async-476":{"component":"17896441","content":"d145135f"},"/wave/docs/examples/upload-download-70e":{"component":"17896441","content":"c10c720e"},"/wave/docs/examples/upload-ui-550":{"component":"17896441","content":"ce88eaaa"},"/wave/docs/examples/wizard-730":{"component":"17896441","content":"174d8305"},"/wave/docs/expressions-7e5":{"component":"17896441","content":"3b464fa6"},"/wave/docs/files-eb6":{"component":"17896441","content":"854481fc"},"/wave/docs/getting-started-cdc":{"component":"17896441","content":"d589d3a7"},"/wave/docs/graphics-23e":{"component":"17896441","content":"6264312d"},"/wave/docs/guide-de8":{"component":"17896441","content":"a8bb5334"},"/wave/docs/installation-5c8":{"component":"17896441","content":"3b8c55ea"},"/wave/docs/layout-362":{"component":"17896441","content":"472f8a66"},"/wave/docs/logging-63d":{"component":"17896441","content":"3abe8fb9"},"/wave/docs/migrating-0-830":{"component":"17896441","content":"0fd1debb"},"/wave/docs/pages-2dc":{"component":"17896441","content":"a64331b1"},"/wave/docs/plotting-2c7":{"component":"17896441","content":"e8c1c6e8"},"/wave/docs/realtime-374":{"component":"17896441","content":"6405c95c"},"/wave/docs/routing-f63":{"component":"17896441","content":"f811e444"},"/wave/docs/scripts-cee":{"component":"17896441","content":"e833177e"},"/wave/docs/security-c61":{"component":"17896441","content":"db32d859"},"/wave/docs/state-fcc":{"component":"17896441","content":"5a34328a"},"/wave/docs/testing-1ff":{"component":"17896441","content":"fbe93038"},"/wave/docs/tour-6aa":{"component":"17896441","content":"47a365f9"},"/wave/docs/tutorial-beer-f5d":{"component":"17896441","content":"f7ea47c5"},"/wave/docs/tutorial-counter-da3":{"component":"17896441","content":"950656ac"},"/wave/docs/tutorial-hello-0f5":{"component":"17896441","content":"fcfc3752"},"/wave/docs/tutorial-monitor-390":{"component":"17896441","content":"0a6c0f5b"},"/wave/docs/tutorial-todo-762":{"component":"17896441","content":"996e93c8"}}')},function(e,t,n){var a,o;void 0===(o="function"==typeof(a=function(){var e,t,n={version:"0.2.0"},a=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
      '};function o(e,t,n){return en?n:e}function r(e){return 100*(-1+e)}function i(e,t,n){var o;return(o="translate3d"===a.positionUsing?{transform:"translate3d("+r(e)+"%,0,0)"}:"translate"===a.positionUsing?{transform:"translate("+r(e)+"%,0)"}:{"margin-left":r(e)+"%"}).transition="all "+t+"ms "+n,o}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(a[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=o(e,a.minimum,1),n.status=1===e?null:e;var r=n.render(!t),c=r.querySelector(a.barSelector),u=a.speed,p=a.easing;return r.offsetWidth,l((function(t){""===a.positionUsing&&(a.positionUsing=n.getPositioningCSS()),s(c,i(e,u,p)),1===e?(s(r,{transition:"none",opacity:1}),r.offsetWidth,setTimeout((function(){s(r,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),a.trickleSpeed)};return a.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*o(Math.random()*t,.1,.95)),t=o(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*a.trickleRate)},e=0,t=0,n.promise=function(a){return a&&"resolved"!==a.state()?(0===t&&n.start(),e++,t++,a.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=a.template;var o,i=t.querySelector(a.barSelector),l=e?"-100":r(n.status||0),c=document.querySelector(a.parent);return s(i,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),a.showSpinner||(o=t.querySelector(a.spinnerSelector))&&f(o),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){p(document.documentElement,"nprogress-busy"),p(document.querySelector(a.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function a(t){var n=document.body.style;if(t in n)return t;for(var a,o=e.length,r=t.charAt(0).toUpperCase()+t.slice(1);o--;)if((a=e[o]+r)in n)return a;return t}function o(e){return e=n(e),t[e]||(t[e]=a(e))}function r(e,t,n){t=o(t),e.style[t]=n}return function(e,t){var n,a,o=arguments;if(2==o.length)for(n in t)void 0!==(a=t[n])&&t.hasOwnProperty(n)&&r(e,n,a);else r(e,o[1],o[2])}}();function c(e,t){return("string"==typeof e?e:d(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=d(e),a=n+t;c(n,t)||(e.className=a.substring(1))}function p(e,t){var n,a=d(e);c(e,t)&&(n=a.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function d(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n})?a.call(t,n,t,e):a)||(e.exports=o)},function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return d})),n.d(t,"c",(function(){return b})),n.d(t,"e",(function(){return y}));var a=n(1);n.d(t,"d",(function(){return a.a})),n.d(t,"f",(function(){return a.b})),n.d(t,"g",(function(){return a.c})),n.d(t,"h",(function(){return a.d})),n.d(t,"i",(function(){return a.e})),n.d(t,"j",(function(){return a.f})),n.d(t,"k",(function(){return a.g})),n.d(t,"l",(function(){return a.i})),n.d(t,"m",(function(){return a.j})),n.d(t,"n",(function(){return a.k})),n.d(t,"o",(function(){return a.l})),n.d(t,"p",(function(){return a.m})),n.d(t,"q",(function(){return a.n})),n.d(t,"r",(function(){return a.o}));var o=n(3),r=n(0),i=n.n(r),l=n(5),s=(n(7),n(2)),c=n(6),u=n(4),p=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),o=0;oe.length)return;if(!(y instanceof s)){if(h&&x!=t.length-1){if(d.lastIndex=w,!(O=d.exec(e)))break;for(var k=O.index+(m?O[1].length:0),E=O.index+O[0].length,S=x,T=w,_=t.length;S<_&&(T=(T+=t[S].length)&&(++x,w=T);if(t[x]instanceof s)continue;C=S-x,y=e.slice(w,T),O.index-=w}else{d.lastIndex=0;var O=d.exec(y),C=1}if(O){m&&(v=O[1]?O[1].length:0),E=(k=O.index+v)+(O=O[0].slice(v)).length;var P=y.slice(0,k),N=y.slice(E),A=[x,C];P&&(++x,w+=P.length,A.push(P));var R=new s(c,f?o.tokenize(O,f):O,g,O,h);if(A.push(R),N&&A.push(N),Array.prototype.splice.apply(t,A),1!=C&&o.matchGrammar(e,t,n,x,w,!0,c),i)break}else if(i)break}}}}},hooks:{add:function(){}},tokenize:function(e,t,n){var a=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}return o.matchGrammar(e,a,t,0,0,!1),a}},(r=o.Token=function(e,t,n,a,o){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!o}).stringify=function(e,t,n){if("string"==typeof e)return e;if("Array"===o.util.type(e))return e.map((function(n){return r.stringify(n,t,e)})).join("");var a={type:e.type,content:r.stringify(e.content,t,n),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:n};if(e.alias){var i="Array"===o.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(a.classes,i)}var l=Object.keys(a.attributes).map((function(e){return e+'="'+(a.attributes[e]||"").replace(/"/g,""")+'"'})).join(" ");return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+(l?" "+l:"")+">"+a.content+""},o);i.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},i.languages.markup.tag.inside["attr-value"].inside.entity=i.languages.markup.entity,i.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(i.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:i.languages[t]},n.cdata=/^$/i;var a={"included-cdata":{pattern://i,inside:n}};a["language-"+t]={pattern:/[\s\S]+/,inside:i.languages[t]};var o={};o[e]={pattern:RegExp(/(<__[\s\S]*?>)(?:\s*|[\s\S])*?(?=<\/__>)/.source.replace(/__/g,e),"i"),lookbehind:!0,greedy:!0,inside:a},i.languages.insertBefore("markup","cdata",o)}}),i.languages.xml=i.languages.extend("markup",{}),i.languages.html=i.languages.markup,i.languages.mathml=i.languages.markup,i.languages.svg=i.languages.markup,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--?|-=|\+\+?|\+=|!=?|~|\*\*?|\*=|\/=?|%=?|<<=?|>>=?|<=?|>=?|==?|&&?|&=|\^=?|\|\|?|\|=|\?|:/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|x[0-9a-fA-F]{1,2}|u[0-9a-fA-F]{4}|U[0-9a-fA-F]{8})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)\w+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b\w+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+?)\s*(?:\r?\n|\r)(?:[\s\S])*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:n},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s*(?:\r?\n|\r)(?:[\s\S])*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0},{pattern:/(["'])(?:\\[\s\S]|\$\([^)]+\)|`[^`]+`|(?!\1)[^\\])*\1/,greedy:!0,inside:n}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:n.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|aptitude|apt-cache|apt-get|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:if|then|else|elif|fi|for|while|in|case|esac|function|select|do|done|until)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|break|cd|continue|eval|exec|exit|export|getopts|hash|pwd|readonly|return|shift|test|times|trap|umask|unset|alias|bind|builtin|caller|command|declare|echo|enable|help|let|local|logout|mapfile|printf|read|readarray|source|type|typeset|ulimit|unalias|set|shopt)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:true|false)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|==?|!=?|=~|<<[<-]?|[&\d]?>>|\d?[<>]&?|&[>&]?|\|[&|]?|<=?|>=?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}};for(var a=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],o=n.variable[1].inside,r=0;r=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},i.languages.c=i.languages.extend("clike",{"class-name":{pattern:/(\b(?:enum|struct)\s+)\w+/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|asm|typeof|inline|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|union|unsigned|void|volatile|while)\b/,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/,number:/(?:\b0x(?:[\da-f]+\.?[\da-f]*|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?)[ful]*/i}),i.languages.insertBefore("c","string",{macro:{pattern:/(^\s*)#\s*[a-z]+(?:[^\r\n\\]|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,alias:"property",inside:{string:{pattern:/(#\s*include\s*)(?:<.+?>|("|')(?:\\?.)+?\2)/,lookbehind:!0},directive:{pattern:/(#\s*)\b(?:define|defined|elif|else|endif|error|ifdef|ifndef|if|import|include|line|pragma|undef|using)\b/,lookbehind:!0,alias:"keyword"}}},constant:/\b(?:__FILE__|__LINE__|__DATE__|__TIME__|__TIMESTAMP__|__func__|EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|stdin|stdout|stderr)\b/}),delete i.languages.c.boolean,i.languages.cpp=i.languages.extend("c",{"class-name":{pattern:/(\b(?:class|enum|struct)\s+)\w+/,lookbehind:!0},keyword:/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|class|compl|const|constexpr|const_cast|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|float|for|friend|goto|if|inline|int|int8_t|int16_t|int32_t|int64_t|uint8_t|uint16_t|uint32_t|uint64_t|long|mutable|namespace|new|noexcept|nullptr|operator|private|protected|public|register|reinterpret_cast|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+\.?[\da-f']*|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+\.?[\d']*|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]*/i,greedy:!0},operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:true|false)\b/}),i.languages.insertBefore("cpp","string",{"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),function(e){var t=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,inside:{rule:/@[\w-]+/}},url:{pattern:RegExp("url\\((?:"+t.source+"|[^\n\r()]*)\\)","i"),inside:{function:/^url/i,punctuation:/^\(|\)$/}},selector:RegExp("[^{}\\s](?:[^{};\"']|"+t.source+")*?(?=\\s*\\{)"),string:{pattern:t,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),e.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:n.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:e.languages.css}},alias:"language-css"}},n.tag))}(i),i.languages.css.selector={pattern:i.languages.css.selector,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-:.\w]+/,id:/#[-:.\w]+/,attribute:{pattern:/\[(?:[^[\]"']|("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1)*\]/,greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)[-*\w\xA0-\uFFFF]*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},attribute:{pattern:/^(\s*)[-\w\xA0-\uFFFF]+/,lookbehind:!0},value:[/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,{pattern:/(=\s*)[-\w\xA0-\uFFFF]+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],punctuation:/[()]/}},i.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*/i,lookbehind:!0}}),i.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:/#[\da-f]{3,8}/i,entity:/\\[\da-f]{1,8}/i,unit:{pattern:/(\d)(?:%|[a-z]+)/,lookbehind:!0},number:/-?[\d.]+/}),i.languages.javascript=i.languages.extend("clike",{"class-name":[i.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},{pattern:/(^|[^.])\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,function:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),i.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,i.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,lookbehind:!0,inside:i.languages.javascript},{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,inside:i.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,lookbehind:!0,inside:i.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,lookbehind:!0,inside:i.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),i.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:i.languages.javascript}},string:/[\s\S]+/}}}),i.languages.markup&&i.languages.markup.tag.addInlined("script","javascript"),i.languages.js=i.languages.javascript,function(e){var t=e.util.clone(e.languages.javascript);e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=/<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s{'">=]+|\{(?:\{(?:\{[^}]*\}|[^{}])*\}|[^{}])+\}))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\s*\/?)?>/i,e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/i,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.insertBefore("inside","attr-name",{spread:{pattern:/\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}/,inside:{punctuation:/\.{3}|[{}.]/,"attr-value":/\w+/}}},e.languages.jsx.tag),e.languages.insertBefore("inside","attr-value",{script:{pattern:/=(\{(?:\{(?:\{[^}]*\}|[^}])*\}|[^}])+\})/i,inside:{"script-punctuation":{pattern:/^=(?={)/,alias:"punctuation"},rest:e.languages.jsx},alias:"language-javascript"}},e.languages.jsx.tag);var n=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(n).join(""):""},a=function(t){for(var o=[],r=0;r0&&o[o.length-1].tagName===n(i.content[0].content[1])&&o.pop():"/>"===i.content[i.content.length-1].content||o.push({tagName:n(i.content[0].content[1]),openedBraces:0}):o.length>0&&"punctuation"===i.type&&"{"===i.content?o[o.length-1].openedBraces++:o.length>0&&o[o.length-1].openedBraces>0&&"punctuation"===i.type&&"}"===i.content?o[o.length-1].openedBraces--:l=!0),(l||"string"==typeof i)&&o.length>0&&0===o[o.length-1].openedBraces){var s=n(i);r0&&("string"==typeof t[r-1]||"plain-text"===t[r-1].type)&&(s=n(t[r-1])+s,t.splice(r-1,1),r--),t[r]=new e.Token("plain-text",s,null,s)}i.content&&"string"!=typeof i.content&&a(i.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||a(e.tokens)}))}(i),function(e){var t=e.languages.javadoclike={parameter:{pattern:/(^\s*(?:\/{3}|\*|\/\*\*)\s*@(?:param|arg|arguments)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^\s*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/};Object.defineProperty(t,"addSupport",{value:function(t,n){"string"==typeof t&&(t=[t]),t.forEach((function(t){!function(t,n){var a="doc-comment",o=e.languages[t];if(o){var r=o[a];if(!r){var i={"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,alias:"comment"}};r=(o=e.languages.insertBefore(t,"comment",i))[a]}if(r instanceof RegExp&&(r=o[a]={pattern:r}),Array.isArray(r))for(var l=0,s=r.length;l>>?=?|->|([-+&|])\2|[?:~]|[-+*/%&|^!=<>]=?)/m,lookbehind:!0}}),e.languages.insertBefore("java","class-name",{annotation:{alias:"punctuation",pattern:/(^|[^.])@\w+/,lookbehind:!0},namespace:{pattern:/(\b(?:exports|import(?:\s+static)?|module|open|opens|package|provides|requires|to|transitive|uses|with)\s+)[a-z]\w*(\.[a-z]\w*)+/,lookbehind:!0,inside:{punctuation:/\./}},generics:{pattern:/<(?:[\w\s,.&?]|<(?:[\w\s,.&?]|<(?:[\w\s,.&?]|<[\w\s,.&?]*>)*>)*>)*>/,inside:{"class-name":n,keyword:t,punctuation:/[<>(),.:]/,operator:/[?&|]/}}})}(i),function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,a,o,r){if(n.language===a){var i=n.tokenStack=[];n.code=n.code.replace(o,(function(e){if("function"==typeof r&&!r(e))return e;for(var o,l=i.length;-1!==n.code.indexOf(o=t(a,l));)++l;return i[l]=e,o})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,a){if(n.language===a&&n.tokenStack){n.grammar=e.languages[a];var o=0,r=Object.keys(n.tokenStack);!function i(l){for(var s=0;s=r.length);s++){var c=l[s];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=r[o],p=n.tokenStack[u],d="string"==typeof c?c:c.content,f=t(a,u),m=d.indexOf(f);if(m>-1){++o;var h=d.substring(0,m),v=new e.Token(a,e.tokenize(p,n.grammar),"language-"+a,p),g=d.substring(m+f.length),b=[];h&&b.push.apply(b,i([h])),b.push(v),g&&b.push.apply(b,i([g])),"string"==typeof c?l.splice.apply(l,[s,1].concat(b)):c.content=b}}else c.content&&i(c.content)}return l}(n.tokens)}}}})}(i),function(e){e.languages.php=e.languages.extend("clike",{keyword:/\b(?:__halt_compiler|abstract|and|array|as|break|callable|case|catch|class|clone|const|continue|declare|default|die|do|echo|else|elseif|empty|enddeclare|endfor|endforeach|endif|endswitch|endwhile|eval|exit|extends|final|finally|for|foreach|function|global|goto|if|implements|include|include_once|instanceof|insteadof|interface|isset|list|namespace|new|or|parent|print|private|protected|public|require|require_once|return|static|switch|throw|trait|try|unset|use|var|while|xor|yield)\b/i,boolean:{pattern:/\b(?:false|true)\b/i,alias:"constant"},constant:[/\b[A-Z_][A-Z0-9_]*\b/,/\b(?:null)\b/i],comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0}}),e.languages.insertBefore("php","string",{"shell-comment":{pattern:/(^|[^\\])#.*/,lookbehind:!0,alias:"comment"}}),e.languages.insertBefore("php","comment",{delimiter:{pattern:/\?>$|^<\?(?:php(?=\s)|=)?/i,alias:"important"}}),e.languages.insertBefore("php","keyword",{variable:/\$+(?:\w+\b|(?={))/i,package:{pattern:/(\\|namespace\s+|use\s+)[\w\\]+/,lookbehind:!0,inside:{punctuation:/\\/}}}),e.languages.insertBefore("php","operator",{property:{pattern:/(->)[\w]+/,lookbehind:!0}});var t={pattern:/{\$(?:{(?:{[^{}]+}|[^{}]+)}|[^{}])+}|(^|[^\\{])\$+(?:\w+(?:\[.+?]|->\w+)*)/,lookbehind:!0,inside:{rest:e.languages.php}};e.languages.insertBefore("php","string",{"nowdoc-string":{pattern:/<<<'([^']+)'(?:\r\n?|\n)(?:.*(?:\r\n?|\n))*?\1;/,greedy:!0,alias:"string",inside:{delimiter:{pattern:/^<<<'[^']+'|[a-z_]\w*;$/i,alias:"symbol",inside:{punctuation:/^<<<'?|[';]$/}}}},"heredoc-string":{pattern:/<<<(?:"([^"]+)"(?:\r\n?|\n)(?:.*(?:\r\n?|\n))*?\1;|([a-z_]\w*)(?:\r\n?|\n)(?:.*(?:\r\n?|\n))*?\2;)/i,greedy:!0,alias:"string",inside:{delimiter:{pattern:/^<<<(?:"[^"]+"|[a-z_]\w*)|[a-z_]\w*;$/i,alias:"symbol",inside:{punctuation:/^<<<"?|[";]$/}},interpolation:t}},"single-quoted-string":{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0,alias:"string"},"double-quoted-string":{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,alias:"string",inside:{interpolation:t}}}),delete e.languages.php.string,e.hooks.add("before-tokenize",(function(t){if(/<\?/.test(t.code)){e.languages["markup-templating"].buildPlaceholders(t,"php",/<\?(?:[^"'/#]|\/(?![*/])|("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|(?:\/\/|#)(?:[^?\n\r]|\?(?!>))*|\/\*[\s\S]*?(?:\*\/|$))*?(?:\?>|$)/gi)}})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"php")}))}(i),function(e){var t=e.languages.javascript,n=/{(?:[^{}]|{(?:[^{}]|{[^{}]*})*})+}/.source,a="(@(?:param|arg|argument|property)\\s+(?:"+n+"\\s+)?)";e.languages.jsdoc=e.languages.extend("javadoclike",{parameter:{pattern:RegExp(a+/[$\w\xA0-\uFFFF.]+(?=\s|$)/.source),lookbehind:!0,inside:{punctuation:/\./}}}),e.languages.insertBefore("jsdoc","keyword",{"optional-parameter":{pattern:RegExp(a+/\[[$\w\xA0-\uFFFF.]+(?:=[^[\]]+)?\](?=\s|$)/.source),lookbehind:!0,inside:{parameter:{pattern:/(^\[)[$\w\xA0-\uFFFF\.]+/,lookbehind:!0,inside:{punctuation:/\./}},code:{pattern:/(=)[\s\S]*(?=\]$)/,lookbehind:!0,inside:t,alias:"language-javascript"},punctuation:/[=[\]]/}},"class-name":[{pattern:RegExp("(@[a-z]+\\s+)"+n),lookbehind:!0,inside:{punctuation:/[.,:?=<>|{}()[\]]/}},{pattern:/(@(?:augments|extends|class|interface|memberof!?|this)\s+)[A-Z]\w*(?:\.[A-Z]\w*)*/,lookbehind:!0,inside:{punctuation:/\./}}],example:{pattern:/(@example\s+)[^@]+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,lookbehind:!0,inside:{code:{pattern:/^(\s*(?:\*\s*)?).+$/m,lookbehind:!0,inside:t,alias:"language-javascript"}}}}),e.languages.javadoclike.addSupport("javascript",e.languages.jsdoc)}(i),i.languages.actionscript=i.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|else|extends|finally|for|function|if|implements|import|in|instanceof|interface|internal|is|native|new|null|package|private|protected|public|return|super|switch|this|throw|try|typeof|use|var|void|while|with|dynamic|each|final|get|include|namespace|native|override|set|static)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<>?>?|[!=]=?)=?|[~?@]/}),i.languages.actionscript["class-name"].alias="function",i.languages.markup&&i.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:{rest:i.languages.markup}}}),function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},rest:e.languages.javascript}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(i),function(e){e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:(?:Uint|Int)(?:8|16|32)|Uint8Clamped|Float(?:32|64))?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|(?:Weak)?(?:Set|Map)|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:/(\.\s*)#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*/,lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|location|navigator|performance|(?:local|session)Storage|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var t=["function","function-variable","method","method-variable","property-access"],n=0;n))/i,delete e.languages.flow.parameter,e.languages.insertBefore("flow","operator",{"flow-punctuation":{pattern:/\{\||\|\}/,alias:"punctuation"}}),Array.isArray(e.languages.flow.keyword)||(e.languages.flow.keyword=[e.languages.flow.keyword]),e.languages.flow.keyword.unshift({pattern:/(^|[^$]\b)(?:type|opaque|declare|Class)\b(?!\$)/,lookbehind:!0},{pattern:/(^|[^$]\B)\$(?:await|Diff|Exact|Keys|ObjMap|PropertyType|Shape|Record|Supertype|Subtype|Enum)\b(?!\$)/,lookbehind:!0})}(i),i.languages.n4js=i.languages.extend("javascript",{keyword:/\b(?:any|Array|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/}),i.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),i.languages.n4jsd=i.languages.n4js,i.languages.typescript=i.languages.extend("javascript",{keyword:/\b(?:abstract|as|async|await|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|null|of|package|private|protected|public|readonly|return|require|set|static|super|switch|this|throw|try|type|typeof|var|void|while|with|yield)\b/,builtin:/\b(?:string|Function|any|number|boolean|Array|symbol|console|Promise|unknown|never)\b/}),i.languages.ts=i.languages.typescript,function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,a=t.inside.interpolation,o=a.inside["interpolation-punctuation"],r=a.pattern.source;function i(t,a){if(e.languages[t])return{pattern:RegExp("((?:"+a+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function l(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function s(t,n,a){var o={code:t,grammar:n,language:a};return e.hooks.run("before-tokenize",o),o.tokens=e.tokenize(o.code,o.grammar),e.hooks.run("after-tokenize",o),o.tokens}function c(t){var n={};n["interpolation-punctuation"]=o;var r=e.tokenize(t,n);if(3===r.length){var i=[1,1];i.push.apply(i,s(r[1],e.languages.javascript,"javascript")),r.splice.apply(r,i)}return new e.Token("interpolation",r,a.alias,t)}function u(t,n,a){var o=e.tokenize(t,{interpolation:{pattern:RegExp(r),lookbehind:!0}}),i=0,u={},p=s(o.map((function(e){if("string"==typeof e)return e;for(var n,o=e.content;-1!==t.indexOf(n=l(i++,a)););return u[n]=o,n})).join(""),n,a),d=Object.keys(u);return i=0,function e(t){for(var n=0;n=d.length)return;var a=t[n];if("string"==typeof a||"string"==typeof a.content){var o=d[i],r="string"==typeof a?a:a.content,l=r.indexOf(o);if(-1!==l){++i;var s=r.substring(0,l),p=c(u[o]),f=r.substring(l+o.length),m=[];if(s&&m.push(s),m.push(p),f){var h=[f];e(h),m.push.apply(m,h)}"string"==typeof a?(t.splice.apply(t,[n,1].concat(m)),n+=m.length-1):a.content=m}}else{var v=a.content;Array.isArray(v)?e(v):e([v])}}}(p),new e.Token(a,p,"language-"+a,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:md|markdown)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),t].filter(Boolean);var p={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function d(e){return"string"==typeof e?e:Array.isArray(e)?e.map(d).join(""):d(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in p&&function t(n){for(var a=0,o=n.length;a/g,t),n&&(e=e+"|"+e.replace(/_/g,"\\*")),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var a=/(?:\\.|``.+?``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,o=/\|?__(?:\|__)+\|?(?:(?:\r?\n|\r)|$)/.source.replace(/__/g,a),r=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\r?\n|\r)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+o+r+"(?:"+o+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+o+r+")(?:"+o+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(a),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+o+")"+r+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+o+"$"),inside:{"table-header":{pattern:RegExp(a),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/(^[ \t]*(?:\r?\n|\r))(?: {4}|\t).+(?:(?:\r?\n|\r)(?: {4}|\t).+)*/m,lookbehind:!0,alias:"keyword"},{pattern:/``.+?``|`[^`\r\n]+`/,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\r?\n|\r))[\s\S]+?(?=(?:\r?\n|\r)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\r?\n|\r)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#+.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/__(?:(?!_)|_(?:(?!_))+_)+__/.source,!0),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/_(?:(?!_)|__(?:(?!_))+__)+_/.source,!0),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+?\2/.source,!1),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[(?:(?!\]))+\])/.source,!1),lookbehind:!0,greedy:!0,inside:{variable:{pattern:/(\[)[^\]]+(?=\]$)/,lookbehind:!0},content:{pattern:/(^!?\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},string:{pattern:/"(?:\\.|[^"\\])*"(?=\)$)/}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,a=t.length;n",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var a=t[n],o=[];/^\w+$/.test(n)||o.push(/\w+/.exec(n)[0]),"diff"===n&&o.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+a+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:o}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(i),i.languages.git={comment:/^#.*/m,deleted:/^[-\u2013].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/m,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/m}},coord:/^@@.*@@$/m,commit_sha1:/^commit \w{40}$/m},i.languages.go=i.languages.extend("clike",{keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,builtin:/\b(?:bool|byte|complex(?:64|128)|error|float(?:32|64)|rune|string|u?int(?:8|16|32|64)?|uintptr|append|cap|close|complex|copy|delete|imag|len|make|new|panic|print(?:ln)?|real|recover)\b/,boolean:/\b(?:_|iota|nil|true|false)\b/,operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,number:/(?:\b0x[a-f\d]+|(?:\b\d+\.?\d*|\B\.\d+)(?:e[-+]?\d+)?)i?/i,string:{pattern:/(["'`])(\\[\s\S]|(?!\1)[^\\])*\1/,greedy:!0}}),delete i.languages.go["class-name"],function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/i,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:true|false)\b/,block:{pattern:/^(\s*~?\s*)[#\/]\S+?(?=\s*~?\s*$|\s)/i,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&'()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,.\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")}))}(i),i.languages.json={property:{pattern:/"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,greedy:!0},string:{pattern:/"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,greedy:!0},comment:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,number:/-?\d+\.?\d*(e[+-]?\d+)?/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:true|false)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},i.languages.less=i.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-]+?(?:\([^{}]+\)|[^(){};])*?(?=\s*\{)/i,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\([^{}]*\)|[^{};@])*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/i,operator:/[+\-*\/]/}),i.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-]+.*?(?=[(;])/,lookbehind:!0,alias:"function"}}),i.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},builtin:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,symbol:{pattern:/^[^:=\r\n]+(?=\s*:(?!=))/m,inside:{variable:/\$+(?:[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:[/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,{pattern:/(\()(?:addsuffix|abspath|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:s|list)?)(?=[ \t])/,lookbehind:!0}],operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},i.languages.objectivec=i.languages.extend("c",{keyword:/\b(?:asm|typeof|inline|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|union|unsigned|void|volatile|while|in|self|super)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,string:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|@"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete i.languages.objectivec["class-name"],i.languages.ocaml={comment:/\(\*[\s\S]*?\*\)/,string:[{pattern:/"(?:\\.|[^\\\r\n"])*"/,greedy:!0},{pattern:/(['`])(?:\\(?:\d+|x[\da-f]+|.)|(?!\1)[^\\\r\n])\1/i,greedy:!0}],number:/\b(?:0x[\da-f][\da-f_]+|(?:0[bo])?\d[\d_]*\.?[\d_]*(?:e[+-]?[\d_]+)?)/i,type:{pattern:/\B['`]\w*/,alias:"variable"},directive:{pattern:/\B#\w+/,alias:"function"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|object|of|open|prefix|private|rec|then|sig|struct|to|try|type|val|value|virtual|where|while|with)\b/,boolean:/\b(?:false|true)\b/,operator:/:=|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lxor|lsl|lsr|mod|nor|or)\b/,punctuation:/[(){}\[\]|_.,:;]/},i.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0},"string-interpolation":{pattern:/(?:f|rf|fr)(?:("""|''')[\s\S]+?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:{{)*){(?!{)(?:[^{}]|{(?!{)(?:[^{}]|{(?!{)(?:[^{}])+})+})+}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|rb|br)?("""|''')[\s\S]+?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|rb|br)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^\s*)@\w+(?:\.\w+)*/i,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:and|as|assert|async|await|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:True|False|None)\b/,number:/(?:\b(?=\d)|\B(?=\.))(?:0[bo])?(?:(?:\d|0x[\da-f])[\da-f]*\.?\d*|\.\d+)(?:e[+-]?\d+)?j?\b/i,operator:/[-+%=]=?|!=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},i.languages.python["string-interpolation"].inside.interpolation.inside.rest=i.languages.python,i.languages.py=i.languages.python,i.languages.reason=i.languages.extend("clike",{comment:{pattern:/(^|[^\\])\/\*[\s\S]*?\*\//,lookbehind:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:mod|land|lor|lxor|lsl|lsr|asr)\b/}),i.languages.insertBefore("reason","class-name",{character:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,alias:"string"},constructor:{pattern:/\b[A-Z]\w*\b(?!\s*\.)/,alias:"variable"},label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete i.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t]+.+)*/m,lookbehind:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,inside:{atrule:/(?:@[\w-]+|[+=])/m}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|or|not)\b/,{pattern:/(\s+)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s]+.*)/m,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/([ \t]*)\S(?:,?[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,?[^,\r\n]+)*)*/,lookbehind:!0}})}(i),i.languages.scss=i.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()]|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}]+[:{][^}]+))/m,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[\w-]|\$[-\w]+|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),i.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),i.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),i.languages.insertBefore("scss","function",{placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:true|false)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),i.languages.scss.atrule.inside.rest=i.languages.scss,i.languages.sql={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/,lookbehind:!0},variable:[{pattern:/@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/,greedy:!0},/@[\w.$]+/],string:{pattern:/(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/,greedy:!0,lookbehind:!0},function:/\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i,keyword:/\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:_INSERT|COL)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURNS?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i,boolean:/\b(?:TRUE|FALSE|NULL)\b/i,number:/\b0x[\da-f]+\b|\b\d+\.?\d*|\B\.\d+\b/i,operator:/[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|IN|LIKE|NOT|OR|IS|DIV|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t={url:/url\((["']?).*?\1\)/i,string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:if|else|for|return|unless)(?=\s+|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,number:/\b\d+(?:\.\d+)?%?/,boolean:/\b(?:true|false)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.+|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],punctuation:/[{}()\[\];:,]/};t.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^{|}$/,alias:"punctuation"},rest:t}},t.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:t}},e.languages.stylus={comment:{pattern:/(^|[^\\])(\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},"atrule-declaration":{pattern:/(^\s*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:t}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:(?:\{[^}]*\}|.+)|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:t}},statement:{pattern:/(^[ \t]*)(?:if|else|for|return|unless)[ \t]+.+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:t}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)[^{\r\n]*(?:;|[^{\r\n,](?=$)(?!(\r?\n|\r)(?:\{|\2[ \t]+)))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:t.interpolation}},rest:t}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\))?|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\))?|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t]+)))/m,lookbehind:!0,inside:{interpolation:t.interpolation,punctuation:/[{},]/}},func:t.func,string:t.string,interpolation:t.interpolation,punctuation:/[{}()\[\];:.]/}}(i);var l=i.util.clone(i.languages.typescript);i.languages.tsx=i.languages.extend("jsx",l),i.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|nearest|neg?|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|store(?:8|16|32)?|sqrt|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^_`|~]+/i,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/},i.languages.yaml={scalar:{pattern:/([\-:]\s*(?:![^\s]+)?[ \t]*[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)[^\r\n]+(?:\2[^\r\n]+)*)/,lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:/(\s*(?:^|[:\-,[{\r\n?])[ \t]*(?:![^\s]+)?[ \t]*)[^\r\n{[\]},#\s]+?(?=\s*:\s)/,lookbehind:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)(?:\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?)?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?)(?=[ \t]*(?:$|,|]|}))/m,lookbehind:!0,alias:"number"},boolean:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)(?:true|false)[ \t]*(?=$|,|]|})/im,lookbehind:!0,alias:"important"},null:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)(?:null|~)[ \t]*(?=$|,|]|})/im,lookbehind:!0,alias:"important"},string:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)("|')(?:(?!\2)[^\\\r\n]|\\.)*\2(?=[ \t]*(?:$|,|]|}|\s*#))/m,lookbehind:!0,greedy:!0},number:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+\.?\d*|\.?\d+)(?:e[+-]?\d+)?|\.inf|\.nan)[ \t]*(?=$|,|]|})/im,lookbehind:!0},tag:/![^\s]+/,important:/[&*][\w]+/,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},i.languages.yml=i.languages.yaml,t.a=i},function(e,t,n){"use strict";var a=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;function i(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var a={};return"abcdefghijklmnopqrst".split("").forEach((function(e){a[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},a)).join("")}catch(o){return!1}}()?Object.assign:function(e,t){for(var n,l,s=i(e),c=1;cN.length&&N.push(e)}function I(e,t,n,a){var o=typeof e;"undefined"!==o&&"boolean"!==o||(e=null);var l=!1;if(null===e)l=!0;else switch(o){case"string":case"number":l=!0;break;case"object":switch(e.$$typeof){case r:case i:l=!0}}if(l)return n(a,e,""===t?"."+L(e,0):t),1;if(l=0,t=""===t?".":t+":",Array.isArray(e))for(var s=0;s